Darian Edwards web, icon and interface design

What I Did

Interface Design

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.

Icon Design

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.

What I Did

Concept

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.

Interface Design

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.

What I Did

Concept

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!

Web Design (HTML, CSS, Custom Tumblr Development)

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.

Icon Design

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.

Mobile Interface Design

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.

What I Did

Concept

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.

Icon Design

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.

Interface Design

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.

What I Did

Concept

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.

Interface Design

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.

What I Did

Web Design

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.