So far, we’ve covered the following parts in Project WordPress:

Part 1: How to install WordPress

Part 2: Eight dead essential WordPress Plugins

Part 3: 10+ recommended WordPress Plugins

Part 4: Creating your blog layout.

Part 5: Logo design

This is what we have after the last part (click on the image to enlarge):

…and do you want to see what we are going to create? Right, we knew it. We have to let it out.

Introducing a Blog

Okaaaaaay, here goes. The blog design we created is for a person who got into blogging and was looking for a nice and special WordPress theme. The blog was supposed to stick out from the rest. It had to look like her, and communicate within the same lines the content she writes does, and support her style. The blog is about women in business, and the blogger herself is is a business woman who is very successful as a private consultant.

In the past, she has worked for big companies and earned her spores there. A couple of years ago, she ventured into starting her own business as a consultant, which proved to be the right step to do, as she explained to us - and she is blogging about her exciting experiences right now, over at her blog for women in business.

Yeeees, we want to introduce her first before we give you the link! So this business woman is now writing on her blog - here comes the link - for women in business, and you are cordially invited to follow her on her ongoing quest to find the best way of life as a private business consultant, who not long ago met the love of her life. She blogs about balancing work and private life to get the best of both worlds. She is also very health oriented and likes to share some very tasty fruit drink recipes, dirty laundry, and the role of women in business, and much more. It is really worth a read. Please pay her a visit and kindly leave a comment on her blog if you like what she writes!

Oh, and yes, the blog’s name is Bunny got Blog. Here is a screenshot:


Now let’s cut to the chase and show you how we designed the logo. We’ll start with Illustrator and then move on to Photoshop to finish the design. In the following parts of Project WordPress, we’ll design the blog header and body, go into styling with CSS and coding with PHP.

Why design a website in Illustrator?

We anticipate that you might ask this question because this is a hot matter in web design. Photoshop, after all, is a pixel based application and Illustrator is a vector program. Websites are pixel based. Then we also have Fireworks, which combines the two.

While we don’t do as much in Fireworks, we tried both approaches (Illustrator and Photoshop) for web design, and came to find that the former is best not only for creating wireframes like we did in the last part of Project WordPress, but also creating styles and doing about 75% of all work. Then we take the piece to Photoshop where we polish the design and finish it off. We will show you how we do this in a minute.

There was a post over at Smashing Magazine about this exact topic. While the post was one of the shortest we ever read, and didn’t explain much, the discussion happening in the comments made up for that and there were people stating a variety of opinions. The Photohop party said that you can’t be pixel perfect in Illustrator. The Illustrator gang said that yes, you can, you just have to know how. Well, we agree with the latter and we’re now going to show you how to design a website in Illustrator.

Let’s create the logo.

Logo Design

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.

The logo is always a very important part of the whole blog design. And that’s not only for blogs, of course. Naturally, we have to pay attention to executing the logo perfectly, and making it unique. While there are lots of things to know about identity design, we are not going to go into the complete process of researching the market and the business, sketching ideas on paper, using psychological findings in the design, and creating a whole Corporate Design. That would blow the scope of this tutorial. Instead, we are going to start at a point where all of this has been done already and focus on the execution.

This is how the logo looks.

The font has a boldly look, yet communicates a rather innocent and young approach. This is what Bunny had in mind - don’t be too serious, don’t be too marketingish, don’t be too modern, web 2.0, or slick. Be rather natural and have a wink in your eye.

Step 1: Illustrator

The typeface we used is Kleptocracy. It’s a free font. Download it here for either Mac or PC and install it on your computer. Fire up Adobe Illustrator, and open a new document.

• Type “Bunny got Blog” on the blank screen, using the font provided above:



• Hit Escape to finish editing, and hit Ctrl+Shift+O (the letter Oh). (Alternatively, you can also right-click, with the text still selected, and select Create Outlines. Alternative commands (menu usage - basically detours) are shown in italic text in this tutorial.) This converts the selected text to paths.
• Hit Ctrl+Shift+G to ungroup the single letters (Right-Click > Ungroup).
• Regroup each of the three words so that you end up with three groups.
• Pull the word “Blog” under “Bunny”, and align both words to the right using the Align Objects controls. If it is not active, you can find this tool palette by pressing Shift+7 (Window > Align):



• Downsize the word “got” until it fits right in the space between “Bunny” and “Blog”. Give it a little air to breathe.

This is how your canvas should look now:

We can already begin to see the vast outline of our finished logo design. Very vast.

Step 2

Now we need to do a little bit of “pixel work”. That means we zoom out and take a good look at the comp, then we zoom in and work a bit on it to make it professional. This involves, first of all, aligning the letters to each other to give the comp some balance and structure.

Right now, it doesn’t have that structure, as we can see in the following visualization.

The single letters have no point of reference. “Blog” is swimming under “Bunny” with no align or orientation (red), the space between the characters isn’t well kerned (blue). In order to make the logo appealing, easy on the eye and somewhat memorable, we need to correct that.

• Ungroup every letter by selecting all three words and hitting Ctrl-Shift-G (Right-Click > Ungroup)
• Zoom in to the “y” in Bunny. We will narrow the space between the “n” and “y” by selecting the former and hitting the right arrow on the keyboard once or twice. And one more time. Do this with the keyboard because you can see the changes directly. Make it a point to zoom out and look at it, or open a 2nd window with a smaller version (Window > New Window). Try to find the right proportion between positive and negative space.
• Once you think that you have the appropriate kerning for “ny”, use this little trick: Draw a small rectangle (M) that is exactly as wide as the negative space between the characters. You now have the kerning and can drag your little rectangle to the left, using it as an indicator to adjust the rest of the characters:





• Hold the Shift key while you drag the character to the right, it will lock the movement to one axis (here: horizontically).
• Repeat this for the other characters in the word “Bunny” until you are happy with the kerning. Use the red guide blocks rather as a general indicator than as an absolute rule. Keep in mind: it has to be harmonical and follow a rhythm. Check out the Rules of Composition in Design over at Nubloo’s Graphic Design Blog for a more in-depth description of this.
• Align the characters in “Blog” to “Bunny” to give the design some structure and stability.

Our logo mock-up should now look like this:

…and here’s the before-and-after:

Right, the changes are marginal, but that’s what makes the difference.

Step 3

The word “got” has got our attention now. What we did was equip it with a little swoosh (yes, maybe that’s a too fancy word for that) which prolongs the letter “g” a bit to the right. This adds some movement to the logo design.

• Zoom in deep, ungroup “got”, and deselect it. Drag down two horizontal guides from the ruler (Ctrl+R to see it), and position them according to the part of the character you want to prolong to the right:



• Draw a rectangle (M), keeping it in between the guides. Here’s a little trick you can use to align the rectangle perfectly, without having to be too precise with the mouse. Start drawing the rectangle in the upper half of the guides - just make it higher than 1/2 of the height:



• If it has no fill yet, fill the rectangle with black. Now, with the selection tool (V), select both the rectangle and the lower guide by dragging a selection box around the two (if you can’t select the guide, right-click on the canvas and deselect Lock Guides). Then simply align the rectangle to the guide (Vertical Align Bottom).

Our two overlapping rectangles now have the perfect height, so now we just have to combine them to a single shape.

• Deselect everything and select only the two shapes.
• Open up the Pathfinder (Window > Pathfinder), if not yet open. Hold down the Alt key and click once on the first tool, Add to shape area. This makes a single shape out of the two rectangles:

Step 4

Now we need to adjust the length of the rectangle and give it a rounded corner at the bottom right.

• Pull out a new vertical guide from the ruler, and place it at the rightmost border of “got”:



• Select our rectangle and align it to the new vertical guide.
• If necessary, scale its left border back, so that it overlaps with the “g” again:



• Zoom in to the right border of the rectangle. As we see, the Pathfinder tool left a few unneeded anchor points when joining the two shapes. In order to get rid of them, select the Pen Tool (P) and delete the two redundant anchor points by clicking on them:

Now let’s make the rounded corner. For this step, we need to hide the guides first, as they would only be in the way - don’t just delete them, we’ll need them later.

• Right-click on the canvas and select Hide Guides.
• Get the Direct Selection Tool (A), and select the lower right anchor point of the rectangle. Drag it to the left, holding down the Shift key again, so that it stays on its axis:




• Get the Convert Anchor Point Tool by hitting Shift+C and dragging a handle (direction point) out to the right. Don’t drag too far; use the “t” above for reference:

Don’t be confused by the descriptive text in these screenshots getting bigger and bigger ;)

We now have our rounded corner. What else?

Step 5

Oh yes:

We need to remove that roundness, because the “g” loop has to surpass that part and go straight through into its long arm.

• We’ll use the Pen Tool (P) for this one. First, bring back the guides: right-click on the canvas and deselect Hide Guides.
• If we want to remove the “rounded” out of “rounded corner”, we need a reference point. So we drag a vertical guide out and position it like this (arrow):



• We can now lock our guides, but leave them visible. We will add an anchor point to the “g”, by selecting it (V) and, with the Pen Tool (P), clicking once on the path, right here:



• And now, we pull our newly created anchor down and to the right (A), until it sits right on top of the intersection of our guides:



• Using the Convert Anchor Point Tool (Shift+C), we simply take the existing handles of the anchor tool and, holding down Shift once again, align the left handle horizontically, and the right handle vertically (we hid the guides for better visibility):




• Now that we have a sharp corner, we only need to put the above anchor point in place. With A, drag it to the right and slightly to the top, so that the round path of the round belly part of “g” isn’t interrupted (the guides are visible again):



• And, again with Shift+C, drag the right handle down while you hold Shift, to align it vertically:

…et voilà, we now got “got”.

Zooming out, this is what we have now:

Ok. The next steps to finish our logo in Illustrator are quickly accomplished:

• Select both the long arm of the “g” and the “g” itself, and combine the two shapes to a single one by using the Pathfinder palette.
• Group the three characters of “got” with Ctrl+G.
• Check to see if “got” is aligned correctly and has the right size among the other two words “Bunny” and “Blog”. We scaled it up slightly.

So far, our logo design looks like this:

Now we only need to add some color and the thick border to the design.

Step 6

The border comes first. In order for the logo to look like a badge, and not like text with a border, we’ll use a few tricks.

• Group all elements of the logo into one group with Ctrl+G.
• Copy the selection (Ctrl+C) and paste it right on top of the original (Ctrl+F) (note that Ctrl+V pastes in the middle of the artboard, but Ctrl+F at the same position of the original).
• Immediately hit Ctrl+2 (Object > Lock > Selection) to lock the shape on top. This will be our original, we won’t change that.
• Click once on the shape again (V) to select the shape below the locked one.
• Hit Shift+X (Toolbar: Swap Fill and Stroke) to do just that.
• Change the color of the stroke to a light gray. This is only temporary, so that we can actually see something.
• Increase the weight of the stroke to 20px, and give it a round join (F10 to see the stroke palette, or Window > Stroke):

We now need to turn the stroke into a fill, and remove the holes in its surface.

• With the stroked path still selected, go to Object > Expand… and expand the path with the standard options.



• We now have lots of shapes, one per character. We don’t want that, so we combine all of them with the Pathfinder, holding down the Alt key while doing so:



• There are some holes in the form which we need to fill: Right-Click > Release Compund Path, then repeat combining the shapes with the Pathfinder.

That did the trick. Now we just need to prepare the design for Photoshop, where we will be adding some texture and other effects.We will add some color to the logo - to be more precise, the background gets a minor dark blue gradient and the text will be a solid white.

• Hit Ctrl+Alt+2 (Object > Unlock All) and select the inner text. Click once on the Gradient Palette. Now every letter will be filled with a gradient from white to black. We don’t want that, so what we need to do is tell Illustrator “hey, we want the entire text to be treated as one single shape”. How?



• We need one object instead of a grouped many, so we first ungroup them (twice because the words are goups themselves too), then we Make a Compound Path. Note that the right-click menu doesn’t show this option in this case, because the letters B, y, g, l, o are compound paths themselves (there is an enclosed negative space). So Illustrator only offers us to release the existing compund paths. A good idea, if you want to speed up the workflow, is creating a shortcut for this - for example, we use Ctrl+8 to make a compound path, and Ctrl+9 to release one.

So let’s add color:

• With the new compound path selected, fill it with white. Give the background shape a gradient from #009EE0 to #172983, using the above angle. We end up with this:

There you have it, we’re done in Illustrator. Save the file as a normal .AI file and let’s go to good old Adobe Photoshop.

Step 7: Photoshop

We will need some brushes to add texture to the design. Go to Ruslan Julbarissow’s website, where he shares quite a few great Photoshop brushes for free download. We will need the fractal light brushes for the logo - and for the header in the follow-up tutorial as well, so download the free brushes and install them in Photoshop.

Now open up the .AI file with our logo. An “Import PDF” dialog pops up - make sure you crop the image to Crop Box, check Anti-Aliased and set the resolution to 72 pixels per inch. If you were developing for print, this would be different. If you were developing for both print and web, this were different as well. But BunnygotBlog.com is a web-only identity, so we need 72 ppi.

Hit OK and Photoshop will open up our vector file as a rasterized version. Again, instead of opening it this way, we could have imported the logo as a smart object, but we don’t need that right now and that would be a subject for a further post. What we’re going to do is simply add a few effects to the existing design: some texture, using Photoshop brushes, and a drop shadow.

The texture comes first.

• Select your Brush Tool (B) and add your brand new Photoshop brushes to the brushes palette via the Preset Manager. Here’s a quick tutorial on how to install Photoshop brushes (also along with another free brush set, by the way). Select the brush of your choice; we need a distorted, yet not too crazy texture in this case.
• Create a new layer on top of the logo layer, name it “lite texture”.
• Pick #84d0f0 as your foreground color, that’s a cyan hue.
• Now click - don’t drag - with the brush a couple of times across the logo (make sure you’re in the right layer). Don’t overdo it, just add some subtle structure:



• Now we need to limit the texture to the logo’s borders. Now if you’re thinking “Erase tool”, think no further but instead, click once on the bottom layer thumbnail (the one with our logo) while holding Ctrl and then click on the little white circle in the grey box on the Layers palette (Add layer mask). The Ctrl-Click on a layer will select all of its pixels and we will simply transform that selection into a layer mask on the “lite texture” layer:



• Now we will just set the “lite texture” Layer mode to Multiply, reduce the Opacity to about 60%, and apply a Gaussian Blur (Filter > Blur > Gaussian Blur) to the texture with a radius of 2.2 pixels:



• Next, we will repeat the same technique to add some darker texture to the blue background. So: create a new layer on top of the “lite texture” one, name it “dark texture”, set its blending mode to Overlay, and apply the same layer mask to that layer. (Make sure to click out of the mask and back into the layer after it is set.) Select the light brush of your choice, make it use a very dark blue or purple (we used #0f1b5f), and click the brush a couple of times over the logo until you have something you are happy with.



• Now we just need some highlights. So we repeat the same as in the last step, only this time with the color white. Make the brush a lot smaller; we won’t use the paint bucket method but the scalpel. Apply some grunge looking texture to select areas on the edges and make it look a bit dirty and worn. This is our final logo design:

…there you go. The drop shadow is not a necessity but due to the nature of the blog and the overall design it was added.

Logo Design: Complete

Phew, that was a long one. And just for the logo… We hope that it was helpful to you and maybe you learned a few techniques here and there.

In the next part of Project WordPress, we will take the wireframe we created in WordPress Project Part 4 and using both Illustrator and Photoshop, we will create the blog design. After that, we’ll venture into coding with CSS and PHP - which means we will be formatting the blog layout to fit the design and then customizing the WordPress theme to our liking.

Jump over to BunnygotBlog.com if you want to see the live blog. While you’re there, read a bit through what Bunny has to say, she definitely knows what she’s talking about. You can also make her very happy if you leave her a little comment and say Hi :)

So what do you think about the logo? Do you find it appealing, do you think it fits Bunny’s blog and style? Tell us what you think!

So what do we have for you? Well: a download of free vector graphics for Adobe Illustrator. Let’s take a closer look.

The vectors are for use in Adobe Illustrator. We incorporated some effects in the design that make them look just like normal embriodery badges (you know, the badges that you can sow on your t-shirts and such). There are eight different badges in red, green, blue and white. We wrote some stuff inside to give you some inspiration - but because we know that you might not have any use for a vector badge that says “Vibr8 Bros.”, you will also find the four blank vector badges in the pack. So you are able to use them to write your own text inside, for example.

Here are two of the vector badges in large, for you to see the details:

Now remember, these are full vector files. No embedded raster graphics. The design is quite complex and it may take your computer a while to process the file if you don’t have a fast one. Just download and try them out in Illustrator. Here’s a screenshot of the file you get:

As you can see, below the pre-made ones you have the four blank vector styles without anything written inside.

Also, on a side note, the Illustrator version we used is CS3. The .AI vector file in the first download is 39 MB large; we zipped it to 25 MB but that’s as low as it gets. We didn’t want to flatten the artwork in Illustrator so that you have the freedom to enlarge it to, let’s say, the size of a house, if you need to.

So if you can’t open the vectors in your version of Illustrator, just leave a comment below and we’ll do our best to help you out :)

The 2nd download contains PNG versions of all of the above vector badges. The ones with writing inside are 315 x 266 pixels, the blank badges are 600 x 466 pixels large. All have a transparent background, so you can use them in Photoshop or anywhere else, if you wish.

So, here goes: download this pack of free vectors!

Download 1: Free Vector Pack (zipped AI, one file, 25 MB)

Download 2: Badges (zipped PNGs, 12 files, 1.4 MB)

Thanks for sticking with us, and as promised, next up is the following part of Project WP. Hope to see you with us then!

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.

Free Type Classification eBook by Jacob Cass

This 27-page eBook covers the 10 classifications of type and is worked up in a beautiful way. In any case, it’s worth a download. Here’s what Jacob says about it:

This book goes through the 10 type classifications with a brief history as well as the key characteristics of each. This book has been made to come back to for easy referencing and it looks great printed as well.

Jacob is a talented designer and we like his work very much. He blogs at Just Creative Design and released this great resource just a few days ago.

We like to spread some link love every now and then - and give you a heads up on cool sites and design blogs we like. Jacob is definitely a designer and blogger worth mentioning in our field.

In order to get the Free Type Classification eBook, you’ll need to subscribe to JCD’s RSS feed. There’s a password at the bottom of the feed which will give you access to the download page.

You can read more about the Free Type Classification eBook in this post on Just Creative Design. Go check it out!

This is the third part of Project WP, and the last one where we play pretty. After this, we’ll get into customizing a basic theme with PHP, HTML and CSS, and creating a blog identity with logo, icons & header. Expect Part 4 here next week, but for now:

Give us the Pretty one more time! 10+ Recommended WordPress Plugins to make your blog prettier

In our last post, we listed the 8 dead essential WordPress Plugins for you. Take a look at these non-essential, but still highly recommended plugins today. Note: all plugins have been tested by us for use in WordPress 2.5+.

1. cforms II

Forms, forms, forms. Very important for making your blog more professional. If you have a contact page, it’s a lot better to let your visitors input a few lines of text in a contact form, rather than giving them your plain email address. And don’t worry if this plugin looks too bloated with options in the beginning. It’s actually pretty easy to use and fit in your blog’s styling.

2. Related Posts

“If you liked this post, you might be interested in…” - this should be familiar to you, more or less. This plugin adds a sections under your posts and looks for similar tags to display your specified amount of related posts with a link. Not bad.

3. WP Page Numbers

Adds page navigation at the bottom of your index and archive pages. Of course, you can customize the look and feel with CSS. Don’t attempt to use this with rather new blogs if you don’t have too many posts yet. It just doesn’t look good if you only have two pages.

4. Ozh’ Absolute Comments

This awesome plugin makes managing comments a lot easier by adding three little buttons in your Admin Comments section. WordPress comes with Unapprove, Spam, and Delete - with this plugin, you get Reply (opens a popup for you to reply to this comment), Edit (lets you edit the comment directly), and View All (shows you all comments in that particular post). A great time saver!

5. TagThePress

Fetches tag recommendations from the service tagthe.net and lets you insert them for the post you’re writing. Tags are good for finding posts with your blog’s search function, but also for search engines. In combination with the All in One SEO plugin, this is a great tool: just copy&paste your tags into the keyword section and you’re set.

6. Organize Series

You already have Categories and Tags. Now, you also have Series - making it easier to find this type of posts. With this plugin, it’s easier to write, manage and find series on your WordPress blog. Comes with widget that you can add to your sidebar etc. etc.

7. WP-Polls

Gives you the ability to create polls on your blog and place a poll widget in your sidebar, so that you can ask your readers what their favorite color is. Or maybe what Photoshop version they use. After uploading this plugin to your server, make sure to activate both WP-Polls and WP-Polls Widget in your Plugin section.

8. CommentLuv

This is almost a classic. It adds a link to the commenter’s last blog post under their comment, displaying their post title. If you advertise this funciton on your blog, you might attract more comments! Give it a try.

9. Live Comment Preview

This plugin adds a live preview of the comment as you write. Fancy, fancy! For fast typers and keyboard addicts, though, the preview can be slow. But even in that case, it’s fun to sit back and watch this plugin write your preview.

10. Lucia’s Link Love

WordPress automatically sets a NoFollow attribute for every link in the comments. This is so that search engines and Technorati (click here to fave us!) don’t count a comment link as a backlink, which would increase the commenter’s blog’s rating. Now if you wanted to change this, maybe because you’d like to give your readers / commenters something back, you can do that with this fine plugin. You can build loyalty by saying, Hey, the nofollow attribute is removed from every comment after your third comment! This can encourage your readers to comment more.

We have this plugin in action on our blog - can we encourage you to write us a comment below? ;)

Bonus: Plugin Central

Finally, a plugin for plugins. Well, it’s the plugin for plugins. It sits in your Dashboard and lets you update your plugins with one click, much like WP Automatic Upgrade does for WordPress itself. You can also install plugins directly from your dashboard by typing the URL or name (yes, that works too!) - this plugin does it all for you.

Okaaay.

Here you have ‘em, our 10+ recommended WordPress Plugins to make your blog prettier and more exiting. We hope you like them and that this list is useful for you!

Make sure to check back next week for Part 4 of Project WP, when we dive deeper into WordPress by choosing a basic theme and customizing it to our liking.

In the meantime, tell us: have we forgotten any plugin that you can’t live without?