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:

Patterns in Interaction Design 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.

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.

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.

40+ Helpful Resources On User Interface Design Patterns | Develo Advertisement If there is a commonly reoccurring need for a particular solution, there is a great probability that someone has – by now – solved that need and has finished the legwork involved in researching and constructing something that resolves it. At the very least, you will find documentation on general solutions to related problems that will enable you to gain insight on best practices, effective techniques, and real-world examples on the thing you are creating. A design pattern refers to a reusable and applicable solution to general real-world problems. There are many ways to tackle a specific requirement – and as a designer – the most important thing you can do is selecting the option that best reflects the needs of your users. In this article, we share with you the best of the best, cream of the crop sites, galleries, online publications, and libraries devoted to sharing information and exploring concepts pertaining to User Interface design patterns. Yahoo!

Data Visualization: Modern Approaches | Graphics | Smashing Maga About The Author Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing or speaking at a conference, he’s most probably running … More about Vitaly Friedman … Data presentation can be beautiful, elegant and descriptive. There is a variety of conventional ways to visualize data - tables, histograms, pie charts and bar graphs are being used every day, in every project and on every possible occasion. However, to convey a message to your readers effectively, sometimes you need more than just a simple pie chart of your results. Data presentation can be beautiful, elegant and descriptive. So what can we expect? Let’s take a look at the most interesting modern approaches to data visualization as well as related articles, resources and tools. 1. Trendmap 2007 presents the 200 most successful websites on the web, ordered by category, proximity, success, popularity and perspective in a mindmap. 2. 3. 4. 5. 6.

An exploration of the Highrise Edit Contacts Screen By Jason Zimdars, designer at 37signals This screen is used to make changes to the contact information for people and companies in your Highrise contact list. In the previous article (our exploration of the Basecamp Account Screen) we explored a variety of broad concepts then narrowed and refined to a solution. The original screen The previous version of the edit contacts screen had several areas that we thought could be better. Blank Slates The overall direction for this exploration was discovered pretty early in the process. When a user is completing a form, empty fields feel like failure. Another issue with exposing all the fields at once: The field outlines and shapes make it a bit harder to see, at a glance, which fields are filled in and which aren't. The blank slates also gave us the opportunity to add a little more copy about what the field is for when needed. In the end, we decided simple was best, but here are some directions we looked at for the blank slate. Flow Add a contact

10 UI Design Patterns You Should Be Paying Attention To | How-To Advertisement Design patterns were first described in the 1960s by Christopher Alexander, an architect who noticed that many things in our lives happen according to patterns. He adapted his observations to his work and published many findings on the topic. Since then, design patterns have found their place in many areas of our lives, and can be found in the design and development of user interfaces as well. In short, design patterns are solutions to recurring problems. By extension, UI design patterns are solutions to common user interface problems. You may be interested in the following related posts: 1. To fully appreciate the problem of registration, we should consider an annoyance that has led to the opinion that sign-up forms must die6. When would you actually use lazy registration? 7 Amazon lets you browse and add products to your shopping cart before signing up. This pattern is meant to allow users to use your system and take action before registering. Recommended reading 2. 3. 4.

10 Backgrounds that Could Make Your Website Look Like the New En While searching the Web for our Webdesign Trend Hunting series, we’ve discovered a new small trend that could go bigger in the next few weeks – the blurry light bubbles background used by the new Envato website. And if the biggest inspirational web network isn’t enough for you, take a look at the new Opera website. So, if you like ‘em and want to be among the firsts who spot and use the new hype, we’ve made a roundup of 10 backgrounds in the same style. Sparkling Dots | $3 | Buy A nice layered package with amazing backgrounds, available in 5 colors Light Effect | $4 | Buy Hight quality abstract backgrounds contain 2 groups, one with 10 and the other one with 20 color variations Spring Abstract | $2 | Buy An abstract background depicting the freshness of spring – and the related nature rejuvenation. 3200 X 2400 at 150 dpi – layered and named for easier editing Web 2.0 Background Pack | $2 | Buy 8 different backgrounds 8 full layered Photoshop files Very easy add/change colors.