background preloader

UI Guidelines for mobile and tablet web app design

UI Guidelines for mobile and tablet web app design
Official user interface (UI) and user experience (UX) guidelines from the manufacturers, links to which you can find below, are a source of inspiration for mobile web and app design. Here, you will find guidelines, samples, tips, and descriptions of common mistakes. Many of the guidelines focus on native application development, but we can apply most parts of them to mobile web design too. Remember to provide the best possible experience on each platform. Do not deliver an iPhone experience to a BlackBerry user. Every platform has its own UI and usability guidelines that every user is expecting on your app. More tips on mobile web design on the Programming the Mobile Web book. Do you know any other UI Guideline? Tags: android, bada, design, ipad, iphone, nokia, sony ericsson, symbian, ui, windows

Related:  Mobile

Effective Design for Multiple Screen Sizes So you're a designer and have been tasked with the design of a mobile web site. Chances are, unless you're designing for only one device you're quickly going to be faced with a common problem experienced by designers who work with mobile devices; figuring out what screen size to actually design for. For instance: The iPhone is 320 pixels wide by 480 pixels high.Many Nokia N-Series devices are 240 pixels wide by 320 pixels high.Newer devices often support a landscape mode where the width and height are spontaneously reversed.Older (yet still popular) Nokia devices have displays ranging from 176 by 208 pixels up to 352 by 416 pixels.Blackberry screen resolutions range anywhere from 160 x 160 pixels all the way up to 324 x 352 pixels. This article is intended to help you develop effective design strategies to target a diverse range of mobile devices and screen sizes.

Exploring Graphic User Interface Styles – from Minimal to Futuristic A user interface (UI) can come in many styles ranging graphically from very simple, all the way to extremely complex. In this article we are going to explore a range of styles demonstrating that there isn't just one recipe for creating a good looking, and ultimately successful user interface. Of course, not every style is represented in this article; we will be exploring several high-quality examples, representing a wide range of graphical styles from simple to complex. Enjoy! Section 1: Minimal A minimal style UI relies heavily on type, symbols, and white space to create a clear and simple user experience.

How to Create Your First iPhone Application - Smashing Magazine Advertisement Update: 01/10/2012: The original version of this article by Jen Gordon was published in August 2009. It was thoroughly revised and updated by the author in September 2012. — Editorial Team Since the iTunes App Store launched in 2008, over 500,000 apps have been approved by Apple, and thousands more app ideas are scrawled on napkins across the world every day. But question remains, how can a person with limited technical skills create an iPhone app? Adding Animations Animations can add subtle visual cues that notify users about what's going on in your app and improve their mental model of your app's interface. Animations are especially useful when the screen changes state, such as when content loads or new actions become available. Animations can also add a polished look to your app, which gives your app a higher quality feel. Keep in mind though, that overusing animations or using them at the wrong time can be detrimental, such as when they cause delays.

8 Useful Interface Design Techniques for Mobile Devices You can be the best web designer in the industry, but if you do not know how to properly lay things out and create a great interface for mobile devices, you will fail in such a task. With that said, designing for mobile devices is quite different from designing for mainstream devices such as your PC as screen sizes and resolutions play a big part in how much space you can utilize, and how it performs. Therefore, we cover eight useful interface design techniques for mobile devices that will help you get started on your quest for designing for mobile platforms. Layout, Layout, Layout The layout of the design is what sums it up for accessibility, usability, and overall readability for users on mobile devices.

Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes Advertisement In darts, hitting the bulls-eye is harder to do than hitting any other part of the dartboard. This is because the bullseye is the smallest target. This same principle can also apply to touch targets on mobile devices. App Agentur creative workline GmbH Apple was holding back the inches for a while, but now they have made their new iPhones bigger. The new iPhone 6 comes with a 4,7″ screen and his big brother, iPhone 6 Plus has a 5,5″ inch screen. The screen of the iPhone 6 has a resolution of 750 x 1334 at a 326 pixels-per-inch (ppi) and the iPhone 6 Plus a resolution of 1920 x 1080 at a higher density: 401 ppi. For the basic users this will simply mean: a bigger and a sharper screen.

Collection of Fresh and Professional GUI Sets Every web designer is aware of the benefits of using pre-designed GUI sets, particularly when they are as comprehensive, as sophisticated, and as modern as the sets we have for you today. Some of the free gui sets have been designed for the web, others for mobile apps, and some have even been created to help you design infographics. So, no matter what project you are currently working on, you will find something useful below: Lookamore UI Kit for Android Download Page → Polaris Free GUI Set