Matthew Tucker and Preston So gave a presentation on use of theming to make Drupal not look like Drupal. As Dries is fond of pointing out, 3 out of 4 Drupal sites are UGLY. The following are my notes on Matthew and Preston's presentation.

One big issue that Drupal themers have is making Drupal not look like Drupal. They showed:

• Pieces Inc is a Drupal Site
• Spanish Department at UC Berkley is not a Drupal Site. Matthew and Preston talked about how they like the broken in half typography treatment of the titles and that it made it more readable. (Personally I disagree.)
• What's for Dinner is a Drupal Site - Sorry, I don't have a link
• ZEE is a Drupal Site - Sorry, I don't have a link
• Viget Lab is not a Drupal Site - Matthew and Preston commented on the use of pencils, pads, paperclips, and stickies a being a trend.
• McCombsMedia is a Drupal site with a Flash front end

The point that these sites are all quite different is well taken and that all these sites *could* be in Drupal is an excellent point. They are based on Aesthetics, Layout, and (to a lesser degree) Typography.

Aesthetics

• Look and Feel is important. A good looking site will keep users involved which improves SEO
• Help achieve different moods and tones
• Allow Exploration of textures and colours

Using Regions

• You can define different layouts such as 2 column or 3 column. These are boring.
• You can vary layout and have many regions making for more interesting layouts
• You define regions in .info (D6) or template.php (D5) files
• While this is technically not related to regions 960 px fixed width has become a pretty standard width. They suggested going liquid.

Typography

• You should vary the fonts you use -- Lucida Sans Unicode and Calibri are a good starting point
• Is getting more attention with the restart of WC3 Web Fonts working group
• When choosing fonts, think about your audience's font selections--perhaps serifed for a newspaper for example

CSS is IMPORTANT

• Become an expert
• run of the mill default templates don't cut it anymore

Styling it up using Text Image Replacement

• Text Image Replacement -- Replacing a small element of text with an image. So you get stylized text. For selectable text you can use sIFR which uses Flash
• Typography on the Web is abysmal
• You can use CSS properties to change how text is displayed

Modules that use JQuery

• Nodecarousel
• Lightbox
• QuickTabs

You Can Use Theme Overrides

• There are ways to change the default HTML outputs for certain elements for those wishing to go beyond just the CSS

Trends in Design Seem to be Following:

• vintage and retro
• sticky notes and office notes
• artistic techniques -- splashes, shapes, trendy
• wooden textures -- folks are putting depth in through textures
• handwritten text -- seems to be popular

User Experience Promotes Usage

• Concurrent with aesthetics is how people look at websites and user experience (UX)
• It is agreed, people stay on beautiful sites for longer periods of time and come back again
• Specialists are being used for these kinds of designs

How people view sites...

• Visitors don't read, they scan
• They read pager in an F shape starting from the top left continue rightward then down
• How can you make sure users at least look at certain content?

White space

• In 1997 nobody cared about white space. Table layouts ruled
• Today proximity and white space are important
• Use white space to spread out content and make things easier to digest

Colour Schemes

• The end of the trend of using only web safe colours signaled a major diversification of colour schemes
• Colour variation and textures are useful for separating content into smaller portions

Accessibility (Section 508)

• Topic seldom among back end programmers front end
• Using semantic markup and web standards will assure that everybody can view

Form and Functionality

• So how can we use all of this to find a middle ground between Drupal and design?
• Common complaint amongst new Drupalers are nice looking contrib themes

Have a Vision

• Essential to the direction in favour of more form and function
• Don't let the abundance of functionality in Drupal distract you from creating a great user experience
• Don't let Drupal define your style

Truly out of the Box

• Don't think in terms of regions, nodes, and blocks--Designers don't think that way. Think in terms of aesthetics and usability. Stretch your limits.
• Find ways to mould Drupal into your attractive usable design.

\Powered by Qumana