Designing for Drupal: Photoshop Best Practices (Part 3 of 3)
My last two posts (Part 1 and Part 2) discussed various tips and tricks for designing for content management systems (CMS) in Photoshop. So far we’ve covered how to get set up and get started, as well as some of the main components of a CMS website like the background, navigations, columns and content blocks. This week’s post is about how to finish things off and add polish with headings, footers and lots of fine-tuning.
Headings
Headings are interesting to design, but can be limited in scope. You can use textures, colour stripes or icons for special headings, but the tricky point here is the ability to change the titles in the future. Be sure to use web-safe fonts and a design that can accommodate more than one line of text if needed. Once it is under a CMS engine, the client will be able to change and/or expand the website, so it’s best to keep these things in mind to prevent design breaks in the future.
Figure 20: Headings design in Delta School District 37 site - www.discover-energy.com
The Delta School District site has headings with a colour stripe on top of it which has different colours for different blocks, breaking up the potentially repetitive feeling of CMS-based website designs.
Figure 21: Headings design in Delta School District 37 site - Delta School District
Footers
The footer is another great section in which to play with different design possibilities on a larger scale, such as illustrations, textures, light effects and so forth.
In the footer, you have the same design possibilities whether the site is CMS-based or not. Patterns are a popular way to construct a beautiful footer. Explore various background possibilities – as the footer will usually stay the same for all pages, a large illustration can be shown there. Usually, footers are divided in two ways:
Expanded footer: The expanded footer shows more links than a simple footer, usually divided in columns. For example, the Extractive Industries Transparency Initiative site shows lights effects and transparency in one squared box over the regular footer background.
Figure 22: Extractive Industries Transparency Initiative website - eitransparency.org
The DrupalCon DC 2009 website does a good job of combining illustrations and patterns in an attractive expanded footer.
Figure 23: DrupalCon DC – 2009 - dc2009.drupalcon.org
To learn more, this article is a great resource for expanded footer ideas.
Simple Footer: As the name indicates, this a simple line or two of links and copyrights, sometimes with small design details showing more than just colour. Using simple footers, as opposed to expanded, is a good idea for websites that already contain a lot of information. Because the page is already busy, using a simple footer makes the design a little cleaner.
Details and fine-tuning
Any design work should be very detail-oriented. It takes time and effort, but it is always worth it.
As recommended above, using vector objects for boxes and solid lines is a good idea, as they have a smaller file size and the ability to stretch without losing any quality. However, Photoshop doesn’t handle vector objects in sharp pixels like Fireworks; usually the designer needs to do some fine-tuning in order to avoid anti-aliasing where it isn’t necessary. For example, depending on the zoom level, each time you press the arrow keys to move the vector nodes, the corners of a vector object will move in a different distance. To really design pixel by pixel, try to work at 100% zoom. To make a fine border, go as close as you can. See image below:
Figure 24: Photoshop vector detail in different zoom levels
For gradient shadows or fills, avoid having any noticeable colour banding. This can happen when you have a too-subtle contrast between the two colours you’re using. If the contrast is too strong, try different opacity levels, which you can quickly do by selecting the layer and typing any number. e.g.: 4 = 40%. If you are planning on having a gradient as a background of a block or column, remember how it is supposed to show up in case the element with the gradient background increases in size. A good way of doing this is to match the end of the gradient with a background colour.
Figure 25: Gradient background suggestion
You can get sharp borders and fancy effects by adding a 1px line in the right place. It makes the entire design look more professional and neat. See image below.
Figure 26: Subtle thin line to sharpen borders
Shadows are, of course, a common design element, but avoid casting too large a shadow, as this increases the challenge on the development size. Besides this, shadows can take too much useful space from your layout. Remember to also keep things scalable so you can implement and repeat the shadow borders.
Figure 27: Difference between rough drop shadow and more subtle shadow
Rounded corners are a design detail that helps keep things from looking too square, but keep in mind the implementation issues. Of course, until CSS3 is totally implemented, the rounded corners will need more hand work on the theming stage. To make it easier, avoid having the circle radius of the corner too big, as it takes too much space.
Figure 28: Difference between rounded corners
Designing for CMS websites doesn’t have to be boring or restrictive. By using these guidelines to your advantage, you can design unique and creative sites that will be both a feast for the eyes and will help the user navigate the site with ease and clarity.
