Week 9 | Wednesday

A STORY OF MIXED EMOTICONS


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.

 

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.

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

#1. DO NOW – Create a HAND DRAWN WIRE FRAME for the Charity Water page. 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.

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:

2014 Monitor resolution:

MOST POPULAR USED screen resolution: 1366 x 768  


CREATING A DESIGN MOCKUP

Creating a template

  1. For every distinct interface that you have defined for a 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: 5000 h ×1280 w for Charity Water (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.

#2 DO NOW – Create a STYLE FRAME for the Charity Water page.

 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
  • Keep your design elements organized
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 images to the layout
  3. Add icons and/or illustrations to the layout

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


#3. 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 9 | 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.
  • Designing for the web
  • Mobile design using Photoshop CS 6
  • UI or US design
Complete the THREE Do Now Tutorials listed:
#1. DO NOW
  • – Create a HAND DRAWN WIRE 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 9 Wednesday Homework post.

#2. DO NOW
  • – Create a GRID WIRE FRAME IN PHOTOSHOP for the Charity Water homepage.
  • – 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 9 Wednesday 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 9 Wednesday Homework post.
  • #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

    #4.  – Complete thePS CS6  Animated Button tutorial. DUE week 9 FRIDAY
    • Create a folder on your DropBox with each PSD and JPG. Upload the JPG’s to Flickr and to your homework page. 

    PS CS6  Animated Button TUTORIAL | DUE FRIDAY

      • Complete the tutorial – ANIMATED BUTTON IN PHOTOSHOP CS6
      • Create a folder in DropBox called: PS CS6  AnimatedButton
      • Title your image: date_yourname_PS_CS6_AnimatedButtonv1
      • Inside that folder place your PSD file AND GIF file of the tutorial.
      • Leave a comment on week 9 with a link to your DropBox folder.
      • Upload your animated GIF to IMGUR and provide me with the link.
      • Leave a comment with a link to your DropBox folder AND Imgur animated GIF.
      • After uploading the animated GIF to Imgur, copy the HTML, go to your homework post, click on the text view and paste the HTML.

    NOTE: YOU CAN ADD THE CHROME WEB DEVELOPER EXTENSIONTO GOOGLE CHROME TO ALLOW YOU TO CHECK COLOR, SIZE, AND DOWNLOAD IMAGES.

25 thoughts on “Week 9 | Wednesday”

  1. When Rendering for HD in Photoshop.
    1. Navigate to File > Export > Render Video
    2. When the window appears
    3. In the ‘Size’ settings, click the dropdown and choose HDV/HDTV 720p for better quality.
    4. Be careful, if you choose something as big as 1080p, the file size will be bigger

Comments are closed.