WEB105 » Visual Design, Producing & Building

Your website is a product and is unarguably about accessibility and the user.

Creating the Visual Design

Let’s remember that your visual design is something that will actually get used. Therefore, achieving a balance between the limitations of the web and brilliant creativity is more challenging than ever.

Let’s also remember that:

  • Concepts need to interact with technology
  • Finding out that your design won’t work after sign-off of the design is not acceptable
  • By this time in the process, the clients are dying to see something

Developing Concepts

Developing concepts can be tricky at best. When developing our visual design concepts we must:

  • Pull out the creative brief and use it as a springboard for the creative process
  • Take a look again at the Technical Specifications sheet
  • Follow the overall site objectives while creating something functional
  • Serve the user’s environment and capabilities
  • Create a design that will be (HTML) producible
  • Review competitive sites and see what they are doing
  • Let the clients’ directions direct you.
  • Pull all of the specifications together and paint around it

Following these guidelines will aid in helping us through this stressful process.

Presenting Concepts

Before we present our concepts, the designs should go through an internal review:

  • Post (usually) three comps on the client staging area for review
  • Plan on two to three rounds of discussions and revisions

See Also:

Master Art & Graphic Templates

This is where the approved look and feel needs to be translated and applied across multiple pages.

  • Remember that the approved look and feel is just an approved direction and will need refinement along the way
  • A Master Art file should be constructed as a master AI/PSD file with all of the appropriate specs and layers to be prepped for slicing, optimization and HTML production.

See Also:

Producing & Building the Design (Protosite)

A protosite is an HTML/CSS build of your design that is used to confirm the flow of the pages, the navigation and the content.  A protosite does also contain light scripting—rollover buttons, drop-down menus, forms, etc.

A protosite will help:

  • put all of the pieces together that you have designed, planned and gathered
  • to see if your site is shaping up as planned.
  • to expose content and information-flow design issues as well as navigational issues
  • find holes in your content via the protosite
  • the client reevaluate some of their decision making

See Also:

Slicing & Optimization

  • At this point in the production phase the graphic templates are ready to be sliced and optimized for HTML production
  • The production team needs to assess the best method for slicing up graphics to put them in the HTML templates

See Also:

Creating HTML Templates & Pages

  • Slice out the headers and navigational items
  • You can create separate tables of the separate items and place them in one HTML template page
  • You should make one template page for each section of the website; index page, main pages, secondary pages, etc.

Implementing Light Scripting

  • Rollover buttons, pull-down menus, pop-up windows all are the result of light JavaScripting
  • Implement your light scripting to each template page before you move on to populating your pages
  • Test and look for errors

Populating Pages

  • With your HTML template pages built you are now ready to save these templates as the rest of the pages and bring in your content
  • Your project manager should have been tracking the content
  • He or She should hand off the content and let the producer know where it goes; what page has what content
  • Invisible content should also be placed at this point; meta tags, alt tags, title tags, etc.

Integrating Backend Development

  • The logical place in the workflow for the backend and front-end to integrate is during or right after all of the HTML pages are complete
  • However, at the beginning of the production phase, gather all of the production and backend engineers together to make a plan

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.


  1. Matt Wojo says:

    Thought everyone might appreciate this amazing email exchange between a designer and a client who wants free work… http://m.tickld.com/x/i-wish-i-worked-with-this-manhes-hilarious

  2. Sean Walling says:

    This is a link to a rather interesting article I came across that may or may not help with this phase.

  3. Max says:

    Reminder to Mike — You asked someone to remind you to fix the link to the ‘examples/buidling-an-html-template-from-master-art’ link.


Leave a Comment:

Don't forget to get your Globally Recognized Avatar.