Main Content

CDMUG - Chad Goodrum Presents: Web Design for Drupal

CDMUG - Chad Goodrum Presents: Web Design for DrupalAt last week's CDMUG Chad Goodrum presented on just what exactly design is in regards to web design and the various elements involved.  Below is a summary of the presentation.  You can view the presentation itself at the bottom of this post via the embedded Slideshare slideshow.






Topics Covered in this Presentation:

  • The design is not art  
  • Design basics for the web
  • Drupal elements to style
  • Online tools


Design Vs. Art

Web design is not the same thing as art.  There may be elements of art within the design, but design consists of many technical parameters that can limit an artist's ability.  Design includes having the right site layout and tools to get the job done but still convey information in a logical manner that serves a purpose.  Art by itself is generally uncontained by any specific parameters as it allows the artist freedom of expression.
 

Design Basics for the Web

Design basics consist of three parts:

  1. Layout
  2. Color
  3. Typography

Layout.
The most common way to design a website's layout today is to use what is known as a 'grid.'  A grid is basically a series of vertical columns that divide your website's space evenly.  Most websites today use a template that is 960 pixels wide and contains a gride of 12 columns.  But this all depends on the preference of the designer as well as what type of content will be displayed on the site.

Color.
Color can be used for many things on a website, but it is important to remember to have a consistent color palette that is present throughout every page on a website.  This helps maintain a level of consistency and also promotes branding.  Most color palettes contain 5 to 7 distinct colors that are used throughout the build of a website.  Adding more colors on top of this can lead to excessive clutter and throw off a user.

Typography.
Having the proper font on your website is an important factor that is often overlooked in the design process.  When choosing the right font for your site you should not only consider which font looks the best but also which fonts are widely available to the general public.  Only certain fonts are natively available on Mac OS and Windows operating systems.
Common choices for headlines are Georgia, Arial, and Helvetica,
Common choices for body fonts are Georgia, Arial, Verdana, and Lucida Grande.

 

 

Drupal Elements to Style

 

 

Commonly used Drupal coding elements that affect a site's style:

Header
- Footer
- H1 - H5
- Body
- Link
- Unordered List
- Blockquote
- Image Style
- Code

See slideshow for the full list.
 

Online Tools

 

Inspection and editing tools:

 

  • Firebug - the quintessential tool in any designer's arsenal.  Firebug is an outrageously popular plugin for Firefox that allows you to inspect and edit a site's HTML and CSS on the fly.

http://getfirebug.com/


Online Color Tools:
For helping you decide which colors to use on your site.

  • Kuler by Adobe

http://kuler.adobe.com/

 

  • DeGraeve color pallete generator

 

http://www.degraeve.com/color-palette/index.php

  • Colour Lovers

http://www.colourlovers.com/


Grid Tools:
To help you decide how many columns to use on your site's grid.

 

  • 960

 

http://960.gs/

  • Grid generator

http://netprotozo.com/grid/


Type Tools:
To help you choose which font styles and sizes to use.

 

  • pxtoem

http://pxtoem.com/
 

  • Css Type Set

http://csstypeset.com