As soon as I started seeing videos and tech blogs covering the new N9 from Nokia, I immediately fell in love with it's UI design. Especially the launcher icons, the unique border radius they decided to go with is great. Nowadays most icons have a much smaller border radius.
After reading over Nokia's icon design style guide, I decided to try and re-create similar icons just to practice different layer styles and effects.
A few weeks ago my wife and I finally got an Nintendo Wii and one evening I think we spent a good 5 hours playing the new Super Mario Brothers. After being blown away by all the new graphics, I decided to try and recreate one of my favorite new characters. I had a lot of fun creating this and it was great practice as well. 100% vector shapes and layer styles in Photoshop.
TechBeat is an application that aggregates articles from the hottest tech sites. With TechBeat iPad users can get a pulse on what's going on in tech news.
I love the design of Leica Cameras, like the M9 and the M9-P and I always wanted to try and render a Leica Lens because they are filled with so much detail I knew it would be a great challenge.
Not many UI Designers out there are designing for Android, and since I've always been the type of guy to go against the grain I decided I wanted to learn more about and get into designing for Android. The first thing I wanted to create was a mock up of one of the devices running on Android, so when I began producing app UIs I could get a preview of what they would look on the device. I choose the Samsung Epic because it's the device I use and I love the HD screen display.
While many seem to criticize the UI Design used by Android, and may feel that it doesn't even compete with the design of the iOS. I find it to be quite pleasing, and I tried my best to replicate as many details as possible. My favorite part is the Google Widget, I think Google managed to bring the same simplicity that they have become known for on the web, in a super powerful and elegant tool for Android.
I think I enjoyed creating the icons the most, for hours I tried to reproduce them just by looking at my device. I didn't seem to really get anywhere until I downloaded I high resolution image of device and began to use that reference instead. Since there are so many different Android UI themes around and they seem to update the icons often with new releases, I decided to try a few alternative styles myself.
I've been a fan of Qwiki every since they launched at Tech Crunch Disrupt last year. And even though I love there web app, just for fun I wanted to see what a desktop experience would be like.
The idea for this project came about while chatting with a design buddy of mine, Jeff Broderick. One night he was working on a small Mac OS style app screen and he sent me over a few screenshots. When I asked what the design was for he said it was just for practice, and even though I practice design techniques all the time, I was shocked to find out such a talented and respected designer actually did execises like this. Jeff ended up releasing the PSD of his UI design, and after studying the styles he used, I was itching create a similar UI.
This was my first time designing a interface for a Mac OS app, so when I began experimenting, I had to do a lot of research on Mac OS interactions and UI patterns. I also relied on various well designed Mac apps for reference. My main goal was to try and keep the same intuitive experience as the web app.
FaithStar makes it simple to locate thousands of religious institutions around the world. I came up this idea based on a problem that I've faced over the years.
My wife works for IKEA, helping out different stores around the country. Which means we do a lot of moving around from state to state and even before getting married I think I have lived in over 4 major cities by myself alone.
With all of my travels I haven't been able to find a church where I can attend services regularly. FaithStar can help me and others with a similar problem.
After reading My Stupid Gun App by William Wilkinson, I was inspired to create a iPhone app. I wanted to break into mobile interface design for a few years now and now was the perfect time. My head was racing with ideas, but after reading William’s blog post I knew I had to come up with something simple that I could execute well. I began to think about problems that I have or have had, and that other people around the world have. I wrote down every idea I could think of that could be solved with a mobile app. During this time I also became to do some research, mostly probing the Apple App Stores and various popular tech blogs. One thing that interested me was how popular location based apps have become, there are tons of apps that enable you to locate restaurants, bars, parks and more. Even one of my favorite apps, Foursquare is a location based app that lets you “Check-In” to various places you visit. Foursquare also offers coupons for products and services, plus helps with discovering new places.
One of the issues that I had jotted down in my notebook was shared between several family members and friends, it seemed as though no one was attending church services regularly after leaving home for school, starting new careers, increase in travel etc. Then I realized with all of the location based apps there had to be an app that uses could download and use to help find a place of worship no matter where they were. No there wasn’t, I found a small church locator that wasn’t too hot and a mosque locator that I think was based on the east coast. But if you weren’t christian or muslim and you lived in Sunnyvale, CA? I thought here was my opportunity to fill I needed void in the app market, plus learn more about geo location based software, win, win!
I've read time again that if you have an idea for an app the best way to know if your idea is worth pursuing, is to find out what other people like of your idea. So I decided I would throw up a landing page, and a small blog to see if I could get some conversation started around FaithStar.
As soon as I came up with the name FaithStar, the vision for the icon came to me as well. The icon was designed to represent a shining start that could guide you in the dark, as well as a compass.
Even though I had read the Apple's Human Interface Guidelines, and studied many of the iOS interface design patterns, when I started designing screens for FaithStar it was my first time designing for iOS. Looking back I think I did alright but I did make tons of mistakes. When I got around to designing version 2 I had a little more practice behind me and had developed a work flow that helped produce a more polished design for iOS retina displays.
I used to always wonder what new albums were gonna come out each Tuesday before I discovered When It Drops. When it drops helps you keep track of new releases each week. It's easily one of my favorite sites, if you ever wanna find out what's new at the movies are at the theater or what games are coming out, When It Drops is the spot. Although I love the site, I thought it would be super cool if there was a mobile app as well.
The idea for a When It Drops mobile app, really hit me while contracting with Socialize/AppMakr and it was brought up at a all hands meeting that we needed to find more ways to use our own products. If you haven't heard about Socialize already it's a new start up in San Francisco that offers a SDK for mobile application developers to add social networking functionality to their apps. At the meeting the founders suggested that we should come up with some fun projects that we could use to implement Socialize with and use internally.
My mind immediately went to work, and I began thinking about what site could really benefit from a community powered by Socialize. I thought When It Drops would be perfect, the site currently doesn't offer any type of social interactions. Not only that Socialize is all about discovering the interest graph, and I thought it would be cool to see who was interested in checking out what new movies came out that week or how many people were really excited that Now That's Country 4 was dropping. Excited about my new idea I had to hop right into Photoshop to get it out of my head.
After coming up with the idea for the app, I had already had a vision of how the flow and layout of the app would go and the first thing I knew I had to design were the icons for the tab bar. This task was fairly simple since the site already had great iconography so all I had to do was repurpose the icons the original designer used. Ryan Sims did an amazing job with his icons, and I really enjoyed reproducing them.
The UI Design I knew would be simple just like the website. I spent the most time trying to decide if the app would have a similar color scheme as the site. I ultimately decided that since this would be a unofficial third party app that it would have it's own custom feel. After playing around in Photoshop for a few hours here's what I came up with.
BBBuckets is a Dribbble Viewer for Android. If you're unfamiliar with Dribbble it's a community site for designers with a basketball theme. On Dribbble designers can share "shots", 400 by 300 sneak peaks of there design work. The founders consider it to be "show and tell for designers". Whenever I have the time I browse Dribble for inspiration or just to see what some of the best designers in the world are working on.
Often I'm too busy to browse Dribbble so I often only get to check out work on Dribbble when I'm on the go. One day on a train ride home I decided to catch up on some tweets and check out some work on Dribbble. When I fired up Dribbble on my mobile browser for Android I was highly disappointed to find that they don't have a mobile site and closed my browser. I thought with all of the talent on Dribbble I know someone has designed a cool viewer for Android, after searching the market I found one, Asssist. I downloaded the free app and began browsing and overall I enjoyed my initial experience with it. But I did have a few ideas for how I would like to view Dribbble on my Android, this spark was all I needed. With more than 40 minutes left in my commute I closed Asssist, opened up Pandora and busted my sketch pad out.
I pretty much nailed most of the interface design on pen and paper so by the time I fired up Photoshop, all I had to do was focus on color and visual effects. I wanted it to feel like a native Android app with a more slick appeal.
While doing some consulting work with AppMakr/Socialize, one of my tasks was to design the Socialize blog. What started out as a basic Wordpress blog, quickly grew into much more.
The team began using the simple Wordpress blog to power a full site, featuring multiple pages of content including a what is Socialize page, a we're hiring page, and a few more. In addition to all of the pages added, we also added a call to action, asking users to sign up for a early release to the SDK, that would then take the user to another site hosted by Launch Rock with more verbiage and a sign up form.
All this on the blog, after going in this direction for about a week or so, and several conversations with Socialize's User Acquisition and Die-hard Evangelist Jeremia Kimelman, I came up with a few changes.
One of the main problems Jeremia and I discussed was the user flow of the current Socialize site, and how it was kinda weird that users would arrive at the blog, and linked to what seemed to be unrelated pages. Before I even started designing anything I brainstormed on some effective ways of describing Socialize on the site and how to present some of the great content they had. The solution I came up with was to have a smooth strolling, landing page style site. The user can click a link in the navigation menu to stroll to that section of the page, which would reveal more information about Socialize. I also simplified the navigation and designed a modal window contact form, so that users interested in signing up for the SDK wouldn't have to to offsite to do so. Check out a few screenshots of the concept I came up with for the Socialize site.