Exercise 01

RESPONSIVE WEB SITE

As a means to assess learned content from Art 344 your first exercise is building a multi-page web site. Do not use a continuous single-page approach to this exercise.

The theme will be based on "STEAM PUNK", layout style, and user experience of the site is entirely up to you. Your code must meet HTML5 standards and demonstrate understanding of semantic markup. You must demonstrate effective user design and user experience within a rich content format.

Steam Punk by nature is mechanical; So, motion is important to the overall experience. Do the research and take time to ask meaningful user experience questions. Then, find "intelligent" answers to integrate into your interface.

Minimum requirements include:

There are a few basic requirements, which you must meet.

  • Fresh new design not based on a previous project
  • All project research placed in your sketchbook
  • Cite all sources and resources in your sketchbook
  • Layout sketches for mobile, tablet, and desktop
  • Wire frames for the three breakpoints
  • Final color comp for each break-point
  • Approximately 500 words, which include
    • Headlines
    • Subheads
    • Body text
    • Image captions
  • Ten or more images
  • Graphics; Original or sourced (cite all sourced content in your sketchbook and the source code)
  • HTML5 format standards; Elements and roles
  • Clear meaningful title
  • Minimum of four pages
  • Banner
  • Navigation
  • Introduction
  • Content section
  • Footer minimums; You design must include a footer
    • Site information
    • Author information
    • Useful links
    • Social media icons/links

That is it… the rest is up to you.

Student Learning Outcomes

Students learn basic concepts to develop, organize, and outline a project plan, which is rational in terms of individual skills, class-time, and class resources. “Proper project planning is as important as creating content, layout, and design. Your plans should be in place before you start to render graphics, interface, rich media, and other components.”(Vaughan, 2004)

  • Read, comprehend, and meet assignment requirements;
  • Create professional quality project research inventory;
  • Create a professional quality wire frame for each content section;
  • Create a professional quality project navigational structure;
  • Demonstrate ability to apply SEO concepts to Web site design;
  • Develop a HTML 5 outline structure, which passes validation;
  • Design a useful modular layout template;
  • Create and apply professional visual graphic elements;

RESOURCES

Validation Tools

 

Working with Fluid Grids.

The links go to web pages with written content, visuals, and videos to support the concepts.

Here is the same video series on Fluid Grids as a group on You Tube.

Understanding Fluid grids.

Designers are familiar with grids. Grids are the underlying structure, which is the foundation for our design layout. Fluid grids differ in that they are dynamic and stretch and compress based on the current browser width.

  • This resource may require you to log in using your Face Book credentials.
  • Here is a good resource for explaining Fluid Grids :: Open web page in a new window

CSS 3 Media Queries

CSS2 allows you to specify style sheet for specific media type such as screen or print. CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different style sheets.

 

Media query web site examples

 

VIDEO SERIES | How to set up a basic responsive web site using a simple non-grid format

I suggest you download each video to your desktop for the best playback.

 

VIDEO SERIES | How to add a top and side mobile menu with javascript events

I suggest you download each video to your desktop for the best playback.

Note: This demo also uses resources from the basic responsive web site demo.

 

Simple Image Transitions

Here are a few simple ways to add motion or transitions to images.

 

Animate Titles/Captions