GCOM 332 ADVANCED DIGITAL IMAGING FOR WEB & MULTIMEDIA FINAL Rebrand GCOM PROJECT: INTRODUCTION The Graphic Communication department at Sacramento City College is your client we need a new visual brand. Something new, dynamic, and forward thinking; Representative of our design and technology focus. No more butterflies! For your GCOM 332 Final Project, you will combine many of the techniques you learned this semester to create a solution to this problem. You will use Photoshop CS5 Extended to create a brand presentation consisting of: a 3D-based Logo/Mark and either: a Website wire frame / prototype OR a 20-second Animated Video Promo Ad All elements must represent the entire GCOM department Graphic Design, Web and Interactive design, 3D Modeling and Animation, and Video Game Design. The design theme / concept must also represent the GCOM Mission Statement and Philosophy of Design Education. SCHEDULE There will be something due each week until the final deadline. Meeting each Phase / Deadline is required to receive all available points. WEEK 1 (4/6 4/13): Programming, Creative Brief & Sketches WEEKS 2-3 (4/13 4/27): Begin development, seek feedback WEEK 4 (4/27 5/4): Consider feedback, continue development WEEK 5 (5/4 5/11): Finalize all work; Due on 5/11 WEEK 6 (Finals week, Wed. 5/18): Final Presentations / Quiz (in person) PHASE 1-a: PROGRAMMING The first phase of any large design project is research, research, research. Who is the client? What are they selling? What is the goal? Who is the audience? Who is the competition? What are the challenges? What is the message? Fortunately for you, most of the Project Creative Brief has already been written for you (attached), but there is still much research to do. Read the Creative Brief Read the entire current GCOM web site and blog http://scc.losrios.edu/gcom http://gcomscc.blogspot.com/ Read the GCOM Mission Statement & Philosophy of Design Education at the bottom of the right column on the GCOM 332 class web page. Research similar and competing design education programs in the Northern California region. PHASE 1-b: BRAINSTORMING / SKETCHING Based on the Programming and your research, begin sketching ideas for the Logo/Mark and either the Website OR Animated Video Promo Ad. LOGO / MARK: 6-12 pencil sketches including mark and name incorporating 3D elements (in mark or type, or both) WEB SITE: 3 or more pencil comps of potential home page designs ANIMATED VIDEO PROMO AD: keyframe-by-frame pencil storyboard OTHER NOTES Details regarding each of the 3 projects are on the next pages. Remember, everyone creates a logo but you choose either the Website OR the Video ad. Next week we will discuss all of the Technical Requirements, Grade Breakdown, and Color Schemes. WHAT TO TURN IN FOR PHASE 1 / DUE BEFORE CLASS NEXT WED. 4/13 Phase 1 sketches should be scanned and compiled into a single multi-page Adobe Acrobat PDF. There are scanners in the Design Lab, and you can use Bridge, Acrobat or InDesign to compile the scans/pages. Turn in the PDF to the D2L Final Project Drop Box before class.
GCOM 332 ADVANCED DIGITAL IMAGING FOR WEB & MULTIMEDIA LOGO / MARK WEEK 1: THUMBNAIL SKETCHES These should be loose pencil sketches exploring the pairing of the name (GCOM, GCOM@SCC, or Graphic Communication at Sacramento City College) with a unique and memorable mark (graphic element literal or abstract). When sketching, consider what you can actually create in Photoshop CS5 with the 2D and 3D tools. You will be required to utilize either the Repousse or Mesh from Greyscale features. You should develop 6-12 different ideas of variations on several ideas. All the sketches should be on one or two pages, not one per page, as it allows you to better compare ideas. courtesy of www.logodesignmadeeasy.com If you ve never designed a logo or had a lesson on logo design, there are many good web resources for info: LOGO DESIGN MISTAKES: http://www.smashingmagazine.com/2009/06/25/10-common-mistakes-in-logo-design/ HOW TO DESIGN A LOGO: http://justcreativedesign.com/2008/01/08/how-to-design-a-logo/ HOW TO CREATE A LOGO: http://www.webdesignerdepot.com/2009/02/how-to-create-a-professional-logo/ A LOGO DESIGN FIRM: http://www.logodesignmadeeasy.com/logo-design-toronto A 3D ICON DESIGN FIRM: http://www.madebysofa.com/#design WEBSITE WEEK 1: SKETCHES & COMPS In Project 3 earlier in the semester you created a basic wire frame for a website. For this project you will go first create hand-drawn sketches of the web page design concepts. These can begin as loose thumbnail ideas, but you need to create at least 3 clean well-drawn comps with straight lines, clearly defined areas and approximated dimensions. If you choose to do create a Website, you will need to consider how to organize and arrange the content and how to present it through hierarchy and navigation. You need to consider what is on the current GCOM site, as well as what might need to be added or removed. You will not need to develop the entire site, only the default home page. courtesy of Mike Rohde / http://www.flickr.com/photos/rohdesign/3307873748/ Here are some great examples of web page comps, along with some good instruction and advice: GREAT WEB SKETCH SAMPLES: http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups WEB DEVELOPER SKETCHBOOKS: http://www.looks.gd/design/sketchbooks-of-a-web-developer MORE GREAT WEB PAGE SKETCHES: http://deeplinking.net/paper-web/
GCOM 332 ADVANCED DIGITAL IMAGING FOR WEB & MULTIMEDIA ANIMATED VIDEO AD WEEK 1: STORYBOARDING Before you can begin building your video in Photoshop, you will need to plan out the shots and titles. To do this, you will start the way professional filmmakers and videographers do by making a storyboard. A storyboard is a simplified visual map of the animation, frame by frame. Or, more specifically, keyframe by keyframe. It s sort of like a comic book, showing the main shots, subject matter, camera view, and transitions. Even if you re not a great artist, you can still create a useful storyboard. It can be very rough as long as you also include a clear description of what is in the frame and what is happening. Your video will be 20 seconds long, so be sure to consider how long each keyframe and sequence will last. You can use the storyboard.pdf template provided on the blog, or you can create or download your own. But it must include both sketched frame, and information next to or below the frame explaining the subject matter and action. Also, consider the tool that you are using (Photoshop) and it s abilities and limitiations. Don t over do it! VIDEO/STORYBOARD TERMINOLOGY CLOSE-UP: A close range of distance between the camera and the subject. DISSOLVE: A transition between two shots, where one shot fades away and simultaneously another shot fades in. FADE: Transition from a shot to black where the image gradually becomes darker is a Fade Out; or from black where the image gradually becomes brighter is a Fade In. HIGH CAMERA ANGLE: A camera angle which looks down on its subject making it look small, weak or unimportant. JUMP CUT: A rapid, jerky transition from one frame to the next, either disrupting the flow of time or movement within a scene or making an abrupt transition from one scene to another. LEVEL CAMERA ANGLE: A camera angle which is even with the subject; it may be used as a neutral shot. LONG SHOT: A long range of distance between the camera and the subject, often providing a broader range of the setting. LOW CAMERA ANGLE: A camera angle which looks up at its subject; it makes the subject seem important and powerful. PAN: A steady, sweeping movement from one point in a scene to another. ZOOM: Use of the camera lens to move closely towards the subject. STORYBOARD LINKS: STORYBOARD TEMPLATES & OTHER RESOURCES: http://www.utopian.flipbrothers.com/services.htm ARTIST DAVID RUSSELL S PORTFOLIO: http://www.dynamicimagesdr.com/index1.php ARTIST JOSH SHEPPARD S PORTFOLIO: http://www.thestoryboardartist.com/site/home.html FREE SOUND FILE LINKS: http://www.stonewashed.net/free-music.html http://www.programmar.net/index.html http://www.sonnyboo.com/music/music.htm http://dig.ccmixter.org
GCOM 332 FINAL PROJECT CREATIVE BRIEF PROJECT TITLE Rebrand the Graphic Communication department at Sacramento City College OVERVIEW The Graphic Communication department has more than a 30-plus history, beginning as a printing technology department, then moving into digital pre-press and desktop publishing. Over the last 12 years the GCOM department has grown and diversified it s focus to several new areas. We now courses and certificates in Graphic Design, Web Design, Interactive and Motion Design, 3D Modeling and Animation, and Video Game Design. GCOM has a strong design-focused curriculum that balances an education in theory and practice, as well as the newest technologies and tools. The current visual branding is based, which is now 5 years old, is based on a butterfly metaphor (growth, rebirth, etc.) and monarch color scheme (orange, brown, yellow, black, grey). The new brand should feel totally new and different, conveying the ideas of modern, technologically cuttingedge, creativity, design and art, multi-media, interactivity, 3D, and game design. And, of course, it must convey the idea of high-quality, affordable and accessible education. In the last several years, GCOM has also began to focus on a the core concept of Sustainable Graphic Design and Sustainability in Design Education. This is a very important and emerging aspect of the department and it s curriculum. Thus, the ideas of Sustainability, Community, and Design for Social Change should also be considered. MEDIUM Visual brand will be applied to various mediums: print, web, motion, signage, misc. marketing from t-shirts to social media Initial mediums are Logo/Mark, Website, Animated Video Promo Ad PRIMARY AUDIENCES 1) Current and incoming community college students interested in a career in design or preparing for transfer to a 4-year design program. Broad age range from teen to middle age. 2) Design industry professionals in the Sacramento region - for networking and potential retraining. 3) Other college-level design programs (ARC, Sac State, Chico State, CCA, Art Institute, etc.) 4) High school and college counselors 5) Other Los Rios CCD employees, faculty and administrators 6) State education officials, bureaucrats, and decision-makers
FYI: THE DESIGN PROCESS When designers in any specialty prepare to design something, be it graphic (logo, brochure, web site), industrial (chair, cell phone, bicycle), or architectural (house, skyscraper, landscape), they follow certain steps that we call the DESIGN PROCESS. The design process provides general direction when designers set out to solve problems. By working through these steps carefully and sequentially, they increase the likelihood that their concepts will successfully meet the goal of the project. IDENTIFY THE CHALLENGE / PROBLEM / OPPORTUNITY The designer, or design team, needs to fully the understand the problem or opportunity before attempting to address it with design. He/she must also know the potential constraints (distribution, language, budget limitations, etc.) Will the needs of the project change over time? How will the design be viewed from differing cultural perspectives? How will new technology effect the design? There are a multitude of questions that can be considered and answered before the designer can be ready to move forward. You may begin writing the CREATIVE BRIEF at the end of this phase, but you probably won t complete it until sometime during the next phase. RESEARCH AND BRAINSTORM Research all that s related to the challenge at hand. What are the societal conditions and expectations the public opinion? What are your available resources? Do a competitive analysis has the challenge been met before? If so, how? If not, why not? Then, because the best solution to a problem is not always the first idea conceived, exchange ideas in an open forum. To spark creativity, let the participants know that there is no such thing as a bad idea, no matter how crazy it may seem. DESIGN A SOLUTION / SEIZE THE OPPORTUNITY Once you ve settled on an idea to develop, prepare rough, downsized sketches (thumbnails), followed by detailed drawings or diagrams, and then solicit feedback from other team members or the general public. These design concepts may need to be modified depending on any feedback you receive. Now you can begin to mock it up the design in your application of choice. Start to consider imagery, fonts, copy, themes, tone, composition, etc. These will not be finished and fine-tuned designs yet. You still have a ways to go. TEST AND EVALUATE Present your concepts to the client or another test group and evaluate their responses and feedback. If your initial design doesn t fully solve the problem or meet the challenge (or can t do so for the money you have to spend), go back and repeat the above steps. You ll know what doesn t work and be in a better position to develop an idea that does. If your design does solve the problem, then it s on to the final step. BUILD IT! * Adapted from www.teachersdomain.org
5Rules of Effective Design Whether you are designing a poster, magazine ad, web site, t-shirt, brochure, or nearly any other form of visual communication, these 5 rules should always be considered and measured. Often, they can not all be balanced equally, but you need to always be thinking about them and how they will serve and support your concepts. RULE 1: EFFECTIVE HEADLINE/CONCEPT Figure out what the message is, what you want to communicate to the viewer, then use everything to support that. Is it a hard sell, a soft sell, informational or institutional? Is the headline a benefit headline, an action headline, a target headline or something else? Does the text follow up on the headline concept? What is the mood serious, humorous, intellectual, urban, casual? Do you know the target audience and does it speak their visual language/ RULE 2: DOMINANT ELEMENT There should be something that stands out from the design and grabs the viewers attention right away. It can be the headline, photo, graphic or even white space. The most effective designs have an element that fills at least 1 2 of the space. A good headline and graphic should work together and can serve together as the dominant element. Imagine what you design looks like from across the room if the dominant element grabs your attention from a distance, it will work great close up. RULE 3: HIERARCHY There should be a balance between the dominant element and the other elements subhead, text, logo, etc. Type should decrease in size and/or weight increments large enough to be clearly different and complementary. It s common to drop font size by half in three steps, such as a headline in 48 pt, subhead in 24 pt, and text in 12 pt. You can also use font styles (bold, all caps, color, etc.) to define hierarchy. Graphic elements also need to adhere to hierarchy you should not have multiple graphics all the same size. Avoid busy layouts and competing images. RULE 4: APPROPRIATE TYPE Choose a typeface family or several contrasting fonts to convey the advertiser s message and image don t choose Chancery for a sports event or IMPACT for a memorial service. You must be careful when mixing different fonts, although it is often a good idea to mix a serif and a sans serif font for contrast. Unless you re a highly skilled designer, you should stick to no more than two contrasting fonts. Keep it simple for readability and remember that everything you do to the type (styles, colors, and effects) will effect the readability, usually for the worse. RULE 5: CUSHION OF WHITE SPACE White space is not necessarily empty space. It s purpose it to buffer the typographic and visual elements and help draw the eye through the hierarchy you ve created. Use white space to direct the flow of information and to draw attention, but not to separate. White space isn t always white it can also grey, colored or even black.