Week 13: FINAL PROJECT

FINAL PROJECT: DESIGN PHASE

Information Architecture

The role of an Information Architect in Web development is to develop the structure, labeling, and navigation schemes of the site. This phase is alternately known as Interaction Design and Experience Design and Information Design. The Site Outline was the first step in this process. Now we are going to visualize our Information Architecture in the form of a Functionality Specification or Functional Spec.

With the Functional Spec you create a blueprint for your site much the way an architect does for a building. The purpose of this spec is to synthesize needs identified in the requirments document into a concrete plan for development. It includes a visual map of the overall hierarchy and flow of your site, and detail views for each interface or page. At this point in the process, we are not concerned with the graphical interface of images, colors, and fonts that will go into your site, but the outlining basic structure and functionality.

Your impulse as a designer may be to skip the functional spec and jump right into graphic design. The problem with this is that it is too easy to get caught up in aesthetic decisions which can overshadow the functionality and usability of your site.

CREATING A FUNCTIONAL SPEC

For our purposes, the Functional Spec will consist of a Site Map (or Site Flow) and a set of Wireframes.

The Site Map is a visual representation of all the pages of the site and how the user navigates through them.

Wireframe is a diagram that represents the layout, content, and functionality of each page.

You can create these documents in any drawing or page layout program you are comfortable with. A great resource for making wireframes is Google’s Mockingbird. It’s a Google Chrome add-on


INTERFACE DESIGN PRINCIPLES

Ok, we’ve gone through the Discovery phase, and determined what we want our site to be, who it is for, and what it is going to contain. We’ve mapped this all out in our functional spec. Now its time to bring to life with the next step in the Design Phase, known variously as Interface, Visual, and Graphic Design.

The Basics

Function First. A Web site is like a chair. Aesthetics don’t make up for poor usability. That beautifully carved and varnished cherry wood contraption in the corner is no good if you can’t sit in it.

Your interface is a frame for the content of your site. Just like a piece of fine art, the frame shouldn’t overshadow the picture.

Don’t make me think. Your Web site isn’t a puzzle for your users to solve. When they hit the home page, it should be immediately apparent what they can do next. Think about it, when you go to a Web page, do you carefully read every word and weigh your options before clicking to the next page, or do you quickly scan and take a shot at the best guess for what link or button will get you what you want?

Don’t reinvent the wheel, unless what you really need is a jetpack. At this point, Web designers have figured out the best solutions to the basic Web problems. And, visitors to your site spend 99% percent on other peoples sites. So give them something familiar.

Where am I? Where can I go from here? Clear, persistent navigation is crucial to a successful site.


PAGE SIZE

Unlike a printed page, you can not predict or truly control the amount of pixels you users will see. Here’s a few quick stats to check out:

2012 Monitor resolutions:

MOST POPULAR USED screen resolution: 1366 x 768  
1280×800 – 18.7%
1024×1024 – 11.5%
1200×800 – 10.7%
1920×1080 – 8.1%

(These stats are from The Counter)

To further complicate things, now many users have the ability to view the Web through mobile devices. The iPhone, for example, has a screen size of 480×320 (but with that nifty zoom feature) and they go down from there.

You’ve got two main options:

  1. Use a fixed layout, and design for the lowest common denominator. Since 11.5% of users are still looking at the Web at 1280×1024, build for them and assure that the largest amount of users will be able to easily view your page.
  2. Use a flexible layout, one that resizes to optimally fit the current browser window.

Regardless of which size you decide to go with, building to optimal page size means keeping key elements “above the fold.” Key elements include navigation, branding, and enough page content for the main points to get across. Remember, users will scroll horizontally or vertically but rarely both. Additionally, they don’t want to scroll through more than a couple of screens of content. Pages longer than that should be broken up. The maximum visible page area is actually smaller than the screen size due to browser interface elements.


A few good links


CREATING A DESIGN MOCKUP

Creating a template

  1. Open the wireframes that you created for your site. You are going to use this as a guide for setting up your template. For every distinct interface that you have defined for your site, you will need to make a mockup for it. If your page layout doesn’t vary much from page to page, you may be able to use a single document and sets of layers to contain all the permutations.
  2. Create a new document in Photoshop or Illustrator. Go to File > New
  3. Set the following document settings:
    • Size: 1366×768, depending on what size you decide to build for
    • Resolution: 72 pixels/inch
    • Mode: RGB
    • Contents: Transparent
  4. Open your layers palette: Window > Layers.
  5. Create and name separate layers for each part of your design grid. Typical sections that your site may have are:
    • Body (background color or pattern)
    • Branding / Header (Logo and Site Title)
    • Sidebar
    • Global Navigation
    • Content
    • Section Heading
    • Copy (sub-headings, paragraphs, lists, bullets and inline links)
    • Footer (copyright and email link)
  6. Turn on your Rulers: Window > Show Rulers
  7. Use guides to define the sections of your design grid. Click on the Move Tool in the Tool palette and drag a horizontal and vertical guide from each ruler.
  8. Use the Photoshop or Illustrator tools to create your mockup. The mockup should show the client how the final interface will look. Specify logo, color scheme, fonts and positioning.
  9. Once you have finalized the your mockup you are ready to slice and optimize your images.

Here’s an example of a multi-page design comp:

Multi-page design comp


WEB DEVELOPMENT PROCESS

Site Map

A site map is a  flow diagram of the pages contained in your website. This is the essential information architecture needed to build your website.

Tips for creating usable navigational systems:

Navigation should:

  • Be easy to learn.
  • Be consistent throughout the website.
  • Provide feedback, such as the use of breadcrumbs to indicate how to navigate back to where the user started.
  • Use the minimum number of clicks to arrive at the next destination.
  • Use clear and intuitive labels, based on the user’s perspective and terminology.
  • Support user tasks.
  • Have each link be distinct from other links.
  • Group navigation into logical units.
  • Avoid making the user scroll to get to important navigation or submit buttons.
  • Not disable the browser’s back button.

Create an outline of  your website and include:

  • Content Inventory: a hierarchical view of the site content, typically in a spreadsheet format, which briefly describes the content that should appear on each page and indicates where pages belong in terms of global and local navigation.
  • Site Maps: visual diagrams that reflect site navigation and main content areas. They are usually constructed to look like flowcharts and show how users will navigate from one section to another. Other formats may also indicate the relationships between pages on the site.

Usability First is a great resource for developing your website. Go to this link and READ IT!

Here’s an example of what a sitemap could look like.

Site Map

You can create your sitemap using any number of different tools. Here are a couple of great tools used to create sitemaps. Great designer resources.


 Wire frame: Where Content Elements Appear Within the Page

Wireframes are rough illustrations of page content and structure, which may also indicate how users will interact with the website. The first step is to great these diagram to establish page layout and then you will move to the visual design. Wireframes are useful for communicating early design ideas showing exactly what information, links, content, promotional space, and navigation will be on every page of the site. Wireframes may illustrate design priorities in cases where various types of information appear to be competing.

Since a site map does not indicate any hot links that may appear within a page, your wire frame will help you to determine how a user will navigate through your site beyond the main navigation. The purpose of a wire frame is to determine where each content piece will be displayed on the page, and which pieces will be displayed most prominently.

You do not need to worry about how each piece will look. The wire frame example below uses a tabbed navigation approach, however this visual is merely a placeholder and the designer may take a totally different aesthetic approach once the design phase begins.

sample wire frame

Wireframe


The Web Site Design and Development Process

You’ve learned the basics of HTML/CSS, how to structure pages and how to create a navigational system for your site and now we’re in the midst of the design phase.

PHASE I: PLANNING

This is your most important stage in the web development process. Everything you map out in the planning stage will be the blue print for your entire project.

Requirements Analysis

  • Website goals
  • Target audience
  • Defining your content

Site Map

  • Structure your site
  • Include page hierarchy
  • Include links
Access to Servers 
  • Obtain and validate includes FTP host, username and password
  • Control panel log-in information
RESOURCE LINKS FOR THIS PHASE:

PHASE I COMPLETED


PHASE II: DESIGN
In this stage you’ll move the information outlined in the planning stage closer to reality. Deliverables included are a documented site structure and a visual representation of your site.
Wireframe and Design Elements Planning
  • Sketch out the basic navigation structure for your site
  • Identify the number of pages
Mock-ups based on requirements analysis
  • Using tools like Go  Mockingbird, layout the main pages on your site
  • Keep your design elements organized
Review Cycle
  • Designing anything includes a series of iterations.
  • Review the entire site layout and make changes PRIOR to coding the site
Styleframes
  • Using the wireframes you created as a base, add style elements to your pages.
  • Include the following:
  1. Colors: find the hexadecimal # for your colors
  2. Add your images to the layout
  3. Add your videos to the layout
  4. Add your icons and/or illustrations to the layout
  5. Add dummy text

Resource links for this phase:


Today we’re going to focus on creating STYLEFRAMES

CREATING A DESIGN MOCKUP

Creating a style frame template

  1. Open the wireframes that you created for your site. You are going to use this as a guide for setting up your template. For every distinct interface that you have defined for your site, you will need to make a mockup for it. If your page layout doesn’t vary much from page to page, you may be able to use a single document and sets of layers to contain all the permutations.
  2. Create a new document in Photoshop or Illustrator. Go to File > New
  3. Set the following document settings:
    • Size: 1280 × 800
    • Resolution: 72 pixels/inch
    • Mode: RGB
    • Contents: Transparent
  4. Open your layers palette: Window > Layers.
  5. Create and name separate layers for each part of your design grid. Typical sections that your site may have are:
    • Body (background color or pattern)
    • Branding / Header (Logo and Site Title)
    • Sidebar
    • Global Navigation
    • Content
    • Section Heading
    • Copy (sub-headings, paragraphs, lists, bullets and inline links)
    • Footer (copyright and email link)
  6. Turn on your Rulers: Window > Show Rulers
  7. Use guides to define the sections of your design grid. Click on the Move Tool in the Tool palette and drag a horizontal and vertical guide from each ruler.
  8. Use the Photoshop or Illustrator tools to create your mockup. The mockup should show the client how the final interface will look. Specify logo, color scheme, fonts and positioning.
  9. Once you have finalized the your mockup you are ready to slice and optimize your images.

Here’s an example of a multi-page design comp:

Multi-page design comp

Here’s what the actual site looks like when fully design an coded.

Good resource: 10 Tips for Creating Website Mockups

==========================================================================

Final Project Requirements

Documentation
• accurate sitemap
• revised wireframe

Content

•your homepage

•your artist statement
• your bio
• your portfolio
• your skills
• contact page
Information Architecture
• one section without subpages (like a homepage or contact page)
• one section with 2 to 3 subpages

Coding
• Image rollover
• CSS link states

• 2 Link types (email, new window)
Images

• GIF
• JPG

Execution

• a live area that fits a browser set to 1366×768
• use of lists and divides
• effectively placed HTML text and CSS
(your site should not be all images)


 REVIEW: Presenting Your ContentReviewing Web Page Layouts

• Page properties = alignment, borders, margins, padding
• <span> = for small chunks of content, such as a single sentence
within a paragraph
• <div> = a generic tag used to format large sections of content
(some properties will be relevant specifically for text, images, layers
or all of the above)Alignment
Text Alignment
<p align=left> aligns a paragraph to the left
<p align=right> aligns a paragraph to the right
<p align=center> centers a paragraph
NOTE: large chunks of text align right or center more consistently when a <div> tag is used
Image Alignment
<img align=left> left side of the page
<img align=right> aligns image right side of the page
Wrapping Text Around an Image
<img align=top> aligns the first line of text along the top of an image
<img align=bottom> aligns the first line of text to the bottom of an image
<img align=middle> aligns the first line of text to the middle of an image
Borders, Margins and Padding
When using the shorthand versions of certain CSS properites like margin, padding,
and border, the rule of order is:
1. top
2. right
3. bottom
4. left
The most common way to specific the 4 sides is either:
margin: 0px; defines all 4 sides of the margins as 0px.
margin: 1px 10px 5px 3px;  defines each side separately
(top = 1px, right = 10px, bottom = 5px, and left = 3px)
The browser interpret the CSS properties margin, padding, and border as:
Border – Rule around the edge of an element
Margin – Space outside an element and the container that holds it
Padding – Space pushing an element away from the border or outer edge of the element
Margin Parameters – (can be applied to the whole page, text, or images)
p {margin-top: 15px;} set the margin space at the top of an element.
p {margin-right: 15px} set the margin space at the right of an element
p {margin-bottom: 15px;} set the margin space at the bottom of an element
p {margin-left: 15px;} set the margin space at the left of an element
NOTE: You can have negative values (-2px), however, please be careful using this one, because if you
specify a high negative value (or rather really low) you can cause the visitors browser to crash.
Padding Parameters
h1 {padding -top: 15px;} set the padding space at the top of an element.
h1 {padding -right: 15px} set the padding space at the right of an element
h1 {padding -bottom: 15px;} set the padding space at the bottom of an element
h1 {padding -left: 15px;} set the padding space at the left of an element
NOTE: The padding will have the same background color as the element does.
Border Parameters
div {border -top-width: 15px;} set the border on the top of an element.
div {border -right-width: 15px} set the border on the right of an element
div {border -bottom-width: 15px;} set the border on the bottom of an element
div {border -left-width: 15px;} set the border on the left of an element
NOTE: This element has the same background as its parent element
Border treatments such as color, style and width can all be set in the same tag or they
can be set individually:
H3 {border-color: #000000; border-style: solid;}
set the color and style of the whole border of the element
H3 {border-top: 2px dotted #000000;}
set the width, style, and color of the top border of an element
border-styles
none
dotted
solid
dashed
dotted
groove
double
ridge
inset
hidden (The same as “none”, except in border conflict resolution for table elements)
<div> and <span>
<div> formatting blocks of text and structure layers
<span> formatting inline text

HOMEWORK | WEEK 12

  1. You MUST have a page titled: homework.html. on that page you should list homework at Week 1, Week 2, Week 3, etc. Those links MUST take me back to your finished homework.1. Create the Production Graphics for your site.

    HOMEWORK:

    All homework items SHOULD BE COMPLETED BY 12.10.12 to get full and/or partial credit. If  NOT completed by 12.10.12 you will receive a 0 for that homework.

This includes:

    1. Register your blog
    2. Delicious
    3. Create resume and artist statement
    4. Gravatar
    5. Facebook Page
    6. Add social book marking on your blog
    7. LinkedIn – 100% complete
    8. Create Twitter and YouTube accounts
    9. Create Resume, Index, Contact and Artist Statement pages
    10. Mark up your resume
    11. Put all homework links on homework.html page
    12. Longest page, add back to top markup
    13. Make and unordered list
    14. Create an external CSS for the bio and resume pages
    15. Add div’s to all your pages
    16. Use styles including font, color size
    17. Create boxmodel.html
    18. Recreate Layout 1 and Layout II\
    19. Gather all materials for website development including all graphics, images, videos
    20. Make an image gallery with 6 images including thumbnail and full sizes
    21. Create wireframes
    22. Create site map
    23. Create css stylesheet that includes different backgrounds, headings, links and list styles for each of the three divs
    24. Add rounded corners to your divs
    25. Create a single image roll over menu
    26. Create a photoshop design template for your homepage and save as a jpg
    27. Create production graphics for your site

    For the rest of the semester you will work to complete your final project. You will need to create each of the pages outlined on your sitemap. Your site will need to include the required content, pages, code and images.

    1. Create a template page for the unique layouts outlined on your. Then produce all of the pages required and represented on your sitemap.

    2. Make sure that your site meets all of the requirements for the final project.

    3. Run your code through the HTML and CSS Validater and go through it correct as many errors as possible and to maintain Code Best Practices.

    4. Test your pages in Safari, Explorer and Firefox.
    For your final project you will need to turn in a CD with copies of all of your HTML pages (including your Javascript code), Optimized GIFs and JPGs, and a single external Style Sheet file, in addition to a Word document with the URL where all for accessing the web server where all of your files are posted. Remember, you will also need to turn in complete, current and accurate documentation, such as site map and wireframes.

    You will need to turn in your back-up cd and your supporting documentation.

    Each student will do the presentation for their project (the final class session). I will check with the registrar to get the final dates and will give you your presentation times.

    Research: A lot has changed since you have updated your website.
    Follow up on your latest work by validating your pages…

    W3C – CSS Validation Service

    http://jigsaw.w3.org/css-validator/

    Map out the preliminary stages of your Project Plan…

    1. Determine how many different unique designs will be necessary to complete all of the pages on your site map. A good barometer to determine whether or not a 2 designs would be considered “unique” from each other is how much work would be required to adapt the layout of one page to the other page. (as an example, if the second page can be created from the code of the first page by changing the text and images only, then they would not be considered unique)

    2. Each unique design will require it’s own “Template” page. (as an example, the pages within the “print design” section of a site might be based on one Template page which has text to the right of an image, while the “interactive design” section of a site might be based on another Template page that has 3 thumbnail screenshots positioned in a table with the text below it)

    3. Once you have defined the amount of Template pages that will be required to complete all of the pages in your sitemap, listed them in a Word document (you can give them names or number to differentiate them from each other)

    4. In you Word document, include a list of all of the pages from your sitemap that will be created from each Template page (as an example:

    Template Page Name Pages created from Template

    TextImageRightAlign = Early Inspirations page, Design Philosophy page, Career Goals page

    Create a new post on your class blog and list all the materials you want to include on your website. HEADING: Website Materials. SUBHEADING: Images: list images for home page, about page, etc. SUB HEADING, Illustration, Video, Photographs, Audio, Text or anything else you may want on your site. Separate it by page. I want to put xyz on my home page, about page, contact page or any other page on your site.

  1. Create a SITE MAP for your website.
  2. Create three (3) wire frames:
  • a preliminary wire frame for your home page
  •  two (2) interior pages ( try your about page, your portfolio page or your contact page)
  • Your wire frame layouts will need to be intuitive to read and close to the scale that it will appear in the web browser. You will need to indicate if a part of the layout will fit above the “fold” (the portion of the screen that is visible to the user without requiring the user to scroll).
  •  Use plain boxes to show the placement of “side bar” content areas
  •  Design the page layout as 1366 x 768
  • For regular text, use a 8 or 9 points font size to correspond to normal text sizes within the common default settings with the browser.
  • Use an underline to indicate all links (text or images)
  • If you use elements such as drop down menus or text field boxes, make sure they are recognizable and always treated the same within your wire frame layout

Read: The following reference…
Barrett Communications – Wireframes: A Vital Step in Your Web Site Strategy
http://www.barrettcommunications.com/contentmgr/showdetails.php/id/378

Portfolio Tips for Design Students

Take a look at student work for inspiration

Great Resume Design