Goal

The goal of this assign­ment is to use a typeface’s char­ac­ter­is­tics to iden­tify its styl­is­tic period. The assign­ment also seeks to cre­ate a port­fo­lio piece that demon­strate the fun­da­men­tal use of HTML, CSS and Adobe XD and Dreamweaver.

Objective

The objec­tive of this assign­ment is to search out, record and iden­tify a real world type­face sam­ple and styl­is­tic period. Write a descrip­tion of the iden­ti­fi­ca­tion process, and then cre­ate and post the appro­pri­ate files.

Reading

• Rob­bins, ch 1–16, p 1–336
• http://​en​.wikipedia​.org/​w​i​k​i​/​G​r​a​p​h​i​c​_​d​e​s​ign
• http://​www​.all​graph​icde​sign​.com/​h​i​s​t​o​r​y​o​f​-​g​r​a​p​h​i​c​d​e​s​i​g​n​-​a​r​t​s​.​h​tml
• http://​www​.dmoz​.org/​A​r​t​s​/​G​r​a​p​h​i​c​_​D​e​s​i​g​n​/​H​i​s​t​ory
• http://​www​.desig​nishis​tory​.com/
• http://​typo​graph​ica​.org/
• http://​www​.typophile​.com/

Assignment

Cre­ate a web page that illus­trates work­ing knowl­edge of CSS and HTML. The site must include the required links and con­tent listed below. The site must uti­lize aes­thetic design prin­ci­ples to cre­ate an attrac­tive, yet func­tional solu­tion. Your design solu­tion should reflect or com­pli­ment the type­face. The use of a frame­works is rec­om­mended, though using files cre­ated from other sources is per­mis­si­ble depend­ing upon skill level.

Part One

Locate and iden­tify “in situ” one (1) type­face spec­i­men. Look for signs, printed mate­r­ial, tele­vi­sion or other elec­tronic media as a source. Record this spec­i­men using a scan­ner, dig­i­tal cam­era or elec­tronic file (image based). Export­ing a dig­i­tal image from another appli­ca­tion or screen cap­ture is allowed to sim­plify the con­struc­tion of the doc­u­ments, as long as the con­tent pro­duced is not of your own cre­ation. Record all per­ti­nent bib­li­o­graphic infor­ma­tion (ie pub­li­ca­tion title, vol­ume, page, loca­tion, prod­uct name, appli­ca­tion, etc.) Include a design credit if one is available.

Once the visual sam­ple has been acquired and con­firmed, write a min­i­mum 500 word essay describ­ing the basic his­tory of the type­face. Include as much detail as pos­si­ble. Iden­tify key fig­ures (per­sons or stu­dios) of its pro­duc­tion. Addi­tional visual sam­ples are allowed, though not mandatory.

• Iden­ti­font http://​www​.iden​ti​font​.com/
• What The Font http://​www​.myfonts​.com/​W​h​a​t​T​h​e​F​o​nt/

Sketch a paper 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 tem­plates pro­vided in class. Keep it sim­ple at first and mobile friendly, with 2–3 main columns, before you get complex.

Part Two

Build a dig­i­tal wire­frame mock-up in HTML and CSS based on your sketches from part one. Use the style infor­ma­tion pro­vided via the tem­plates 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.

Part Three

Cre­ate a “final” dig­i­tal aes­thetic mock-up using the Adobe XD 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 pro­duc­tion. Sub­mit PDF or Image file for review (updated for use after 12.1.2022).

Part Four

Using the sam­ple files pro­vided via pre­vi­ous lec­tures, cre­ate a web page using your con­tent and image(s). You may alter the sam­ple as much or a lit­tle as you wish based on the demon­stra­tions pro­vided in class, but be sure to include all manda­tory infor­ma­tion. Once you design is com­pleted, post the files to the appro­pri­ate D2L dropbox.

Support Files

• Boot­strap http://​get​boot​strap​.com

Mandatory Information

• Min­i­mum of one image of type­face cur­rently in use (RGB .jpg)
• Descrip­tive essay (min­i­mum 500 words) and bib­li­o­graphic information.
• Objec­tive state­ment from above.
• Your name and web­site link.
• Class title.
• My name, title and web site link.
• Links to: ORU, AIGA, Art Direc­tors Club of Tulsa

Assessment

• The fol­low­ing rubric posted on D2L will deter­mine assign­ment score: Assign­ment 04.06: Cre­ative Page Layout

Techniques

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

Supplies

Paper, pen­cil, server space, Adobe Dreamweaver, Illus­tra­tor, Photoshop