GRAPHIC DESIGN FOR THE WEB

WEBBY AWARDS SITE ASSIGNMENT

Visit the Webby Awards site and in particular the 2011 winners section

Webby Awards

Select a section form the list, such as Activism, Art..Automotive….Beauty & Cosmetics…Best Navigation/Structure. Make sure that all of the sites are still active.

Answer the following questions in the form of an email to jthomson@retsd.mb.ca,  or a word document. The answer should give your opinion with reasons supporting it:

  1. Do you agree that the Webby Winner is the best site in the category? If not, which site do you like more? What makes your choice better than the rest?
  2. Good site design organizes the information in an affective way, so that the most important information in the most obvious? How does your winner do this?
  3. Is the navigation system easy to use and understand? Why?
  4. Does the site design combine visual and text in an interesting way?
  5. How does the site you think is the winner compare to this one: Ling’s Cars?

Basically the goal of this course is help you to apply the graphic design skills you have developed in your other sections of the Graphic Design Vocational Program to the design of web content. Hopefully in the end you will be able to create sites more like the webby award winners than ‘Ling’s Cars’.

Why would would you want to learn web design? Well, how many magazines did you purchase this month? How many posters did you buy? How many CD’s did you purchase? How many web sites did you visit this month? How often do you view content on a mobile device?

“…web design is not separated between designing and coding the same way architecture is separated from building and construction practices. However, I know enough construction workers to know that they do appreciate an architect who knows enough about construction to create a workable design.”

MICHEAL TUCK http://sixrevisions.com/web_design/should-web-designers-know-html-and-css/

Web design is not easy. In design for print at least your design only needs to work on one size of paper. Web content could be viewed on a phone or on a wide screen tv. Fortunately a lot of your skills are transferable to web site design, but at least some knowledge of the code that is used to form web pages is a good thing. Take a look at the following page, for some information on current trends in web design, and the importance of learning code.

Core Aspects of Web Technology

To a designer used to Photoshop for everything, designing web pages may seem a very scary prospect.

The first thing you need to understand is that all your graphic design skills are still applicable and valuable in the world wide web. Many companies work in teams with graphic designers and programmers working together to produce web content.

The second thing you need to understand is that Web and Mobile content is not static. Without knowledge of how interactivity is created you are condemned to being at the mercy of those you can. Your chances of finding employment in a design firm are about 0. Your chances of making a living as a freelancer, extremely limited.

I equate this to a designer making a sketch, felt marker comp or other non digital image and giving instructions to an artists to produce art for an illustration. If you are a Senior Designer with talented employees, you might be able to work like this. For an entry level designer, the chances are you will be doing actual web production/ development, not marker sketches.

Here are the main areas of knowledge that will help you to find employment in the mobile world.

Graphic Design Skills – Creating typography,  icons and images, and selecting color palettes that work well on a variety of screens is an essential skill. There are some technical aspects that impact on design. Using fonts on web pages is not as straight forward as for print. Images must be in a file format that web browsers can show. These are things I will instruct you about. You are luck though, its much easier to apply good graphic design to sites these days.

HTML (3>5) – Knowing how to “hand-code” basic web structural elements:html, head, body, div and semantic elements, older tags such as h,p,block-quote, a, img, and newer HTML5 tags such as header,nav, article,aside, and media tags such as video and audio. HTML is the first level of interactivity, including links, and forms to allow content to change according to user actions.

CSS – Cascading Style Sheets are the visual design layer of code for the web. It’s hard to learn how to use CSS without knowledge of HTML, but CSS is the way in which your visual ideas are implement, so the better you know CSS, the more you are in control of your design. CSS is the second level of interactivity, including hover effects, and a limited number of animation and transitions.

Javascript (jQuery especially) – It is scripting that creates many interactive capabilities such as drop down menus, accordian menus, slide shows and animations.

Responsive Design – These days web content might be viewed on a 60″ wide screen TV or the latest tablet or smart phone. There are a lot of issues involved with different web browsers and platforms. Technologies such as HTML5 and jQuery and other scripting libraries are making it easier to design for a variety of platforms.

A Designer Approach to Web Design

  1. Grab the audience attention with great graphics and typography
  2. Arrange your content logically, using grids, emphasizing the most important content
  3. Use multimedia content, such as audio and video and animation for emphasis not camouflage.
  4. Create visual harmony on pages with color themes and typography
  5. Create unity within a site by using repeated elements, ie headers, footers, navigation elements.

HTML 5 ARRIVES

Should Designers Learn Code

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: