Hunt, Ben

The Sphere of Design

The web design community thankfully seems to be wrapping up the "design vs. usability" argument. In case you missed it, the conclusion was: "Not either/or but both, and it depends."

3D Effects

Three-dimensional illusion effects are powerful devices that can achieve excellent results. They can also add significantly to overall page filesize, and can reduce usability if overused, so should be used deliberately and with care (unlike the title image above, see cooltext.com if you want one).

About Goals

I believe that the best way to design web sites is to bear in mind the goals of the site and its users.

About Personas and Scenarios

Personas are an extremely powerful design tool, which help you to visualise an end-product that you can be confident will suit your users' needs by helping them achieve their goals, and help you test your success.

Anatomy of HTML Tags

This tutorial describes some of the main attributes that HTML tags can feature.

Block vs. Inline Elements

HTML elements can be displayed either in block or inline style. The difference between these is one of the most basic things you need to know in order to use CSS effectively.

Case Study: Artorg Makeover

Artorg.co.uk is an online community for artists and designers. At first view, this is a really nice-looking site. It has an appealing, soft colour scheme offset with well-chosen graphics, and the content appears solid and orderly.

Case Study: Business Improvement Network Redesign

The Business Improvement Network is a highly successful free club for quality improvement professionals who meet together to share their knowledge and experience. A busy website serves the network's needs well, attracts new members every week, and gives members access to lots of free information.

Case Study: Foruse.com Redesign

www.foruse.com is the web site of Constantine and Lockwood. Have a look at their home page to learn more about them. This case study incorporates a brief critical review of the home page, plus a redesign.

Datasheet-Style Form

This worked example creates a compact form with multiple similar records, with the familiar appearance of a datasheet.

Design Melt Down

A web resource about web design techniques.

Favourite Logos

When I find a really nice logo, icon or button, I save a copy to file for future inspiration. Here's my collection of logos, with descriptions of why I think each one works. See article on designing logos for guidelines of logo design fundamentals.

The Future Web 2.0 Social Experience

A long article describing a future more connected world-wide-web and a few killer applications that it makes possible.

Grouping

Grouping similar elements helps the brain quickly decode a page layout. Proximity, Alignment, Containment, Rhythm and Styling are all tools that help indicate grouping.

How HTML, CSS and JavaScript Work Together in Web Pages

The three main technologies used to create modern web pages (HTML, CSS and JavaScript) each do different jobs. HTML should be used only for structuring content. Cascading Style Sheets should be used for applying all visual styles. JavaScript should be used for (almost) all interactive functionality, and should always be referenced in separate files, never written into HTML.

HTML Lists

Web browsers will show three different types of lists: ordered, unordered and definition lists. This tutorial explains to use each type, and how to make them in HTML.

HTML Tables

HTML tables should only be used to display data in tabular form. This tutorial explains how to create tables in HTML properly.

Inheritance and Cascading in CSS

This is a guide to help people learning CSS to understand how a browser works out what styles to apply to a particular element. As we saw in the introduction to CSS, there are lots of ways you can apply styles to a particular element. When more than one of these methods applies, how do you know which styles will be applied? Fortunately, these rules are quite simple, once you know them. This article tries to explain all. Of course, the best way really to learn this stuff is to try stuff out and see what happens.

Introduction to CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) is a smart way to add styling information to web pages. While it's possible to add styling to HTML (e.g. using the tag) HTML should only be used to structure your content, CSS is the only way you should apply styling.

Introduction to HTML

HTML was created by Tim Berners-Lee, the inventor of the WWW, and has been around since the very beginning of the web, and has changed a bit over that time, although it hasn't really gotten any more complicated. HTML is the markup language that's used to write web pages. It simply describes a web page's content and its structure.

Logical Order of Page Components

There is a natural flow to many visual interactions - the flow of a visual dialogue between page your features and your user's private mental commentary.

Logo Design

Logos are graphical shorthand that can represent a company or product, and communicate certain characteristics.

Rhythm and Repetition

Aside from alignment and grouping, elements can be linked using rhythm: a regular or irregular repetition of common stylistic features.

Site Personas and the Dialogue Process

Site Personas are analogous to User Personas. Whereas User Personas represent typical individuals in your target user base, together with goals and motivations, the Site Persona represents the site, embodying its brand and its goals. I often find it helpful to picture my web sites as information flowing both ways between the site and users. The Dialogue Process is a way to optimise your web site interactions by scripting them as conversations between your two types of persona.

Tabular List

This worked example applies styling and functionality to a basic grid of data to produce a simple form control that's a pleasure to use.

Text-Based Logos

Logos in the form of words or letters have natural properties that make them visually effective: (see also logos article): good recognition; good descriptiveness; and good presence.

Users' Goals

Once you've got a statement of purpose you're halfway to being ready to design. The next step is to understand who'll be looking at the page, and why.

Web Sites and Buildings

A good way to get insight into the complexity of web design is to compare it to more familiar design disciplines. Like web sites, buildings are designed to support a wide range of experiences, which involves design from the high-level architecture to signage and interior furnishings.

Why Code By Hand

If you're serious about reaching your full potential as a web page designer / producer, I believe you need to learn to code your sites by hand.

Why Most Web Sites Suck

We don't have bad web because it's difficult to create effective web sites, but because the people who make them are not properly equipped. Most people making web sites today simply don't know the essentials of design and how to apply them to the web.

Your Goal

You are on this web site because you have a goal. You may be in the process of designing or updating a web site. You may be developing your professional skills. Either way, there is some state that you wish to reach.

Your Site's Goals

If you already have a web site, or you have a site project in mind, what needs does it fulfil? How many different needs are there? How strong are they? Your job as a web site designer is to craft a solution that meets all the most important needs.

Your Site's Goals

Of course, the ideal solution is a win-win, where you achieve your goal at the same time as enabling your visitors to reach theirs. This section of the site introduces some tools to help find win-win situations.

Design Like No-One's Watching

Web designers frequently suffer under the illusion that other people look at their web pages the way we do. This is wrong. Designers need to develop the skill of looking at their designs through naïve eyes.

The Design Spectrum

'Design' encompasses a very wide spectrum of disciplines and applications, which address an enormous range of different problems. When designing a product, the techniques and priorities a designer should use change according to its purpose.

The Golden Rule

Everything that goes into your web site must have a purpose. Every single element and decision must help users achieve their goals and support the site's goals.

How to Make a Web Site

The absolute basic mechanics of how you go about making web pages and publishing them on the web.

No-One Looks at the Screen

One of the most fundamental factors in designing for screen-based media is: No-one likes looking at a computer screen.

Outsourcing Effectively

To use freelance talent effectively it's important to know your strenghts and weaknesses, to be aware of the risks and have contingencies to handle when things go wrong.

Pricing and Selling Web Design Services

Price your services appropriately in line with your competitors. Never sell yourself short - always make sure your clients appreciate what they're buying.

Pursuit of the Original

My friend John Endean is one of the most successful people I've met in web development. He taught me that the most important skill for a developer is laziness. When faced with a problem, the lazy developer will first find out if it has been solved before, and if possible rip off the code. The hardworking developer will stay late and try to figure out the problem from first principles. Who is most likely to succeed? Who is most likely to produce more successful code in less time? Who would you rather have on your team? I propose that web designers too should embrace laziness, and stop straining to create the truly original.

Setting Up in Web Design

A 10-step guide to setting up a web design or development business. I won't go into all the general stuff about running a business (although some of this info is relevant whatever you do). I'll keep it focused on how you can quickly start doing good work and earning real money.

Simplicity

Simple web design delivers huge benefits to designer, client and user. When a design doesn't seem to work, ask what should be taken away before asking what's missing.

Think-Then-Do

The single most difficult and important skill for a web designer is: Remembering what you're doing. It is incredibly easy to get bogged down on the surface level of design, pushing boxes and buttons this way and that around the page until it appears to have perfect visual balance. This is: A Complete Waste of Time. Before looking at how to design on screen, let's consider how to think like a successful designer. To be most successful, you've got to know what you're trying to achieve, and take the most direct path to achieve it.

Work Smart, Not Clever

As a general rule, designers and developers should avoid trying to be clever, and should concentrate on working smart.

Alignment

Alignment is another way of creating associations between visual elements, which help users quickly understand the relationships of objects on a page.

The Attention Map

Attention mapping is a tool to help you start to plan a visual layout around realistic communication between user and site. It can also be a helpful analysis tool, helping you work out what's wrong about a layout.

Basics

Using web sites should be easy and pleasant, just like a great experience in a shop, hotel, or library. I believe that the all Web sites can be made lovable - easy, rewarding and pleasurable to use.

The Business of Web Design

There's a lot more to being a successful web designer than designing good web sites. Your job is actually to satisfy your client. This section provides guidelines from our experience of running web agencies, which we hope will help you be more successful and more fulfilled.

Clarity

Once you have your content, arranged it into a likely architecture, and worked out where it will sit on the page, you're ready to design the display layer.

Colour

Colour is one of the designer's best tools. There are lots of ways to use it to help communicate a message. Colour can carry meaning, express personality, differentiate, frame, and highlight content.

Containment

'Containment' is the effect where one or more elements is shown as part of a group or category, through a visual mechanism.

Contrast

Contrast is the most fundamental design device: it differentiates elements; it brings out dominant elements; it mutes lesser elements; it creates dynamism.

Effective Text

In the web environment, text has enormous strengths. In many situations, using text delivers far better results than graphics. Web designers should be daring and use text wherever possible.

Goal-Oriented Design

To me, understanding goals is the single most critical factor in the success of any design project, and fundamental to the Web Design from Scratch approach. In this section, you'll learn techniques that help you discover your own goals and gain insight into what your target audience really wants. If you're working on a project, this section will help you get a clear picture of your purpose, understand the key goals of your target users and start to visualise a high-value solution that ensures everybody wins.

Imagery

Don't reinvent the wheel for functional imagery. Concentrate creative effort on imagery that adds value in branding or message (content).

Layout

The way elements are arranged on screen carries lots of meaning that we interpret subconsciously when decoding web pages.

The Process of Web Design

Designing for the web means designing sympathetically with the way people actually use the web, not how we think they should. This section looks at the discipline of web design, how to approach design as a job, and introduces some mental techniques for increasing enjoyment and success.

Readability

Everyone benefits from clear, readable text content. People with visual impairments benefit particularly.

Web 2.0 How-To Design Style Guide

Describe various common graphic design elements in modern web ('2.0') design style. Then explains 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.