Goal

The goal of this assign­ment is to learn the para­me­ters and tech­niques asso­ci­ated with web site lay­out and design.

Objective

Develop a desk­top and mobile friendly ver­sion of a restau­rant web site that is opti­mized for deliv­ery and usability.

Reading

• http://​www​.nngroup​.com/​a​r​t​i​c​l​e​s​/​u​s​a​b​i​l​i​t​y​-​1​0​1​-​i​n​t​r​o​d​u​c​t​i​o​n​-​t​o​-​u​s​a​b​i​l​ity
• http://​www​.smash​ing​magazine​.com/​2​0​1​3​/​1​2​/​0​3​/​e​f​f​i​c​i​e​n​t​l​y​-​s​i​m​p​l​i​f​y​i​n​g​-​n​a​v​i​g​a​t​i​o​n​-​i​n​f​o​r​m​a​t​i​o​n​-​a​r​c​h​i​t​e​c​t​u​re/
• http://​www​.smash​ing​magazine​.com/​2​0​1​4​/​0​5​/​0​9​/​e​f​f​i​c​i​e​n​t​l​y​-​s​i​m​p​l​i​f​y​i​n​g​-​n​a​v​i​g​a​t​i​o​n​-​s​y​s​t​e​ms/
• http://​www​.smash​ing​magazine​.com/​2​0​1​4​/​0​9​/​1​8​/​e​f​f​i​c​i​e​n​t​l​y​-​s​i​m​p​l​i​f​y​i​n​g​-​n​a​v​i​g​a​t​i​o​n​-​i​n​t​e​r​a​c​t​i​o​n​-​d​e​s​i​gn/
• http://code.tutsplus.com/tutorials/ui-design-for-developers-introduction–active-9921
• https://​devel​oper​.apple​.com/​d​e​s​i​g​n​/​h​u​m​a​n​-​i​n​t​e​r​f​a​c​e​-​g​u​i​d​e​l​i​n​e​s​/​i​o​s​/​o​v​e​r​v​i​e​w​/​t​h​e​m​es/
• http://​www​.smash​ing​magazine​.com/​g​u​i​d​e​l​i​n​e​s​-​f​o​r​-​m​o​b​i​l​e​-​w​e​b​-​d​e​v​e​l​o​p​m​e​nt/
• http://​get​boot​strap​.com
• http://​get​boot​strap​.com/​g​e​t​t​i​n​g​-​s​t​a​r​t​ed/

Assignment

Cre­ate a desk­top and mobile web­site of one of these local restaurants:

• https://​www​.face​book​.com/​s​c​o​t​t​s​.​h​a​m​b​u​r​g​e​rs/
• https://​www​.face​book​.com/​s​c​o​t​t​s​.​h​a​m​b​u​r​g​e​r​s​/​m​enu (look at images).
• https://​www​.apple​bar​rel​cafe​.com
• https://​www​.apple​bar​rel​cafe​.com/​m​enu

Iden­tify the fol­low­ing infor­ma­tion: loca­tion, tele­phone num­ber, menu items, to-go infor­ma­tion. Also record styl­is­tic infor­ma­tion con­cern­ing color, type­face and space of an exist­ing desk­top site and how it might guide mobile deci­sions. Pay care­ful atten­tion to media forms, ani­ma­tion tech­niques, and image use. Min­i­mum mobile screen size is 360 x 640 pxl. Min­i­mum desk­top screen size is 1024 x 768 pxl.

Part One

Develop a basic site map and wire­frame dia­gram that orga­nizes your site. Pay care­ful atten­tion to usabil­ity and inter­face. All sites will have a sim­i­lar struc­ture. What usabil­ity fea­tures do phones/mobile devices have that dif­fer from desk­top machines? How has the device changed they way peo­ple inter­act with the host site and each other? How does the input and inter­ac­tion work dif­fer­ently on the device? What inter­ac­tion can one app have with another? What lim­i­ta­tions to apps have with each other? Con­sider the dif­fer­ences between web sites and OS spe­cific apps.

Col­lect all the essen­tial data (con­tact info, loca­tion and menu). Break the menus into essen­tial cat­e­gories (appe­tiz­ers, lunch, din­ner, drinks dessert, etc). To save time, limit menu items to five (5) items per cat­e­gory max. The site should be less than four (4) pages.

Part Two

Start to envi­sion the con­text and usabil­ity of the site by the user. Input text con­tent into appro­pri­ate places in the tem­plates, but with­out word­ing about the for­mat­ting or col­ors. The site should look sim­i­lar to the starter tem­plate, Rename links, head­lines, nav­i­ga­tion, etc to func­tion in a man­ner best suited for the user.

Part Three

Using the pro­vided Boot­strap based tem­plates, dia­grams and map from Part One, sketch an aes­thetic solu­tion. Select images, col­ors, type­faces and sup­ple­men­tal media assets. Use this sketch to cre­ate a series of dig­i­tal images that rep­re­sent the pages you are required to cre­ate. Cre­ate a “grid sys­tem” to ensure con­sis­tency across the var­i­ous pages. Include solu­tions for mobile device screens also.

Part Four

Cre­ate an HTML ver­sion of the site using the sup­plied tem­plate options and con­sis­tent with your sketches, dia­grams and images. Make any adjust­ments as nec­es­sary. Upload your solu­tion to the appro­pri­ate D2L drop­box for grad­ing by the instructor.

Assesment

• The fol­low­ing rubric posted on D2L will deter­mine assign­ment score: Assign­ment 07.10.02: Site Design

Techniques

HTML, CSS, image siz­ing, mobile conventions

Supplies

frame­works, tem­plates, Adobe Dreamweaver, XD, Photoshop