Designing for Drupal: Photoshop Best Practices (Part 2 of 3)

Sep 17 2009

My last post served as an introduction to designing for content management systems (CMS) in Photoshop – how to get set up and get started. In this post I’d like to give you some tips for designing some of the main components of a CMS website: the background, navigations and columns and content blocks. Next week’s post will show you how to finish things off with headings, footers and lots of fine-tuning.

Main Background

Considered one of the best spots to show a fancy and skillful design approach, the background treatment should be taken as seriously as possible. Besides the amount of space you have, there is also a great opportunity to build some continuity between the background and content areas. Here are some examples:


Figure 05: www.npc.edu


Figure 06: www.casrai.org


Figure 07: www.globalonenessproject.org

Instead of having only a fancy pattern, you can also combine a pattern-based background in a layer below, and have another layer on top of it with some transparency or other effect.


Figure 08: http://gardenmatters.ca & www.thewellspringfoundation.com

For this purpose, it is best if you keep your website layout in a very wide canvas size like showed on the picture above with the “New file” dialogue box (1400px wide).

Also, avoid having a sharp end to the background image. Large monitors are getting more and more affordable, which allows more users to be able to see 1280px wide or even more. One simple and easy solution is to fade out the background image after a while.


Figure 09: www.ivertise.com

Another thing that can happen if you limit the layout width and background imagery to certain resolutions is that some bigger screens will show the gap in repeated backgrounds.

Always keep in mind 2 things in this regard:

  • ability to repeat if is a pattern,
  • a well-resolved border for wide screens in case it is a static non-repeated image

Main Navigation

This is another great spot to show off your design skills. In the main navigation, you can use different design styles to highlight the options, i.e. “mouse over” or “selected.”

Using tabs in the main menu is an attractive and usability-wise good way to go. This ImageX Media website you are looking at uses tabs for main navigation, and here are some other examples:


Figure 10: http://web.dletasd.bc.ca


Figure 11: www.healthscreen.com

Keep as much consistency as you can in the main navigation. Remember that this is a place that will be used often. Refine the main navigation with tidy details, strokes or effects. The selected or current tab should be highlighted well, and try to use big and clear fonts. A little more design effort on the main navigation is always worth it.

A good example of an extra detail when mousing over the main nav can be seen here:


Figure 12: www.creativepro.com

As we are talking about CMS-based sites, which in many ways means scalability, do not create differences (like dimensions and background details) between the main navigation links.

Another thing to consider is the possibility that the client may decide to get rid of one or two links. If this happens, to which side of the main navigation will the remaining links align? Always keep this in mind, as well as the amount of links. Be sure to keep in touch with the Information Architect (IA) to find out if the client is planning to increase the amount of links. Planning extra spaces in advance, if needed, allows for smoother maintenance afterwards.

On the NPC website you can see a different approach to main navigation design which keep the drop-down menu on the same colour as the “mouse over”, showing a clear and easy navigability. On the Forbeadin’ Treasures the current menu shows a similar icon matching the branding of the company in a clever way.


Figure 13: www.npc.edu

Figure 14: www.forbeadintreasures.com

Columns and Content Blocks

These are a little bit harder to be creative with, as you have to keep all the content groups or blocks consistent and be able to move them into different spots. Columns, however, still have interesting design possibilities.

One way to spice things up is with backgrounds. Use background watermarks inside the columns, but make sure that any block of content can be laid over without contrast problems. For example, if you have a high contrast fixed watermark in the column and a text block goes over it, the watermark may jeopardize the readability of the text. To avoid this you can set a solid colour to cover the content block background.

For content blocks you can apply corner shadows, ending borders or background images. The Valley Creek site shows some well-designed content blocks. Even with having three straight columns, the ideas are genuine and that makes the design interesting. However, maintenance-wise it can be tricky if some of the content blocks are supposed to move.


Figure 15: www.valleycreek.org

The Protecting Surrey Schools Together website site has textured block borders and backgrounds, as does the site from FreshBrain:


Figure 16: Blocks design – PSST textured block backgrounds

Figure 17: Blocks design - www.freshbrain.org

Subnavigation

One way of designing subnavigations or drop down menus is by using bullets and background details such as watermarks and mouse over selections.

The Food Network site has a nice design for the submenus, showing them in subsections. The Delta School District site below has a clean design showing a good combo of bright colours on bullets.


Figure 18: Subnavigation from Food Network site - http://www.foodnetwork.com


Figure 18: Subnavigation in content pages from School District 37 - http://web.deltasd.bc.ca

ImageX Media also has a right side submenu navigation showing a rounded gradient background for each line, and a different color for the mouse over effect, making the navigation very clear navigation and the design more interesting. This site shows a very interesting approach to the submenu mouse over effect, and it stills consistent and able to scale with more links.

Stay tuned for Monday’s post: headings, footers and polish, polish, polish!

Learn from us
Sign up and receive our monthly insights directly in your inbox!

Subcribe to newsletter (no spam)

Fields