Think like a Designer: the Creative Process and Web Design

In an era of brand awareness, many of the world´s most profitable companies consider design their most effective business tool. Executed well and applied consistently, design increases brand equity, and business growth.

Designers consider all the determining factors that influence customers such as personal preferences, product style,quality, technology, usefulness and appropriateness.

The first steps for a designer are
  • Knowing our customers and speaking their language The real leverage with a client comes when we position ourselves as their strategic partner. That kind of relationship implies that you have an informed point of view on the customer, the product or service and the business model. The way to persuade clients is to concern ourselves with understanding their business model or finding ways to cement relationships with their customers.
  • Identifying the problem Design is a problem-solving discipline. By approaching the project from the clients perspective, through initial contact, supplemented by preliminary research (through the Web, interviews with customers, etc.), we develop an informed point of view about the business objectives, competition and other factors that impact success.
  • Giving information Business publications increasingly cover the importance of design to strategic success. We'll share design-related articles in the business press or mainstream media with colleagues and clients. 
Excellent sources for case studies include: 
The Corporate Design Foundation

Web Design Principles

1. Visual Design
Translating the goals of the site and the concerns of the visitor into a visually satisfying experience. 
Design Basics:
  • There is a recognizable look and feel to the site
  • images are appropriate to the site´s purpose
  • Recurring images or theme unifies the site
  • Text is easy to read on the background
  • Different levels of importance are shown visually
  • Recognition is easier than recall. Users are not forced memorize information
  • Minimize mouse travel distance between successive choices
  • In order to reduce download time, the use of may be limited graphics to products and features. Graphics are discouraged for navigation elements and key information
  • Colour palette choices are appropriate: - Keep contrast high: avoid using text, graphics, and a background of similar lightness - Colours that are meant to distinguish items like links are significantly different in two ways, such as hue and lightness - Avoid using text, graphics, and backgrounds of similar hue - Avoid combining text, graphics, and backgrounds of similar saturation - Avoid using busy background tiles.

2. Content Design
Identifying, organizing and presenting the content so that the audience can easily use and understand the information presented. The goal of content design is to support information access.
Here are general guidelines for selecting specific types of media for presenting information:
  • Text Use to present information that has to be in a narrative form. For example, product specs company policy, corporate information.
  • Static Graphics Use when you need to illustrate what something looks like, or to present statistical information graphically. For example, product shot or flow chart.
  • Animation Use to show movement to clarify an idea or to add visual interest. For example, to animate a process or a product life cycle.
  • Video Use to emphasize audio or visual clips of individuals or events. For example, footage of product being manufactured or interview of the CEO.
  • Audio Use to incorporate sound as a critical aspect of the information being presented or to create a mood or impression. For example, a sample track of a new music release.

Information Design guidelines:
  • Use words that customers understand. Give clear product names, not abbreviations.
  • White space vastly improves the presentation for easier text reading and better comprehension.
  • Break paragraph into groups with subheads, where one section begins and the other ends.
  • subheads should be closely associated with the text below
  • Keep the basic customer look to around 1 to 2 maximum scrolls.

3. User Experience
This addresses what the audience can do at the site. How easy is it for them to do these things [browse, buy, fill out forms, navigate the site etc.] . Does the site respond quickly, facilitate problem solving and do all links work.?

4. Merchandising
How the products, features and services are displayed, advertised and promoted.

By selecting the most appropriate products, promotions can be targeted to the right customers, at the right time. Opportunities to feature products include:
  • new items
  • popular items
  • clearance items
  • occasion-based sales items

For perfect targeting, the retailer would have complete information on the specific shopper, including past purchases at other stores, known needs and even unarticulated desires. For example, do the products promoted:
  • appeal to target customers?
  • aid with overstock clearance?
  • optimize margins?
  • introduce new products or new product categories?
  • increase average order size. For example, through multiple product bundles?
  • aid with load balancing. For example, promote orders at a certain time of day or week?
  • conform with typical customer purchases [based on transaction data]?

Seasonal Presentation
What are the features that give people something to talk, to get excited about, something to keep customers coming back. If your customers anticipate that they will find something new on a regular basis, they will visit (and buy) more often. The concern for designers is that the site must be designed so that it is easy to apply a facelift that represents seasonal changes.

What products should be suggested to the customer and when to suggest them. Suggestions:
  • Place impulse buys in prime real estate on the home page and throughout the site to convert browsers to buyers at every logical point in your hierarchy.
  • Apply best-of-breed "bricks & mortar" merchandising techniques to make shopping a familiar experience. Features, promotions and gifting tools will drive sales online just as they do offline
  • Integrate content and commerce to increase conversion. Great editorial content serves as a virtual salesperson. Positioning products alongside articles, reviews and rankings will encourage on-the-spot buying
  • Personalize the experience to create loyalty. Features including "my account" where customers have ownership of information could build a sense of belonging that brings them back to the site. Use this profiling data to send customers targeted e-mail - relevant messages will result in sales
  • Continue to reward customers for their loyalty. Frequent buyer programs that give special discounts or incentives for shopping often will drive repeat business
  • Make the experience interactive. Use technology appropriately to give customers a reason to shop online, but offering functionality that is difficult in-store. For example, online order tracking. Tools like configurators show "how-to" and entertaining games keep shoppers involved with the site while adding value to their experience
  • Sensory adaptation does occur on the Web. If you want a user´s full attention, you´ll have to vary things significantly and often.

5. Branding
The particular characteristics that identifies a company and it's products. Applied to the site, they let visitors know they´re on the site projecting the desired image attributes of company and sets the tone and manner for communicating. It is recommended to separate the permanent architecture of the site from those that form the "exhibits" that may come and go over time.
In applying the brand, the designer ensures:
  • Consistent color pallette
  • Consistent use and size of type.
  • An awareness of the companys´ identity through the web site that builds customer familiarity.
  • Simple page design that move customers towards completion of their goal.
  • Few, and small supporting graphics.
  • The use of elements that help create an aesthetic feel, applied sparingly.
  • Large graphics provided only when it is relevant to the customers´ goal. For example, to "zoom in" on a product picture.

6. Production
The site is constructed in an efficient and effective manner from the technical point of view so that it is easy to maintain and keep updated. The designer must account for the characteristics of the probable environment in which the user will access a site.
Technical Brief document reviews the following:
  • Hosting Environment
  • Target Audience Configuration Assumptions
  • HTML Component
  • File and Folder Naming
  • Navigation Systems
  • Functionality

Cole creates a chocolatey brownie treat for the family

The Creative Process
Phase 1: Strategy
1a. Brainstorming
  • Read all documentation.
  • Get information and listen.
  • Research the competition.
  • Internalize the creative brief. Get to know the client's business, who their users are, and what they want.
  • Immerse yourself in the culture of the customer.
  • Get ideas from everywhere. Surf the web. Visit thrift stores, bookstores, caf├ęs, museums, art galleries, surround yourself with magazines that the user would read.
  • Make lots of sketches and thumbnails. Every idea does not have to be a valid, logic-driven one.
  • Start with the key pages of the site.
  • Explore what´s possible with different technical effects [dhtml, server push, steaming audio, multimedia components]
  • Work on ideas that will drive the project forward. By the end of this phase, you will have a schedule and a set of deliverables.

    1b. Design Language Explorations
    • Start by creating several pages of design exploration. These are not web pages but visual expressions of a particular look or feel to see which visual elements work together.
    • Play with backgrounds, colours, collage, headline effects, type to come up with the general rules for a given look. This work can be done in Photoshop or Illustrator.
    • For resources, use images from other sites, scans from magazines or stock photography.
    • Consult with the client on developing structure, navigation, style and technical components. Once you´ve chosen a basic look, it can be then applied to various pages of the site.

    Phase 2: Design
    2a. Grids
    • Use a grid system to create structure in two dimensions to layout the elements in a consistent format.
    • Designate different areas of the pages for different functions
    • Designing for the web must accomodate a wide variey of viewing conditions, so in some cases, the proportions are absolute, in others, they are relative. For instance, what happens if the viewer expands her window.
    2b. Navigation
    • Keep it simple
    • Develop a flow mock up, on large projects, that illustrate how a person will move around within the site.
    • Using a program, like Net Objects Fusion, you can build a text-based web site that serves as a pint of discussion for moving throughout the site.
    2c. Presentation The creative/art director should be prepared, preferably with one or two design staff to act as back-up for presentations to the client. Typically, you´ll choose three finalists: the favorite, the wild and daring, and the more conservative which you´re pretty sure they´ll like. The main points to present are:
    • A reiteration of the goals.
    • The site structure.
    • Design language alternatives, if appropriate.
    • The home page. As many versions as you decide to show. Make a firm decision. Show the least amount of versions possible, keeping other versions as backup.
    • A representative second-level page, showing one or two alternatives
    • A representative article or product feature page.
    • A first pass at navigation.
    • An outline of a content schedule.

    Phase 3: Design Development
    3a. Iterative Design The goal of the first presentation is to establish a design direction, then experiment with one feature at a time. For example:
    • colour studies
    • typeface studies
    • navigation schemes
    • animated elements.
    It is helpful to work in black and white first to confirm idea of visual weight and emphasis of items prior to applying colour. Once you've made a firm decision, then we´re ready too present the developed design to the client.

    3b. Modular Design Start creating design models that can be handed over for development.
    • Properly designed, each web page has areas that perform different functions: global navigation, local navigation, local identity, main features, teasers, ads etc.
    • These areas can be broken down into templates that either separate the design from the content or make the content easy to change. As the templates are developed, you can work with dummy text.
    • The programmers continue working with a dummy front-end until each side has finished debugging.
    • At the end, the programmers load a working set of HTML templates into the database and merge them with the final content for presentation.
    3c. Content Development
    The client must own the content schedule and start delivering. It is important to keep the client focused on content. A well-documented design process will allow the client to focus on the content and not waste too much energy on design, site map and functionality issues.

    Phase 4: Production
    Take the design model to a production model by creating functioning HTML pages.
    • Design Safety Check is a review of the design with the lead developer to ensure the approved visual model is viable and ensure that the final design is implementable.
      The check may involve coding a page or two, checking file sizes, page weight. If all checks out, you have proof of concept and can move on
    • The Mark-up and layout Spec is a sketch of the page and how they are implemented in HTML and Cascading Style Sheets. It establishes dimensions of the various areas of the pages, the approach to animation, background, foreground, typographic specifications.
      This promotes a discussion between designers and developers on how the site will be implemented, accommodations for different browsers and platform specifications.
    • The HTML prototypes The designer produces the key pages of the site. This exercise builds the skeleton for the site and sets the HTML conventions for the site.
      This prototype is tested carefully before going into production.
    • StyleGuide Document the file, directory structure and naming conventions for the site in combination with other template decisions made and the process used so a new person can use it to modify the site.