Lately I’ve been thinking a lot about mobile application design (primarily for the iPhone and iPod). It’s something that I’ve put off for quite some time but feel it’s about time I started studying this new world and learn what it’s all about (by new I mean as in comparison to web design). Personally, I plan to become proficient in mobile application design for all mobile platforms (iphone, android, windows, blackberry, etc.). But for starters, the iPhone/iPod is a good place to start. Also, being able to design for the iPhone/iPod will make you that much more in demand as a Web/UI designer. Its something that I would encourage any designer to start exploring.
Having been in the web design industry for over 14 years, designing iPhone/iPod applications is definitely something I know I can do, but does come with many challenges. It’s like asking Kobe Bryant to score a basket, but only do so from within the paint area (that little box around the basket on a basketball court). Sure Kobe can score a basket, but scoring only from within the paint will pose some challenges. He’s going to have to change his game a little in order to confine to the new rules of scoring within the painted area. Similar to someone that has been designing websites for over a decade, there’s a small learning curve and some adjustments that will need to be made.
Based on my research, testing and studying of various iPhone/iPod applications, there are many differences that I see when it comes to designing for the iPhone/iPod that is very different from web design. Besides the obvious size restrictions, I list out some of the main difference below:
1. Designing for the iPhone/iPod requires some heavy interaction design skills
Unlike designing for the web which can be pretty simple (in some cases), designing iPhone/iPod apps requires tons of sketching, workflows, wireframes, icons, buttons, animations, transitions, etc. Where I can sometimes design a simple website without needing to flush out any wireframes and flows, it’s impossible to effectively design a successful iPhone/iPod app without fully understanding the wireframes and interactions for each and every section of the application.
2. White space is good for the web, Dark space is better for iPhone/iPod apps
When designing for the web, using lots of white space for the background and areas throughout your site is almost always a good thing. White Space is a way of keeping things minimal, keeping your web design clean, simple and easy to use. This is great for the web, but designing applications for the iPhone/iPod is completely different. Unlike the web, applications on the iPhone/iPod is much better when using dark, rich and vibrant background colors. For instance, when designing iPhone/iPod apps, instead of white being your default background color, make your default background color a dark black gradient instead.
3. Vector shapes and icons are heavily used and recommended within iPhone/iPod apps
When designing for the web, you can easily build a website without needing to know or understand the use of vector shapes and icons. Some websites can be done with simple stock photos and simple HTML/CSS instead of vector graphics. Not the same for designing iPhone/iPod apps. In my research of many successful iPhone/iPod apps, I’ve noticed that the skill to be able to create customized vector shapes and icons is highly apparent. It’s almost impossible to point out a successful iPhone/iPod application that doesn’t have some sort of vector graphical treatment or creative icons within it.
4. Navigating the iPhone/iPod is done by touch screen and finger scrolling, whereas the web uses the pointer and clicking of the mouse
The last obvious difference are the navigation controls. Being that users navigate the iPhone/iPod using touch screen and primarily their finger as the pointer, this poses many challenges that are quite different that standard web design. In this case, you have to make sure buttons, links and clickable areas on the iPhone/iPod are large enough for the touch of the tip of the finger. Too small and you cause a huge usability problem,…but too large and you risk using up to much primary real estate on a limited size screen. So unlike the web, knowing the user will be navigating by touch screen, you will have to keep this in mind during every step of the design process to achieve the best user experience.
To sum it all up, I personally believe that in order to successfully learn to design for mobile devices such as iPhone/iPod apps, you must have a solid understanding of basic web design principles. A solid understanding of interaction design, user experience and human behavior is highly recommended. In addition, the ability to create vector shapes and icons is a huge advantage as well when it comes to designing and creating customized shapes for your applications. And lastely, understanding the best practices when designing for the touch screen experience is a must. But with all that said, the process in designing for mobile devices as compared to web design remains the same…
- Gather all requirements
- Research the market
- Brainstorm and sketch out ideas
- Design some rough wireframes
- Design more hi-detailed wireframes
- Design your full-color mocks
Learning to design on different mediums is fun. There are many challenges to succeeding in all the different areas, but practice makes perfect. If you’re thinking of getting into mobile application design, my advice would be to create some concept ideas, study the various applications on the market today and begin designing. Learn from your mistakes and you’ll eventually perfect your process. I hope to share my mobile design work in the near future. Check back soon and happy designing!
I guess mobile app dev is the next natural step for a web designer, but there is so much to learn. Great research so far. Hope to see a follow up post to this one! Maybe a tutorial on creating a design for the platform?
Found you with a search for “iPhone web design”
I want to find someone who can help me to get 5 pages for the iPhone, iPod devices and other small phones out there.
Is there a way a website would know if an iPod is accessing? If yes, then automatially load the website made specifically for iPod.
I know there is another way by having two sizes and pages ; one for desk tops and laptops and one for iPod.
Then a selection made on the home page.
Anything you can advise me?
Or, point me to a link where I could get help… if you don’t have time.
Thanks.
Thanks for this post! As a lay-person, it helps me to get a better idea of what may be involved in experimenting with hobby design, and how you think as a professional and experienced designer.
Points 2, 3 especially , you’re absolutely right!
We have world class mobile experts on location. App development can be very time and resource intensive. We’ve brought 100’s of apps across multiple different platforms including iPhone, iPad, Android, Salesforce.com mobile service, and we can help you too. We’re going to walk you through all the basic steps from app store submission process to app design and programming. Our in-house mobile experts have decades of management consulting experience. We offer you the consultative approach to make sure all the moving pieces fit into your company’s vision.come check out our website, http://www.taoteapps.com, we have a lot information to help making your mobile deployment a success.
Take a look at the screenshot to discover exactly how this agario hack feature works.