background preloader

Mobile design patterns, resources and inspiration

Mobile design patterns, resources and inspiration

https://pttrns.com/

Related:  TECREFERENCESMobileergonomie 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

User Interface Design Inspiration - 40 UI Design Examples User interface design is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user’s experience and interaction. If you got that right it means you understood that user experience (UX) and user interface (UI) are two things that are involved with every digital program that is out there and it’s quite a big deal to know well these. I’m making this article showcasing UI design examples so that the uninspired user interface designer within you would get the inspiration he needs. Keep in mind that these examples are to inspire you in creating your own original content.

Mobile Web @ W3C Quick menu: W3C Mobile Web Initiative | Site navigation Combining the power of the Web with the strengths of mobiles devices. W3C’s mission includes ensuring that the Web be available on as many kind of devices as possible. With the surge of powerful mobile devices in the past few years, the role of the Web as a platform for content, applications and services on these devices is increasingly important. Basic Patterns For Mobile Navigation: Pros And Cons 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 … Once someone starts using your app, they need to know where to go and how to get there at any point. Good navigation is a vehicle that takes users where they want to go.

50 Brilliant iPad Mobile App User Interface Designs The iPad tablet device has grown wildly in a few short years and is certainly here to stay. Mobile app developers are constantly pushing for the next big idea to rack up popular listings in the iOS App Store. The best way to accomplish this is combining powerful programming techniques with simple intuitive user interfaces. 3D Restaurant Menu Concept A responsive 3D menu concept for a restaurant website. The idea is to show the menu as a folded flyer and unfold it in order to show the menu items. View demo Download source Applying CSS 3D transforms to components can bring some more realism to normally flat web elements. 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.

Responsive Retina-Ready Menu A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes. View demo Download source Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game. The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, we will use an icon font so that the icons of the menu won’t get pixelized on resize. 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

30 Free Toggle Switches UI Elements (PSD) Advertisement A toggle switch is a hinged switch that can assume either of two positions, such as an on/off button. It is a switch which is used for breaking or connecting and electrical circuit, such as that present on a switch-board. Toggle switches are now playing a part in the web designing and development industry as they are being used frequently as an UI Element.

5 Advanced Mobile Web Design Techniques You’ve Probably Never Seen Before Until recently, creating mobile web designs that look and feel like native apps has pretty much been an impossible dream. There are plenty of creative workarounds to try and bring that native ‘feel’ to mobile web browsing, but so far we've struggled to bridge the gap between native and the web. However, a slew of new, high-powered smartphones is allowing designers to finally unleash complex, performant, native-feeling smartphone UI patterns — designed and built for the web. These patterns are blurring the lines between native apps and the web.

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. 40 Quality Examples of iOS User Interface Designs iOS is a mobile operating system developed and distributed by Apple Inc. The user interface, is the industrial design field of human–machine interaction. iOS is based on the concept of direct manipulation, using multi-touch gestures. Interface control elements consist of sliders, switches, and buttons. As of March 6, 2012, Apple’s App Store contained more than 550,000 iOS applications. With new applications released on a daily basis, the App Store is being flooded with apps that we should tap. More applications means more competition > more competition means higher quality development and design > higher quality development and design means time consuming hard work.

Responsive Design with Mockups We love responsive design # Responsive layouts on the web are exciting. Many Mockups users are doing responsive layouts on their projects or are planning to. We've been talking with the Balsamiq community about how Mockups can work with responsive web design concepts, and we thought we'd explore some techniques that might help.

Related:  Design pattern libraryWeb designMobile First Web DesignБлогиux patterns