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:  loislewisUser InterfaceUI/UX tools

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.

Icon Design Guidelines An icon is a graphic that takes up a small portion of screen real estate and provides a quick, intuitive representation of an action, a status, or an app. When you design icons for your app, it's important to keep in mind that your app may be installed on a variety of devices that offer a range of pixel densities, as mentioned in Devices and Displays. But you can make your icons look great on all devices by providing each icon in multiple sizes. When your app runs, Android checks the characteristics of the device screen and loads the appropriate density-specific assets for your app. Because you will deliver each icon in multiple sizes to support different densities, the design guidelines below refer to the icon dimensions in dp units, which are based on the pixel dimensions of a medium-density (MDPI) screen. Launcher

Explore Embed: provider_url provider_name Speaker Deck title Designing User Experience for multi-platform mobile apps 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.

20 Stunning Examples of Web Designs build around a Photo The right image in the right spot can say more than thousands words, don’t you agree? Using a photo as a key element of web design can give your website an added visual element, as well as depth and space. It is certainly not every photo that will work, but generally if you find one that support the message you are trying to communicate the result can be really great.

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.

Smashing UX Design — Usability, Psychology and Information Architecture Category: UX Design This category features quality articles on usability, information architecture, interaction design and other user experience (UX) related topics – for digital (Web, mobile, applications, software) and physical products. Through these articles, experts and professionals share with you their valuable ideas, practical tips, useful guidelines, recommended best practices and great case studies. Curated by Chui Chui Tan. . Popular tags in this category: Freebies, Web Design, Techniques, Inspiration, Business A Guide To Validating Product Ideas With Quick And Simple Experiments

7 Rules for Creating Gorgeous UI (Part 1) Introduction OK, first things first. This guide is not for everyone.