Create a Mobile App Icon in Photoshop
This tutorial is part of a three-part series explaining how to design UI elements for mobile applications in Photoshop. In this part, we will explain how to design an icon for your mobile device's home screen. Let's get started! Tutorial Assets The following assets were used during the production of this tutorial. Wood Texture Step 1 Create a new document. Step 2 With the Rounded Rectangle Tool (U) draw a shape using a red color. Step 3 With the Brush Tool (B) Paint a vivid light red color to create a light spot on the upper right part of the icon. Step 4 Add a black shadow with the Brush Tool. Step 5 Add a shape like this on top of the icon with the following Layer Style. Step 6 Duplicate and reduce the last shape with Cmd/Ctrl + T. Step 7 Refine the upper lights using the Brush Tool (B) alternating light and dark red. Step 8 I refined the bottom part using the same way as the previous step. Step 9 Step 10 Make a Rectangular Selection. Step 11 Step 12 Step 13 Add two Highlights stripes. Step 14 Step 15
Printable graph paper template - Paperkit
Yiibu - Lovingly crafted mobile experiences
960 Grid System
The Smartphone Snapshot Showdown (Global Smartphone and Mobile Video Stats)
Responsive Web Design Sketch Sheets
I’ve made some printable sheets for wireframing for responsive layouts, with corresponding Photoshop templates. Download .zip 1.2MB The Responsive Sketch Sheet Problem There are several well argued articles that champion the browser as the only place where the behaviour of adaptive/responsive layouts can be accurately described. This may well be true, but I would still advocate starting the whole design process with sketches on paper. Put simply, using a pencil to think visually has an immediacy that is clouded once software interfaces and html/css are introduced – these should come later, after the initial design concept has been formed. But paper is static, responsive designs change according to display context. An Attempt at a Solution Responsive designs consist of two main properties, a series of layout ‘states’ assigned to a number of specified viewport widths, and fluid-width layout elements that form a transition between the states. The grey areas indicate the space below the fold.
Mobile Site vs. Full Site
Based on usability testing of hundreds of sites, the main guidelines for mobile-optimized websites are clear: Build a separate mobile-optimized design (or mobile site) if you can afford it. When people access sites using mobile devices, their measured usability is much higher for mobile sites than for full sites. A mobile app might be even better— at least for now.If mobile users arrive at your full site, automatically show them the mobile version. Sadly, many search engines still don't rank mobile sites high enough for mobile users, so people are often (mis)guided to full sites instead of the mobile ones, which offer a vastly superior user experience.Offer a clear link from your full site to your mobile site for users who end up at the full site despite the redirect.Offer a clear link from your mobile site to your full site for those (few) users who need special features that are found only on the full site. Mobile-Optimized Sites Why Full Sites Don't Work for Mobile Use
Responsive template generator
Usability of Mobile Websites and Apps: Research Report with Design Guidelines
This report is based on 8 series of usability studies with users in 4 countries (mostly the US, but also Australia, Hong Kong, and the UK), reporting how they actually used a broad variety of websites and apps on a range of mobile devices, including touch phones and smartphones from many vendors. The report also presents the findings from two diary studies of users in 6 countries (Australia, The Netherlands, Romania, Singapore, UK, and US) that let us follow user behavior over a longer time period than is feasible in traditional user testing. The basic finding from this research is that mobile users face severe usability problems in attempting to get things done on today's websites, whether dedicated mobile sites or traditional desktop-optimized sites that are rendered through a mobile browser. This 293-page report presents 237 design guidelines based on our usability research. Topics Activities people perform on mobile phones Mobile strategy Should you go mobile? Benefits Articles
Grid System Generator
32 Examples of Usable Mobile Website Layouts
The mobile web is clearly changing the way we think about layout design. Even back just 5 or 10 years ago there were barely any developers working on a solution for mobile. Now it seems everybody is doing their Internet surfing on some type of smartphone device. And because of this it’s a good idea to consider adapting your current layouts to fit a changing market. This process can be difficult without a bit of inspiration. United Pixelworkers Oliver Russell Charmin Cerahati Bodhum Love & Luxe Culinary Institute of America Orange Breaking News North Carolina Wine Atommica Orbital Devs South Dakota Sioux Falls The Land of Nod Bluegg Digital Agency Solid Shops Beth Israel Medical Center J Taylor Design Retail-Me-Not Heathlife Poet Freak The Backlog The Intro Workshops One Little Dream Tim Hortons Lifetime Pears WordPress Theme Orestis Web Development Team Treehouse Mobilism Conf 2012 Webshocker Humana
UI Patterns For Mobile Apps: Search, Sort And Filter
Advertisement As I was waiting for a table at a local restaurant the other day, I flipped through a couple of the free classified papers. I was shocked to realize how dependent I’ve grown on three simple features that just aren’t available in the analog world: search, sort and filter. AutoDirect and some of the other freebies are organized by category (like trucks, vans, SUVs) but others, like Greensheet, just list page after page of items for sale. But after taking a look at Craigslist mobile, it became obvious we could all benefit from some best practices around mobile search, sort and filter UI design. Search Patterns Before you ever try to design a search interface for any platform, buy and read these two books: Search Patterns: Design for Discovery by Peter Morville and Jeffery Callender, and Designing Search: UX Strategies for eCommerce Success by Greg Nudelman. Then take a look at these search patterns specific to mobile applications: Explicit Search Auto-Complete Dynamic Search Sort
Mobile Patterns and Why Use Them in Design
Mobile Patterns or Mobile Templates are, as the name obviously states, templates to use for easing our work when designing a site for portable devices. As mobile web design means more and more nowadays, designers often have problems reaching deadlines because of a high workload. In web design we have grid systems we build on in order to help us maintain a clean visual pattern, but also to help us build a web page faster. The truth is that designers always looked to ease their work and move on to the next project, therefore mobile patterns are something the experts start to look into more and more. Mobile patterns are structured, organized and well researched before going online. Mobile Environment It is very important not to forget you design for mobile devices and not for the web. With so many things to keep in mind, it is surely not easy to design for mobile interfaces. How To Use Patterns In case you want to design your own template, there are some things you should consider. Conclusion
