Education, Web

Assignment 01.01.02: Site Layout and Frameworks

Jason W. Howell
August 3, 2018

Goal

The goal of this assign­ment is to refresh the skills needed to lay­out a web site.

Objective

Cre­ate a sam­ple site using an estab­lished and well doc­u­mented frame­work to speed pro­duc­tion time.

Background

Assignment

Cre­ate a web page that illus­trates work­ing knowl­edge of CSS and HTML. The site must uti­lize aes­thetic design prin­ci­ples to cre­ate an attrac­tive, yet func­tional solu­tion. The use of a frame­work is rec­om­mended, though using files cre­ated from other sources is per­mis­si­ble depend­ing upon skill level. Choose a sam­ple sub­ject from the list below. Cre­ate a fic­tic­tious sam­ple site of two to three (2−3) pages that rep­re­sent a home page, inter­me­di­ary nav­i­ga­tion page (as needed) and a main entry page (ie blog post, arti­cle or item page).

  • Fash­ion Retailer
  • Travel Blog
  • Sports News
  • Inter­net Ser­vice Startup
  • Hobby Forum
  • DIY Les­son Site

Part One

Begin by brain­storm­ing con­tent and expe­ri­ence needs. Doc­u­ment your cre­ative solu­tion and artis­tic direc­tion. Sketch a paper, Adobe XD, or sim­i­lar site dia­gram and wire­frame lay­out of your pro­posed page, not­ing basic con­tent, com­mon ele­ments, id’s and markup using one of the frame­works pro­vided in class. Keep it sim­ple at first and mobile friendly, with 2–3 main columns, before you get com­plex. Be sure to include mobile friendly ver­sions. Cre­ate, acquire or mod­ify exist­ing con­tent to suit your needs, but beware of copy­right restrictions.

Part Two

Build a dig­i­tal wire-frame mock-up in HTML and CSS based on your sketches from part one, includ­ing a mobile friendly ver­sion. Use the style infor­ma­tion pro­vided via the frame­work to assist. Begin to place the appro­pri­ate con­tent in as needed, but the empha­sis is on func­tion not on aes­thet­ics. Save this wire-frame separately. 

If per­ti­nent, inte­grate mechan­i­cal aspects of JS libraries with test data. Trou­bleshoot any com­pli­ca­tions, espe­cially tech­ni­cal inte­gra­tion, and adjust design para­me­ters as necessary. 

Please note, wire­frames should be based on a raw frame­work, and should not entirely use fin­ished, free tem­plates found online.

Part Three

Cre­ate a “final” dig­i­tal aes­thetic mock-up using the Adobe XD, Pho­to­shop or Illus­tra­tor frame­work tem­plates and based on the paper and dig­i­tal wire-frames from Part One and Two. Make care­ful notes of dimen­sions, col­ors, images, file­names and style infor­ma­tion. Easy access of this infor­ma­tion reduces con­fu­sion and speeds production.

Part Four

Using frame­work based files pro­vided via pre­vi­ous lec­tures (or via dis­cus­sion sec­tion for this assign­ment), cre­ate a series of web pages using your con­tent and image(s) sim­u­lat­ing the func­tion of the site. Test in browser often. Once your design is com­pleted, post the files to the appro­pri­ate D2L dropbox.

Assessment

  • The fol­low­ing rubric posted on D2L will deter­mine assign­ment score: Assign­ment 01.01.02: Site Lay­out and Frameworks

Techniques

CSS, HTML, plan­ning, con­vert­ing files, file hier­ar­chy, struc­ture, nam­ing conventions

Supplies

TextE­dit, Dreamweaver, image edi­tor, source files

Deadlines

As defined by cor­re­spond­ing cal­en­dar item, drop­box, dis­cus­sion or con­tent topic description.