A great article from OneExtraPixel

“Good design must necessarily, in my opinion, have an impact on people’s lives, no matter how seemingly small. Good design changes things.”

Garr Reynolds

Designing wireframes the right way the first time costs no more than doing it the wrong way. Creating a paper prototype adds no cost either; simply print out the wireframe diagrams for the pages a visitor will use to complete the tasks most closely related to achieving his goals and meeting the site’s business objectives.

Web Prototyping saves costs of any marketing communication that may be necessary to undo brand damage resulting from a poorly functioning web site and a frustrating user experience. Expensive site redesigns are often undertaken to correct those kinds of problems. Adding a few days to create a wireframe and testing a prototype ensures that the redesigned site won’t introduce any new causes for user frustration or further erosion of brand equity.

Of course, a designer doesn’t have to reinvent the wheel with each new wire frame diagram. Every page in a site will share some elements, even when the pages don’t follow the same template.

These common elements are the must-have items, which, if absent, can cause visitors to experience frustration and resentment that may linger long after they’ve moved on to other sites. Alienating visitors and creating a negative brand impression will not help the site-owning organisation achieve its business goals, nor will it save money. For example, every page needs clearly labelled navigation so the visitor can easily move from one page to the next and from one section of the site to another without having to go back to the home page.

The Wireframe

Understanding how to work with wireframes is the key to creating a success site prototype.

The wireframe diagram illustrates the layout of a web page. Using different shapes (such as boxes, ovals, and diamonds) to represent content, functional, and navigational elements, these shapes displays their placement on the page. HTML coders use the diagrams to “wire” each page, connecting links, attaching content, and so on.

Visual designers use the wireframe as the basis for renderings that show the hierarchical importance and location of the elements (with each general section of the page labelled); free of any potentially distracting design treatments.

The use of simple shapes lets you focus on the information design first, to make sure it meets users needs, before moving on to the pretty pictures. For an existing site, wireframes are abstracted from screen shots, with new content, functional, and navigational elements sketched in.

Wireframe vs. Visual Design

Usually, decision-makers in the site-owning organisation will want to see visual designs by this time. I encourage you to be brave and stall if necessary, but in any event, resist temptation to yield to this request.

Why?

One very important reason is to save money. Why spend time on graphics before the underlying information design is complete?

Equally important, colours, fonts and stylistic treatments of logos and other graphical elements can invoke emotional responses (“I hate this pink”; “I love that blue”; “That version of the logo makes me ill”) that distract from the task of determining the best information design for the page.

A wireframe diagram lets everybody focus on what’s important at this step: clearly understanding what goes on each page, where it goes, and why it goes there, so you can achieve the best overall balance and structure for each page. A wireframe is a sketch of a page-layout idea. The sketch may be rendered in the computer using an illustration application or hand-drawn on paper. Either method is fine, as long as it clearly communicates your ideas.

The information design will evolve as wireframe diagrams change, incorporating results from the usability test at the end of this step, to reflect placement of page elements in ways that better meet user needs. Keeping the information design flexible at this stage will help you create a more positive brand experience over the long term, so you don’t want anyone to develop partisan attachments to a particular look this early in the game.

Note for Visual Designers

At this point in the process, visual designers should conduct exploratory meetings to understand the client’s visual preferences and the visual elements of the client’s brand. Wait until wireframes are set before showing any visual-design treatments of the pages to the client.

Note for Clients

For clients who insist on seeing visuals earlier rather than later, ask visual designers to design page mock-ups representing possible colours, imagery, its look and feel, as well as possible styles of what is being considered at this stage. However, you should do this only if absolutely necessary – that is, if they won’t take no for an answer – and be sure to emphasize that these mock-ups, in no way, reflects the final designs (repeat this warning early and often).

Uwe Thimel’s version of a wireframe

Caution the people in the site-owning organisation against developing any attachments to these mock-ups, because such attachments will make it difficult to change the visual design later on. Chances are these people will not be happy when they see the final design with text, links and information added to it. Focusing only on wireframes at this stage helps you avoid building unrealistic expectations about the site’s final look and feel, because having maximum flexibility to evolve the site’s information design is necessary.

9 Application Tools To Create Wireframes Digitally

Traditionally, interactive web designers use pencil and paper or Photoshop to do a mock-up. However, in recent years, there has been a handful of websites that allow designers to create prototypes, wireframes or sitemaps digitally. Here are 9 tools that you can consider using.

1. Balsamiq

Using BALSAMIQ mockups gives you the feeling like you are drawing, but it’s digital, so you can tweak and rearrange the controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting.

2. iPlotz

With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can manage the tasks for developers and designers to build the project.

3. Pencil Project

The PENCIL PROJECT‘s unique mission is to build a free and open source tool for making diagrams and GUI prototyping that everyone can use.

4. templatr

templatr is a Template Generator, with which you can create an individual design for your Blog online. You need no knowledge of HTML or any special Software. All you need is a Browser, maybe a little creativity and a small idea of how the finished design should look. You can download the finished Template with a simple click.

5. Flair Builder

FlairBuilder is a cross-platform tool for rapid authoring of interactive wireframes and user interface prototypes. It comes with a palette of common fully functional components. Your prototypes will have interaction built-in from the first moment.

6. GUI Design Studio

GUI Design Studio is a fully featured application user interface design and rapid prototyping tool that requires absolutely no coding. It is equally suitable for creating desktop, mobile and Website application designs.

7. Proto Share

PROTOSHARE makes it easy to create and then reuse templates, giving you full creative control and efficiency.

8. Serena

PROTOTYPE COMPOSER is a completely new way of gathering requirements. Prototype Composer makes it possible to see how an application will look and function before any code is even written. Instead of endless text documents, Prototype Composer makes it easy for business users and analysts to collaborate on requirements by building simple, high-fidelity prototypes that simulate a working application.

9. DUB

DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming.

Wireframing diagrams use simple shapes to represent the content functions and navigation on a page. Use them to design the best relationships among page elements for efficient information design that will meet user needs and achieve the site’s business goals. I hope this post gives you a better understanding of the importance of wireframing, please stay tune for part 2!

With Inventify, you can keep the customers updated about the availability of various products on your store. Your visitors can sign up for a notification on the store. When you have the item back in stock – it sends the customer an email notifying the availability.

Features of Inventify

• FULLY Automatic Request Processing
• One time Set up
• Compatible with ANY Yahoo! Store
• Monitor Requests
• Check Frequency of Unavailability
• Google Map Enabled* ^{( for location preview )}
• Product Wise Requests Listing
• Category Specific Requests Listing
• Smart Chart based Reports
• Track Users
• Customized Email Templates
• 1 month FREE TRIAL!

Professional web designers on the Mac platform rely on commercial heavy-hitters like Adobe Photoshop, Illustrator, Fireworks, and InDesign for their graphic design needs. And when it’s time to slice and dice, some depend on the excellent Dreamweaver CS4 for WYSIWYG design/development; while many Mac code jockeys swear only by editors like Coda, BBEdit or TextMate. Others prefer to mix, match or blend.

Designers also rely on various supporting apps to accomplish every day jobs like FTP uploading, cross-browser testing (important if you’re designing/developing on a Mac platform only), screen-shot snapping, pixel measuring, and the like.

While many of these programs are slick, they also of course cost … money. Which brings us to free apps for the Mac crowd. Which are the best compared to their commercial counterparts? Or are simply great apps in a league all their own? Put away that credit card for now and let’s find out!

Free Photoshop alternative

GIMP (Mac)
In a nutshell, GIMP provides designers with the power to accomplish almost any task that Adobe Photoshop is used for. Mac users familiar with typical Cocoa apps will find GIMP’s interface and menu system very “un-Mac” like (requiring the X Window System, commonly called X11), but if you soldier through you’ll find a powerful image editing program with all the fixins – advanced multi-layering, text and image effects, pro-level image manipulation, and a full range of design tools. High quality plug-ins are freely available to extend the app, including the ability to use some native Photoshop ones.

Also check out:

Seashore
Based on GIMP, Seashore is a pure cocoa app which makes it very OS X friendly. A range of tools for gradients, textures, layers, and drawing are found in Seashore. However, the program lacks many of GIMPs more powerful features so it’s not exactly a GIMP replacement either.

LiveQuartz
Sporting a sleek Mac interface, LiveQuartz describes itself as a “simple and powerful free photo editor for Leopard.” It does two thing very well: layers and filters. Basic drawing tools are also included but, as with Seashore, it’s not billed as a Photoshop replacement either. In the hands of the right designer, however, fairly sophisticated designs can be created with this nice app, which is also fun to use.

Free Illustrator alternative

InkScape (Mac)
The open-source InkScape, another Mac application that requires X11, is a viable alternative to Adobe Illustrator with its ability to create and edit graphics in scalable vector format.

AI users will feel at home using InkScape with options like layer control, gradients, connector path control/manipulation, various brushes (including calligraphy), type effects, masking, EPS exporting, a 3-D shape tool, object tweaking/sculpting, and even a diagram connector tool useful for a variety of purposes, like creating site maps. Depending on the complexity of your design, files can be exported from InkScape and into Illustrator and vice-versa.

Free Dreamweaver alternative

KompoZer (Mac)
Featuring WYSIWYG website creation and robust CSS editing, KompoZer is a mature, open-source alternative similar to Adobe Dreamweaver on the Mac, and has many of the same bells and whistles, too.

Although it can’t top Dreamweaver’s rich offerings, KompoZer offers full CSS support, code viewing/editing, tabbed views, FTP site management, a color picker, clickable hierarchical properties view bar for code isolation, split views, live preview, and much more. There is even the option to call W3C’s HTML validator to check for valid markup.

KompoZer is built on the NVU architecture, but is less buggy and more feature-rich than NVU since development on that project was stopped and has been replaced by KompoZer.

Also check out:

SeaMonkey
For creating very simple web pages.

Amaya
A project started by W3C, Amaya aims to be a WYSIWYG editor for standards compliant web developers, but lacks KompoZer’s power. It also claims to be a web browser, but will likely not pass muster for most people’s normal web browsing activities.

Free InDesign alternative

Scribus (Mac)
This open-source page layout program for the Mac, similar to Adobe InDesign, is geared towards print professionals in creating business cards, ads, magazines, newsletters, brochures, posters, signs, or just about any other kind of printed material.

Although the application doesn’t allow for measurements in pixels, web designers can still take advantage of Scribus’s multi-page capabilities, master pages, and precise typographic control for quickly generating rough ideas for web banners, buttons, or even website mockups faster than you can say Photoshop! The ability to create PDFs within Scribus (including interactive ones) is another plus. Image export options include PNG, EPS, and PDF.

Free Mac text/coding editors

TextWrangler (Mac)
A powerful general purpose text/code editor for OS X, TextWrangler has many of the same pro features found in commercial editors, such as multi-file search and replace, open/save in various line-ending formats and character sets, find/compare/merge file differences, hard/soft text wrap views, FTP/SFTP support, tabbed viewing, and more.

Simple CSS (Mac)
Simple CSS sports a Mac-friendly interface that helps you point and click your way to building CSS stylesheets. One column allows for style creation, and a main window gives you complete control over fonts, displays, borders, and box dimensions. Multiple projects can be opened simultaneously, and styles are displayed via a WYSIWYG pane. Finalized CSS code can then be previewed and exported.

Firebug (Mac Firefox plug-in)
A must-have Firefox extension for web developers, Firebug offers an impressive array of features for live in-browser code viewing, testing, editing, and debugging of HTML, CSS, and Javascript. Firebug easily overrides HTML and CSS on any webpage for live previewing in Firefox – saving you precious design/development time. A DOM inspector adds to the extension’s impressive capabilities.

Free cross-browser and server-testing apps

VirtualBox (Mac)
VirtualBox sets up a professional virtualization environment on your Mac, similar to Parallels or Fusion, allowing you to install Windows XP, Vista, Windows 7 and others. But if you just need a Windows environment for browser testing on your Mac, the good news is that you don’t even need a licensed copy of Windows to run IE6, IE7, or IE8. VirtualBox can be configured to run all three browsers by installing the VirtualPC disc images (for free) directly from Microsoft.

Adobe BrowserLab (Mac/PC)
This free online screenshot service (still in beta) shows you what your latest web design will look like on the PC side in IE’s 6, 7, 8 and Firefox; and on the Mac side in Safari and Firefox. Although it only takes static screenshots, BrowserLab is useful for catching pesky CSS layout issues, especially with the difficult-to-justify-installing-but-still-important IE6.

There are a number of online browser-testing screenshot services out there already, but BroswerLab is different because load time is much faster than the others and the interface is much better. For Dreamweaver users there’s a slick plug-in that allows you to preview the page you’re working on at the touch of a button. Browser screens can be compared side-by-side, and an interesting Onion Skin View can help idenitify layout quirks at a glance.

MAMP
Although OS X allows you to run a full-blown Apache server out of the box, setting up a properly configured PHP server on your Mac can sometimes be a frustrating endeavor to get just right. Enter MAMP, which stands for “Macintosh, Apache, MYSQL, and PHP.”

Everything you need to run a PHP server is included, complete with phpMyAdmin, SQLiteManager, and a nice control interface to easily start and stop the server. MAMP will not interfere with other Apache installs or modify them in any way. It’s all self-contained within the application folder and can easily be removed. An OS X Dashboard Widget gives you start/stop server controls.

Free Mac FTP program

Cyberduck (Mac)
For Mac users the robust and stable FTP browser/client, Cyberduck, is an open-source must-have for tasks requiring FTP, SFTP, WebDav, Mosso Cloud Files, and Amazon S3 server interaction. Its clean and straightforward operation allows you to quickly upload and download files without the interface clutter found in some FTP programs.

Features include file synchronization, access to file permissions, bookmarks, and integration with various text editors to edit files directly. OS X technologies like Spotlight, Bonjour, Keychain, and even Quicklook are all supported. An included OS X Dashboard widget allows for quick access to servers. Various localizations are also available.

Also check out:

FileZilla
The interface is definitely not Mac-like in elegance, and it doesn’t make good use of integrated Mac technologies like Cyberduck does, but those looking for a dual-pane FTP browser will find it in FileZilla.

Free supporting apps for designers on the Mac

Skitch (Mac)
If a picture is worth a thousand words, then the ability to annotate a picture may be worth even more. Beyond your average screenshot app, Skitch combines the ability to capture anything on-screen with drawing and annotation tools.

With Skitch, for instance, you can quickly capture a design you’re working on and mark it up with non-destructive colored arrows, text, highlights, boxes, and lines – helpful for illustrating concepts not easily conveyed using words alone. Or you could use Skitch to create a series of screenshot tutorials.

Screenshots with our without edits are managed in the app’s history and can be revived later for further editing; or simply drag and drop to the desktop or directly into any application that supports images (like Mail, TextEdit, or any graphic app). You can even upload your screenshot creations to a free skitch.com account or to your own FTP server by simply selecting the “webpost” button. Since Skitch is in beta, rumor has it that the developers will start charging at some point, however this fact is not entirely known and the app has been free of charge for some time now.

Paparazzi! (Mac)
Have you ever been frustrated by the seemingly simple process of capturing a webpage screenshot that scrolled beyond your screen area? Instead of taking multiple screenshots and then pasting them together to form a single file, Paparazzi! allows you to capture an entire page from top to bottom and then export it as a single file into PNG, PDF, JPEG, or TIFF format. Optional cropping parameters can be set, and different screen resolutions can be tailored to fit your needs. A handy timed-delay snapshot function can also be adjusted.

Imagetricks (Mac)
This handy little app claims to “reveal the hidden power of your images,” and that’s exactly what it does. The free version of Imagetricks boasts a myriad of popular Photoshop-like filters and effects. Various masking effects can also be applied to allow for even more options. Modified images can then be exported in any of the major web file formats for insertion into your next layout.

Pixius (Mac)
This Adobe AIR application gives you a slick tool for measuring anything on-screen in pixels. Easy resize handles give you quick measurements in height and width, and the multi-screen mode allows you to move the tool back and forth between screens for dual-monitor users.

A light-dimming feature darkens the background but leaves your focus area lit. You can also pick between three skins for the app, two of which emulate browser chrome for IE and Safari Mac, respectively; handy for quickly checking screen sizes during design-time without taking your design into a browser. Screenshot functionality is slated for a future release.

Also check out:

PixelStick
Uses the Cartesian coordinate system for exacting on-screen measurements.

Calipers This Adobe AIR app floats above all other applications. Future release plans include custom skins, alpha transparency, and customizable blade colors.

Colors (Mac)
Colors lets you sample color values anywhere on-screen. You can then copy and paste the RGB values into any application. Simple, fast-loading, and very handy for your design toolbox.

Also check out:

DigitalColor Meter
Many of us forget that Apple already provides a free color-sampling tool. Just look inside your Utilities folder! Formats include RGB, YUV, and CIE.

Xee (Mac)
A lightweight and ultra-fast image viewer, Xee can replace OS X’s Preview while also offering designers additional power options like the ability to move, copy, or rename files while viewing. Opening an image within a folder containing other images allows you to browse all the images in that folder with keyboard shortcuts and forward/back commands, or via the automatic slideshow. You can even browse images inside archives. File type, EXIF info, creator, and color space are displayed front and center. JPEG lossless is supported.

Integrity (Mac)
Moving, modifying, or deleting file names is a common practice for web developers, but it can be all too easy to incorrectly re-link files during the process, too. Conversely, outgoing links on your site can change unexpectedly. Integrity removes the tedium of manual link-checking by quickly crawling internal and external links on your site and reporting broken ones.

MindNode (Mac)
This dead-simple open-source “mind mapping” program is a great way to quickly explore creative concepts of all shapes and sizes, and also works for site map layouts during website planning. It sports a lean interface and is especially handy when you want to get ideas down fast. MindNode lets you create multiple maps, and nodes remain connected to their respective maps, yet can be moved anywhere in the pasteboard area; which expands automatically to self-adjust. The free version lets you customize background color, node paths, and fonts – individually or in groupings. Export options include PNG, PDF, and HTML.

Conclusion

The number of quality web design apps on the Mac has grown along with the surge in popularity the platform has enjoyed in recent years. Finding decent free apps can still be a challenge, however, especially for graphic designers. Hopefully you’ve found a few on this list that are interesting to you. One caveat: the term “free,” used liberally throughout this article, should also be followed with “donation requested” kept in mind if a program is particularly useful to you and the author requests it. Please help support your Mac development community. Happy web designing!

About the author

Corrales Cachola is principal of Corrales Creative, a web and print design firm based in Portland, Oregon. On weekends he stays in shape by carrying CRT monitors and an Apple LaserWriter up and down flights of stairs. Follow him on Twitter and he’ll tell you all about it.

Quality is a word that a lot of people like to use when describing their web design services. But what is quality, how do you know if a design is quality or not. Well, I think that there’s quite a few ways to spot quality within web designs. Once you can see just what goes into making a quality web design, you can use the techniques to perfect your own style.

I’ve put together a few pointers, and collected some examples to explain just how I look for quality within a website design.

01. Spacing

One of the main things that I look for within a good website design is clever use of spacing with design elements. Paying close attention to how certain things are spaced out and lined up can really make a difference to the overall appearance and sense of quality of your design.

I think the key to getting your spacing right is to look at all of the elements within your design. Looking at the bigger picture really can help you get a good idea of how best to space your elements. Sometimes zooming out and taking a different look at your designs can be a great help.

Examples of Excellent Spacing

Great Spacing on the Good.is Website

As you can see here, there is a very clean and open feel to the content here. This is completely down to the designer allowing a good amount of space around the text & images.

A very well spaced out Digital Mash Website

Having well spaced out elements can make them a lot more attractive, and a lot more clickable. Digital Mash is a great example of a very welcoming website.

Creatica Daily has heaps of space

Again the great use of spacing here really helps let the content speak for itself. There isn’t a lot of content in each post, but they’ve not been afraid to give the content a lot of space. Just because you only have a few lines of text, doesn’t mean it can’t use a lot of space.

Lots of Space on the Postbox Site

Taking a close look at the Postbox website, you can really see how space there is around the edges. There’s actually a 60px padding here. It sounds like quite a lot, but when you see it in action it looks great.

Getting Spacing Wrong

The main mistake people make when it comes to spacing is having their content too close to the edges. No matter how well you’ve styled your content, if you cram too much in, it loses a lot of it’s style and quality.

Example of not using enough spacing

We showed in the previous section how good the spacing was on the PostBox website, but we’ve made the  mock-up below to show how it would look with less spacing. And you can see just how much bad spacing can effect your design. It takes a lot away from the design and certainly removes the quality feel from it.

Tips on Effective Spacing

Deciding on how much spacing to use is something which will vary from time to time, you really need to train your eye to allow for the correct amount of spacing for each element, and use it effectively to fit the design. It’s touch but something you can pick up with practice.

• Design using a grid system
Using a grid certainly helps you to understand the importance of spacing

• Try & Try again
You can always use a method of trial and error until you find what looks right.

• White Space isn’t a wasted space
Just because you have an empty area, it doesn’t mean you have to fill it.

• Less really is More
Rather than trying to fit more in an area, fit less, give it space and keep just the vital important information.

02. Pixel Perfect Detail

You can really tell when someone has put real effort into the finish of a web design. Sometimes it’s the subtle things that really make a difference, and a lot of people might not even notice. What I mean when I talk about Pixel Perfect Detail is the method of paying close attention to lines, edges and borders. Rather than just have a simple line, sometimes adding some small details, whether it be subtle gradients, or something as a simple 1px shadow or highlight can really make your work stand out. Some designers of note that are really good at this are: Collis Ta’eed,  David Leggett and Wolfgang Bartelme.

Examples of Pixel Perfect Details

A close look at the detail on Envato

If you look in the examples I’ve cut out, you can see in Example 1, how the green bar has a 1 pixel lighter green line on the border. Example 2 uses a soft gradient shadow on the inside of the box and leaves a 1px clear white border at the top. Clever, using a shadow to give the impression of a highlight above it. The green area behind has a very soft subtle shadow which helps draw attention to the clean and crisp detail within the white box below. Although it doesn’t seem like much these thing really do help to make everything look that little bit more polished, they give a sense of 3D and realism, almost like the elements are placed onto the page, rather than just a flat and static layout.

The Details on Tutorial9.net

David Leggett has a great understanding of how to really make pixel’s pop. His recent redesign of tutorial9 is a great mix of so many pixel popping techniques. In Example 1 you can see how he’s made the tabs look that little bit slicker by adding a simple 1px highlight to the top. Example 2 see’s a variety of techniques. A Drop shadow on the camera icon, a shadow highlight on the white area, and a 1px highlight on the top of the navigation bar.

Pixel Perfect Buttons & Separators on RedBrick Health

This beautiful navigation, created by Ryan Scherf is another great example of using pixel perfect details to get that feel of quality in your design. The pink button has a 1px highlight, and the separating lines between the links have the same level of quality and detail, as you can see rather than just having a gray line separation, Ryan has included a 1 pixel highlight below it to prevent it looking flat and 2 dimensional.

Pixel Perfection Applies to Grunge too: AvalonStar

Here we have the beautiful AvalonStar: Distortion blog, which uses a great grunge style. But even with a dirty & grungy design using a 1px highlight can still make a big difference. If you look at Example 1 you can see how a shadow gradient has been used on the brown top area, the green box which lies below it has a 1px highlight at the top. The combination of the shadow above and the 1 pixel highlight really make the boxes look that little bit more polished.

Quick tips for Perfect Details

Practice makes perfect in this case, as you can see from the examples something as simple as a 1px highlight line can add some really cool depth to your designs, you don’t need to rely on really over the top bevels and gradients to give the impression of something with a bit of depth.

• Keep it Subtle
Small details that compliment the content are the key.

• Think in Pixels
Borders, gradients, lines and shadows etc don’t have to be huge to be effective.

• Before & After
Compare your results to how they looked before you applied the effects. Then you can see just how effective they are.

03. Well thought out Typography

Although the actual content of the website won’t be written by the designer, they play just as important role in the overall quality of the content. Their role is to make sure that the content is displayed in a way that is easy to follow and read through. There are many ways that you can ensure your type is readable and usable, and while I’m not going to list a set of rules and regulations on what, and what not to do, I will give you some examples of where clever typography really does make a difference.

Examples of Well Thought out Typography

Big & Beautiful on The Netsetter

Titles are important within web design, especially when you are designing for a blog. A recent trend in web design is to use big & bold fonts for titles. This works in a number of positive ways, not only does it tick all the right boxes from a usability point of view, but it helps to create space and define structure within a design. This example from Netsetter is a great illustration of these points, you can see how the title creates a lot of white space around it, and naturally it’s very easy to read.

Leading & Spacing with your Text

The Viget website really is a beautiful example of how important typography is within web design. The example we see below (taken from their portfolio showcase) shows once again how using a larger sized font helps to create and open space. Even with the thin, crisp font they have used you can see just how much space has been created in that area. The actual typeface itself is very slick, and is a great choice of font. The other thing that stands out here is their attention to detail with the line height (Leading), the spacing between each line of text has been increased from the default value to create a lot more space and make the text much more readable. A trick which you could try in your next design.

Web Design Ledger, Fonts to Fit your Mood

Finding the perfect font can be done through trial and error, or you can make your choices based upon the different moods certain fonts help bring to a design. The example here, Web Design Ledger, has a retro and worn look to it, while still having a very open and modern feel to it, so choosing fonts that help evoke a similar moods to these is essential to it’s success. Henry Jones (the designer) has chosen a popular transitional serif typeface: Georgia for the titles which compliment the retro & worn aspects of the design very well. The modern feel to the website comes from using a very different font to the titles, the main content body is written in Helvetica, a sans-serif typeface with a very rounded, open feel to it. The two choices of typeface in this example are very clever and really help to compliment and set the mood of the design.

Quick check list for Typography in Web Design

Spotting good typography within web design becomes a little easier when you’ve seen some great examples of typography (above) But when exactly is it that makes these examples so good, and what should you be looking out for when you come to design your next website?

• Is it Readable?
Don’t be scared of making your titles big and bold.

• Have you thought about spacing?
Spacing can vastly improve readability.

• Do your fonts fit the mood?
Make sure your fonts compliment the design.

There are probably a thousand more tips out there, but I don’t consider myself an expert in this area, I think I’ve just learnt to appreciate the impact of good typography. If you want to learn more about the things to look out for and see some better examples i strongly suggest you check out this post from Smashing Magazine.

04. Organization of Elements

Being a designer appeals to many because of it’s creative nature, and sure it can be a lot of fun. Now I know that Organizing doesn’t sound at all creative or fun, but once you get into a habit of good organization it doesn’t have to be as dull as it sounds. The way you organize the elements in a website is always going to be different, it depends on what type of site it is, and how important certain features are to the content of that website.

Although there’s always a variation in how and where you place things, there are some things you can do to make organizing your content very easy. The first thing you need to do is decide what you want your design to achieve. For example, are you designing to sell a product, are you designing for content, or are you designing for signups & referrals etc.

Designing to Sell: 37Signals

Taking a look at the massively popular 37 signals website it’s easy to see that it’s no coincidence they are selling their products so well. They’ve made it as easy as possible for you to see what’s for sale and help you to make the final decision to buy. Everything you want from a site designed to sell.

In the Example image you can see that the site has 4 key features that make it ideal to encourage you to buy. Attention is the first thing, they’ve made a very dark box with a quick summary & big bold titles. Next they generate your Interest by listing some benefits of each product with a lovely illustration. Desire is the next point, and this is archived by placing quotes & testimonials, and as in this point some videos of “What our Customers have to say.” The final feature to keep in mind is Action; on 37Signals there are various action points throughout the page, also nice to see that as the page is quite long they even have some action points in the footer.

Designing for Content (Blog): Well Medicated

When you’re designing for a blog it’s a completely different story. You don’t need to spend time convincing and re-assuring your users about your product, your “product” is already on display, your content is your product. Make it easy for your users to see your posts, explore them and connect with you & your blog.

Content should be (one of) the first thing(s) you see on a blog. In this example a nice bold pink title font really draws your eyes straight to the content. There’s a good sized preview image and a good 2/3 paragraphs of text followed by a “Continue Reading” link. There’s also the standard date & author information. For me this is one of the most perfect examples of what I would class as quality “Content Design.” Attention can be directed to anything of interest, here the nice big subscribe icons are the focus and help the users to stay connected with your content. Plus it without doubt will increase the amount of subscribers, so it works on two levels. Encouraging your users to Explore is quite simple, you can use anything from tabbed recent or popular content in the sidebar, to drop down menu’s or simple & effective lists. It’s easy to do, but very effective, especially on a blog. Blogs tend to be very personal things, so allowing your visitors to Connect with you in a variety of ways can be a big plus, and can help encourage people to get to know you, and visit

Tips to Help with Organizing your content.

Of course there’s always times where you’ll need to do things differently and break the norm. But there are some simple tips you can follow to keeping a well structured and well ordered design.

• What are you designing for?
As we’ve shown above, decide the goal of your design

• Design using a Grid
Grids allow you to make the most of your space.

• Test the Placement of Elements
Be the visitor, would you be able to use it.

• Remove any unnecessary Elements
Anything that isn’t essential should be removed, or out of the way

• Balance of Attention
Some things need to stay simple to allow others to shine

05. Restraint & Subtlety

Designers are always looking for ways to make an impact with a unique design or special effect within a design. But sometimes you can make a bigger impact by restraining yourself. There comes a point where something crosses from being good to being too much. A good designer can spot when the line has been crossed, and avoid putting too much into a design or special effect.

Examples of Subtle Effects within Web Design

Soft Gradients on “Things” Website

I’m always on the look out for subtle effects on all the websites I visit. Sort of sad maybe, but I can’t help but pick out all the little details for future inspiration. Gradients are often over used and really in your face, but used correctly gradients can add a element of reality and depth to a design. Most people might not even spot the gradients, and those for me are the best ones.

Drop Shadows on Icon Dock

Icon Dock is a smorgasbord of subtlety. Pixel highlights, gradients and drop shadows. But for the sake of this example we will focus on the drop shadow, it’s not very big, and it’s opacity has been reduced to just put the highlight on the content box and bring it forward very slightly. It’s a beautiful example.

Subtle Background Textures; Scouting for Girls

Having a textured background can make or break your design. A lot of times the background becomes too much of a distraction that it actually takes away from the quality of the design. So it’s often a good idea to keep your background textures subtle and soft. The Scouting for Girls website does a great job of using a texture to compliment the overall style & quality of the design.

A hint of Wear & Tear: Viget Advance

I don’t think you can ever be too subtle, any amount of detail no matter how subtle will be noticeable, and whether people are aware of it or not it does have an impact. This example from the Viget Advance blog shows some hints of wear & tear, just a very small amount of wear, but without it the paper would look flat and dull. It’s the small imperfections that make it more believable and real.

Watercolours on WebDesignerWall

When using watercolours it’s always nice to make sure you mix the colours and keep the colours very soft, faded, and well… Watery. Using watercolours can benefit your design in many ways, it allows you to inject some subtle colours and bring in some texture, which is why it’s become quite a popular choice for many designers to include.

Subtle Floral Elements; Dara’s Garden

This is a brilliant example of subtle floral detail within a design. There are some more vivid floral illustrations that are also quite stunning, but in this example we are focusing on the lighter & softer details in the background. This really shows the importance of subtlety, the soft colour and worn look to the pattern means that your eye is aware of the detail, but it isn’t the main focus.

Tips for Subtlety in your Design

For me, subtle details in a design can really push a design from being good, to being amazing. If you’re looking for a way to inject something special into your design, subtle details really are the way to go. Here are some tips to keep in mind when including subtle details in your design.

• Build up your layers
Never just use one brush or texture, build your details up.

• Experiment with opacity & Colour
Sometimes even 3% opacity can have a positive impact.

• Don’t worry, Be Brave
Done be afraid to be too subtle, or too faded.

06. Using Colour to it’s Full Potential

People often judge colours on their personal taste, which is a huge mistake. If you’re ever in a situation where you need to decide upon what colours look good in a design your mind should always be on the brand, and building a theme and mood using a colour scheme.

Brilliant uses of Colour In Web Design

Real Estate can be Real Colourful: Oypro

The thing I like about the Oypro website is that it proves that a “boring” subject doesn’t have to have a boring design. All too often corporate sites have a reluctance to allow designers to really put across some creative flair in their designs. There seems to be a need to keep things simple, flat, and gray. But this design proves that you can still have a corporate looking website, without the need to hold back.

Keeping your Colours Relevant: Tennessee Summertime

Summertime in Tennessee is a vibrant, bright and very warm website. Everything you’d want to associate with a site that is promoting summer activities. There are a lot of different colours in play here, but all of them are relevant. Good quality designs have a colour scheme that is relevant to the service or product that they are designing for. Sometimes it’s the obvious colour choices that make for the better design, a good example of my point is Hell Design – it wouldn’t make sense being any colour than a firey red.

Variety in your Backgrounds: Saturized Studio

It’s not enough just to have colour in your background and expect that to make it interesting. Some of the best backgrounds are those that have a bit of variety, in this example we see that the beautiful orange/red colour is subject to all sorts of lighting effects and gradients. It gives an extra something to the background, and prevents it from looking stale and flat. Important to note here too that the contrast between the dark & deep orange works really nice set behind the much lighter content area.

Tips for using colour in design

Colour is always a good area for exploration and trying different possibilities and variations, but it’s always important to keep a few things in mind when choosing colours and a colour scheme.

• Experiment
A boring topic doesn’t have to have a boring colour scheme.

• Variety
Try using gradients, patterns, brushes on your colourful backgrounds. Colour alone doesn’t make something look good.

• Stick to a Theme
Make sure your colours are relevant to your product/service.

07. Doing something Nobody else has done

Some of the best websites around are those that are out of the ordinary, strange and somewhat bizzare. But those that challenge the norm may end up changing what the norm is. But being truly original and creating something nobody else has done before is the toughest thing to do in design.

You could end up making something of amazing brilliance, or you could end up with a design that’s worthy of nothing but criticism. It’s a very thin line between success and failure; I mean there are reasons something’s never been done before, and it’s usually because it’s a shit idea. You’ve got to be brave to step away from what people know and love, and here are a few examples of that point:

Unique Navigation on MB Dragan

Not exactly your average site navigation, but would the website look as good if it just had a standard navigation. I’d say it was a bit of a risk having the navigation in such an unusual way, but it does fit in with the site, it is relevant, and it’s done to such a standard that it’s hard not to appreciate how well it works with the overall design.

Visualbox & their very Visual Navigation

Visualbox have one goal in mind, showing you their brilliant work. So they’ve got very little text, on first look all you see is their Name and a selection of their work. The preview box changes when you hover over it to reveal details of that project, so it’s actually a very effective and functional solution, and much more appealing then just having a list of links.

Straight to the point with Nikola Mircic

So you’re a interface designer, you want people to see your work, and hire you. Nikola Mircic shows us how getting straight to it makes for a really impressive site. You are greeted with a wide variety of his work, his name & what he does at the top, and a contact link. There’s no mass of text or fancy words to convince you to use his services, he literally lets his work talk for itself. Of course you can click on the images to see more & get some text, but the layout if very unique and I love how it works.

Tips for trying something new

The examples above are not meant to be “inspiration” for unique ideas, just simply a couple of sites that I found that I’d deem to be quite unique. The fact is you can’t really search around for inspiration on new ideas, as it kind of spoils the point of it. So really you can just ignore this whole section if you are trying to think up something new!

• Keep it Relevant
If you’re going to do something very new and unique, ask yourself “does it make sense” and “does it fit with the branding?” if so then go do it!

• Ignore everything you know!
Okay maybe not everything, basic principles may stay the same, but there’s no point looking for inspiration on new ideas, you’ll just be heading in the wrong direction.

• Keep a level of quality
I think generally if your new idea looks good, and works well it’s much easier for you to justify.

What Do you look for in a Quality Design?

There are so many things that can make a design stand out as quality, I’d say I’ve just covered a few of the base points. So I’d love to see your ideas and thoughts about what you look for when you decide whether a design is good or not.

Written by liam on April 13, 2009

(Edit, to draft, un-top, Slurp)

Copy this whole post to another site

Slurp cancel

select site advertising consumerist deadspin defamer fleshbot gay fleshbot gawker gizmodo idolator io9 jalopnik jezebel kotaku lifehacker valleywag artists gawkershop sploid

Take a look at the 2009 Lifehacker Pack for Mac OS X – DOWNLOAD FREE!.

Like our 2009 Lifehacker Pack for Windows (and its predecessor), the Mac version has the same goal in mind: to provide Mac lovers with a single, handy list of the best free applications that you’re likely to use on a regular basis.

Note: You can head directly to each application’s download page from the [Download] links and see what we originally wrote about them at the [LH Post] link.

Productivity

• Smultron:
  Whether you like the distraction-free environment of a plain text editor or you like to fire up a powerful environment where you can churn out some serious code, you can’t go wrong with the open-soruce Smultron. It sports a nice tabbed interface for working with multiple documents and working inside a directory, syntax highlighting, and even a fullscren mode for those times that you want to work without distractions.
  [Download] [LH Post]
• Quicksilver:
  Even though it’s no longer in active development by it’s creator, we still can’t get enough of this incredible application launcher and-then-some. We’ve taken you on a beginner’s guide to Quicksilver, walked you through the various settings, provided video demonstrations of some of its coolest features, and in general have drooled all over this productivity-boosting application. And even though we’re keeping a close eye on Google Quick Search, the Quicksilver-like app from Google that was developed by the same guy who made Quicksilver, it’s still no replacement.
  [Download]

Internet/Communication

• Firefox:
  All debates about security, memory use, or compatibility amongst the web browsers aside, Firefox can adapt to nearly anyone’s browsing habits through a range of adaptations. Whether that’s an extension/add-on (and here are our top 10 picks), a Greasemonkey script (again, our 10), or some deep-down about:config tweaks, Firefox can probably be what you want it to be.
  [Download] [LH Post]
• Adium:
  Pronounced like “stadium”, Adium is a free, powerful multi-protocol instant messaging client that connects to everything from AIM and Google Talk to Facebook Chat, MySpace Chat, and everything in between. Adium is extremely customizable, works like a charm, and brings way more options to your chats than the OS X standard, iChat.
• Postbox:
  If you’re not using your email’s web interface, use this. It’s basically Thunderbird, the open-source email client we’d previously included in our Lifehacker pack, but remixed with stronger, almost Gmail-like powers. It finds and indexes all the attachments in your email account, groups together conversations with similar subject chains with the “Gather” command (like Gmail’s conversations), offers tabbed inbox and message views, and lets you organize emails under your own chosen “Topics.” It’s also got built-in easy setup steps for Gmail and other webmail systems-in other words, everything we’re waiting to see Thunderbird implement.

  [Download] [LH Post]

Utilities

• Unarchiver:
  OS X’s default Archive Utility handles a lot, but the first time you come across slightly more unusual (but still very common) archive types like RAR, you’ll notice it stumble. The Unarchiver handles ZIP, TAR, RAR, 7Z, StuffIt, and several more obscure archive types without flinching.

  [Download] [LH Post]

• Transmission:
  The most popular BitTorrent client for OS X, Transmission rolls virtually every feature you’d want out of a good BitTorrent application into one clean, easy-to-use package. You can even remote control your BitTorrent downloads with Transmission, or get clever and start new BitTorrent downloads at home from any computer with Dropbox (mentioned below).

  [Download] [LH Post]

• AppTrap:
  One of the best parts of OS X is that uninstalling an application is as simple as deleting it, right? Yes, but not exactly; often simply deleting the file leaves your computer with old junk files sitting around that used to belong to the application you just deleted. AppTrap automatically detects when you’re deleting an application, looks for associated files, and automatically deletes them for you along with the app in question.

  [Download] [LH Post]

• Burn:
  OS X comes with Disk Utility—a very nice burning application plus some—out of the box, but it’s often used only for more advanced ISO burning, disk formatting, and other heavy-lifting type activities. Burn, on the other hand, is a simple, user-friendly CD and DVD burning application that does data, audio, video, and disc copying with aplomb.

  [Download] [LH Post]

Multimedia

• VLC – Got a video or audio file to play? VLC probably plays it. Don’t like how heavy Quicktime is? VLC is lighter. Want it free, working on any system, and have it show album art from your tracks? Done and done.

  [Download] [LH Post]

• iTunes:
  We’ve seen stronger competition for your music management in OS X this year than ever, particularly with the recent release of Songbird, but right now you’re still better off sticking with iTunes on your Mac. Not only does it integrate seamlessly with your various iPods, but it also integrates with most of your Mac’s iLife applications and other Mac apps. So while you’d better watch out for the competition, iTunes, you’re still the favorite for music.

  [Download] [LH Post]

File Backups/Syncing

• Dropbox:
  Put simply, Dropbox makes synchronizing your files across Windows, Mac, or Linux systems a very simple, almost magical process. Put a copy of what you’re working on or want saved in your Dropbox folder, and it’s synchronized to your account, which has 2GB to start with, and gets bigger if you recommend friends. When you’re at another one of your own computers, your Dropbox updates and grabs those files. If you’re at someone else’s system or on a smartphone, head to Dropbox’s mobile-friendly site and grab what you need. It’s not quite a backup tool, but it is one of those utilities that makes a lot of old habits—thumb drive copying, CD burning, emailing attachments to yourself—seem unnecessary.

  [Download] [LH Post]

• Mozy:
  If Dropbox is where you stash the stuff you’re working on or enjoying at the moment, Mozy is the backup service that saves everything for when your system goes black on bootup. The free accounts for Macs (and PCs) offer 2GB of free online space, and with the really smart filtering tools, you can have Mozy crawl your whole system and back up financial documents, Excel sheets, and any file with “Steve” in it. If you spring for a monthly unlimited plan, Mozy is a smart whole-system saver—one that doesn’t eat bandwidth when you’re using it, and works when you’re not working.

  [Download] [LH Post]

Things change daily in the world of free software, and we by no means believe that this list is absolutely definitive, so if you’ve got your own I-can’t-believe-they-didn’t-include-X must-haves, tell us all about them—and share any other thoughts on our list—in the comments. Happy downloading!

Read original post!

My latest iPhone theme! A much needed dose of purple flooded with this piece of beatiful theme.

To install:

* download the theme from deviant art. (link coming soon: search for “pearl theme by Kon” on deviantart)
* extract the archive
* connect your iPhone using ssh
* put the unzipped folder in themes folder
* open winterboard
* check the iPhonepearl theme
* voilà!!! Enjoy the purple pearl!

Looks awesome! Isn’t it!!

(posted with wordpress on iPhone)

When was the last time you called customer support because you were having problems checking out online? Probably never! Cart abandonment rate is at around 60%, and most of it happens before the user even begins the checkout process. Sometimes, convincing your customers to trust you is your biggest challenge.

There is no “Consumer Trust for Dummies,” but as eCommerce designers, we need to focus on some fundamentals. The following topics may seem as obvious as walking into a seven-foot Wookie, but rest assured you will find plenty of websites with a mouth full of fur.

1. Paint Your Pictures At Home

If your core demographic is women between the ages 35 and 65 who have an annual income of $60,000+, you would treat them different than the 18- to 25-year-old male demographic. First and foremost in e-tail: forcing your visitor to think is a bad idea. When creativity stops being subjective and can be measured by a dollar amount, making sure you’re designing for the customer is a no-brainer.

Years ago, I had an SVP of DotCom tell my team, “You can go home if you want to paint pictures.” And for the rest of the day, I couldn’t wait to get there so that I could make sure the next morning his inbox was full of expletive material illegal in most counties. After calming down, I realized he was right. All along, what he was telling us was simply to design for the customer and not ourselves. This was a challenge for designers working in an eCommerce corporate atmosphere but a very important lesson to learn.

2. Good UX Is Like A Perfect Movie Score

Build brand loyalty to gain patient, forgiving customers for a lifetime. For instance, Apple’s customer loyalty exceeds all other brands with an unusual cult following. Apple lovers forgive the company when it makes mistakes and zealously defend the company’s products and reputation.

How do you make your customers trust you this much? The answer is to give the user an “Experience.” It is not enough simply to make a website usable. The experience you create for the customer has to make them not realize that they are “using” it. It’s a tough concept to grasp, and the recipe changes from website to website, but the right combination of usability, creative design, writing, psychology and metrics and a strong brand will create an experience through which your customers learn to trust you.

Like the perfect score to a film, a good user experience is unobtrusive and transparent to the consumer because “it just works.” The Apple model will not work for everyone, but I often find myself challenged with a W.W.J.D. moment. Ask, “What would Jobs do?” and then look at other websites for inspiration.

3. eCommerce UX Pitfalls To Avoid

Just because a website is usable, does not mean customers will use it. Usability and user experience are in the same family, but more often than not user experience is the forgotten child. There are key areas in which the two must co-exist. Below are suggestions for some areas where websites should spend as much, if not more time, on the user experience.

Product Detail page

The product detail (PD) page is where some retail websites drop the ball. Too much focus is put on the design and usability of the home page, and that effort does not continue through to the rest of the website. More of the user’s time is spent on the product detail page than any other. Here, you need to offer customers all of the information they are looking for but present it in an intelligent way as well.

A few recent trends on eCommerce websites are “no-click” alternate images and swatches. A user simply has to roll over an image, without clicking, to get immediate feedback. The same approach can be used to zoom in to the image. Other UX options for the PD page are smart fields that let users know they still have to perform a required action before proceeding, without getting a typical error message.

The Checkout Process

Much like the PD page, the checkout process is a critical piece that engages the customer on a somewhat intimate level. However, unlike the PD page, where customers want to spend time to make sure they want what they are looking at, the checkout process should have as few steps as possible. Too many steps and the customer feels trapped.

But too quick and they feel like they have lost control. For instance, asking for credit card information too soon will seem out of order and no doubt scare even the most seasoned online shopper into abandoning their cart. Hidden taxes and shipping costs will make them feel like you are trying to take advantage of them.

Security

Always making sure your customer knows that your website is secure and that their privacy will never be compromised goes back to the issue of trust. It does not take much effort to display a message telling your customers that they are safe in your hands; a footer link to your privacy policy is not always enough.

Page Weight

A page’s weight is determined by its file size, by adding up every image, every line of code and anything that gets loaded when the user first hits the page. Libraries such as Scriptaculous, jQuery, MooTools and even Flash Shared Objects are often forgotten, but they all add to a page’s “weight.”

Some fascinating things are on the horizon for developers related to user experience and page weight. One notable development as of late was the release of Safari 4 Beta, which has support for HTML 5 media tags, CSS animation and CSS effects. As more and more of these features become standard in browsers across the board, we can look forward to offering users a better experience by using features directly in the browser.

4. The Value Of Content And Then SoMe

We cannot talk about user experience without touching on content and social media (SoMe). In order to be profitable, eCommerce retailers need to engage customers with their content and use social media outlets within and outside their own websites.

93% of social media users believe a company should have a presence in social media, according to Cone, while an overwhelming 85% believe a company should not only have a presence in but also interact with its consumers via social media.

• 60% of all online adults use social media.
• 85% believe a company should not only have a presence in but also interact with its consumers via social media.
• 56% of users feel a stronger connection with, and feel better served by, companies when they can interact with them in a social media environment.

When a website such as Facebook, which just turned 5 years old in February, has an active user base of over 175 million people, it is easy to see the unlimited potential to increase your wallet share simply by giving your customers what they want. Some options are:

• Give your customer the ability to add your website or product detail pages to websites such as Delicious, StumpleUpon, Digg, Twitter and Facebook.
• Give them the ability to customize their experience on your website. These experiences can range from customizing the home page as they see fit to uploading their image to go beside their product reviews.
• Create an RSS feed for your website. If your website has a blog or some other content area that changes regularly, give your customers the option to add it to their favorite RSS reader.

They say, “Content is king,” but if you cannot account for your king’s whereabouts, he needs to be beheaded. Your website’s content is only as relevant as its success. So, test as much as you can. Some tests you can perform to get hard data include:

• Website and email A/B testing
  Split your promotion views between your customers. 50% see version A, and 50% see version B. You can perform these tests for just about any purpose, but make sure your goals are clear before beginning. Figure out what you are trying to solve, and then move forward with the testing. From changing your website’s navigation to simply testing the style of your promotion’s copy, doing an A/B test will give you the relevant data you need to decide whether to update or remain the same.
• Polls
  Polls are quick and simple but, depending on your pool of users, can give you mountains of data. To get more people to take your poll, consider giving some kind of incentive to participate. Some polls are fun to take, but if you’re asking, “Which brand of television is better?” and not, “Who’s hotter, Jessica Simpson or Britney Spears?” then you may want to think more carefully about how much the feedback is worth.

5. Using Type And Color To Influence

Using color and typography is nothing new to designers. Using them in eCommerce is not much different. When designing for a retail website, your client is the customer. You are trying to convince thousands, tens of thousands, even millions of potential customers to click on your promotion and buy whatever you are selling. Consider the following.

Can It Be Read?

Most designers love to play with typography: twisting, shaping and contorting letters and word to obey your every whim, forming a beautiful masterpiece of skill and beauty. However, if your customer is not an artist, chances are they won’t get what you’re doing, and you’ve just lost a sale. Up front and to the point messaging is not always the answer either.

Consider using fun copy as an alternative. For example, if you sell banjos, instead of saying, “Shop New Banjo Supplies,” you could say, “Add More Twang to Your Thang.” As stated earlier with regard to designing for the customer, this depends a lot on what your target demographic is.

Can It Be Red?

No big surprise, red is the color of choice for error messages. But consider this when thinking about the user experience. What color does Target.com use for its error messages? Makes you think, right? Good! By the way, it uses red, too. The point is to consider alternatives. If your company has red in its brand, and the website has a lot of red as well, consider another color. You’re trying to get the user’s attention, so blue text with an alert icon could work just as well.

Consistency in Type: Stylistically and Creatively.

Making sure your headers, sub-headings and body copy are consistent across your website is easy. Making sure your website has a well-defined style guide is not. A style guide requires a lot of patience and care and is never complete. A website’s style guide should be a living, breathing document that continues to grow as your company and brand grows.

There is nothing wrong with this. As you find certain styles that perform better than others, find a way to add them to the guide. This document, depending on the complexity of your brand and the size of your website, could potentially be split into two separate documents: a creative style guide and a copy style guide. Each guide serves a different purpose but live together harmoniously.

Inspiration and Sources

Designing for the user experience in eCommerce is a multi-faceted puzzle. Some solutions work across the board, and some are specific to your website alone. The good news is that finding the solutions that best fit your particular needs is the most challenging and rewarding work a designer can do. It takes a rare breed to fully appreciate the value of the user experience, and if you are part of it, I hope this article and these resources give you as much pleasure as they have given me.

• Jakob Nielsen’s Alert Box – Current Issues in Web Usability
• Human Factors International
• User Interface Engineering
• UX Booth
• Pattern Tap
• Usability Post
• 960 Grid System
• I Love Typography
• Web Designer Depot
• A List Apart
• Function
• Endless.com
• Free People
• Facebook Statistics
• … and, of course, Smashing Magazine