GRDSN 215 Web Process V

After reviewing the creative technique examples (Pop Out, Slide Out, etc.) provided you will be able to produce and develop creative typography / logotypes for specific events or organizations. For each exercise, you will need to choose (or invent) a company or organization and develop a logo using type only.

For each of these logos, create a "Style Board" (The British web designers at ClearLeft.com call them "Mood Boards") to focus your approach to the client. Include at least one photo in your collection of style/mood examples. Save your style boards as PDF files, or you can mount them on a black mat board if you prefer to work in "meat space".

These logos should demonstrate the use of one or more of these creative techniques, and should supplement your portfolio. Consider some styles outside your normal comfort zone - challenge yourself!

GRDSN 216 Web Technology

Use the logos you created for Process as web page "clients". You may want to include an image from your Style Board in the page.

Design and build a web page for this client. You may use images in your web page, but try to do as much of the design with CSS as possible. On some of these pages you will provide space for advertising. The advertisers will be some of your other logo clients.

Use these web page layouts to become comfortable with the layout tricks of CSS. The goal is to learn how you can control the layout with a minimum of technology, such as the use of styled lists to create horizontal and vertical nav bars; develop a column layout using the float property applied to divs.

And, from Process, you need to master the typography for the web. Unlike print designers, you only have a handfull of typefaces. You need to become really familiar with the personalities and properties of your core fonts. We will try to get the most effect out of our type choices and formatting. Use the web pages as a testing ground for typography skills.

Create a banner ad for your logo client. It can be a simple GIF animation that builds a word/image sequence, or it can incorporate Flash or other technology.

Choose a size you feel will fit into your pages and reflects the trends you find on the web.

These should also serve to supplement your portfolio.

How Many?

These should be quick exercises. Avoid spending excess time on the finish and concept of these pieces. Imagine them as those rush jobs you will be given to complete in an hour or two.

Logos and style boards: 10 logos

One per week with the first due at the first class meeting of the second full week of the quarter.

Web Pages: 5, roughly every two weeks.

To post your work onto a real FTP site, go here

Web Banners: 5, roughly every two weeks.

Presentation:

Throughout the quarter develop a directory html page of your logos, pages and banners (banners may be on a separate page and also embedded in the web pages).

CREATIVE TECHNIQUES

POPOUT:

Look for shapes within your typography to "POP OUT". This can be the "counter" of a piece of type or a shape that you have created.

SLIDE OUT:

Look for shapes that you can cut out and "slide" up, down, left or right.

DISTORTING:

Try twisting, turning or pulling parts of the type to gain a different perspective.

REVERSING IT OUT:

Try reversing the type out of a shape that you have created in order to use to have a "figure/ground" relationship.

SPACING IT OUT:

Try varying the space of letters to achieve a feeling, mood or sense of motion.

DISAPPEARANCE:

Try having the type or shape fade to the background or go away completely to achieve a sense of space or motion.

SCRATCH OUT:

Try scratching at the surface of the type to achieve a feeling or texture.

CUT BITS OFF:

Look for ways of slicing the type and moving or deleting areas.

BORDERS:

Add a border or outline using type or simple shapes to create a feeling or mood.

ADDING TO IT:

Add shapes, clip art or symbols to the typography that help create interest.

CONTRAST:

Try contrasting type faces by using a totally differnt font or using book, bold or italic.

HINGE:

Try hinging shapes onto the sides or from a point on the type.

TEARING:

Print out the type and tear edges or shapes out to gain a dramatic feeling.

3D:

Using "closure" or rendering the type in 3D... develop a space in which the type lives.

OVERPRINTING:

Overlap text and colors to create seemingly transparent areas.

MESSING IT UP:

Create a texture to the type that may not be able to reproduce by crinkling, xeroxing, smashing or roughing it up in any manner. Note: In order to achieve originality, do not rely on typefaces that have a specific look.

.

CONDENSING OR EXTENDING:

Extend or condense "cross bar, arm or stem" of a particular type face to create achieve a unique look.

REVERSING:

By reversing type you can create new meaning.