Agenda Turn in Essays Review this weeks chapters Wireframe Logo PSA Assignment Site URL

Site Map Use the sticky note method to layout the arrangement of your title page sections. Do this for your site, take a picture and submit.

Site Plan You know the content for your site, and now it is time to let the website designing begin.

Required on Site About Contact

Required on Site Logo – begins with sketch 7 pages Minimum Navigation Text Images Slideshow Contact Information Social Media Panel – Accordion and/or Tabbed Panels Color Scheme Listed in Blackboard

Now that we know what the content is… It’s time to wireframe Let’s start with figuring out how our site is going to look.

And learning how to operate MUSE… Essay

Wireframe A wireframe is created to determine how our site will look. The wireframe should inform on the colors, look of the navigation, structure, mood or feel of your site. Sketch You are welcome to sketch first and then proceed to use a professional wireframing method such as Inspiration or Mogups.com.

https://moqups.com/

http://www.inspiration.com/

Wireframe May create in Photoshop Begin with choosing a size from MUSE File > New Document in Photoshop of that size Examples: Wireframe_demo.psd / wireframe-demo2.psd / wireframe_demo3.psd

With Photoshop your wireframe may be much simpler With Photoshop your wireframe may be much simpler. This is the type of wireframe that I would like for you to submit for your site. I would also like one page with a lot more detail as shown in Example A and B

Wireframe May also create in Illustrator or InDesign Begin with choosing a size from MUSE Create a new document in Illustrator or InDesign of that size Example: wireframe_demo3.psd

Wireframing done more simplistically.

Images How do we handle them? Photoshop > File > Export > Save for Web > Legacy > Presents image in 2-up to 4-up. Goal: Choose a quality image of a reasonable size.

Remember to save all contents in one https://www.youtube.com/watch?v=2asoMfn1PBQ

Identity – Look and feel What are the functional and emotional benefits of your site. Keep the goals at the forefront of your mind to make sure they are being communicated.

The Purpose of Visual Identity The basic purpose of visual identity is the same as a branding program—to identify, differentiate, and build a presence and position in the marketplace that is lasting. A visual identity is the visual and verbal idea of a brand or group The keystone of any visual identity is a logo, a unique identifying symbol. Robin Landa

Goals of a Visual Identity Ideally, a visual identity communicates meaning, adds value, is relevant to its target audience, and should be Recognizable: The shapes and forms are identifiable and decipherable. Memorable: The shapes, forms, and colors are sufficiently coherent, interesting, and unusual. Distinctive: The name, shapes, forms, and colors are uniquely characteristic to that entity and differentiate it from the competition. Robin Landa

Goals of a Visual Identity Sustainable: The name, shapes, forms, and colors would endure, be relevant for a period of years. Flexible / Extendable: The name, shapes, forms, and colors are flexible to work across media, to grow with the entity’s new services, and to adapt to brand extensions and sub- brands. Robin Landa

Creating Coherence Intentionally creating a unified brand experience. How? Creating coherence in the look and feel, and clarity. For visual/verbal coherence, common components across the displaying of your design are: Strategy – Abbreviations and titles Logo – Signature Tagline – Tone of voice Look and feel – Attitude of imagery/copy Color or color palette – Descriptive writing Robin Landa

Identity Standards Communicating that consistency Graphic designers create standards for the use of identity design and logo on all applications to ensure consistency and logo recognition across media. Consistent use guarantees immediate recognition in a cluttered commercial environment and ensures integrity of meaning. HUBBARD STREET DANCE CHICAGO: LOGO, LOGO MANUAL, SIGNAGE LISKA + ASSOCIATES, CHICAGO Robin Landa

Identity Standards – More Examples Hyundai ttps://www.scribd.com/doc/219980610/HMA-Graphic-Standards- Manual Pizza Hut https://www.scribd.com/doc/47339523/PIZZA-HUT-Brand- Standards-Manual-Final

What is a Logo? A logo is the single graphic design application that will be a part of your design application. It does carry a lot of weight and a cornerstone to establishing your identity. A logo is a unique identifying symbol. Most often, a logo is part of a broader identity design project. SAKS FIFTH AVENUE: IDENTITY MICHAEL BIERUT / PENTAGRAM, NEW YORK

Brainstorming Results Let’s begin! Step 1 – Paper Step 2 – Pen or pencil We can use the name of our company. Create a mindmap > Just start writing down related words > Then allow the words to become images. It is a great way to express a subject in a creative or indirect way. This is what will create visual interest. After picking out the best design > Take it into Illustrator, Photoshop or InDesign and create it. Try using some of the methods introduced in the how-to-design-a-logo.pdf

Assign: PSA Site Discussion Board: Due March 3, 2016 Post wireframe, jpeg – Work on in class Contact Sheet of images as, pdf or jpeg Site URL Logo thumbs (10 minimum) Critique 1: March 17, 2016 (at least 4 pages of site and logo) Critique 2: March 24, 2016 (at least 7 pages of site) Critique 3: March 29, 2016 (all changes)

Set up site  MUSE: Launch Muse > Create > Site > Fluid or Liquid Layout (this is new) > Accept the remaining defaults.

Set up site  MUSE: Fluid or Fixed Width.

Set up site  MUSE: Accept defaults.

Set up site  MUSE: Site creation Site created

Set up site MUSE: Save Site File > Save Site > New Folder > Name it (this is your root folder) > Name your site.

Set up site MUSE: Publish File > Publish > Name Can change URL later. By going to File > Manage Business Catalyst Site This will allow me to check your site progress and the way we will critique them.