background preloader

Designing Screens Using Cores and Paths

Designing Screens Using Cores and Paths
Imagine you’re on one side of a grass lawn and you want to reach the bus stop on the opposite side. Do you walk on the sidewalk around the edges or cross in the middle? Assuming the grass is dry and it’s not prohibited, you’d probably take the shortest path and walk across the lawn to the bus stop. Such unplanned paths connect the shortest distance between two points, and we can find them everywhere in our surroundings. Architect Christopher Alexander recognizes desire lines in his renowned book, A Pattern Language (1976)[2]. To lay out paths, first place goals at natural points of interest. In principle, Alexander’s approach is to begin with the goals—the things people ultimately want—and then link them together in the most useful way. Typically in web design, the opposite approach is the rule: designers begin with the homepage. Inspired by “desire lines”, we can reverse this tendency in Web design. The Cores and Paths Model “Start with the goal.” 1. 2. How do users get to the core? 3. Related:  UI & UX

Brand as Context in Interaction Design I’m sure I was swearing allegiance to one brand over another as soon as I began to develop the capacity for critical thought. Reebok vs. Nike, Coke vs. Because people assign meaning to brands, brands stand for something; they have both value and a set of values. While there are tremendous differences in how people react to these brand names—based on countless cultural and social parameters—whether consumers view them in a positive or negative light, they likely find it hard to remain neutral. Even though brand and product design teams typically approach their work as distinct teams with different measurements for success, it is essential to work across organizational silos and ensure each team is aware of how to complement the other. When interaction designers focus solely on matters such as flow and consistency, they miss opportunities to imbue products and services with a sense of connection, ownership, and emotion. Corporation Out People In Be mindful of the story

Hacker le visuel | Édition Nº23 La vision que je vais présenter au cours de cet article est le fruit de dix ans d’expérience professionnelle dans le webdesign, d’une mûre réflexion sur mon métier et d’une assez bonne connaissance de ma personne. Ils m’ont appris quel devait être mon rôle au sein d’une équipe, en tant que professionnelle mais aussi en tant qu’être humain. C’est pourquoi il faut garder à l’esprit que cette approche est très personnelle. Ainsi, si je tiens à la partager avec le lectorat du Train ce n’est pas par narcissisme mais pour souffler à d’autres professionnels de tous milieux, et tout particulièrement ceux issus du design, l’envie de repenser leur métier et de sortir des sentiers battus. Si je devais qualifier mon activité professionnelle actuelle, je pense qu’il me faudrait dire que je suis “directrice artistique spécialisée dans le web”. Avant d’aller plus loin, je tiens à expliquer le choix du mot “hacker” à défaut de tout autre plus français et moins connoté. Le non-art et sa manière

Your Facebook Account has Three Passwords Produits | Illustrator Adobe Illustrator Adobe Illustator est un environnement complet de dessin vectoriel qui vous permet de travailler plus efficacement. Voyez avec Jérôme Bareille comment transformer de façon automatique vos images pixels en images vectorielles dans Adobe Illustrator CS6. Illustrator est le programme de dessin vectoriel par excellence. Il permet de réaliser des illustrations diverses d'une qualité optimale, aussi bien pour l'impression que pour le web. Vous allez découvrir ici plusieurs facettes d'Illustrator. Produits couverts: Illustrator met à votre disposition une grille de perspective personnalisable, pour vous aider à dessiner des objets ou à placer des objets vectoriels selon une perpective particulière comportant un, deux ou trois points de fuite. Lorsque l'on parle de livre électronique, on parle principalement de deux formats : le PDF et l'ePub. Adobe Illustrator CS6 est le logiciel de référence en terme de traitement d'images vectorielles. Apprendre Illustrator CS5 Produits concernés:

10 UI Ideas to Learn from Gumroad) 10 UI Ideas to Learn from Gumroad Gumroad is an exciting new startup that lets anyone sell digital content with just a link. It was founded by the prolific Sahil Lavingia. Sahil has designed a number of useful apps, ranging from Pinterest in the early days, to Turntable, to Crate, to Caltrainer, etc. This is how the Gumroad home page looks, un-dissected. And here is the dissected version, with the 10 things we’ll learn - Let’s get started - 1. This top bar has become increasingly common. When we visit sites, a split second is used to subconsciously say “Oh, these are the colors we’re using here. Note that Sahil has picked energetic colors. 2. A lot of logos have very little to do with the name or product of a company. But others have plenty to do with the name of the company/product. Until you have a brand and you own blue birds the way that Twitter does, ensuring your logo and the favicon are as good as possible at reminding a user of your company name is key. 3. 4. 5. 6. 7. 8. 9. 10.

Produits | Photoshop Adobe Photoshop Créez des images percutantes avec le logiciel de référence des professionnels. Si Adobe Photoshop CS6 est à l'origine un outil de traitement d'images fixes, il est possible avec la version Extended de faire de la vidéo. Il est également possible de réaliser de petites animations pour le web, voyez ici comment faire avec le formateur Yves Chatain. Découvrez des possibilités surprenantes de correction et de retouche de vos photos. Produits couverts: En compagnie d'Yves Chatain, voyez comme, avec une sélection adéquate, vous pouvez supprimer un arrière-plan ou le remplacer par une autre image en quelques notions simples concernant la sélection, les calques et les masques. Avec le logiciel de retouche photo, Adobe Photoshop CS5, combiner sélection et travail sur le masque va nous permettre d'isoler les deux personnages de notre photo, et de les intégrer dans un décor. Avec la nouvelle fonction Redresser, faites pivoter et recadrez automatiquement votre image. Épisodes récents

Why most UX is shite I was invited to speak at the event this week where getting a little sweary and ranty is kind of encouraged (it goes well with the craft beer consumption that is an integral part of the conference mix). This was my contribution. Slides: When I checked the agenda to see what I was supposed to be talking about at Monkigras, I saw that I was down to talk for 15 mins about ‘Crafting Good UX’. Where to start. An elegant UIBeing AddictiveA Fast Startbeing Seamless, andIt Changes You I hate these kinds of lists. If only that were true, we’d be overwhelmed by UX amazingness. It’s not that simple right. Now, there are plenty of ways you can make a user’s experience of your product rubbish, but in my experience, there are a handful of serial offenders. 1. So, this one I see ALL the time. From a start up who doesn’t want to rule anything out of its value proposition so doesn’t really know what it is so, as a consequence, no one knows what problems it’s solving so they don’t engage. 2. 3. 4.

5 Essential Product Design Books That Aren’t About Product Design "What are some good books about product management?" is a frequent question for designers and engineers, especially those who are first-time founders. While there are any number of volumes you can peruse about agile development, team building, roadmaps or whatever skill you want to acquire, the art of product design is more elusive. Here are five of my essential product design books that have nothing to do with product design: 1. If you don't own this book don't even read further. Breathless praise aside, Cialdini identifies key principles of persuasion such as social proof, reciprocity, subservience to authority figures, desire to act in a consistent manner and perceived scarcity. Free bonus content! 2. If you want to quickly remove the romanticism from your relationships, just tell your partner that the only reason you're monogamous is that humans have long gestation cycles and babies have high mortality rates if left unattended. That shit cray, right? 3. 4. 5.

Why Users Fill Out Forms Faster with Top Aligned Labels by anthony on 09/01/10 at 3:48 pm Imagine a user who is really excited about your product or service. They’re ready to sign up, so they go to your form page and start filling out their information. The way you align your labels with your form fields can affect how easy it is for users to fill out the form. Top aligned labels are faster and easier to fill out than left or right aligned labels. The only drawback with top aligned labels is that they can make the form long. The difference is clear.

Why Rounded Corners are Easier on the Eyes by anthony on 08/17/11 at 10:17 pm Designers use rounded corners so much today that they’re more of an industry standard than a design trend. They’re not only found on software user interfaces, but hardware product designs as well. So what is it about rounded corners that make them so popular? Rounded Corners are Easier to Process Anyone can appreciate the aesthetic beauty of rounded corners, but not everyone can explain where exactly that beauty comes from. Some experts say that rectangles with rounded corners are easier on the eyes than a rectangle with sharp edges because they take less cognitive effort to visually process. Scientific research done on corners by the Barrow Neurological Institute found that the “perceived salience of a corner varies linearly with the angle of the corner. Which object is easier to look at? We’re Conditioned for Rounded Corners Which object would you trust with your child? Rounded Corners Make Information Easier to Process Conclusion References

9 Useful Techniques for User-Friendly Tables by anthony on 07/11/11 at 12:33 pm Tables are great for displaying information. But making them user-friendly is a challenge. One reason it’s challenging is because the table grid limits the amount of information you can display in a table cell. This means you have to figure out how to display the information the user needs without displaying too much of it. The following techniques solve these design challenges so that users can read and process your tables with ease. 1. A table will have multiple columns, so you can’t make your columns too wide. It’s unnecessary to display every digit of a number. 2. Data abbreviations help condense information. 3. It’s important to make your columns thin, but it also important to make your rows short. 4. The bad thing about a long table is that you lose the column headers when you scroll down deep. 5. When users scan a row, their eyes can easily trail off and accidentally fall into an adjacent row. 6. 7. 8. 9. Conclusion

When to Use White Text on a Dark Background by anthony on 04/28/11 at 11:11 am Many websites use black text on a light background to display their content because it’s easy to read. However, using white text on a dark background also has its advantages. Knowing when to use one over the other will allow you to safely apply these techniques to your design without hurting user readability. When it comes to text on websites, users either read or scan. Reading involves focusing on words for a thorough comprehension of the subject. Paragraph Text The kind of text that users read is paragraph text. White also reflects all wavelengths of light. That’s why a better choice for displaying paragraph text is black text on a light background with a tint of gray. However, if your site uses a dark background, display your paragraph text in gray instead. Headings, Titles and Labels There is a time when white text on a dark background works well.

12 Useful Techniques For Good User Interface Design - Smashing Magazine Advertisement Last week, we presented 10 Useful Web Application Interface Techniques471, the first part of our review of useful design trends in modern Web applications. Among other things, we highlighted embedded video blocks, specialized controls and context-sensitive navigation. This post presents the second part of our review: 12 useful techniques for good user interface design in Web apps. You may also want to take a look at the following related articles: 1. One of the most significant elements of a good user interface is visibility of the system’s status. 7Yammer8 applies not one but three effects on all new messages in a feed: fade in, slide down and highlight. However, this dynamic nature means that when you click on a button, the page doesn’t refresh but something does happen. 9Backpack10 applies a highlight effect to all new items in a task list, which lasts for a second before fading out. One great way to do this is with animation. 2. How do you implement this? ... 3. 4. 5. 6.

UI research – speed matters and 10s+ page load is a killer | The Earlier this week usability expert Jakob Nielsen (famous for his eyetracker studies) published the results of some research into the importance of page response times to user experience and perceptions of brand. In his words “users really care about speed”. In Jakob’s assessment speed matters for two reasons: human limitations, espescially in the areas of memory and limitation human aspirations – fast interfaces make us feel like we control the computer (a feeling we like) whilst slow interfaces make us feel like it is the computer that is controlling us (not so good…) In interviews Jakob has found that slow site speed is something which sticks in the minds of users when thinking about services they have used in the past. Jakob proposes three response time limits: 0.1 seconds gives the feeling of instantaneous response — that is, the outcome feels like it was caused by the user, not the computer. Thanks to UX consultant Ian Collingwood for pointing me to this post.

Related: