Week 10 | Project III 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. 
 Style frame tutorials
COMPLETE one of the homepage tutorials on the Project III page.

Delicious

On your del.icio.us account tag three Web Sites that focus on Photoshop CS 6.

  • Designing for the web
  • Mobile design using Photoshop CS 6
  • UI or US design

Photoshop Project II – Following Items Due  – Week 11  

  • Complete one of the three style frame home page tutorials from Photoshop Project III.
  • Research
  • Inspiration
  • Site outline
  • Site map
  • Hand drawn and Photoshop designed wire frames for the NEW homepage and two additional pages your will be designing.
  • First iterations of the style frame for the NEW homepage with new color scheme, fonts, your images and any layout changes to the homepage design.

 

17 thoughts on “Week 10 | Project III Styleframes

  1. http://www.carlyagrifolio.org/ramapo-college/about/digital-media-design/
    (Homework Pages)

    https://www.dropbox.com/sh/x44gn2gth9hlij1/XYdqFXsCEr
    (Animated button, banner, A)

    https://www.dropbox.com/sh/y3cy85rbqajpcoj/0bVh28QA-b
    (Photoshop Project)

    https://www.dropbox.com/sh/lofk2k06egzcjmm/08gmLw_Wj6
    (Word as Image Pinterest recreation)

    https://www.dropbox.com/sh/0u2c9z87pjnoc5j/fqSalThrAZ
    (Banner Ads)

    Delicious is on my week 9 homework page..so with the animated button, a, banner

    1. MISSING FROM YOUR WORD AS ART PROJECT PAGE
      Photoshop Image Iterations (the still image, not the animations)
      Final Photoshop JPG Files

    1. MISSING FROM YOUR WORD AS ART PROJECT PAGE
      Photoshop Image Iterations (the still image, not the animations)
      Final Photoshop JPG Files

      Always add a link to DropBox at the top of your project page.

    1. The animation in your hiphopmaker drum is going so fast that it’s hard to read the text.

      MISSING
      Animated A letter tutorial

      WORD AS IMAGE
      All three words saved from your PSD files should be up on your website. None are there, only the animations.(I’m referring to the still print image)
      DropBox link should be at the top of your project page.

      MISSING FROM YOUR PROJECT PAGE
      Photoshop Iterations
      Final Photoshop JPG Files (the print image, not the animation)

    2. Is your nonprofit New Jersey based? You wrote national nonprofit.

      There are NO call to action buttons on any of your banners.

      All of you logos are images that you pulled off their site or Google images. You didn’t crop out the url under it or delete the white background on any of them. Had you done that it would have a fluid look to your design.

    1. Your animations and sound are really nice!

      MISSING ON YOUR PROJECT PAGE
      The word as a still image designed in Photoshop
      Your word document from your project page should NOT be a link. You should have the entire text showing.

    1. MISSING FROM YOUR WORD AS ART PROJECT PAGE

      Word document description – 500 words should be showing on your site, not just the link.

      Sound added to all three words – I thought you said you added it but I don’t see it on your project page.

    2. You were supposed to add a CALL TO ACTION button on each banner. Your also missing all the research and sketches.

Comments are closed.