Goal

Estab­lish a doc­u­ment that presents the assets, guide­lines and bound­aries that define and sup­port the breath of visual com­mu­ni­ca­tion essen­tial for main­tain­ing a visual brand iden­tity across a con­tem­po­rary range of media forms.

Objective

Cre­ate the foun­da­tion of a dig­i­tal resource use­ful in doc­u­ment­ing a brand’s visual identity.

Background

• 8 Things to Include in Your Brand Stan­dards Guide
• 21 Brand Style Guide Exam­ples I Love (for Visual Inspiration)
• What you Need to Know to Cre­ate a Great Brand Vision Statement
• 35 Vision And Mis­sion State­ment Exam­ples That Will Inspire Your Buyers
• The Dif­fer­ence Between Brand Pur­pose, Mis­sion, and Vision
• https://​brand​stan​dards​.her​man​miller​.com/
• This is Hulu
• Alcoa Brand Guide & Design System

Exercise:

Pre­sent­ing brand stan­dards in an easy to use for­mat is key to help­ing an entire iden­tity stay within the bound­aries of the designed solu­tion. The clearer the infor­ma­tion, and the eas­ier the acces­si­bil­ity, the bet­ter it is for oth­ers who are build­ing any future design expe­ri­ences or arti­facts. To that end, devel­op­ing an HTML doc­u­ment will demon­strate these skills, and be use­ful for doc­u­ment­ing the entire project from other sep­a­rate, yet com­pli­men­tary assignments.

Fol­low the nota­tions in the files will help nav­i­gate the code and the struc­ture. The direc­tions included in the code and on non-export lay­ers, are impor­tant to mak­ing sure min­i­mal com­pli­ca­tions arise. Sav­ing files to the appro­pri­ate loca­tion is also vital, as is main­tain­ing an aware­ness of the pro­vided hier­ar­chi­cal structure.

Part One

Down­load the starter tem­plates from the course man­age­ment sys­tem. Save the result­ing fold­ers to the appro­pri­ate com­puter loca­tion. Open the main folder and review the files. Make note of those used for cre­at­ing assets, ie images, and those used for pub­lish­ing the work, ie HTML/CSS and sup­port­ing files.

Open the asset author­ing files folder, and open the logo (vec­tor) tem­plate. Using the direc­tions pro­vided in class, save the result­ing image file to the appro­pri­ate folder location.

Like­wise, open the asset author­ing files folder, and open the pho­tog­ra­phy (image) tem­plate. Using the direc­tions pro­vided in class, save the result­ing image file to the appro­pri­ate folder location.

Part Two

As directed in class, open the main HTML file and replace the place­holder images with those cre­ated in Part One. Save and pre­view the files in a browser to ensure that the results behave as expected. Cre­ate a screen shot of the page to present the images in use. Save the result­ing image as a JPG to the appro­pri­ate dropbox.

Though not required, feel free to explore the use of the cus­tom css to color coor­di­nate the user inter­face and lay­out ele­ments to reflect the brand iden­tity as skills allow.

In addi­tion to the JPG image, save the result­ing folder as an archive (.zip) file to the appro­pri­ate dropbox.

Assessment

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

Materials

Web browser, photo edi­tor, vec­tor editor