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.
This next section of the tutorial is going to cover both the planning and sketching, I feel the two are closely linked.
We’ve already gone over most things and have jot-notes from our brainstorming session, so now we’re going to start taking a more visual approach to planning our layout and key elements.
Usually the first thing I would do after brainstorming is combine all those bits and pieces of jot-notes into one semi-coherant format.
From the ‘mental and jotted’ notes I’ve made, THIS would be an example of what I have going into the actual sketching phase of the site. (Note: I have converted my “actual cat-scratches” into electronic format, I cannot be held responsible for anyone popping blood vessels trying to read my writing.
Based on all of this we can summize our plan into:
What we want to create here is a visually-stunning, yet funnctional website that really highlights our strengths and portfolio.
There are two important factors that we will follow during the site creation that will make a site that works for both the end-user, and the owner.
1) It must be dynamic and easy-to-update. This allows the owner to create fresh new content for the end-user with ease.
2) It must really focus on the “work” of the company. This will allow the end-user easy access to what they really want to see and also allow the owner to put their best foot forward.
While the planning phase can be much more in-depth based on the type of site you are creating, for our current task this will suffice. If you did little to no planning before and now you do this much, you are a lot farther ahead.
The next logical thing to do is to start sketching out our layout, making ‘visual notes’ on colours, potential layouts etc. This will really make the comping phase much easier.
Note: If you happen to be artistically challenged don’t fret. This is simply for reference, all the ‘pretty things’ will happen when we move to the next phase and start comping out our sketches.
Basically all you really want to do here is come up with “possible” ideas for layouts. When you comp things out you will almost always change several things about your initial sketches. Having them however usually saves you from staring blankly at a screen with no real direction. (I know you are nodding your head and laughing!)
Based on the notes, and ideas we’ve had thus far I have these potential ideas for layouts. (as you can see they are very rough!).
That takes care of the initial groundwork, we have branstormed ideas and turned these ideas into a more tangible plan.
The next section we will finally start in on the fun stuff, creating the actual UI Graphics and creating the intial website.