I find sketching to be a great way of setting the foundations of any design. Many designers overlook this phase because they claim they “cannot draw”, but this is no excuse… you don’t have to be an artist to sketch a few rough layout ideas on paper.

The reason I favour sketching ideas before taking them into Photoshop (yes Photoshop, I really don’t get this ‘designing in the browser’ craze… *pffft*) is because ideas flow so much faster on paper than they do digitally. If you don’t like something, rub it out! No need to spend 20 minutes designing a jumbo footer only to realise later on that you want to have most of its content in a sidebar. You can therefore keep your designs more consistent this way, as you won’t be placed in any of those nasty “Do I really want to change the header and sidebar just so that my footer doesn’t look out of place?” Photoshop situations.

I have read several guides on sketching out web layouts which have come in very handy. It’s good to hear different peoples opinions, some of which I agree with and some I’m not so keen on. With this article I have taken other peoples tips that I’ve found useful and combined them with ideas I’ve had from my own experience.

Don’t get the wrong idea however, I’m not saying that all of my designs turn out exactly how I’ve sketched them. There are normally one or two elements that I wish to change (or leave out altogether) when it comes to recreating my ideas in Photoshop. However sketching your ideas first will most likely save you time in the long run as they help you to get the ball rolling sooner and making layout changes is a lot less time consuming.

Time For Action

Right, let’s get to the drawing board. Wait, before we do that, let’s be even more geeky and start jotting down some ideas first. Some of you are probably too keen to get stuck in to the design work, but just be patient! If you note a few things down first you won’t forget to include them in your sketch, which means you won’t forget to include them in your design. After all, you don’t want to be constantly referring back to your briefing questionnaire while sketching your layout ideas do you?

If you have put together (or received) a half decent brief then you should already have a good idea of what the client is after. Be sure to include any specific client requests on this piece of paper (has your client requested links to social media profiles? Have they informed you of their target audience?) and then throw some of your own personal design ideas in their too.

Before You Start Drawing

Another thing to do before you start drawing is to gather some photography that you plan to use in your design. In an ideal world all clients would have hired a photographer before coming to you, but this is rarely the case. If your client does have some high quality photographs for you to use to show off their goods or services then great, if not then look at some stock photography such as iStock and look for some relevant imagery. If you want to keep costs to a minimum then check out a free stock photo website like sxc.hu (but notice the drop in standards).

It’s generally a good idea to round up some photos before thinking about your layout as the kind of photos used can have a dramatic impact on determining which layouts will work from those that won’t. In the example that I am about to show you, my client fortunately had a couple of high quality photographs for me to use in the design. I could therefore incorporate these into my drawings, see the below for the photo I used as the focal point of the design.

Sketching The Website Layout

Now that we’ve collated some ideas and imagery, it’s time to get our money’s worth out of all those discounted HB pencils we invested our life savings in. Grab yourself a heavily sharpened pencil and some A4 paper. Unless you’re a millionaire who can happily throw paper in the bin each time you make a mistake, grab a rubber too.

One of the best tips I’ve read online about sketching web designs is to draw them at a similar size to what you see on screen. I forget who actually said this now, so many thanks whoever you are! And my apologies for forgetting your name. This is why I like to use an A4 piece of paper, because it is fairly similar to the size at which you would see a web page on your monitor.

What To Include in Your Drawing

As I said before, this drawing does not have to be a masterpiece. You don’t even really have to go into much detail. Forget what colours and effects you’ll be using, focus mainly on where you want certain elements to sit in your design (with the content area being one of these elements!).

Take a look at this sketch I made when designing my client’s website, I’ve highlighted how the sketch relates to some of the ideas I jotted down earlier:

1. Large photo (overlapping)
2. Arrows
3. Block backgrounds for text
4. Circular button(s) « to compliment the roundness of the logo

Notice it’s very rough looking, but it gives you the general idea on how I want the website to look. Remember the photo that I showed you before? See I’ve included it in the sketch (point 1). By ‘included’ I mean poorly attempted to sketch out what is in the photo. Around the ‘Who We Are’ section you can see a few outlines, these are supposed to represent the people in the photo that my client provided me with. I knew from the start that I wanted part of the photo to overlap another element in the design. Therefore I sketched out the lady’s head (the right-most figure) so that it overlaps the header.

So that’s the main elements taken care of. Notice I’ve also included a sidebar and a fairly large footer to display some extra information. You might be wondering why I haven’t left much room for the actual content of the site. Well, I wanted to limit the amount of content on the homepage for this website to a simple introductory paragraph, this was so that the large photo I was using had more of an impact on the overall design. I don’t really see the point in overloading the user with information the second they arrive at a website, why not summarise what is contained within the other sections of the website and entice them in with a nice design?

The remaining pages of the website have much more room for content as the large image has been reduced, and the introductory paragraph removed. Obviously this sketch took some experimenting until I was pleased with it, but would I want to re-work an entire sidebar in Photoshop just because my first idea for it didn’t quite work? No. These sort of changes can take merely minutes, or even seconds on paper.

From Paper to Photoshop

Below you can see the design after I had recreated it in Photoshop. Notice how some elements have changed, like the circular button and the call-to-action boxes in the sidebar. But if I hadn’t have sketched out my ideas before taking them into Photoshop then I can safely say that this design would have been a much more stressful and more time-consuming experience.

As always, comments on this article are much appreciated. Stay tuned for part 3 of my series… the Photoshop stage!

So anyway, the first part of the process I follow… the briefing! This part of the can vary depending on who you are designing the website for. Is it for a design agency? A freelancer? Or are you designing for one of ‘your own’ clients?

Getting the a good project brief will benefit you immensely when it comes to designing the website. You need to know what sort of information the customer wants to present online, what sort of look and feel the website needs, whether or not social media or dynamic content is to be included and many other elements. You might think that you can sort some of this at the build stage, but you can’t, at least not very efficiently anyway. Get it sorted before you design the website and the whole process will flow a lot smoother. Do it now! NOW! NOW NOW!!

Working For a Web Agency or Freelancer

If you are designing for a customer of a web agency or freelancer, then the briefing phase will have most likely been done for you already. Unless your client is taking advantage of you, then you should be provided with a fairly detailed brief that outlines what their customer requires as they will probably have met up with them for a discussion.

This brief should consist of what (and how many) pages are needed, who the customer’s target audience is, examples of their competitors websites and whether or not a CMS or blog is needed, hopefully amongst many other pieces of information which we’ll cover shortly.

One of the most important pieces of information that should be covered here is what websites the customer likes the look or features of. These websites don’t necessarily have to be their competitors, but they should give a similar impression or feeling as that which they want their new website to get across.

Working For One of Your Own Clients

Some of you may spend most of your time working with your own clients (i.e general businesses that need websites) and will therefore be required to manage the whole project from start to finish. Maybe you’re outsourcing some of the work, but it’s really down to you to find out what your customer requires from a website.

This is where an in-depth discussion will be necessary to gather all of the dirty details. I prefer to meet up with my prospective customers provided that they are based fairly locally. If they live too far away for a meeting to be cost-effective, then a phone or email conversation will suffice.

When I first started taking on my own projects, I had this part of the design process all wrong. I would turn up to meetings most of the time without any note taking equipment and just have an informal chat with the customer. We would talk about the points I mentioned above, however I would then have to remember them all. If your memory is anything like mine then trust me… take a notepad! And a pen of course.

I then started taking a pad and paper with me to my meetings, but I rarely used it. I would simply jot a few vague notes down, sometimes I wouldn’t write anything down at all! Taking a notepad simply made me look that little bit more prepared.

After reading several blog articles discussing the importance of a briefing form, I knew it was time to rethink my briefing process. I studied several blogs to get ideas about what questions to ask, I also noticed that the conversations I was having with my prospective customers were following similar patterns, so I threw in some of the questions in this briefing questionnaire myself.

Being the generous guy I am, I thought I’d share my briefing questionnaire with you. I didn’t want to make it too long as I didn’t want my meetings to feel like interrogations, also I thought that the guides in the blog posts I read had so many questions that a lot of them seemed unnecessary and basically cancelled each other out. If you do find that you’re at a meeting and need to note anything down that doesn’t fit within these questions, simply write it somewhere else on the sheet! Easy.

I’ll be sure to update this post if / when I amend my briefing questionnaire, so feel free to check back in future! Please post any feedback or contributions in the comments section, they’re much appreciated

Briefing Questionnaire

1. Do you have a company logo or any other marketing material?
2. Do you have a slogan or tagline that clearly identifies your benefits or features?
3. Do you have a deadline for this project?
4. What sort of budget are you working on for this project?
5. When will the content be available? Do you have photos?
6. Is there a particular colour(s) you are keen on?
7. Approx how many pages will be required? And what will they consist of?
8. Do you plan to have any dynamic content on your website? e.g. Blog, CMS
9. How editable do you need the content to be? Different solutions, will affect cost
10. Do you require website / email hosting?
11. Do you wish to make use of any social media to promote your business online? E.g. Twitter, Facebook, Delicious, Digg
12. Describe potential customers / target audience (e.g. income, interests, gender, age, computer / internet connection)
13. List several other websites that you like, not necessarily competitors
14. Are there any elements of your competitors’ websites that you are particularly keen on? Whether it be design or content
15. If you were using a search engine, what words or phrases would you use to find your site? Which of these words or phrases is most important?

Now correct me if I’m wrong, but I thought Pages were for topics that Facbeook users actually liked, e.g. their favourite bands, footy teams, brands etc. These days the Facebook Pages app seems to be swarming with pages that have been set up purely so people can make some sort of statement and sound cool. Let’s take an example:

Wow! That looks useful, I bet the page’s wall is filled with useful information by its fans; discussing their passion for this subject and sharing how it effects their lives on a day-to-day basis. Let’s have a look and see why this page’s 2.3 million fans are so interested in not needing anger management:

I stand corrected! Silly me for not seeing the point of pages like this .

I’ll admit there is the occasional page’s title that makes me laugh; those that are genuinely witty, but is there really any need to sign up to a page to tell your friends that you “know someone who is a prick”? Why not just update your status to “I know someone who is a prick”, or something reasonable like that.

A New Wave of Satanic Evil

And just when we thought things couldn’t get any worse, here comes websites like mylikebook.com and likeworthy.com who are dedicated to relentless ‘liking’. It doesn’t look like there’s much hope for genuine Facebook Pages as most of people’s attention goes towards endlessly consuming and regurgitating these ‘cool statement pages’.

Don’t get me wrong, I can see why the two websites I mentioned above have been set up. They mightaswell milk peoples obsession with ‘liking’ and make some money out of it through advertising! I doubt they actually like all of the statements that are on their websites themselves.

Anyway, end of rant! Please let me know your thoughts in the comments section, am I alone in my hatred of Facebook ranting or are there others that are with me?

IE7 / Firefox Comparison

Notice in the image below how IE7 (and IE6) adds a gap in between the image and the element beneath it, whereas Firefox (end any other half decent browser) does not.

The Cause

This is generally caused by line breaks in your code such as the following:

<div id="sidebar">
<a href="event.php">
<img alt="View Upcoming Shows" src="image/cta-upcoming-show.jpg">
</a>
</div>
<!-- some other element here -->


The Cure

But we don’t want to put those 3 lines of code on one line now do we! We want to keep our code nice and readable. So all we need to do is add one tiny piece of CSS to our stylesheet:

#sidebar img {
display: block;
}

There we have it! No more strange gaps around images in Internet Explorer. Here how it now looks in the unholy Internet Explorer:

Ok you got me, that was just the Firefox image from before with the IE logo layered over it! But it does work, trust me

Double borders can be a great way to add some extra depth to gallery thumbnails or just images in general (see my other post http://bit.ly/8EBjEX). This is simple enough to achieve in a website just using CSS, but it’s a different story when your in the design stage and working purely with Photoshop or some alternative.

Until recently, my method of adding double borders to photos in Photoshop would be to draw a square behind it, and make it about 5 or 10 pixels bigger than the photo itself. I would then add an inside stroke to the background square to give a double border effect.

This was a pain when it came to resizing the photo and it can make your .psd’s a little bloated, so here’s a little trick I discovered for creating double borders.

Grab a Photo

Take any photo to work on, here’s one from my vast collection of iStock’s weekly free photos.

Add an Inner Glow

Make sure you have the blend mode set to normal, opacity at 100%, choke at 100%, and range set to 1%. Set the size and colour to whatever you like, in this case I’m using 5 pixels and a light grey.

Add a Stroke

Now we need to add a stroke for the second border. Make sure that this is set at a smaller size than the glow otherwise you will only see the stroke and not the glow! Also set the position to inside, otherwise you’ll get some unintentional rounded corners (well, so long as you don’t want rounded corners). Then pick any colour, I’m using dark grey for this one.

BANG!

There we have it, double borders. I hope my blog post has been useful and to-the-point! Any questions or feedback? Feel free to leave a comment.