Assignment 04.04: Wireframing


The goal of this assign­ment is to plan a series of HTML and CSS layouts.


The objec­tive of this assign­ment is to use an estab­lished frame­work to cre­ate a wire­frame mod­els of a series of com­mon web page lay­outs from sam­ple images.



Cre­at­ing an HTML page requires plan­ning and an under­stand­ing of the two sep­a­rate, yet con­nected sys­tems: HTML and CSS. With­out appro­pri­ate HTML struc­tural markup, the CSS ref­er­ences will not con­trol the posi­tion­ing. Only when the cor­rect code markup and lay­out posi­tion is achieved can appro­pri­ate cos­metic deci­sions begin.

Using the Boot­strap Frame­work as a ref­er­ence, recre­ate in wire­frame form the sam­ple lay­out below. Wire­frames pro­vide a usable sim­u­la­tion to check basic doc­u­ment seman­tics, markup and styled lay­out. Wire­frames serve as a more media appro­pri­ate, work­ing sketch, which can be used to check browser com­pat­i­bil­ity among other things.

Part One

Cre­ate paper wire­frame dia­grams of each lay­out, using the Boot­strap sam­ples as a guide to label each sec­tion. Be sure to include nota­tions for HTML ele­ments and CSS classes.

Part Two

Trans­fer the nota­tions from your sketches to a dig­i­tal form, adding addi­tional markup notes and dummy con­tent as needed, includ­ing the pro­vided place­holder images. The Adobe XD frame­work down­load pro­vides sev­eral base grids for sketch­ing. Scan or pho­to­graph these sketches for assess­ment. The final solu­tion for each sam­ple should closely approx­i­mate the images below, but may not appear exactly the same. There are mul­ti­ple pos­si­ble solu­tions to the problem.

sample webpage layout Three Boxes

Fig­ure 1: Three Boxes


sample webpage layout Featured Graphic

Fig­ure Two: Fea­tured Graphic


sample webpage layout Five Boxes

Fig­ure 3: Five Boxes


sample webpage layout Headline and Gallery

Fig­ure 4: Head­line and Gallery


sample webpage layout Advanced Grid

Fig­ure 5: Advanced Grid

Save the dig­i­tal sketches as a PDF and upload the both images and PDFs to the appro­pri­ate D2L dropbox.


  • The fol­low­ing rubric posted on D2L will deter­mine assign­ment score: Exer­cise Grading


wire­fram­ing, mark up, tags, CSS, file organization,


Dreamweaver, source files, Boot­strap, sam­ple images via Joshua John­son, Design Shack, Pub­lished on Feb­ru­ary 16, 2011.


Tues­day, Sep­tem­ber 15, 2020. Exer­cise Given.

Tues­day, Sep­tem­ber 29, 2020. Files uploaded to appro­pri­ate D2L Dropbox.