background preloader

Mobile design patterns, resources and inspiration

Mobile design patterns, resources and inspiration

https://pttrns.com/

Related:  TECMobileergonomie mobile

Touch Gesture Reference Guide The Touch Gesture Reference Guide is a unique set of resources for software designers and developers working on touch-based user interfaces. The guide contains: 1) an overview of the core gestures used for most touch commands 2) how to utilize these gestures to support major user actions 3) visual representations of each gesture to use in design documentation and deliverables 4) an outline of how popular software platforms support core touch gestures (below). Download Touch Gesture Reference GuideTouch Gesture Cards For wireframes and mock-ups:Visuals only (PDF)Visuals only (EPS)Visuals only (OmniGraffle Stencil)Visuals only (Visio Stencils)How to Guide (Visio) Touch Resources

Design for iPad Emulator iPad Peek Test your web pages in the iPad browser emulator. Click on the top iPad border to rotate. LiveView for iPhone & iPad A Comprehensive Guide To Mobile App Design About The Author Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on … More about Nick Babich … (This article is kindly sponsored by Adobe.) There are many things to consider when designing for mobile. We’re sure that this detailed guide will help you get rid of that headache when building apps.

“Steal Good Stuff” – iOS Design Pattern Collections Nov 24, 2011 Rule Number 1 if you’re going to “borrow” from other great people is to only steal things that are worth stealing. You know, good artists borrow, great artists steal. Accessibility Screen readers may automatically announce a control’s type or state through a sound or by speaking the control name before or after the accessibility text. Search Search field Download over Wi-Fi only 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.

Touch Target Sizes People interact with touch-based user interfaces with their fingers. So user interface controls have to be big enough to capture fingertip actions without frustrating users with erroneous actions and tiny targets. Ok, so how big? In the iPhone Human Interface Guidelines, Apple recommends a minimum target size of 44 pixels wide 44 pixels tall. Misused mobile UX patterns – Zoltan Kollin If you are an experienced designer, you probably agree that being inspired by others is not stealing in UI design. It’s best practice research. It’s using design patterns. It’s following the guidelines. It’s making sure to use patterns that your users are familiar with to create usable interfaces. Some might say that sticking to the guidelines and following others will kill creativity and, at the end of the day, all apps will look the same.

Trackers - Augment Learn more about Augment tracking modes Universal Trackers The universal Augment tracker is the only tracker that works with all 3D models in Augment. When scanned by the app, your model attaches to the universal tracker automatically. Universal trackers are useful for those who want to fix their model in place and move around it.

Hamburger menu alternatives for mobile navigation If you’re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.) Luckily, more and more sites and apps are experimenting with alternative, more efficient solutions for this very problem. None of the ideas listed here is better than the others, their viability and performance obviously depend on the content and the context.

20 Best UX design and Wireframing Tools for Mobile Cloud, itself is purely a set of empowering technologies. I believe that adoption of cloud on a mass level is pending only due to absolute ubiquity of the devices that can stay connected all the time. Another hurdle in adoption is the user experience and designing a cloud computing that makes user experience invisible. The best thing about cloud is that it gives you freedom of being mobile and you can always stay connected with the much needed information as well. A lot of cloud based UX design tools are being introduced and used in order to help the process of mood board’s creation. Making Your Icons User-Friendly: A Guide to Usability in UI Design Any icon in your interface should serve a purpose, whether you’re designing a website or an app. Sure, icons are there to save space on the screen. But more importantly, they’re there to aid your users. When done correctly, icons can help you guide users intuitively through a workflow without relying on too much copy.

10 Completely Free Wireframing and Mockup Tools The wireframing process is the straight-to-the-point and completely non-tech stage of any web project. It only requires that you define a skeletal outline of essential page elements such as headers, footers, navigation and content area and should illustrate how to cater and respond to any possible interaction from a user. It is the most important, yet underused, stage of any web or apps development. There are several avenues you could take for sketching a wireframe, most notably pen and paper (the easiest and most cost effective way), but for the sake of this article we have focused on apps that are not only highly effective and easy to use, they are also completely free.

Dropdown alternatives for better (mobile) forms – Zoltan Kollin Using dropdown menus in forms might seem a no-brainer: they don’t take much space on the UI, they automatically validate the input, all browsers and platforms support them, they’re easy and cheap to implement, and the users know them well enough. At the same time, though, dropdown (or select) menus are one of the most frequently misused form patterns and “should be the UI of last resort”, according to Luke Wroblewski and many others. Let’s look at some of the limitations and concerns: In a dropdown, the available options are not visible until you click or tap to open it. The good news is that there are plenty of alternative input controls that will work better for you in many cases. Consider the number of options

Related:  Mobile UI patternsUI PatternsDesignREFERENCESMobilMobile UX Design