I became a Design Guru after reading this book…. I think

Can the principles of design simply be taught? Surely the skills and ‘talent’ for design is something that one is born with, and is gained through a lifetime of experience?

Well that’s what I thought. Until BOOM! I came across this book which claimed that it could teach me – a logical, right-brained, rigid Physics student – the principles that are used behind good design.

You can imagine my intrigue. You can also imagine my eyes flew out of my head faster than a speeding bullet, and I hammered my mouse on the buy button when it described it would teach design in the context of web-design and also App design.

Well 6 weeks later, after a bunch of Physics exams (I am still a student after all), some video-games, many nights of drinking, and also reading this book, I can safely say that I have finished Principles of Beautiful Web Design by Jason Beaird

Here are some thoughts on it:

Who is it for?


Anything of true value that is produced in this world isn’t made for everyone. Firstly this book would be of benefit for people who are interested in web design. However it won’t help all web designers. If you are already a complete guru zen master in Web-Design, and make websites which could make Arnold Schwarzenegger weep at its sheer beauty… then it isn’t for you. BUT if you’re a level 0 aspiring web-designer, then this book will be TREMENDOUSLY HELPFUL. If you’re at an intermediate level, having already designed a few websites then you may also find it helpful.

But if you don’t even have a passing interest in web design, app design, UX design, UI design, Information Architecture, and whatever the heck the term for digital design is these days…. then please do not buy this book. It would be like feeding a Lion a vegan diet.


What does it deliver?


Principles of beautiful web design starts from a basic level. It talks about the layouts that work, usually based on the rule of thirds. It discusses the different colour combinations, and the emotional responses they can create. There’s a massive deconstruction on what fonts are, and the different types of fonts, all under the umbrella term of Typography. Finally it talks about texture and imagery.

All throughout the book, the author is not just discussing what these different principles are, but relates them to good web design. There is a case study throughout the book which applies all these principles, and the book is littered with different examples of awesome websites. It also whenever possible introduces web tools which would aid the aspiring designer. Everything is also discussed at the level of a beginner. No unnecessary jargon is used, and there is no presumption of foreknowledge (except in CSS, but even this is unnecessary in my opinion).


What it doesn’t deliver

This wouldn’t be a fair review if I didn’t draw some attention to its weaknesses. This book promises to teach you the principles of beautiful and awesome web design, which it does. However it doesn’t teach you how to bring about these effects. There is very little technical how-to. If you’re looking for a book which would also teach you how to bring about these effects on a website using CSS, then this is the wrong book.

But that information can be easily found in other resources, and after all that isn’t what Jason Beaird said he was going to do in the book.

 

Did it work?

I guess this is the most important question. It’s all well and good me talking about what it does and doesn’t do, but the absolute fundamental issue at hand here is: Does it do what it says on the cover?

 
I can absolutely hand on heart, cross my hands, swear till I die that it does. I am no Da-Vinci or Walt Disney. But I have gone from an absolute data driven rational monster to analysing design in the everyday world. I find myself looking at the centremost object in an advert or logo, asking questions to myself. Why did the designer put that there? What is he trying to convey? What do I “feel” when I look at the image? What would I do differently?
I have no hard evidence of my design skills, as I’m still teaching myself the technical know-how. But when I finally achieve the title of “Design Apprentice” I know I’ll feel more confident in coming up with a design solution.
Even if I don’t get that far, at the very least I can now probably hold a 30 minute conversation with a designer.
So do you want to know more about design? What makes good design good, and bad design bad?

If not, well… thanks for reading this far I guess.

If yes, then you can buy this book. If you don’t buy it, borrow it from someone who knows someone who has it (it’s also in pdf format…. in fact more than likely most people who own it own the pdf version).

(By the way that isn’t an affiliate link. I want you to know this is an honest review with no economic incentive. So wotcha waiting for? BUY IT ALREADY!!!)

You can also get a free version if you subscribe to .net magazine in the UK.

Of course this will only be of interest if you want to learn design.

How to draw Wireframes in Photoshop

Amazing Blog Author’s note: This tutorial was supposed to have helpful images along with the instructions, however my uh, hard-drive blew up, and those images weren’t backed up. I’ll update this post soon with the aforementioned images. Moral of the story, always always work in dropbox.

As I so elaborately wrote about in my previous post, I’ve been teaching myself how to use the adobe creative suite. And by use I mean for something other than creating crappy posters. I have been learning how to use Photoshop and Dreamweaver to build websites.

I’ve been using an infiniteskills video course to guide me, but as I haven’t finished it yet I’m unable to write a review. Instead I’ll give a quick tutorial on how to draw a website wireframe in photoshop.

 

Uh… What’s a wireframe?

Before I completely dive in, I’m sure it would be useful to actually know what a wireframe is. Many people out there on the internet do know this, and if you’re one of those…. just skip this paragraph. Otherwise these words will just be a waste of your time.

If you don’t know what a wireframe is, worry not. A wireframe is just a fancy name for the 1st rough outline of the design. As I’m talking about web design it would refer to a document which shows roughly where the different areas of content will be on the webpage.

Okay, that makes sense. But why can’t you just sketch the damn thing on paper and be done with it?

You may not have asked this question, but it’s a pretty cool question. It’s useful to draw your wireframe in photoshop or in HTML as you’ll use this as the foundation block to draw our further designs. Rome wasn’t built in a day, and your website is sure as hell not going to be built in one pass.

Okay – To The Tutorial!!!

First it would be very useful to figure out what website you actually want to build. For no reason at all, I’m going to focus on a splash page for a web service.

The first step, sketch the various blocks on paper. No need for stuff to align or for the proportions to be right. It’s a sketch:

Sketched wireframe on paper with words

Sketched wireframe on paper without words

 

So this webpage is going to be a bit simple. For a splash page a Logo and a navigation menu will be on the top. Underneath will be the headline copy or image which will attract the visitor’s eyes and show off the key benefit of the service. Underneath in the 4 smaller boxes, will be further benefits and features which describe the service. Underneath will be a FAQ box, and to the right of that a section with miscellaneous information. Underneath all that will be a footer. There will also probably be a call to action box somewhere above the footer, but no need to worry about that now.

Next as we’re building a web page, we should make sure photoshop is set up to give measurements in pixels. Load up Photoshop on your favourite operating system. Then go to Edit → Preferences → General or press Ctrl + K (or Cmd + K if you’re on a mac).

Go to Units & Rulers

You then want to change Rulers to be in pixels.

Click OK

Let’s now make a new image. There’s lots of talk about adaptive web design and what is actually the right width for a website. For now we’re gonna keep life simple, so that we can actually learn about this stuff.

Click on File → New and you should get this dialog:

Set an image size for a width of 960 pixels and a height of 2000 pixels.

You should then get this screen. Double click on the image you just created, or press f for “fullscreen”

Another day I’ll talk about what I feel is the most optimum workspace for web design, but for now the windows you’ll need for this exercise are the Tools and Layers panels.

We should create some guides for this wireframe. I’m going to keep it simple and just divide up the page into thirds. Show the ruler by going to View → Rulers or by pressing Ctrl + R (Cmd + R).

We’re then going to create guides. First make sure “show guides” is turned on by going to View → Show → Guides or pressing Ctrl + ;  or Cmd + ; . Then we’ll make a guide by dragging from the ruler on the left hand edge of the workspace like so:

⅓ of 960 pixels is 320 pixels, and ⅔ of 960 is 640 pixels. Hence I’m going to drag the guide to 320 pixels, zooming in when necessary to get the exact value (Quick tip, zoom in by pressing Ctrl and + or Cmd and +. To zoom out Ctrl and – or Cmd and -), and then doing the same for 640 pixels.

Now before we do the easy but important task of making our wireframe we should work out what the exact measurements are. There are a few ways of going about this. You can go back to your sketch and make some educated guesses of what the pixel size of the blocks should be. Or you could just throw down some rectangles and resize them to get their rough size and position and resize them later.

My workflow involves making sure photoshop is at 100% zoom, so that I can actually intuitively see what the website will look like. I know that I want the second box, the largest box to be “above the fold”, i.e. users with 720p displays will be able to see that block when they initially come to the page. For arguments sake I’m going to call this at 600 px. I’ll then throw down the shapes and play around with resizing them to see what works and what doesn’t.

(Note by the way there’s alot of controversy over if the “above the fold” is actually useful and relevant in web design e.g. http://iampaddy.com/lifebelow600/)

To do this I’m going to use the rectangle tool

I’ll change the colour to a neutral gray, it’s just what I prefer, you can make it pink or gold if you want.

Use the rectangle tool to draw a rough rectangle. Then resize it using the move tool. Click on the shape with the move tool. Launch transformation controls by either clicking the checkbox “Show Transform Controls” at the top, or by pressing Ctrl + t or Cmd + t. Drag and play around with the corner boxes to get the size you want. Then press enter twice or click the tick button in the top bar.

Rinse and repeat with other rectangle shapes, play around with them to get the design you want.

Once you’ve finished this there are two things you need to do. First you need to rename the shapes in the layer panel so you don’t get lost. Do this by double clicking the name in the layer panel. If you have “Show Transform Controls” checked, the shape should become highlighted in the workspace. Rename the layer to something you’ll remember. Uh, you know… like “header” or “Dragon’s tail”… or whatever works for you. I’m gonna keep it simple and call mine things other people will understand though….

After you do this, you also should crop the canvas to get rid of the spare white space at the bottom. You’re not exactly going to use it are you? So crop and delete it.

Do this by pressing the crop tool. Then drag around the selection of stuff you want to keep.

BAM!! You got yourself a wireframe! You can now:

  1. Relax
  2. Play with your cat/video games
  3. Think about the stuff you’re going to put on top of those wireframe boxes
Completed Wireframe


If the job is for a client, you’ll probably want to send if off for review. If you’re going to do that some extra steps are necessary. You’ll want a label for each of the boxes so the client knows just what the hell they are. They can also offer any adjustments or corrections now. I say now, because you don’t want to start adding extra features after you’ve built half of the damn website via html & css.

Its very simple to label the wireframe boxes. Grab the type tool. And I’m sure you know how to place a cursor and type right? Well go and do that.

Pro tip, make one label. Play around with the font/stroke to make it as pretty as you want. Then copy that label to the others by using the move tool and holding alt while dragging it. (Uncheck “Show Transform Controls”). Rename the labels by double clicking on them with the type tool.

Afterwards also rename the labels in the layer panel. You may also want to group them by clicking Ctrl + g, so your label panel doesn’t become too clustered.

There you go, you’re actually finished! You can send the wireframe off to review as a pdf.

If you enjoyed this post, why not subscribe? There’ll be awesome follow ups every tuesday and friday.