Note, the entire tutorial from start to finish will be available as a single zip file when it is complete, it will include all source html, css, PSD/Images etc.
In this section of the tutorial we will take a look at one of the most crucial yet one of the most often skipped steps in site creation, “Brain Storming”.
Brain Storming – The idea of sitting down and really “thinking” about what you are doing, who you are doing it for, what works and what doesn’t for the demographic you are developing for is in my opinion the most important step in site creation and one that should be explored in great detail.
The main thing to keep in mind for this entire section of the tutorial is that this is mostly “thinking”. This section was designed to give you a frame of mind for taking notes, and thinking about what you are creating more than actually “creating the site”.
In an effort to apply this reasoning to something that will actually generate end-results we will look at brainstorming for the site that we’re actually going to create throughout this tutorial. Keep in mind this is a “mock-company” site, this is no way reflects any real company or site that I have developed in the past.
The website that we will create during this tutorial is based on a website design agency (Hey it’s only fitting!).
Before you even begin thinking, grab a pencil and a piece of paper, take notes, you WILL forget things later trust me! Notes during this stage are key. Just jot notes, we’re not striving for a bestseller here.
What are we trying to accomplish – First things first, what is the purpose of this website and how are we going to accomplish it.
It’s funny how often these steps are skipped over, and when you think about it, there is no wonder so many websites end up as nothing more than static non-updated blobs on the internet. It’s not hard when they had no real purpose to begin with.
Look at it this way, you wouldn’t build a house without a blueprint would you? If you did you wouldn’t expect your dream home now would you? The same can be said for a website. You need a plan.
The very bottom line in most commercial websites is that you want to convert your audience from casual surfers/browsers of your website into clients of the company.
Once you have established this very fundamental purpose of the website, the next step is figuring out exactly how to accomplish this goal.
Let’s look at what we know at this point; We know we want to create a site for a website design agency. We also know we want to convert our audience from “lookers” into clients.
The next logical step here is identifying your audience. WHO are we trying to convert, and what appeals to them.
In this tutorial we’re building a site for a website design agency so our audience we can only assume is looking for a website. While not all viewers are there for “that exact reason” the ones that we want to appeal to are, there is a difference and a very important one.
If you have taken the time to sit down and take notes while thinking out the purpose of your website and your key audience, you are definately moving in the right direction. You are also now ready to move on and really put things into perspective.
Branding – What’s really in an image? Going under the hood to take a closer look at creating a ‘true’ response from the end-user.
We have established the purpose of our site at this point, we’ve also established our audience. The next logical thing to do is figure out what appeals to them. How are we going to generate a positive response from them? Easy, use the brand!
Branding can mean different things to different people. To your CEO it may mean a clean and corporate image. To the marketing department it likely means a consistency that people can relate to and remember. To me, it simply means Style. Your “brand” is your style; when you get dressed to go out on the town and take one quick look in the mirror before heading out the door you are seeing ‘your brand’.
Your brand is the one unique thing that makes you, you!
When you are branding an image you are really setting the ‘mood’ that people get when they look at you. That’s the bottom line – how do you want people to feel when they look at you? If you were a Volvo you would probably want people to feel safe, at least they better, they’ve spent 25 years portraying that image.
There are two general scenarios you find yourself in at this stage of the development process, 1) A start-up company that really has no brand yet (This is our current situation) or 2) A pre-established company that has a brand that you must follow.
With an existing brand you’ll find yourself following the colour scheme they’ve pre-selected, the typography, logos and any other pre-determined items which make up their brand. This can be good or bad depending on how good a job they did of actually creating their corporate image.
The much more fun scenario is a clean slate, a company with either a brand they’re looking to change, or no brand at all which you can mold to really make them shine. For the fun-factor I’ve decided our web design agency has no current brand.
Now that we have identified that our mock-company has no brand, we can move forward and think about what sort of image we want to portray, what will really make our audience tick when they see our name, our “image”.
For a web-design company you will want to portray several things, reliability, futuristic and forward thinking, the ability to create sites that stand out from your competition, and most importantly something unique.
It’s easy to take a look around and see what’s already out there, it’s easy to say oh well these guys did this or that and try to mimick an existing set-up. That is the “wrong” thing to do.
What you want to do is take a look at what’s out there and think “What are they NOT offering?. What can set us apart from our competition? That’s the road you want to travel when creating your brand.
Forget everything everyone else is doing for a moment and think unique. Remember your brand makes you unique, and it’s also the thing you want people to remember you by.
Don’t forget to take notes! Afterall we are just brainstorming here, there is no real tangible material being developed yet.
When branding this mock-company we know why want to come across as ‘unique’. Let’s break this down a little farther.
What colours can we use that have not already been used to death on the internet?
The colours you select set a mood, the imagery you use, the layout, the typography, the slogans … all of this will become part of your overall brand. Select them wisely.
We’ll see this develop more as we move foward in the design process.
Creating a paradigm of usability and aesthetics – What makes a good site “great”.
Last but certainly not least, the last item you will really need to sit down and think about is the actual design itself. We really need to come up with the perfect mix of usability/functionality and aesthetics (look and feel).
Consider this section of the brainstorming process creating a plan for the perfect window display.
What we know about the end-user is this; they go somewhere for a reason. They’re not at your website agency site looking for an apple pie recipe.
What we want to do is create something that gets them from the window (your main page), inside the store (your other pages).
This may seem like a silly analogy but when you look at it from this perspective, you start to realise what you have to put out front and center to really capture the attention of your audience.
Thinking logically again, we have to figure out two things: what information the audience is after, and how we can get it to them fast and easy.
In our current scenario we already know that these inviduals are seeking ‘website design. So we know what they’re after, we know we have to feed it to them quickly, the only question left is, what can we feed them that will convert them from a browser, to a client?
That’s simple! – Examples, Examples, Examples! – The only way you are going to convince someone that your work is so good they just have to have it is to show them. Have confidence in your work, have a strong portfolio, and show by example.
To sum this up, we have now taken notes and idenfitied our sites purpose, our target audience, our companies branding, our sites main areas of interest, and how we are going to get them across in an effort to better serve the end-user the information they want quickly.
Some general rules I follow are usually:
– Noone really wants to see pages of text talking “about the company”, noone really cares what your methodology is.
– People are there for a reason, figure out what that is and supply them with the information fast.
– Have fast access to ‘contact information’ at all times.
– Show by example, people want tangible results, they don’t want to hear you talking about how good you are, they want to see it. (Case studies never hurt).
The next sections will start to become a little more fun, we’ll actually start putting words (or in this case – visuals) where our mouth is.