Following on from last week’s article on designing with wire-frames, we’ve decided to write on the pro’s of designing with mood-boards, explaining a little about them and just what they can do for your project.

“A mood board is a type of poster design that may consist of images, text, and samples of objects in a composition of the choice of the mood board creator. Designers and others use mood-boards to develop their design concepts and to communicate to other members of the design team. The mood board may be used as a frame of reference during the design process in a variety of abstract disciplines”
Mood board - Wikipedia, the free encyclopedia

In these early stages of a website project, we can use mood-boards to show our client some different ideas & takes on their website. Each mood-board will show a “mood” or “feeling” we wish to create from the site. Once we have created several mood-boards, we can then compare them and make a clear decision on the direction we wish to take our design in.

An example Mood-board for fictional website “Midnight Sky”

There are some specific elements we include on our mood board, that when added together can show us the “atmosphere” or “mood” we would generate from our website. We include the following elements in ours:

• Designer Notes
• Typography
• Colours
• Icon Sets
• Illustrations - Vector Art, etc
• Photography / Stock Photos
• Patterns & Textures

Sometimes not all of these are required, but as standard they are the ones we look over when creating each board. They allows us to take in all the visual aspects of a design, lettings us consider why they would be good for the website - or in some case’s why they would not.

Mood boards are a great technique to embody, because:

1) Nothing is set in stone

Just like with our wire-frames in the previous article, mood-boards are not set in stone; they simply provide an insight to a particular design style. Once a range of these are laid out next to each other it makes it very easy to explain to a client your ideas & the reasoning behind each.

2) They help make you question “why?”

Many designers decide to use sIFR to allow creative fonts in headings. Some client’s may put forward having the website colour-scheme “purple” as it’s their favourite colour. Mood-boards help you to actually consider why you have made these decisions, and how they effect the website’s atmosphere.

3) They allow clarity of your website’s design direction

It is not enough to design without reason - simply saying “a Georgia font would make the website look jazzy”. Mood-boards allow us to consider what “mood” we want the user to get when arriving at our website. From this we can decide on design elements & techniques that will aid the design, not just push it along.

Summary

At Peakflow Design we use mood-boards because in the preliminary stages of a website we need something that can allow us to consider different design styles to take the website in. We can show these mood-boards to our clients, and also keep them on record in case we wish to consult them further into the project.

Try creating a mood-board today and see how clear it allows you to make design decisions for a project.

Further reading

• 404 Weblog - Website Mood-Boards: A Successful Precursor to Visual Prototyping
  This article shows you first hand what a difference mood-boards made to one design firms website design decisions.
• LifeClever - 5 Reasons to Design with Mood-boards
• FlickR Inspiration Boards Group Pool (Found from LifeClever)
  Taken from the LifeClever article, the Inspiration Boards pool at FlickR shows you a great range of user submitted mood-boards

When you create a wire-frame, you’re restricting your mind to focusing on what truly matters – the websites content. That is, we’re taking away all the graphical elements and simply labelling them from number 1, upwards; we’re breaking the site down into key content areas, which allow us to move them about much easier than if you had already started on header graphics and such forth.

To demonstrate this the easiest way, we’re going to pretend that we are a designer currently working on Fisherman’s Delight website – Client A requires a website for his fishing committee to post news & updates of the goings on at his local club. After our discussions at several meetings, we’ve found what he needs to display on his home page, shown in the list below:

1. Site Name/Logo

2. Navigation Bar

3. Introduction to the website

4. Featured Article

5. A more detailed overview of Fisherman’s Delight

6. News Entries

7. Footer containing contact information

What we are going to do now is take each of these areas, and think of them as what they truly are - content blocks of information. Our own methods of wire-framing take either the course of pencil & pad or Photoshop - either is okay. We can now create as many wire-frames as we’d like, moving the content blocks position & also their sizes, to create different design layouts. Here are a couple mock-ups including how they affect the content to the user.

Notice how we’re not touching on any visual elements – simply the website’s content. This allows us to see & decide on a layout which will help Fisherman’s Delight reach their viewers in the way we wish for, not just simply look nice & fancy.

“Speed & Flexibility”

One of the great things about using the wire-frame technique is the speed & flexibility you’re offering yourself as a designer. You can quickly see how different layouts would turn out. It also removes any possible frustration you might create from having to spend the time creating a Photoshop design, only to realise half way through that it isn’t working.

“We can decide where to take our users, instead of simply hoping for the best”

Depending on the order & size of your content blocks, we effect how our users are going to read through or scan our website. Through different wire-frames we can anticipate how this would play out, and thus decide on a design which takes our users where we want them to, instead of simply hoping for the best from our Photoshop design.

The best part of wire-frames – and why we enjoy using them so much, is how once we choose on one or several to work with, we’ve still got the entire design elements to look into: colour schemes, fonts, the lot! But the fact is now we’re already travelling in a direction that is going to work for our website - a layout we’ve tied down to build upon.

From here we can try out many different colours, fonts & design elements, knowing that whichever combination we end up with, our users are going to be able to view and discover our content the way we truly intended.

At the same time, we can easily step it back, and review our wire-frames if we feel something is missing or needs to be added. We know it takes little time to draw out some more :)

Summary

So to wrap up, we think wire-frames are awesome! They allow you the ease of trying out various designs, incrementally changing them and deciding which works in a super-fast environment that is both productive & enjoyable.

Although our example of Fisherman’s Delight is a relativity small & simple website, the use of wire-frames can be seen greater on a larger, wide-spread website (check out Jesse’s article in our further reading). We encourage you to try out wire-frames on your next project, whether personal or commercial – and see where it can take you.

Further Reading

Like what you’ve read so far? Well the story thickens… Check out these two links to find some other articles related to wire-framing.

• Case study: Redesigning the expression engine site
  Jesse Bennett-Chamberlain wrote a great article back in March of last year detailing his experience & journey on the redesign of ExpressionEngine. In the article, Jesse mentions how wire-frames helped him progress his redesign and how they can help the client also.
• Five More Principles Of Effective Web Design
  This article over at Smashing Magazine contains a technique of using an effective marketing principle, which clearly goes hand in hand with the wire-framing technique!

We’d just like to take this time to also let you know we will be having an increase in articles weekly, aiming to drop around 2-3 on average. Topics will stay as present, but you will possibly see a lean towards more design related posts.

Websites

• College Park Church
  
• Chocolat Media
  
• Morris Cerullo World Evangelism
  
• Kyan
  
• Frisk Design
  

Logos

• Highiker
  
• Cardiologic
  
• XY Films
  
• Keeley Kenefick
  
• Six Underground
  

Graphic Design

• Benjamin Carre
  
• Stina Persson
  
• Mike Mitchell
  
• Matt Taylor
  
• Rami Niemi
  

Photography

• Christian Weber
  
• Guy Archard
  
• Steven Lippman
  
• Josef Hoflehner
  
• Noah Kalina
  

Motion

• Heebok Lee
  
• We Are Born
  
• Studio Dialog
  
• KanYe West - Good Morning
  
• Meridian
  

Architecture

• Namba Parks
  
• 10 Wonders of the New China
  
• Defenestration
  
• Camps Bay Villa
  
• Nora House
  

Icons

• Coquette Icons
  
• Social Websites Icons
  
• Sketchy Icons
  
• Developer Icons by Matt Ball
  
• Kreski 140 Icons
  

Articles

• CSS Sprites2 - It’s JavaScript Time
  
• Learn How To Develop For The iPhone
  
• Creating a Slick Auto-Playing Featured Content Slider
  
• The 3 Secrets to Massive Online Marketing Success
  
• Design Critique: The TechCrunch Redesign
  

Development Resources

• Superfish - Enhanced Suckerfish Style Menu jQuery Plugin
  
• Free Photoshop Brushes: 40 Splatters, Strokes, and Watercolor
  
• SQL Buddy - Web Based MySQL Administration Tool
  
• Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time
  
• Most Desired WordPress Hacks: 11 Common Requests and Fixes
  

Tutorials

• How to Create Raining Clouds
  
• 40 Dark and Futuristic Photoshop Effects
  
• Elegant glass style navigation bar
  
• sIFR and WordPress Themes
  
• Creating Smoke Video Tutorial
  

There are many different techniques to setting your design’s font size. Here we’re going to explain advantages and disadvantages of each technique. No technique is guaranteed to work for every user, and it is up to you as a designer to chose which technique you use.

1) Pixels

The technique of setting font size using pixels came after the mess that was the “x-small” and size=“4” techniques. Pixel font sizes are the only way to ensure your font sizing will retain in browsers regardless to individual user settings, as it will override the default font size.

We like to work with a body text of 12 pixels.

body {font-size: 12px;}
p {font-size: 12px;}
h1 {font-size: 20px;}

• Font size will be that of your liking.
• We are setting the body font size in pixels explicitly, changing the users default text size initially.
• Text set in pixels is not re-sizable with Internet Explorer for Windows, causing accessibility issues. Some people find it hard to see, and need the ability to enlarge text.

2) Relative font sizing

A more accessible & usable technique we have on offer is relative font sizing. Relative font sizing works, as it suggests, relatively to the browsers default text size (typically 16pt). This technique allows you to set the font sizes as you wish them to appear, but as it works relative to the browsers default size it is also accessible to users who want to increase font sizes.

Modern browsers default font size is 16pt, so we use this to scale our text accordingly.

Body Text: 16pt x 75.% = 12pt
Headings: 16pt x 125% = 20pt

body {font-size: 1em;}
p, li {font-size: 0.75em;}
h1 {font-size: 1.25em;}

• Allows for font scaling in browsers.
• Because we are scaling body text to less than 100% (0.75em), users who changed the default font size will find our body text smaller than their usual adjusted size.

3) Pixel font size reset followed by relative font sizing

The third technique combines pixel & relative font sizing to allow text to scale in Internet Explorer, combating one of the first techniques disadvantages. Part of this method is taken from Paul O’B’s technique over at the SitePoint forums.

To accomplish this method we first set our body font size to 10 pixels, and then scale up the elements relatively as before, giving us a body text size of 12 pixels and a heading of 20 pixels.

body {font-size: 10px}
p, li {font-size: 1.2em}
h1 {font-size: 2em;}

We then include additional CSS only for Internet Explorer browsers, which will set the body font-size to x-small, the equivalent of 10px, allowing the browser to scale text. You may notice strange characters in this, to learn more read A List Apart’s article Power To The People: Relative Font Sizes

<!–[if IE ]>
<style type=”text/css”>
body {font-size:xx-small;f\ont-size:x-small}/*ie5 and 5.5. that are one size out*/
</style>
<![endif]–>

Now Internet Explorer will read the body font size as x-small instead of our explicit 10 pixels, and thus allow the text to scale. We just had to trick it first ;)

• Allows for font scaling in browsers.
• Again, we are setting the body font size in pixels explicitly, so although scaling can happen, we will still be changing the users default text size initially.

4) Relative font size reset followed by relative font sizing

Here we are assuming that the user has their browser at it’s default font size of 16pt. By resetting the body font size to 62.5%, we change this default font size to 10pt, like in the other techniques. We can then use this to build upon, just like in the previous example.

As font sizes will all be relative to the body font size, we must be careful with child elements, as they can inherit font sizes and be larger than wanted (1.2em multiplied by 1.2em).

Although assuming the browser font size can be seen as wrong, our text is all relatively sized and so the user’s font size will not be ignored, however scaled to 62.5% of what it would normally be.

body {font-size: 62.5%;}
body, p, li {font-size: 1.2em;}
h1 {font-size: 2em;}

• Font works relatively, so users can adjust font size if required.
• CSS font sizes are clearer & easier to understand than other methods.
• Body font size is less than 100% (62.5%), so any user set font size will be scaled down like in the 2nd example.

Conclusion

In general, we use the fourth technique of relative sizing. There is no complete solution to achieving font sizes across all situations, but relative tries to fit them the best. Ideally, designs should be created with relative sizing also, so they could expand and contract alongside the content. However, graphical elements do not always work in this environment.

Ultimately, no technique is 100% user-proof, as it is up to the end user as to whether they override your CSS or change the default font size. It is best to use the most accessible option to cover the greatest amount of users.

Replace your Desktop Shortcuts with a Dock

Mac’s come standard with a dock – a bar placed across the bottom of your desktop containing shortcuts to your applications neatly. They are a useful way of accessing your documents and applications compared to desktop shortcuts. For example, hovering your cursor at the bottom of your monitor when your in an application will bring the dock to focus. These docks can also notify you which applications are currently open, and complete tasks such as web search if required.

There are a range of free docks available for Windows which replicate the Mac dock and allow you to customise further.

ObjectDock

ObjectDock can be customised with a wide range of skins available, from the icons you use to whether applications are launched minimised or maximised. You can also drag a file, such as an image onto a program in your dock (Photoshop), and it will open the file within that program.

RKLauncher

Although RKLauncher is still at Beta version, it is stable enough to recommend. The initial theme included recreates the Mac Dock completely, even with icons to fit. If you do not like the standard theme, you can find many more at DeviantArt, that can replicate other styles such as Leopard. RKLauncher uses little RAM and will not slow your computer down.

RocketDock

RocketDock is very similar to ObjectDock, and is infact compatible with ObjectDock skins. The application works the same way, creating a dock on the edge of your desktop window. RocketDock also supports Docklets such as Shutdown, Log Off, Restart Shortcuts to save you even more time.

Desktop Widgets

Similar to desktop docks, there are desktop widgets available which allow you to get all information you require direct to your desktop.

Yahoo! Widgets

Yahoo! Widgets have almost 5000 different widgets for you to download. Admittedly, a range of these are games & entertainment, but there is a great amount of utilities such as Zipper, an animated utility for zipping and unzipping files or PostIt, allowing you to write quick notes you may need to remember.

AveDesk

AveDesk enables desklets, from weather information to calculators on your desktop. You can also use AveDesk to create custom shortcuts on your desktop, customising the text labels that are displayed alongside your icons. For example you could create a shortcut to your e-mail attatchments folder and display how many files are currently within it and need to be cleared up. Custom themes for AveDesk can be found at DeviantArt.

Keystroke Launchers

You may not want a large dock full of icons, and having to go through Start > Programs until you find the shortcut your after can be very tedious. The solution? Keystroke launchers allow you to launch applications without a touch of the mouse.

Launchy

Launchy is a free keystroke launcher, which once opened, will display a list of your applications depending on the letters you type in. You can customise what folders it will look in for executables, and whether to include your browser’s bookmarks or not. As with all the applications we’ve included, you are not trapped to the default skin. You can find a great range of other themes at Launch Skins or deviantart.com.

Enso

Enso is another launcher that saves your clicks and time. Once installed it allows you to quickly complete a range of commands such as copy, paste & calculations. You can take a look at it yourself at their homepage.

Extend your toolbar across multiple monitors

Oscar’s MultiMonitor TaskBar

Oscar’s MultiMonitor TaskBar does exactly that, extending your Windows toolbar across to your other monitors. Any applications open on your secondary (or third!) monitor will be shown in its own task bar. There is both a free version and also pro that costs to provide additional features such as resizing windows across monitors.

UltraMon

UltraMon does not offer a free version, but comes with advanced support for wallpapers and screen savers to let them spread over multiple monitors which is helpful. Another cool feature are the shortcuts, such as Ctrl+Right which will move an application from the left monitor across to the right. In the same way, Ctrl+Left will move it back to it’s original place. This is very helpful when you have a range of apps & folders open and need to move things around quickly.

Take control of your print screens

Greenshot is an application which allows you to save screenshots of full windows or regions of the screen with ease. It’s usefulness is self explanatory, as it saves you the time & effort of having to crop screenshots for future use in your graphics editing program.

Give your applications center focus

When your working with many windows open all at once, wouldn’t it be really useful to dim everything else out so you can focus on one. That’s exactly what Jedi Concentrate does. A free application, you can toggle dimming through keyboard shortcuts. Give it a try, it’s seriously a great tool!

Use a custom icon set

Using a custom icon set can really help set your desktop and operating system away from the norm. If you spend most of your time using your computer, surely you would want to make it appealing to look at? Icons are another free way we can do this. Below is a list of a few icon sets designed for Operating Systems.

• Windows Icons v1
  
• CS3 iKons
  
• Isospective
  
• Tango!
  
• Crystal
  

Use some inspiring Wallpaper

We’ve blogged about this already, but finding wallpaper that is beautiful & inspiring is a great way to improve your desktop and hopefully spur you on to producing great work! Some places to find great wallpaper are:

• 30 Creative & Inspiring Desktop Wallpapers
• DeviantArt
• Desktop Nexus
• InterfaceLIFT

Evernote

Although Evernote is not strictly a custom application for your desktop, we are including Evernote for its great aid in productivity - working across your desktop to internet browser.

Evernote allows you to save information you find, making it incredibly easy to find again. By highlighting text & images in your browser you can save them to Evernote, tagging them under whatever grouping you like.

They also have an iPhone/iPod Touch app which allows you to save notes, photos or audio which again will be relayed to your desktop & browser versions of Evernote. It’s a great tool for any research, learning or general browsing that you may do.

We wanted to drop this article as we use these CSS gems on almost every site we design, yet once upon a time never knew they existed. We’ve also ordered the list so each tip should follow the last in terms of practive & usability.

Hopefully they will give you some new experimentation for your next designs :)

1. Reset browser defaults then reset the browser font size

We start with the first lines of CSS any design should use! We know we’ve mentioned the reset before, but it’s a priceless tool. The first part of this is to use the Yahoo UI Reset CSS Package. This resets browser inconsistencies, giving you a fresh & clean foundation to build upon. If you don’t want to download the 9mb file, the code is below:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td {margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:”; }
abbr,acronym { border:0; }

Secondly, we like to reset the browser font size to 10 pixels, by using the following line:

html {font-size: 62.5%;}

This is a good font size to work with, as you can then use em units. For example, paragraphs at 12 pixels and header 1 at 20 pixels? Then write…

p {font-size: 1.2em;}
h1 {font-size: 2em;}

2. Design centered horizontally (fixed width)

Most websites at current are fixed width. Its debatable whether liquid or fixed is the way to go, but usually your client’s audience & market dictate this. To center your layout, apply this CSS code to the wrapper/container div of your page:

div#container {margin: 0 auto;}

3. Controlling position:absolute, relatively

Setting elements with position:absolute allows for complete control over its positioning through a distance of either top, left, right or bottom. This distance is calculated from the page boundary (body), unless we nest it inside an element set to position:relative

This may sound confusing, so look at the example below:

If we did not set position:relative to the outside div, then the nested div’s position would instead be relative to the next element up until it finds one, such as the page boundary. You can use this to help with complex layouts.

4. Position an element center screen

If you’d like to position something perfectly center on screen, then use the CSS below

div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
div.popup { margin-top: -200px; margin-left: -250px;}

You must specify the width and height of your div explicitly, and then give it negative margins half of dimensions for top and left, which brings the div back center screen.

5. Global rules that can be re-used

.left {float: left;}
.right {float: right;}
img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}

Setting yourself a few CSS selectors at the opening of your stylesheet can aid your development. Whenever they are required you can simply add the tag depending on your choice.

Our example shows the use of this with images within a blog post, the result of which is here to the right!

6. IE6 double margin on floated elements

A common problem found when working on a design, reasons behind which we’re not even going in to! But it is there alongside all the other lovely ways IE6 likes to feel individual. To correct this problem use display:inline.

div {float:left;margin:40px;display:inline;}

7. Simple navigation bar

It’s always useful to have a default navigation bar to paste into your designs. The CSS here turns a standard unordered list into a horizontal bar of lovely links! First comes the XHTML:

<div id=”navbar”>
<ul>
<li><a href=”http://www.peakflowdesign.com”>Peakflow Design</a></li>
<li><a href=”http://www.google.com”">Google</a></li>
<li><a href=”http://zenhabits.net/”>Zen Habits</a></li>
</ul>
</div>

Followed by the CSS:

#navbar ul li {display:inline;margin:0 10px 0 0;}
#navbar ul li a {color: #333;display:block;float:left;padding:5px;}
#navbar ul li a:hover {background:#eee;color:black;}

8. Table-less contact form

As we now proceed with building websites table-free, focusing on using DIVs instead (until CSS3 it seems), it’s great to be able to style forms also in the same manner. No longer are tables needed to hold columns and fields in order, all we need is some neat CSS. Found over at JeddHowden.com, we float each form input’s label next to the input box.

XHTML:

<form action=”form.php” method=”post”>
<fieldset>
<legend>Personal Information</legend>
<div>
<label for=”first_name”>First Name:</label>
<input type=”text” name=”first_name” id=”first_name” size=”10″ value=”" />
</div>
<div>
<label for=”last_name”>Last Name:</label>
<input type=”text” name=”last_name” id=”last_name” size=”10″ value=”" />
</div>
<div>
<label for=”postal”>Zip/Postal Code:</label>
<input type=”text” name=”postal” id=”postal” size=”10″ value=”" />
</div>
</fieldset>
</form>

CSS:

form div {clear:left;display:block;width:400px;zoom:1;margin:5px 0 0 0;padding:1px 3px;}
form div label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;}

9. Footer hooked to browser bottom

This is an old gem, and all credit goes to The Man in Blue. This CSS hook allows you to ensure your footer stays at the bottom of the browser window. Here is the XHTML:

<body>
<div id=”nonFooter”>
<div id=”content”> *Place all page content here* </div>
</div>
<div id=”footer”> *Place anything you want in your footer here*
</div>
</body>

Followed by the CSS:

html, body { height: 100%; }
#nonFooter { position: relative; min-height: 100%; }
* html #nonFooter { height: 100%; }
#content { padding-bottom: 9em; }
#footer { position: relative; margin-top: -7.5em; }

10. Multiple classes applied to one element

This is not so much useful code, as more of a useful feature most people overlook within CSS selectors. Any element you apply classes to, can have as many classes as you like. For example:

.red {color: red;}
.bold {font-weight: strong;}

We can apply both of these to a paragraph if wanted, by doing the following:

<p class=”red bold”>This text will be red yet also bold!</p>

Hopefully we may have enlightened some readers and given you some ways to use useful CSS in real websites. Sorry that this is the only article we’ve written this week, but our work flow has been quite hectic! Enjoy your weekends and we will have some new content for you Monday :)

We are going to be creating a series of these articles, one released every month, that catalog a great range of inspiration and all-round fun things to see on the internet. We want them to be read on a friday afternoon or over the weekend, when your winding down – but also bookmarked to come back and use as inspiration for your next working week/month.

Without further ado, the lists begin…

Websites

• Henry Jones
  
• Tasty Planner
  
• Rapidweaver
  
• Macalicious
  
• Komodo Media
  

Logos

• Octopeg
  
• Magics Friends Creative Studio
  
• First United Methodist Church
  
• A Clean Logo
  
• Wet Innovations
  

Graphic Design

• Craig Shields
  
• Pixeloo
  
• Jinyoung Shin
  
• Joseph Marconi
  
• Omay Gad
  

Photography

• Jorma Luhta
  
• Noah Sheldon
  
• Michael Wolf
  
• Ryan Schude
  
• Jeff Vespa
  

Motion

• Dgenerate Nation - Skate With Me
  
• Estee Lauder
  
• Discovery Channel
  
• Skate - Shot on Red 120fps
  
• Revolve 2008
  

Architecture

• Baumraum Treehouses
  
• Studio Dror - Nurai
  
• Nordpark Cable Railway
  
• Cities at sea
  
• Crooked House
  

Icons

• Twitter Bird
  
• Function - 128 Icons
  
• ORB Icons
  
• Circular Icons
  
• Blogging Icons
  

Articles

• CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices
  
• Don’t Forget the Design Fundementals
  
• Comment Zones : 15+ Creative And Original Examples
  
• Easily Password Protect a Website or Subdirectory
  
• Managing Clutter
  

Development Resources

• Carousel.us - Javascript 3D Carousel with Scriptaculous
  
• pChart
  
• Bind a Hot Key Combination with jQuery Hotkeys
  
• How To: Learn AJAX in 20 minutes
  
• HoverAccordion jQuery Plugin
  

Tutorials

• Building your own lightbox - part 1
  
• jQuery: Animation for Dummies
  
• Build a Featured Posts Section for WordPress
  
• Design an Album Cover Using Spectrograms
  
• Learn PHP from Scratch: A Training Regimen
  

A creative brief is a questionnaire for your client, that covers all the information you are going to require to be able to go ahead and begin site architecture, mood boards & wire-framing (if necessary). It is also very useful to have this information recorded, as at any time you will be able to go back and look at what your client’s initial views were, allowing you to ensure your work stays focused.

If you take a look at our contact page you will see we have our own creative brief document for download. We offer this as it allows the opportunity to cut out a lot of questions from the initial meeting, and progress a client’s project quicker. You can also ask these questions on your first meeting, which would work the same.

Like any document, creative briefs follow a typical format. Below we have listed the various sections of our own, and spoken on how they can be helpful to finding information.

1) Contact Information

This section provides an overview of your client, including contact information you will require at any stage of the project.

2) Project Overview

The project overview allows for you to find information related to the projects overall goals. We ask such questions as:

• When are you aiming to launch this project?
• What action(s) would you like the user to perform when visiting your site (i.e. get in contact)?

Now we know what the client is looking to get out of this project and when they want it completed, we can start focusing on the direction we are going to take this project in.

3) Site Redesign (if this is a redesign)

We include this section to the creative brief after the project overview, for the reason that if this is going to be a website redesign, then the client must have a reason for this – which will relate to the project overview. We ask such questions as:

• What is the reason behind your redesign (i.e. update the look or draw in a new audience)?
• What areas of the current site do you feel are unsuccessful and why?

This allows us to again, build up an image of where the client is hoping to take their project and allows us to focus on this from the very beginning, ensuring all hours spent on the project will be successful.

4) Website Design (Look & Feel)

Now that we know where the client wishes to take their project, we can ask them how they would like the website to look. Some designers may work towards a website that fits the current web trends. However, a website design should in fact support the content & target audience the website has.

• Please describe how you vision the overall design as best as you can (i.e. clean, professional, minimalist or dark, distressed)
• List websites you dislike and give a brief reason why for each
• List any competitors web addresses and how you set your company apart from these

You may wonder why we ask what websites the client dislikes. However, from previous experience we have found it is a lot easier to say what you don’t like, rather than what you do! Therefore this helps to alienate any design styles the client does not want to take their project too, which is very useful.

This is also the time to ask them to list any competitor web addresses. We place this question here instead of the project overview, as some clients may not like talking about competitors, and it fits in here nicely while not drawing too much attention.

5) Content

By now you should be building up an image of where your project is going & already have ideas as to where to take your design. But before you do this, you need to know the content your client wishes to hold on site.

• Will the content of the website require to be updated on a regular basis?
• Is there any existing content that needs to be included in the site?

These are two of the questions we ask. The first targets whether they will be requiring a CMS system or not which will effect hosting, while the second will let us know if there is any current content we can take a look which may suggest where to take our first designs.

6) Technology

In the last section to our creative brief we ask:

• Are there any features you would like to see built-in to the site (i.e. AJAX, streaming video)?
• Does your website require an e-commerce solution or an online store?

These questions offer answers that will not affect your project this early, however will help you to understand the scale your client wishes to take the project and also whether you need to spend some time looking at e-Commerce solutions or specific AJAX scripts that the client may find fitting to the website.

Conclusion

Overall, the aim of a creative brief is to assess the client’s motivations and requirements out of their website, helping you see a clear direction to take the website in, which the client will be happy to reach. It’s all about hitting your client’s targets for their project, and a creative brief is definitely the best way to do so.

If you haven’t used this method before, we recommend you take a look at our creative brief and then devise your own. You may come up with other questions you’d like to ask, but that’s the point. We are sure it will help you focus your efforts on future projects in a positive way :).

Further reading:

• Design View / Andy Rutledge - Design Questions
• The Creative Brief: 10 Steps to a Better Project

We’ve listed a range of wallpapers that create an awe-inspiring mood which will help you creative juices to flow! They are also clear of text & harsh colours, so work well with your desktop icons or dock.

Abstract

• Aerostream
  
• Allure
  
• Aquadrome
  
• Aurora Reloaded
  
• Color Flow
  
• CS Flow
  
• Experiment
  
• Flow (also includes iPhone sizes)
  
• Leopard Conquer The Universe (also includes alternative without apple logo)
  
• Leopard Server Aurora
  
• Malstrom
  
• Outta Space
  
• Revours
  
• Shine
  
• Smoke
  
• Something About It
  
• Strukt
  
• Synergetic
  
• Tribute
  

Land

• Bowbay
  
• Chill
  
• Feels Like Autumn
  

Space

• Beyond Horizons
  
• Ethereal Bloom
  
• Etherlight
  
• Mystic Universe
  
• Swan Nebula
  
• Travel Reborn
  
• Travel 2 Spirit Away
  
• Twilight
  

Bonus: Flurry Screen saver

• 
  As a bonus to the wallpapers, we’ve included a link to the Flurry screen saver. This is the screen saver seen on Mac’s, replicated to work on Windows. It has a bunch of settings you can play with to top if off!

Today we’re focusing on WordPress specifically, and providing links to a range of tools & techniques that I find can help when creating a new website from scratch. We are not looking at using any existing themes - this article is written for anyone looking to create their own theme from the ground up - 100% yours :).

Method 1: Build upon an existing blank theme

The default & classic themes that come as standard with WordPress do their job well, but if you’d like to take your website or blog further via a custom design, there are a range of blank themes on the internet that can help you do this, and also save some time on your theme building!

K2

K2 (Kubrick 2) is a blank theme very similar to the default given with WordPress, however it comes with a range of built-in-plugins such as recent comments & AJAX functionality. The theme is also kept up-to-date, so it is sure to work with the latest version of WordPress.

Refueled Blank Themes

This would be our choice if we required a blank theme. The markup is clean (as are all the themes), and it does a great job as foundation for further design customization no matter how little or large you plan to go.

iThemes Premium Blank Theme

iThemes are well known for their premium themes, and they offer a blank theme for $79.95/£40 designed for a blog/news website. I left this to last for the fact it is premium, but the individuality of the layout makes it a good option if you are short on time.

Method 2: Building your own blank theme

Obviously, you may not wish to use a pre-made theme, and building a blank theme from the ground up allows you to fully understand the ins and outs of WordPress.

I am not going to churn out an article about creating your own WordPress Theme, as it has already been done before to great effect at WPDesigner and ThemeTation, however there are some techniques & tools I’d like to bring to light that may help you when designing your theme.

Yahoo’s UI Reset CSS Library instead of * {margin:0;padding:0;}

All browsers render web code slightly differently to each other, most notably the deadly sin that is Internet Explorer 6. Many designers (and the blank themes above) use a single line of code to “reset” all browsers default styling.

* {margin: 0; padding: 0;}

This line accomplishes the task, however it is not an efficient method. I suggest taking a look at Yahoo’s UI Reset CSS Library, which targets the CSS selectors specifically. Do not begin any design without using a reset in your CSS, as it will save a great deal of time & stress in further development of getting your website to look correct on different web browsers.

Designing In Grids

The idea behind a CSS Grid is to create an invisible grid, which divides content horizontally and vertically, resulting in a pleasing design that is easy to browse. Grid designs are primarily used on news websites such as Wired News.

CSS Grids can be used for any website - static or content managed, plus using a grid designed around the rule of thirds or golden section will result in an aesthetically pleasing design.

There are a range of CSS Grid Frameworks available if you would like to see what they offer. Take a look at both 960 CSS Grid System and Blueprint CSS Grid System to see what grids can do for your design. Once you’ve familiarized yourself with the technique, you’ll realize it is quite simple to achieve this effect yourself, and you can build your own grid whenever you desire.

Tools to aid Productivity

Any way in which you can save time and stress when coding seem great to us! There is a huge selection of Firefox Extensions available over at their website, but there are a few in particular that are incredible when working on a design.

FireBug

“Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.”

This is an amazing tool which allows you to view the changes you make to your style sheets in real time. This is a great tool for any scale of development.

Dust-Me

Dust-Me Selectors is an extension we should technically not require. Its job is to find unused CSS selectors in your style sheets. Surely this is not needed, but I think you’ll find as you revise code in the development stages, and then in the future when you may decide to change around areas and styles, it’s always useful to find out if you have any unused selectors which you can then remove to cut down bytes out of your page file size.

Web Developer

Web Developer is a very powerful extension that adds a menu/toolbar to your browser, allowing you to complete a range of tasks such as resizing the browser to typical monitor sizes, outline CSS selectors & much more! This is definitely an essential tool in any web designers kit.

GridFox

GridFox goes hand in hand when designing under a Grid Framework. This Firefox extension allows you to ensure your grid layout is maintained across your website at any time. It is also useful as you can use it to find out what grid layouts other websites are using.

Conclusion

With the methods & tools we’ve listed above, I think you’ll find it a lot quicker & simpler creating a website built with WordPress. Of course, these are only the opinions of Peakflow, and we’d love to hear of the ones you personally use - they may be just as useful! So please feel free to get engaged and comment below.