Week 10 | Monday | Styleframes

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 is 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 requirements 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.

site outline

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.

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


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.

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

Site Map
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.

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.

#1. DO NOW – Create a SITE MAP for the Charity Water homepage.


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.

  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.

Wireframe and Design Elements Planning
  • Sketch out the basic navigation structure for your site
  • Identify the number of pages

Hand-drawn Wireframe

wireframe-sketch-01

 

Grid Design of a Wireframe

wireframe-sketch-13

#2. DO NOW – Create a HAND DRAWN WIRE FRAME for the Charity Water homepage. Then, using Photoshop, create the grid layout for the Charity Water homepage.


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:

2013 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)

screen stats

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.

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.
  • Use the images, colors, fonts, and icons from the Charity Water homepage to complete this. You can take screen shots of each section of the homepage, create a new layer in photoshop for each section, and create one psd.

#3 DO NOW – Create a STYLE FRAME for the Charity Water homepage.

 REVIEW
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:


CREATING A DESIGN MOCKUP RESOURCE

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


#4. DO NOW – Complete the video tutorial below.

  • Create a folder on your DropBox titled: “Designing a Website”.
  • Include the PSD.
  • Upload the JPG to Flickr and to your website.

Designing a Website

 

Week 11 | Homework

Delicious:

Tag three more sites that focus on Photoshop which refer to any of the techniques we learned in class today. Write a comment in Delicious about why you think each one would be a good resource for this class.
Complete the FOUR Do Now Tutorials listed:
#1. DO NOW
  • – Create a SITE OUTLINE for the Charity Water homepage by creating the main navigational folders and sub navigational folders on your desktop. Take a screenshot of it and upload it to Flickr and your website.
  •  – Create a SITE MAP using Photoshop for the Charity Water homepage. Save the PSD to the Charity Water Style Frame folder on your DropBox. Upload the JPG to Flickr and your website Week 10 Homework post.
#2. DO NOW
  • – Create a HAND DRAWN WIRE FRAME for the Charity Water homepage.
  • – Then, using Photoshop, create the grid layout for the Charity Water homepage.

Save the PSD to the Charity Water Style Frame folder on your DropBox. Upload the JPG’s to Flickr and your website Week 10 Homework post.

#3 DO NOW – Create a STYLE FRAME for the Charity Water homepage.
  • Save the PSD to the Charity Water Style Frame folder on your DropBox. Upload the JPG’s to Flickr and your website Week 10 Homework post.
#4. DO NOW – Complete the video tutorial below.
  • Create a folder on your DropBox with each PSD and JPG. Upload the JPG’s to Flickr and to your website week 10 Monday homework page.
 

32 thoughts on “Week 10 | Monday | Styleframes

  1. My Animated Web Banner was meant to be the animated banner homework instead of the Speaker Banner.

Comments are closed.