New to Vibr8 Bros.? Don't panic. Get our RSS Feed.

In this part of Project WordPress, we are creating a layout for our customized WordPress blog. The blog layout strongly depends on the niche you’re in and how you want to appear to your readers. Every niche has its own preferred blog style that you have to consider before you start blogging.

Until now, we’ve already covered these parts of Project WordPress:

Part 1: How to install WordPress, set it up and do basic customization;

Part 2: Eight dead essential WordPress Plugins;

Part 3: 10+ recommended WordPress Plugins to make your blog prettier.

Part 4: Create Your Blog Layout

Are you starting a new design blog, or are you going to write about cool gadgets? Do you want to blog about your personal life, or are you in the make money online niche? Knowing how you want to position yourself in your niche is the first step for creating a custom WordPress theme, and should be considered before we go any further.

To show you what we mean, let’s take a look at four blog layouts that are very different from each other. We picked a blog from every one of the above niches. Click on the screenshots to enlarge the images - we noted a few things for each. We also provided a link to each blog.

The Design Blog of Elliot Jay Stocks

The Tech Blog Engadget Mobile

The Personal Blog Heisse Scheisse of Jen

The Internet Marketing Blog of Courtney Tuttle

Regarding Engadget Mobile vs. T-Mobile, also check out the meaning of colors in branding over at the Magenta Lessons series on our sister blog Nubloo.com.

Of course, there are lots of other niches in the blogosphere, but you get the picture. (We mean existing niches. You could certainly also create your own! But that’s another story.) Every niche you decide to go with has conventions and certain style attributes that we need to consider when we make our custom WordPress theme.

Why follow conventions?

By following conventions we don’t mean to do what everybody else is doing! That wouldn’t make much sense, especially in the design field. The majority of people are copycats - that’s the definition of the word “trend”. It all comes down to the purpose of your blog. Do you want to be unique? Well, don’t be conventional.

Conventions only apply to the layout, meaning the arrangement of the elements on your blog.

While the four blogs above only represent a tiny fraction of what the World Wide Interweb has to offer, we can already see general differences in the layouts. The way the content is presented creates a common surrounding for your readers and positions your blog in a specific market niche. Choosing the appropriate layout makes it easier for your readers to feel “at home”.

For Project WordPress, we want to go personal - but with a design oriented theme. That’s what our client asked for (if you read our previous project posts, you know that we designed this custom blog theme for a client, and are walking through the whole process with you).

We will reveal the blog design we created for our client at the end of the project. All we can say right now is that it’s a brand new blog of a successful business consultant who leads a very fascinating life and is now sharing her experiences on her own blog.

On Today’s Menu: Create a Blog Layout

Create a blog wireframe and position the elements. A typical WordPress blog will have a header, a main content area, one or more sidebars, and a footer. Here, we particularly have to see if we want one sidebar, two sidebars, three, or none at all. Using Adobe Illustrator, we’ll create the graphic structure of the blog.

Usually, we’d start with the logo first before we do this part - but in that case, you could simply search for the blog name and find out which blog we are talking about ;) And since we are developing the final blog with you, to be released by the end of the series, we have decided to release the tutorial on creating the logo at the end of Project WordPress. Stick with us for that part!

But for now, let’s dive right in, shall we?

A wireframe is quite important in web design. It’s usually the first step in the design process. A wireframe provides the structure and placement of the elements of a website, without caring about the appearance, or style, too much. It’s also crucial for designer-client communications.

Remember, we’re doing a personal blog here, so apart from some research about this niche, we won’t start off with a branding and marketing plan as we usually do for bigger clients.

Let’s open up Illustrator.

Note: this tutorial is written for Adobe Illustrator CS3 for Windows, but of course, you can also follow if you have an earlier version, or even a different vector design application. If you are using Mac, Ctrl is Cmd and Alt is Opt.

Step 1

Create a new document. Don’t worry about the artboard size, we just need an open document for starters. Just make sure that for New Document Profile, you select Web. This automatically sets the Units to Pixels, the Color Mode to RGB and the Raster Effects to 72 ppi.

In the open document, we’ll first rename the present layer. In the Layers Toolbox (hit F7), double click on Layer 1 and name it WIREFRAME.

A word on the use of capitals for layer names: we use caps to distinguish better between layers and sublayers. This will become important in the process of Project WordPress, when we’ll work with many different layers. Except for the wireframe layer, we try to avoid placing any elements directly in a parent layer. Instead, we’ll create sublayers for every type of element.

Step 2

Now this is where your research and experience comes in: how wide do you want the blog layout to be? There are approaches of all kinds on the internet, so you might just want to take a look around and see what others are using.

For Project WordPress, we’re going to use an overall fixed width of 960 pixels, with the “viewable structure” being 750 pixels wide. The overall width is larger than the viewable structure because we’ll use a wider header design.

We’re going to create an overall background frame first, so that we always have a reference.

• Hit M to get the Rectangle Tool and click once on the artboard. In the popup dialog that appears, set both width and height to 960 px.
• Change the Fill to 5% black (a very light grey) and remove the Stroke.

Now your artboard should look something like this:

The Crop Area isn’t exactly where it belongs, which makes it very distracting. So we just hit Shift+O (the letter “oh”, not zero), and click once inside of our rectangle. This will align the Crop Area to its borders. Then simply hit V to get back the standard selection tool.

Illustrator’s cropping function is an essential tool for building websites. You can compare it to the Slice Tool in Photoshop, if you like. You can have multiple Cropping Areas in a single document, which can also overlap themselves. We’ll make use of this tool shortly.

In case you’ve been wondering why we’re using Illustrator instead of Photoshop: for the purpose of building a website design from scratch the way we’re doing it, Illustrator is the tool of choice. We have far more flexibility and the appropriate tools in Illustrator, as you’ll see in the course of Project WordPress. Photoshop will come in later on.

Step 3

The rectangle should still be selected. Lock it by hitting Ctrl+2. Now:

• Draw a new rectangle - make it 960 x 400 pixels large, and fill it with 10% black. Align it with the top of the cropping area by selecting Align To Crop Area in the Control Toolbar. This will be our Header.
• Draw another rectangle for the Footer: 750 x 250 px and 10% black. Align it with the bottom center of the cropping area.
  
• Draw two more rectangles with these values: 567 x 400 px, and 173 x 400 px, and fill both with 20% black. Use the following image as a reference to position these on the artboard:

This will be the basic wireframe for our blog. The Content and Sidebar frames are overlapping with the header because we will create a blog header image that interacts with the content area beneath it.

Lock the WIREFRAME layer and create a new one above of it. Name it HEADER.

Step 4

Now let’s go one level deeper into the wireframe. Every element we placed in the step above contains subordinate elements, which we will create now.

• Create four sublayers directly under the HEADER layer, named elements, menu, elements2 and text. Elements will be used for graphic elements that we visually place under the menu bar; the 2nd one is for elements overlapping the menu bar.
• In the elements2 layer, draw a 160 x 160 rectangle as a placeholder for the logo, and fill it with the color of your choice. We’re using blue.
• In the menu layer, draw a 750 x 35 rectangle. Position it and the logo placeholder according to the following image:

The Menu Bar Frame is only aligned with the content area. The idea here is not to determine the placing on a pixel level just yet, but to get a general picture of the blog layout.

We will use a placeholder for the logo; for the reasons we named above. If you already have a logo, you can place it in here (preferrably the vector version). If you don’t, just follow on with us and look forward to the logo design part :)

Now we already get a picture of how our WordPress blog design will be structured. The header will be a large background image that’s “floating” behind the content and the sidebar. The logo will be somewhere up there, we will see where it’s best to place it in the following steps. The menu will basically be a horizontal bar that’s also visually floating above the header. Note that we’re not necessarily referring to the CSS attribute {float}, but to the visual concept.

It all comes down to how cool the header design will be, as until now, this is nothing special yet.

Step 5

We’re going to play a bit with Illustrator and see what we can do. We already know that the logo is almost square, and it’s blue. We chose the color red for the menu bar, and we want to use the style we create for the menu further on in the content section as well.

Keeping our objective in mind (create a personal blog that uses cool and contemporary design to reflect the blog persona of a successful business woman sharing her private secrets), we start playing around. We actually started by using pen & paper to come up with a few creative ideas - here they are:

• We want a mix of graphic elements in the header that will partly overlap the menu bar, and will partly be covered up by it.
• The style must not be too Web 2.0-ish glossy swooshy, but it should contain certain elements that provide a clean and contemporary look, especially for the menu bar.
• The call for a non-typical design called for discreet/supportive use of grunge elements, but the design should not be dominated by the grunge style.
• One thing was for sure, the background of the blog header should be stunning and produce a kind of wow effect, regardless of the graphic elements in front of it.

Se we start with drawing elements that act as placeholders for the graphics. This way, we can leverage creative thinking better than if we were to use “absolute” or final elements right from start. We leave our options open with this technique, and speed up development time.

The first mock-up we created looked like this…

…with some text (placed inside the text layer) and some rudimentary placeholders for our graphic elements. We thought of having a grunge style paper sheet that would vanish behind the logo; with a tagline or an About excerpt on it.

This doesn’t seem to look very complete. We want the header to communicate with the reader, maybe more like this:

What we did here:

• The new element could be something grungy as well, with an image on top that creates a contextual bubble and represents the blog content in a way.
• We also flipped the logo a bit to approximate the line initiated by the sheet to the left - notice they have the same angle.
• The new element in the middle is rotated as well and has almost the same angle as the RSS button to the right (which is only yellow right now to distinguish better). Not only that: By rejuvenating the grunge sheet towards its lower end, the viewer’s eye is led to the content below. At the same time, the (middle) element itself acts as an arrow pointing to the logo.

The problem is that we now have two emphasized elements - the one in the middle and the logo - which are competing with each other. But we want the sweetspot to be on the logo itself. Read the 5×5 rules of composition on Nubloo.com for a closer look at this topic.

Our next step was this:

Again, a few notes on the above wireframe to explain our train of thought:

• The graphic element in the middle moved behind the grunge style sheet of paper.
• We scaled the About copy down a bit to integrate it more with the composition.
• We moved closer to a retro design by adding a swoosh that’s floating above the menu bar and goes behind the logo. It’s also aligned with the grunge paper sheet to the left. We created the swoosh bar with Illustrator’s Path Tool.

Now we don’t want to overload the header, so we already know that we’ll have to de-emphasize a few of the elements later in Photoshop. But still, there seems to be something missing in the design above. It’s not balanced right. So we play around a bit and end up adding just one little thing to the design:

Just a little swoosh next to the existing one, which emphasizes the logo more.

Remember that this is still only the wireframe for our blog design and not even close to our final design. We’re just positioning the graphic elements and creating the grounds for our next steps.

Also, you can see now why we started off in Illustrator rather than Photoshop. We’re far more flexible when it comes to rearranging elements and adding them.

Step 6

It’s time to move on to the rest of the wireframe, namely everything that’s below the header. For every remaining section of the design - Main, Sidebar, and Footer -, we create parent layers that hold sublayers, following the formula we used above.

This is how our blog layout looks right now:

• We use the WIREFRAME layer as a reference to place the elements in their designated sublayers, then we hide the wireframe layer to see the new layers better.
• The top red bar in the MAIN area will contain the Post Meta Info, such as Author and Category, possibly even the number of comments for every post.
• The FOOTER has the red bar at the bottom, which nicely closes the blog design at the end.
• The elements in the SIDEBAR will each be placed in their own box, rather than having a single tall sidebar containing all the elements there (Categories, Archives, etc.).
• We will waive the red topbar for the sidebar, as this would only look cluttered and unfocused.

Step 7

So how will this look once it’s filled with content? For that, we created a sublayer text for each parent layer. We can place our blind text there. We use a separate sublayer for placeholder text because we can easily hide it when it comes to “slicing” the design and saving the elements for web.

So we go to a Lorem Ipsum generator, like this one, and generate some blind text. We place it in our blog layout, along with everything else we need. Click on the image to enlarge:

What we did:

• We chose a serif typeface (Georgia) for the main body and the titles, and we applied a larger leading (line spacing).
• We went with a sans-serif typeface (Tahoma) for the secondary type such as sidebar copy.
• We used the dark red from the menu bar in the secondary titles, for links and for the 1-px rulers.

This should work as a starting point for our styling. It’s still far from final, but we can already see a blog here.

There are also a few obligatory elements missing, such as the post date, the previous/next posts links, and possibly a standard post picture that will always be in the same place and have the same size and perform the same action for each post (e.g. the permalink)… As you see, we already have something in mind here.

Step 8

Click on the image to enlarge:

There you go, that looks a bit better already. These are the changes we did, step by step:

• The post body now has a date. It’s a flag to the left of the post, and it’s in an extra sublayer named date.
• The comment count to the top right of the main section now appears in a white box. This highlights it more and adds to the page balance.
• Previous posts and Newer posts links were included under the post.
• We included a placeholder for the post image and put it to the top right of the text body. It’s on the right because the left is loaded already with the post title, the date, the category and the author. The picture in the upper left corner would create a total imbalance, which we circumvent by placing it to the right.
• The red of the menu and topbars is now a darker hue, which provides the atmosphere and style we’re looking for much better than a screaming red. Some elements were left with the lighter red though, again to emphasize and de-emphasize the elements of choice.
• We removed the silly drop shadows from the header elements. We had added these before to distinguish better between the elements up there and the background, but now you can enlarge the image and see it the right way anyway.

This is how your Layers Palette should look like right now:

• Each top / parent layer has the sublayers bg (background) and txt (text).
• The date and comments elements in the MAIN layer were each placed in separate sublayers.
• The topmost layer, COLORS, will come into play in the next part of Project WordPress, where we will be working with a color scheme to create the blog design.

There you have it, we now have a blog layout for the homepage. No styles, no design, no nothing added yet. This will be the basis for our follow-up tutorial, in which we will design the whole thing - the header and every blog element -, so that we can put the pieces together with PHP and CSS.

Oh, and you think the layout looks ugly? Well we do, too. That’s why its the wireframe and not the artwork. It’s not the point to create a sexy wireframe. The point is to create a sexy blog design.

Okaaay,

take a look, but only a peek please because we’re getting there step by step, and we don’t want to uncover everything right from start.

This is what the Project WordPress blog will look like - in the end. Interested?

See you for the next part,

~Vibr8 Bros.

You want more? You want more. Subscribe!