Design and Build a Website Part 2

Posted by Donna Rouviere Anderson September 02, 2015

After holding an in-depth design workshop with our client as outlined in our previous blog entry, Design and Build a Website Part 1, the designer and developer need to work collaboratively on the next stage of designing and building the site. 

The designer:

  • Refines the scenarios and sketches that she started in previous stages of the project.
  • Lays out every screen, capturing the decisions made in the design workshop with the client and adjusting them as needed.
  • Revises the list of requirements as needed, listing problems and incomplete items.
  • Starts the creation of a visual style guide and makes sure that it works coherently with the website's behavior and form.
  • Collaborates with others to ensure that graphics and labels are appropriate to the brand.
  • Keeps the project on schedule and supplies mockups and image files to the developer and client as needed.
  • Creates one or two archetypal screens showing the website's visual design, then follows this up with mockups of the other screens based on the archetypes but containing appropriate page-specific features. The screens include a grid for the layout, the fonts that will be used and their size, color and style for various purposes, and how website controls and data will appear visually.  The designer is responsible for adjusting and evolving this visual system as more detailed designs for the content and structure of each screen are create
  • Reviews the screens with the developer to ensure that the controls are drawn so that they will be compatible with the way the code is being drawn.  
  • Defines the components of the website and its interaction with any associated products and services.

The developer:

  • Iterates and refines the form and underlying structure of the site and applies the design language and function to that form to create the site.
  • Interfaces with other technical experts to create the system as needed.

In an in-depth design session, the designer and developer first need to figure out what they need to accomplish to finish the site, listing the tasks and deciding which to address first.

They need to work through:

  •  Every scenario that was modified during the client design meeting.  
  •  All of the sketches from the client design meeting.
  • Every design decision that was made in the client design meeting.
  • Every still-open question, deciding how it will be addressed.
  • Every remaining action item, the person responsible for completing it and when it should be done.
  • Any important design directions that have been ruled out, why and the implications for the design.

They need to consider the website’s context. Is it an application that people will use for long periods of time to accomplish complicated tasks? If so, the tools and navigation can be optimized for people with intermediate skills who can quickly master the features that they generally use but not every aspect of the website. The data or content should be the main focus. The interface can include drop down menus, icon buttons and other space-saving techniques. If, on the other hand, the website is intended for people to perform a narrowly focused simple task, users will be less willing to invest time in learning the navigation. It should be simple and in plain language. Many websites are a combination of both, with complicated tasks performed by a limited group of users in one section and simple ones performed by a more general audience.

Next, the designer and developer need to consider how to avoid behaviors that will do harm - features that are awkward or hard to use and may cause users frustration, overbearing design that makes people feel ill at ease and bad design that can lead to costly errors or waste the user's time. The goal is to produce a website that improves people's condition in some way and makes their tasks more pleasant and natural, especially in the environment in which it will be used. The website needs to be as practical as possible while fulfilling requirements such as advertising. 

If the website fits into a particular niche, the designer and developer need to ruthlessly cull anything that doesn’t fit its purpose.

The developer needs to purchase all domain names needed for 5-10 years and consider the needed space requirements for the website's hosting as well as making a list of needed e-mails and social media urls associated with the site. 

The next consideration should be the website design's elegance.  An elegant solution is usually the simplest complete one. A design is complete when it accomplishes all that it must, but there's nothing that can be thrown out. Use the smallest number of screens, widgets, and hardware buttons possible to accomplish the task. Minimalism isn't the goal; coherance is the goal. The site must have an internal consistency that makes all of its parts seem to belong together so that the underlying design will become invisible to the users. The designer should make careful use of contrast and layout to emphasize certain information and functions and to give the design some pop. 

The website should enable people to think very hard about the task they are trying to accomplish, not the functions of the website. Make sure people can easily find what's available on it and the content is easy to read. It should be easy for people recall or retrieve passwords, file names, locations and procedures on the site as well as to recognize what icons mean. Physical actions such as typing, using a mouse or other behaviors should be as easy to use as possible. As much as possible, a single screen should contain easy access to all of the information and tools necessary to perform common related tasks.  Don't make people navigate more than necessary.

Use your scenarios to decide what tools and information should be tucked away on drop-down menus or tabs. Don't force users to do anything you can make a reasonable guess about. Set it up so that users can get started with as few decisions as possible.

Don’t present data in the way the company is organized or the product is built. Instead present it in a way that fits the user’s mental model of how it should work.

Whenever you are inconsistent, have a compelling reason for doing so as it increases work for users.

Consider all of the ways someone could break the product, but don’t let those drive the design unless they are a central issue.

Consider whether you should use these technologies to present information:

  • Filtered searches
  • Hierarchical navigation menus. These are common on mobile phones, kiosks and some other technology, but are inefficient and annoying when users constantly switch between tasks.
  • Tabbed interface. These let users switch views between distinct sets of tools and information, with the navigation still available. They are useful when people perform distinct sets of tasks within a single project, but are inappropriate for tightly intertwined tasks. They generally don’t work well on small devices. They often work well for sequential activities.
  • Wizards - These are a set sequence of actions that users must pass through, step by step. Most offer the ability to page forward and back. They are not a good choice for anything users need to do often.
  • Multiple document interface  - These are interfaces that allow multiple windows to be open at one time and be free-floating and resizable. They are useful for comparing content between two documents or copying and pasting content from one document to another.  

 Combining some version of these different patterns often provides a more flexible solution, but patterns should be used as consistently as you can. For example, organize navigation either by nouns (objects) or verbs (actions) consistently.

Determine what platforms will be used and how that will affect the site’s structure, how it will work on a handheld device and how it will work on a large screen in a conference room.

Determine by what mechanisms the user is likely to navigate, select items, enter data – a touch screen, keyboard, mouse, etc. How much text will the users enter and how will they need to navigate? How will the output need to be optimized and made available? Touch screens are generally not great for text input. They require large controls. A cursor-based selection with a mouse or trackball is slower than touch or buttons if you have just a few options. The size and orientation of the screen you design for should be guided by the type of content you need to display and the environment it will be used in. For lists, require portrait orientation, as extra horizontal space is usually wasted. Landscape screens, on the other hand, are better for columns of data, graphs of events over time and video. When possible and appropriate to the content, allow for viewing either way on mobile devices.

Now choose among the possibilities raised for this project those that are the most successful to refine and present to stakeholders. To do this, do fast iterations on a white board or sketch book and throw out the inferior ones. Then refine the ones you have chosen before showing them to the client.

Now quickly run through all of the main user scenarios to see if they work within the framework you are creating. Find alternatives if necessary and throw out any far-out solutions after considering what is worthwhile that you could incorporate.

If you have multiple ideas about any part of the project, choose at least two to refine, one that represents the best interaction but may involve pricier components and one that will provide a decent experience at a lower cost.

Consider what will look most distinct from the competition, what will be the smallest or sturdiest or will emphasize another desirable quality. Consider what you are trying to say and then whether your design iterations do it.

The two ideas the designer and developer present to stakeholders need to include a concrete vision of what the website is, how it works and how it looks. The solution should be thought of as a complete system even if it goes beyond your specific mandates. Try to anticipate the functionality you expect to build over at least the next three to five years.

Show stakeholders your ideas as soon as they are coherent.

The interaction design should drive the visual design by determining what data or controls get visual emphasis. Visual design should drive interaction design by determining how much data can legibly fit on the screen and how the brand will be presented.

The designer should refine the chosen ideas while the developer is working on a sketch of the technical structure. Sketch the major screen states (each distinct screen, interaction or other change that's essential to understanding the flow), what's going on in each and define how users get from one to another.

Use smaller thumbnails with arrows to indicate relationships and state changes, such as when a selection in one pane on the screen makes something appear in another. Use short notes to point out critical issues or describe the action. Number each picture and corresponding scenario and caption it at the bottom.

Sketch:

  • The main navigation -- Home, About,  Products/Services, News, Blog, Contact,  Client log-in, etc. and any sub-menus under them.
  • Sub navigation
  • Footer navigation - Testimonials,  Privacy Policy, Contact
  • Other components - Buttons that promote action, e-mail signup box, Social Media buttons.
  • The home page, which needs to clearly communicate who the website represents, what it does and who it serves – the ideal customers. It must attract them. You need to include a logo, photos, a privacy policy and other similar information on this page.

Revise the site map. Include all functions, modules, etc.

Decide on naming conventions for the pages. Assume that file names affect pages’ rank in search engines. Name them for the content of the file, whether the file is an HTML, PDF, or a graphic,. Keep them brief. Make the website address easy to remember, quick to type without error, and easy to link to. If you are posting newsletters or other periodicals on the web, in html, pdf, or word format, organize your files numerically from larger to smaller time unit - year, month, day. This enables sorting chronologically and alphabetically at the same time. Section names should be succinct, standard web conventions, and every department should use the same wording to apply to the same type of information. Use the same text for a link as for the page heading of a link target. Page names should enable users to recognize what content the page contains.

Revise storyboards/wireframes, giving each page in the wireframe its own storyboard page that defines all of the functions, features and content. Show them to the client for approval.

Write the text for the pages or insert the copy provided by the client if applicable.

Now revise the project plan to list remaining tasks, the effort they will take, priorities and the order they need to be done in. Add ten to 15 percent time to allow for forgotten details, unexpected problems, communication delays and other potential frustrations.


« Previous | Next »