# Project 5: Web Design Process

# Modern Web Design Workflow

Points: 150

This assignment will let you practice designing a website from concept to completion using modern workflows. You will create a project brief for a new site, a sitemap, a wireframe, a "styletile", and a page design.

# Objectives

• Coalesce everything you’ve learned about web design into one full-featured project.
• Introduction to modern web design workflow by working through a simplified version.
• Design and analysis of websites and user interfaces.
• Exploration of information architecture concepts.
• Introduction to “wireframing” (low-fidelity digital sketching).
• Practice designing full-page web layouts.
• Application of the skills you’ve previously practiced regarding designing web components and content hierarchy.

# Project Brief

Step 1 is to come up with a concept for your site.

# Some Guidelines

Your full site concept should consist of at least 6+ pages, although you will not need to design all of them. It could be a site consisting of 100s of pages, or just 6. The goal is to aim for something that might have a lot of content, but you’ll only end up showing smaller pieces of it for this project.

It will depend on your concept, but you will likely need to come up with the entire architecture for the site in an outline format, you will then focus on the three (or so) most important pages.

So don’t be afraid to think big, the rest of the assignment will only focus on the most important parts.

• Don’t be afraid to make your site interactive or have useful tools. Even if you don't know how to code the interactivity, you can still concept it and show the idea in your designs.
• Make your site useful and informative. It should have text and image content. You will show a small portion, but the implication is there could be a lot deeper in the site.
• Pick something you’re passionate about, choose a subject that will keep you engaged.
• But don’t make it about yourself. No portfolio sites.
• It doesn’t have to be a million-dollar idea. Keep in mind, the main objective of this project is the workflow itself.
• Come up with a few different ideas to discuss with me so we can pick the one that will fulfill the goals of this project the best.

# Define your audience and write your brief

You will need to write a "design brief" for me to approve in order to move forward with your project. It should follow the following format:

1. Briefly describe what your website is about or otherwise describe its function.

2. Company / Organization

   • Describe the organization behind the site. Who is the site owner (real or fictional)?

3. Purpose

   • What are the reasons someone would come to your site (information, entertainment, news, look up products/pricing, make a purchase, get contact details)?

   • What is would the key metric of success be (sales, contacts, influence)?

4. Audience

   • Write a bit about your target audience. Who are they, what are their interests? Are there any important demographic aspects to your target audience (age, gender, economic status, location, and language)?

# Information Architecture & Sitemap

Next, you need to plan the architecture of all the pages of your site.

Earlier, you were directed to have a certain number of pages in your site. Now it’s time to document those, categorize them into sections, and map out their relationships.

“I often tell clients that Information Architecture (IA) establishes the baseline, or foundation, for a solid site structure. It helps create the traffic patterns and navigational routes that get the customer from A to B in language that is helpful and easy to understand. In fact, IA is the first step in meeting customer goals and can therefore increase brand awareness and product or service sales.”

— Keith LaFerriere

Flexible Fuel: Educating the Client on IA

# Tasks

• Define your main content
• Decide on which pages those content items will live
• Create a tree-style map of those pages
• Define your navigation areas and what they contain

They’re typically shown from the top down; where Home and any other common landing pages would be at the top, main section pages underneath (often corresponding to the main navigation), sub-sections underneath that, and so on.

Each box on your sitemap should represent an individual page. You do not need to list out every piece of content that goes into a page (save that for wireframing). If it's not a full page, it shouldn't be a box on your sitemap.

Even if that page has dynamic content, each box should represent a unique URL on your site and the hierarchy would be represented via URL. http://mysite.com/products/apparel would represent a page called "Apparel" underneath (further down in the hierarchy) "Products", which is underneath "Home".

# Examples

The most common would be a tree view:

• Sitemap Example
• Sitemaps (Every Interaction)
• Sitemap with some "Flow" Diagramming

You will also see the term "sitemap" used in a few different ways. It can mean a page on a site that lists all the pages, kind of like an index. It can also mean a file with links to all the pages of your site that you can submit to search engines to make sure your site is well indexed.

Here, when we say "sitemap" we mean a diagram of your website's hierarchy. Since this diagram represents the pages and their relationships, it can be though of as a "map" of your site.

We’re aiming for a traditional sitemap on this project, that must account for all pages on our site (large amounts of repetitive pages would be abstracted into a “stack” or some other visual metaphor). Additionally, incorporating some “flow” concepts might be useful, especially if the user flow is particularly complex.

# Navigation

Working out the Information Architecture and creating a sitemap helps you define your main navigation items. A large site likely doesn't have a link to every page in it's navigation. The IA work here makes it clear what should be in the navigation and how the nav should be structured. Orphaned pages that don't live in the hierarchy are good candidates for "Utility Navigation".

# Guidelines

You can develop your “sitemap” in the style and program of your choosing. I'm providing an Illustrator file to assist you with the “thumbnail” style.

Thumb_Wireframing_03.ai (right-click, save download as)
Thumb_Wireframing_03_leg.ai (if you have trouble opening the above) Thumb_Wireframing_03.sketch (also available for Sketch)

A thumbnail style like this let's you show, in a really generic way, the kind of content that might be on a particular page.

I also have a Sketch library for making flow charts and sitemaps. You use it a bit differently than the above files. By going to "preferences" > "libraries" you can add this file to your Sketch library, and access it's symbols in any file from the insert menu.

ux-flow-kit-sketch-2.0-up-50.2.zip

Minimum Requirement would be a simple document with pages represented by rectangles with a clear hierarchy (levels of content). Dimensions of this document are up to you.

# “Wireframing:” Planning your most important pages

Wireframing is creating a “low-fi” digital sketch of your site. The purpose of this exercise is to plan as much as possible and work out any potential issues before jumping into the design phase of the project.

With my help, you will choose 3 main pages from your sitemap to wireframe both mobile and desktop views.

# Examples and Resources

You'll find a lot of tips and suggestions and opinions about wireframing, we will only have time to touch on the basics, but this article is a good summary of how far you can take wireframing, especially on a large project that might involve many team members and a large budget.
Wireframing – The Perfectionist's Guide

You need to wireframe both "desktop" an "mobile" views.

You can find more examples of wireframes on this InVision board

# Tools

Choosing a tool for wireframing and prototyping is difficult. It depends a lot on the level of detail you want to establish. Simple thumbnail wireframes can be used to plan the IA and content areas as I’ve mentioned above, and further detail can be achieved with static wireframes consisting of gray boxes and text in Illustrator, Photoshop, XD, or Sketch.

# Parts of a wireframe

With wireframe, we are now at the page level of our hierarchy. Your wireframes should show the content hierarchy of the items that go on that page. However, they don't need to have specific content and can show content somewhat generically.

Generally, aim for headings and actions to have the real copy, but body copy can just be lorem ipsum. Photos are almost never necessary unless you want to pick a few generic ones to represent "photo" in a generic/abstract way.

# Prototyping

For the sake of time, I am not requiring prototyping on this assignment. However, if you are using Sketch or XD, it may very well be trivial to add some basic prototyping to your wireframes that will help in the "user testing" exercise.

# User Testing

For this exercise, you will be grouped up with other students to analyze each other's wireframes. I will post groups here when ready.

Typically, you would do user testing on a finished or nearly finished site or application. However, I want to do this exercise because now is a good time to get some feedback on your wireframes before you advance into a more complete and complex design.

Someone other than you should be operating the computer and going through your wireframes. Switch up the "driver" for each member of the groups review.

Your role when looking at another’s wireframes: Okay, these aren’t real sites, they may or may not clickable, but you should still be able to look at the wireframes, and imagine yourself clicking through. Look through the wireframes and describe what you see, what you think certain parts of the page are for. If you can't tell, ask.

Your role when you’re showing your wireframe: Walk your group through your brief and sitemap quickly, pointing out which pages you've wireframed. As the driver points things out in your wireframes or asks questions. Answer, but pay attention when your answer seems to be need a lot of explanation. It should be obvious what the items on your page are for. If you don’t have an answer, or it takes an inordinate amount of explaining...congrats, you’ve just found an improvement you can make through our facsimile of user testing.

Collect information from your user testing session, make any necessary adjustments, and make sure you have included the necessary items on your InVision board as noted below.

If you find your wireframes need more work than you can complete in class, feel free to take another period to refine them as you start your styletiles.

# Style tiles

The next step is to develop a "Style Tile." This will allow us to define the look and feel of our site, and quickly iterate changes, rather than start with a complex, full-page. design. This allows us to efficiently show the look and feel of the site as a whole, rather than focusing on one particular page.

We’re going to continue to approach this project with the idea that it is a large complex web project, even though we’re only touching bits and pieces. As you can probably imagine, it would be a vast and complex undertaking to design an entire large site by having an Illustrator file for every single page and possible configuration of a site. Instead, developing style tiles, style guides, and wireframes—along with careful art direction—can be an efficient way to get a project up and running. It’s also a great way to begin showing a client work, without too much initial time investment.

# What's a "Styletile"?

Audience: Although style tiles are great for communicating amongst a design and development team, the ultimate audience for them is the client. They’re meant to quickly get feedback and show possible directions.

Level of Detail: Style tiles are general. They exist to communicate mood and the general design direction.

# You can find examples of style tiles and style guides on this InVision board:

https://projects.invisionapp.com/boards/ST34OYIN2HV3R/

# Tasks

1. Research this concept further by reading the following articles on Style Tiles and Atomic Design:
   • http://www.styletil.es
   • http://atomicdesign.bradfrost.com/chapter-2/
2. Start creating your style tiles in the program of your choice...you’ll need to define:
   • Branding (minimal, don’t focus too much on this, but do give your site a name and type treatment)
   • Headings
   • Sub-headings
   • Body text styles
   • Link and/or button styles (<a>)
   • A color palette
   • Borders, textures, ornaments, etc.
   • Any other user interface elements that are central to your site
   • Photographic style (natural light/white background/cool/warm/faces/crop styles/etc.)
   • Some “mood words” (optional—see reference material)

# Specifications

Create your styletiles at 1200px x 900px

You will need to create at least one styletile. Feel free to create additional tiles if you need more room than this format allows.

# Page Design

With my help, you will choose a key page on your site and produce a full design. It should be one of the pages you chose to wireframe and it should show the most important aspects of your site.

It might be the home page, or another "landing page" (a page users would likely find on your site via search engines or social media).

...there are five important things you can do to make sure they see—and understand—as much of your site as possible:

• Create a clear visual hierarchy on each page
• Take advantage of conventions
• Break pages up into clearly defined areas
• Make it obvious what's clickable
• Minimize noise.

—Steve Krug, Billboard Design 101

It might also be best to choose a page that is simply integral to the function of your site and may only be accessible to users with accounts.

# Specifications

Exact file dimensions and any grids or guides you use are up to you. But take some time to research common desktop and mobile “breakpoints” and carefully consider how your designs might be used under different user circumstances.

Your desktop view should show what happens beyond your maximum breakpoint. Both views can be as tall as they need to be.

But, here are some ranges of widths as a guideline:

• Mobile: 320px–480px
• Desktop: 1024px–1280px

You will need to show both the mobile and desktop designs at full height and provide versions that show a realistic browser view. This will show us what we'd be likely to see upon first landing of the page.

# Presentation

# Brief

After discussing these items with me you should place them as a text note on your InVision board under the heading:

"Project 5: Website Brief"

# Sitemap

Please place your sitemap, in the an appropriate format on your InVision board, under the heading:

"Project 5: Information Architecture"

# Wireframes

Please place your wireframes as PNG images on your InVision board under the heading:

"Project 5: Wireframes"

Feel free to attach a PDF as well, but PNGs are required to show during critique.

# Style Tiles

You can create more than one style tile if you wish, and each style tile should be 1200px x 900px, landscape, in PNG or JPG format. Upload to your InVision board under the heading:

"Project 5: Style Tiles”

# Design

Make a section on your InVision board called "Assignment 5: Research" Post the research examples in this section. Arrange them neatly.

Make a section on your InVision board called "Assignment 5: Designs"

Place your designs with a realistic browser height for their view. You could mock-up these designs in a desktop and mobile browser if you wish. Arrange them side by side.

Additionally, place your full designs at their full height.

If you have additional designs, or want to show state changes, you can put as many designs as you want here.