User Interface (UI) and User Experience (UX) are two important topics for web developers. There are plenty of recommended books on these subjects, such as Steve Krug’s “Don’t Make Me Think”, and very thoughtful work being done by the good people at A List Apart and User Interface Engineering, among many others. But even if you don’t have the time and inclination to spend hours mastering these subjects (and, sometimes, the underlying psychology involved), a decent amount of UI/UX should come down to common sense. I’ve grabbed a couple of snapshots of recent issues I’ve seen at a couple of different web sites.Continue Reading...
Archives For ui
Jared M. Spool, a renown UI and UX expert, just posted a great article titled “Devising a Strategy for Responsive Design”. In the article, Mr. Spool covers the current issues surrounding designing web sites responsibly (and responsively) for today’s environment, devices, and destinations. Not only does Mr. Spool talk about just the technologies involved, he also explains how some of these issues have further implications on other aspects of a site, such as content management. It’s a sufficiently thorough and well-explained article that’s definitely worth your time if you want to get up to speed on the issues surrounding web design today.Continue Reading...
Some time ago, I StumbledUpon Aquent’s Internet Online Website!. At first it just looks like a very generic (very generic) Web page, but upon further consideration, it’s kind of interesting. Aquent, in case you’re not familiar with them, is an international talent agency that specializes in online-related fields: user interface, graphic design, marketing, etc. (I was briefly registered with them, in order to work on a project that never came to fruition). Anyway, just as an X-ray shows the underlying skeleton, the Internet Online Website! shows the common pieces of a Web site and what skills are required to create it. If you’ve been doing Web development for some time, you’re not going to learn a whole lot, but it might strike you just how common much of what you do is (in terms of UI and design). If you’re relatively new to, or less experienced with, Web development, you’ll probably appreciate seeing the basic ideas—specifically including things like marketing, interactive design, mobile Web, etc.—put together.
Recently, and I can’t remember why, I came across Yahoo!’s Design Pattern Library. Just like a programming design pattern describes, in code, an accepted way of handling a specific task, this library has almost 60 (at this time) examples for how to layout and handle common visual elements.
The patterns are organized by category: layout, navigation, selection, rich interaction, and social. For example, there’s a pattern for showing the availability of a person (like you’d see in IM) and another for how breadcrumbs should be used. Mostly the patterns are descriptions of what you should do, based upon what’s best for the end user. Many of the patterns do have links to code examples, although those will often make use of the Yahoo! User Interface library.
Part of the design pattern library is a stencil kit, available for OmniGraffle (the program I use), Adobe Illustrator, Visio, and other applications. Using this kit you can quickly create a mock-up of the user interface. And being Yahoo!, all of this is available for free.