Showing posts with label graphic design crashcourse. Show all posts
Showing posts with label graphic design crashcourse. Show all posts

Friday, November 13, 2009

Graphic Design Crashcourse: Introduction / Overview

Before we begin, we have to talk about a few things. Mainly, some of the most important concepts in graphic design that you will use to enhance your site.

This will be the first part of many that will cover some of the basic concepts of graphic design needed to create an effective homepage design. Once you are familiar with these terms and concepts, you can use them to improve your design. The series will be broken down by topic, I'll describe each, provide my own insight into each and will provide you with examples to look at and compare.

NOTE: Just know that there is no substitute for getting formal training on design with an experienced instructor and experiencing a classroom critique of other designers. An experience like that makes you stronger and more critical as a designer. If you like this stuff and are serious about it, you should go to school to learn it. Its lots of fun. The items I highlight are simply the most common in my classes that have the greatest affect on creating a website.



Part 1: Purpose - What are you trying to say? Simplify Your Message >>

Part 2: Visual Heirarchy - Direct the viewer's eye, so things are clear.
  • Dominant
  • Subdominant
  • Subordinate

Part 3: Form - Make the viewer feel comfortable.
  • The Grid
  • Golden Rectangle
  • Rule of Thirds

Part 4: Harmony - Use color to convey an emotion and to keep everything together.
  • Repitition
  • Colors - Kuler
  • Eye Dropper Tool
  • Fonts I

Part 5: Contrast - Create visual vibrations in your design with these simple techniques.
  • Size and Scale
  • Color
  • Texture

Part 6: Usability - Let's make buttons.
  • Fonts II
- - - - - - - - - - -

If you found this helpful, be sure to check out:

Part I - Simplify Your Message >>

Graphic Design Crashcourse - Part 1: Simplify Your Message

Remember that you only have but a few moments to make your impression on a website visitor, therefore, your message must be clear, not only will your website be easy to view and navigate, but from your standpoint, it will also be easier to design.

This is because the visual impression will be simple and focused, and will be judged primarily by the main image that happens to be on the homepage. You must decide what your homepage is going to say visually, and the purpose of your site.

For example, the students who have the task of making a website in my class, have chosen particular majors such as: animation, game design, visual effects, digital film and graphic design. Within animation and game design, the major can be broken down to another level, where students have to choose a focus, like modeling and texturing, responsible for conceptualizing and creating the assets to an animation or game, or they may be given the task of animation only. The website must immediately convey "the major".

In the ILM website example above, why did they choose that image? And who do you think they are trying to communicate with? Ask these same questions for your own site.

For graphic designers, I find that this is easy for them. They work from a visual medium and are well aware of composition and readability. They come up with lots of designs quickly, and therefore seem to have an easier time doing this. That's okay - go ahead and copy what they do.

Digital film, visual effects and graphic design students, must also narrow down their image to the "one" that best represents their work. One technique I see them do, is to take screen shots or still images of their movies. I found that this can be difficult at times because they usually have such a wide variety of work. A good solution for these students is if they have an aptitude for photography, a well designed photograph would suffice.

So decide, what you are and be familiar with the imagery used for the websites used in your industry. Do your best to emulate them and be sure you put your best work on your homepage.

That takes care of the visual part...

Now, ask yourself what you want this site to function as? If you are a wanting to design a creative website, you will want it to (these are the most common):
  • show your best work (15 - 20 pieces is average) in a gallery.
  • this includes a video demo reel.
  • let people know about you (bio or blog).
  • make it easy for people to contact you (contact).
This is a nice starting list for you, and if you haven't noticed it yet, it is also your beginning navigational elements. Start with these:

  • Demo Reel
  • Gallery
  • Bio
  • Contact

As a side note - I use my site to not only do the above mentioned items, but I also use it to connect to my webmail, facebook, animation highlights, and to many other websites I visit a lot. I wanted to make my site in such a way that it also makes my daily work easy.

So there you have it, let's recap:

  1. Before you begin, decide your message and simplify it as best you can.
  2. Decide on an image that best represents you and your work (this will be your main image other known as the "money shot")
  3. Decide on your functionality (I've recommended a few)
  4. What are the main links on your homepage,
  5. Is there anything else that you would like to add to your site that would help you become more efficient.
Have a great time designing. Now its time for the fun part.

- - - - - - - - - - -

If you found this helpful, you may want to read the following related posts.

A Quick Homepage Design Technique.
A Note on Design
The Money Shot: Establishing a Main Image **
Visual Heirarchy **

** Coming Soon