background preloader

An Introduction to Using Patterns in Web Design

An Introduction to Using Patterns in Web Design
The biggest challenge for web designers is the unthinkably huge number of possible ways to solve any given problem. We usually don't think of this because we have our habits and traditions to fall back on, but there are literally billions of possible pixel combinations for each page we make. There is a better way to manage this vast complexity than by making big decisions up front and hoping for the best. To make better sites — sites that are functional, beautiful, and "usable" — we have to break our design problems up into small independent chunks based on the real issues within our requirements. I'm going to show you how to sidestep your habits and assumptions and use patterns to make better design decisions. Step one: List your bits Start by making a list of all the specific bits that must fit together for the web page to succeed as a whole. Here are the bits for a "My Account" page that I recently designed: Do this on paper if you're working on your own. Let's look at C for example: Related:  Organisation du projet

Designing With Web Standards, 2nd Edition Designing with Web Standards[1] is a web development book by Jeffrey Zeldman (third edition with Ethan Marcotte). Zeldman co-founded the Web Standards Project in 1998 and served as its director during the formative years when the project was petitioning browser makers to support standards. Zeldman left the project in 2003. The book’s audience is primarily web development professionals who are focused on web standards design work. DWS is used as a textbook in over 85 colleges, including New York University, UCLA, Dartmouth and Brigham Young University. Summary[edit] Written by Jeffrey Zeldman, a staunch proponent of web standards and founder of the award-winning web design studio Happy Cog,[2] Designing with Web Standards guides the reader on how to better utilize web standards pragmatically to create accessible, user-friendly web sites. For the third edition of the book, Zeldman brought in fellow author Ethan Marcotte[3] to “substantially revise” and update the content.[4] Critique[edit]

Patterns in Interaction Design Idea to Paying Customers in 7 Weeks: How We Did It This is the first of an ongoing series of posts called Building Buffer where we share our methods and learnings with the aim to help people and learn from others who have had similar experiences. We’d love your comments. Rewind… I’ve learned more in the two and a half month period since I launched Buffer than ever before. A twinkle of an idea It was a tiny idea. Keeping version 1 minimal. I’m an advocate of the lean startup principles which Eric Ries proposes. In Ries’ guide to Minimum Viable Products, one of the key things he answers is “how minimal should your Minimum Viable Product be?”. Probably much more minimum than you think I had read that line so many times. The smallest test Here’s what we launched with: The aim of this two-page MVP was to check whether people would even consider using the app. Learning more So we had validated that people probably wanted the product. The launch Being prepared for a long journey with lots of course-correction Taking advantage when things go well

Pushing the boundaries of web design. The ultimate user interfac Designers by nature love to change things. If they aren’t dropping caps to suit a design, they are trying to push the boundaries of what the browser can do. I’ve recently been involved in a project that has needed some different looks for standard user interface elements such as forms. While I wouldn’t normally condone such activity (from a usability point of view, its a bad idea to change standard UI elements) sometimes graphic designers need “appeased.” (read “shut up”). JQuery related I looooove jquery. JNice JNice takes us to a fancy form, with fancy dropdowns. Load Content While Scrolling Demo: If you ever wondered how DZone or WikiSearch manage to allow continuous scrolling, then this is the snippet of Jquery for you. Interface Elements for JQuery Demo Page:

Learning from "bad" UI When Gruber first linked the TripLog/1040 UI by Stevens Creek, I wasn’t kind either. Bright colors, controls seemingly placed at random. It was the opposite of what designers strive for in our circles. The first charge against TripLog is “clutter,” that there’s too much on the screen at once. What does speed have to do with clutter? The trade-offs between elements adjacent in space versus stacked in time are always in the mind of a UI designer. So did Patt put too many elements adjacent in space on one screen when he should have separated them out in time? To answer that we should pull ourselves out of the computer and sink our feet firmly in the customer’s shoes. They want to log miles they just droveThey want to double-check that they logged a recent trip The first is obvious. There’s a very simple reason, which we know because we’ve been selling our Athlete’s Diary software for logging a different kind of mileage for nearly 20 years. Half the time people want to add new entries.

Web Form Design Patterns: Sign-Up Forms, Part 2 | How-To Advertisement Last week we have presented first findings of our web forms survey1. The main objective of the survey was to provide designers and developers with some intuition of how effective web forms are designed; we also presented some guidelines of how an effective and user-friendly web form can be achieved. We have focused on sign-up forms as we wanted to consider further crucial forms (e.g. checkout forms) separately. Please notice that this post is not about checkout forms — that’s a topic for another discussion, we may consider them separately in one of the upcoming posts. 3. In the first part of our research we have considered the placement of the sign-up links and sign-up forms as well as on the visual appearance of forms. 3.1. Apparently, to improve form completion rates designers try to avoid all kind of distractions and offer a clear, unambiguous and simple web form. 3.2. 3.3. If hints and help appear, they appear… 3.4. According to our research, 3.5. 3.6. 3.7. 3.8. 3.9.

Designing Web Interfaces: 12 Standard Screen Patterns 2010 Update- 15 patterns and 80 new examples By Theresa Neil As Bill mentioned in an earlier post, we don’t want to limit this blog to just the principles and patterns found in the book. For that you can check out our Explore the Book section. In the spirit of that, I want to share an additional set of principles and patterns I have been using for RIA design. While the book takes a much more consumer web site orientation, these concepts are central to enterprise application and web productivity application design and more broad than those discussed in the book. This is the first article in a three part series. With more companies turning to RIA frameworks for enterprise software development, these screen patterns are indispensable for product managers, UX designers, information architects, interaction designers and developers. 01. Master/Detail screen pattern can be vertical or horizontal. 02. The Browse screen pattern can be vertical or horizontal. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12.

Créativité et neuroscience Créativité et neuroscience. Vous pensez toujours que le cerveau gauche est la partie du cerveau de la logique qui analyse, calcule et organise ? Vous croyez toujours que le cerveau droit est celui de la création, de l’imagination et de la poésie ? Parcourez les travaux des neuroscientifiques cognitifs comme James Berns, Anna Abraham, Mark Beeman, Adam Bristol, Kalina Christoff, Jeremy Gray, Adam Green, Rex Jung, John Kounios, Hikaru Takeuchi, Oshin Vartanian, Darya Zabelina ou les français du CNC ou L2C2 ainsi que les travaux de Jean-Pierre Changeux, le pionnier des neurosciences en France. Le process créatif, de l’inspiration à l’induction (selon l’approche de Trendemic) en passant par l’incubation et l’illumination (selon l’approche de Wallas) comprend de nombreux process cognitifs et émotionnels. Approche de Graham Wallas 1. Lorsque vous portez votre attention – que ce soit pour vous concentrer sur un problème, apprendre ou lire – c’est ce réseau qui s’active. 3.

10 Useful Techniques To Improve Your User Interface Designs | Ho Advertisement Web design consists, for the most part, of interface design. There are many techniques involved in crafting beautiful and functional interfaces. Here’s my collection of 10 that I think you’ll find useful in your work. They’re not related to any particular theme, but are rather a collection of techniques I use in my own projects. Without further ado, let’s get started. 1. Links (or anchors) are inline elements by default, which means that their clickable area spans only the height and width of the text. Obviously, the larger the clickable area is, the easier it is to click on the link because there is less of a chance of missing it. Make sure to also add a healthy dose of padding to the links, because converting a link into a block only affects its behavior and width; adding padding ensures that the link is high enough and has some room to breathe. 2. Attention to every detail is what separates a great product from a mediocre one. 3. All the text is set in black. 4. 5. 6. 7.

Forbes misses the point of the 4-day work week There’s a piece in Forbes called Why A Four-Day Work Week Doesn’t Work that suggests: But there are serious drawbacks. Packing 40 hours into four days isn’t necessarily an efficient way to work. Many people find that eight hours are tough enough; requiring them to stay for an extra two could cause morale and productivity to decrease. As for saving on the cost of commuting, it likely isn’t true. The article is right: More hours in fewer days is not an efficient way to work. The point of the 4-day work week is about doing less work. Besides, very few people work even 8 hours a day. Fewer official working hours help squeeze the fat out of the typical work week. So don’t think 4 days means cramming the same amount of time a shorter week.

Web 2.0 how-to design style guide In this tutorial, I describe various common graphic design elements in modern web “2.0” design style. I then attempt to explain why they work (i.e. why they have become common), as well as how, when and where you might use each element in your designs. It follows on from my Current Style article, and analyses in greater depth the design features of the current “Web 2.0” design style. To learn how to design Web2.0 sites yourself, you must read “Save the Pixel – The Art of Simple Web Design”, which is a comprehensive guidebook to the principles and techniques of Web2.0 design. Summary of Best Web Design Features The list below is a summary of many of the common features of typical “Web 2.0” sites. Clearly, a site doesn’t need to exhibit all these features to work well, and displaying these features doesn’t make a design “2.0” – or good! I’ve already addressed some of these factors in my introductory Current Style article. Best Website Design? Web 2.0 ?! Best Web Design Features 1. When? Always! 2.

Related: