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 including iPhone, Windows 7, Windows Phone 7, Android, and more. The guide contains an overview of the core gestures used for most touch commands. It tells how to use these gestures to support major user actions; provides visual representations of each gesture to use in design documentation and deliverables; and additionally provides an outline of how popular software platforms support core touch gestures. All in seven pretty PDF pages. It was conceived, researched, illustrated, and designed by Craig Villamor, Dan Willis, Luke Wroblewski, and Jennifer Rhim (document design). Platform support information comes from the following sources: Mobile to the Future Notes on Luke Wroblewski's "Mobile To The Future" presentation today at An Event Apart Austin: First there was print, then recordings, then cinema, radio, TV, and the internet. In "An Event Apart"
Designing Apps for Kids With the experience of having built ABCKit and many hours of testing different apps for kids behind us, we have noticed some recurring app design problems. For those working in this field, we would like to share some suggestions for designing and devising apps for children to help ensure the apps are correctly used by preventing some common design issues. If you’ve interacted with preschoolers (ages two to five), you’re aware that they do not quite grasp the concept of patience, especially when it comes to digital devices. A splash screen that takes more than ten seconds to load will give rise to comments from kids such as, "Mommy, it doesn’t work." The Splash Screen for The Fantastic Flying Books of Mr. Even though The Fantastic Flying Books of Mr. A splash screen is certainly necessary, as the app content needs to load before it can launch. An app's home screen is generally not useful for children between one and three years of age (this changes from age four onwards). The Settings
50 Useful and Free Web UI, Mobile UI and Wireframe Kits Here we are featuring 50 useful, free and spanking new Web UI and wireframes resources that you will definitely love. Web designers always require some fundamental user interface elements to produce a model of user interface either of a website or software. For that, they require wireframing and UI design kits which help them to replicate the user interface. In this round-up, we have collected some web and mobile user interface kits which are practical in creating low-fidelity illustrations for your projects. We hope you will like this compilation. Free Web UI and Wireframe Kits Black UI Kit A free PSD UI kit designed by Alex Patrascu. Lion UI Kit Lion UI Kit is a handy PSD mockup tool with fully layered and editable elements from the latest OS X operating system. Small Blue UI Kit A small UI kit, made in a blue color. Simple To-Do List This free PSD download is a simple to-do list with a nice clean design and is easily editable. Eclipse GUI Design Widgets for Eclipse and Mac OS X
Magazine : Le Guide des Métiers du Design Interactif et du Web 2011-2012 - ressources-web Notre partenaire Designers Interactifs vient de publier il y a quelques jours, la nouvelle édition du guide des métiers du design interactif. Découvrez un livre complet et riche d'informations pour en savoir plus sur notre domaine de travail autour du design et du web. Créée en 2006, *designers interactifs* est une association dont l’objectif est d’organiser et de promouvoir les métiers du design numérique. Elle s’adresse aux designers salariés et indépendant, aux écoles, aux agences, et aux entreprises qui ont recours au design numérique sous forme matérielle (téléphones, objets connectés, etc.) ou immatérielle (interfaces web, logiciels, jeux vidéos etc.). Pour en savoir plus : Le blog du webdesign devient partenaire avec les designers interactifs La sortie de cette nouvelle édition 2011-2012 dresse le panorama des principales expertises du design interactif, un champ en évolution permanente. Cliquer ici pour télécharger le guide
Site institutionnel & plateforme de contenu éditorial - Vin & Société - Agence web paris, design et developpement application web Le relais de tout ce qui se dit sur le vin en France Vin & Société, représente la filière viti-vinicole française et se positionne comme l’interlocuteur privilégié du public sur les sujets de société liés au vin pour la santé, la prévention, le social, l’économie, l’art de vivre... Pour mener à bien cette mission d’interlocuteur privilégié, Vin & Société avait besoin d’un site corporate proposant d’ouvrir une fenêtre sur le monde, un magazine web qui permet de croiser les points de vue, de s’aérer l’esprit, et de partager une même passion : le vin. Tout le monde doit pouvoir venir se documenter et trouver les informations qu’il recherche sur le vin. Une plateforme d’agrégation de contenus et de débats sur la place du vin dans la société française. Une plateforme d'agrégation de contenus et de débats Octave & Octave a pris en charge la réalisation de cette plateforme corporate de contenus éditoriale. La plateforme de contenus Vin & Société est composée de différents axes: Points-clés
Are your users S.T.U.P.I.D? It is an honest question: how smart are your users? The answer may surprise you: it doesn’t matter. They can be geniuses or morons, but if you don’t engage their intelligence, you can’t depend on their brain power. Far more important than their IQ (which is a questionable measure in any case) is their Effective Intelligence: the fraction of their intelligence they can (or are motivated to) apply to a task. Take, for example, a good driver. They are a worse driver when texting or when drunk. So, what does a S.T.U.P.I.D. user look like? Stressed “Fear is the mind killer”, Frank Herbert wrote. Tired Tiredness is one of the largest causes of industrial and motor vehicle accidents. Untrained Training for enterprise applications is more often discussed then enacted. Complex systems that are used infrequently are a particular problem. Passive More important than the user’s mental model of an application is their mental attitude toward the task. Independent Distracted Simplify Memorable Accept Autopilot
The difference between a UX Designer and UI Developer « Melbourne, as in the city. I’ve recently found myself trying to explain the difference between the skills I bring to a project as a UX Designer and why I’m not able to cover the role of a dedicated UI Developer. There is of course a necessary overlap between the skills-sets in these roles, which is a good thing. And some individuals have a broader coverage of skills than others. However, people outside of these roles don’t always appreciate the specialist skills and focus that is required to work within them. This as simply as I can describe the different skills required for each role: User Experience (UX) Designer = Research + DesignUI Developer = Design + HTML/CSS/JSApplication Developer = Back-End coding + HTML/CSS/JS etc. As much as I’ve tried to avoid it, I just haven’t been able to prevent myself from creating a Venn diagram to visualise this. These different combinations of skills bring with them a different perspective and focus on what each person does. Breaking down Design further Like this: Like Loading...
Mockups Take a second. Let it sink in. The first impression might be disorienting. There are very few interface elements on the screen. Getting your ideas out should be effortless. Our sweet spot: the ideation phase Mockups really shines during the early stages of designing a new interface. Mockups is zenware, meaning that it will help you get "in the zone", and stay there. Mockups offers the same speed and rough feel as sketching with pencil, with the advantage of the digital medium: drag & drop to resize and rearrange elements, make changes without starting over, and your work is clear enough that you'll make sense of them later. See what you can build with Mockups Download the samples above, or find more on Mockups To Go, our community-contributed stencils site. Designed for collaboration Your whole team can come together around the right design using Mockups. Mockups intentionally makes your wireframes scream both This is not final! Learning UX Design Keyboard Shortcuts Go really, really fast.
Futurico UI Pro - Advanced User Interface Elements Pack Futurico UI is the one of world’s biggest user interface elements pack. This extraordinary collection contains more than 200 web design elements to use in any design or application and for projects of all styles and concepts. All the elements in this pack are editable and available in fully-layered PSD (rasterized) format for easy integration. The pack includes three sets of elements in different colors and two examples of use in web design, showing how a single UI kit can help you create very different solutions. The Futurico UI Pro set is perfect for everyone, from the beginner to professional designer, and can be used as a framework to build your own design elements. Try it today. Release Date: December 9, 2011Last Update: April 20, 2012Version: 1.1 == Changelog == = 1.1 = Fix a few bugs. Futurico UI Pro Screenshots Samples (Design Examples – PSD) More Images of Project on Behance.
Pete LePage on the Web » What Makes For A Great Web App? What makes a web application great? I recently sat down with Christos, one of the guys on my team to look at a number of the top web applications in the Chrome Web Store to try to identify which ones were really great, versus good, and what advice we could give to the good apps to become “great”. Before we could start rating these apps, we built out a set of principles and criteria that we felt were important in providing a great application experience on the web. We based our principles on some earlier work done by Mike and Paul, and refined their thinking into three principles. We tried to create a set of objective criteria for each of the principles that we could use to rate the apps - and while we didn’t actually assign a score, we wanted to be as objective as possible. A Tight Focus A web application has a tight focus encouraging people to interact, engage, and accomplish something, rather than passively view content. Rich Visual Experiences Rich Interactive Experiences QuickNote
Pete LePage on the Web » The Anatomy of a Great Chrome Web Store Listing Your first chance to make a great impression with a new user is often on your application listing page in the Chrome Web Store. People will make a split second decision whether to install your application based on what you put on there, so it’s important to make a great first impression. Let’s take a look at what makes a great Chrome Web Store application listing. This guide highlights a couple key components of a great Chrome Web Store listing. I tried not to repeat content from the documentation, but instead tease out the important parts or best practices. Be sure to follow the links for additional resources or details. TweetDeck & Google Maps I think both TweetDeck and Google Maps do a great job of providing a compelling, and interesting listing, so we’ll use those as our primary examples. Category Putting your application in to the most appropriate category will make it easy for users to find your application when they browse the store. Screen Shots and Video Icon Verified Domain
A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio - Morten Just I’ve been playing around with the newest addition to Google Docs, Google Drawings, and I’m quite liking it. I tried drawing a few diagrams and even a wireframe, and it turns out the basic drawing interactions are just as good – in some cases even better – than what I’m used to in Omnigraffle and Fireworks. 5 reasons Google Drawings beats Viso and Omnigraffle We know the cloud computing arguments, and they certainly apply to wireframes It’s live. We need stencils One thing was missing though: Stencils. Leaving the stencils in the gutter An interesting limitation is the fact that there’s no stencil library function andyou can’t easily copy and paste from one document to another. One solution, it seems, is to clone one of the wireframe kits and thereby also cloning the stencils into each document. Kind of blue I’ve been wanting a blue kit since I left a project years ago where we used blue stencils (the idea was Peter‘s). The templates Main blank template Product detail page Landing page