Assignment 07.10.02: Site Design


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.


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



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

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.


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


HTML, CSS, image siz­ing, mobile conventions


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


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