Drupal Design Tip for Beginners: Know Your Content

Submitted by Jesse Mutzebaugh on 04/11/2013 - 09:36:am

Each element you design has it's limits and restrictions. Having a clear idea of exactly what element you are designing will save you, and especially your developers, a lot of headache in the long run.

  1. Node - A node has a title, it has an author, a date it was created and a bunch of other fields that hold information and settings about a node. A node can be a picture, a blog post, a simple page, a product or anything at all. Some nodes on your project can have acute differences in them, so make sure you and your developers are always on the same page. Don't assume your developers will know how your one design will work with multiple nodes.
  2. Fields - Fields are what make up the node (such as "title" and "body"). Stick to one consistent design for each field. Your front end developer will do you physical harm if your field displays are inconsistent in each page design.
  3. Page - For the most part, this is what you get when you strip away the content - the outermost frame of the website. I will typically design the header, footer, and background(s) as the basic page frame. Then I will lock those layers to keep them from changing from page to page.
  4. Blocks - If a page is everything then a block is a self-contained element in the page. You can have many blocks in a page, and blocks can contain many types of information. Make sure when you are designing a block, you have a clear idea of it's function, display, and most importantly it's boundaries. More often than not, the "blurrier" you make your blocks, the more front-end development time you'll have (see pictures below).
  5. Views - Basically a view is used to select specific information from your website, and display it in any way you want. You have a lot of flexibility here, and there are many ways to display your content, so it's best to create a strategy with your developers on what each view is doing before you start designing. 

What will save everyone some headache is to imagine borders in your head as you design. Notice in each example that each piece of content has it's own section and it doesn't cross the mental borders. Again, create a strategy with the developers that fits the client's use case.

What about you? Are there any great tips you've found designing for the parts of Drupal? Leave a comment below and let us know.