I can’t say I’m the most experienced web designer but I have learned a few things over the years from trial and error, reading and observation, and I like to think that I have the design process of a website, from brief to design to implementation, decently worked out. A lot of planning went into this recent redesign of ChiGarden so I thought I’d share bits of my process from start to finish. I always find it fascinating to read or hear how other designers work, and usually learn a trick or two that I can then apply to my own work. I hope someone finds this useful in the same way!

Research!

Being my own client in this case, there was no brief. In many ways this makes things easier - I didn’t have to answer to someone else’s vision or (sometimes misguided) design ideas- but it does of course leave so many open possibilities that it can be a bit daunting to decide what exactly to do.

The first thing I did was take a look at my then current blog, which looked like this:

The blog originally used Blogger ad then switched to WordPress, with various other sections like my web portfolio and artwork just done in HTML. The design drew attention to the large thumbnails linking to these sections at the top of the page, then blog entries below. I didn’t use categories so didn’t leave any space for them and didn’t have a way to easily access the archives. It was sufficient at the time, but there were a few problems:

• Since my portfolio and art areas were all hardcoded in HTML, it ended up being too much of a bother to update them. I didn’t end up updating most of them the entire time the design was up
• In the same way my ‘Links’ section was never updated
• The above plus a not so interesting arrangement of content made my site feel a bit boring, outdated and less dynamic and interesting
• After moving from Blogger to Wordpress I saw the benefit of categories and archives, but had nowhere to put them on the front page
• I felt that I’d progressed a lot further in terms of design, and wanted something that reflected that and was more unique (thought still keeping with my ChiGarden floating island idea)
• My design and CSS related posts were too geeky for my friends to relate to, and silly little posts about my life were no doubt too boring for professionals looking at my site; in the end I have a feeling I ended up appealing to neither

I also took a look at some other blogs to see what other people were doing with them, and found some designs that were very impressive. One idea that Veerle’s Blog, Matt’s blog and coda.coza had in common and that I really liked was a sort of ‘mashup’ - a loosely grid based design with sections that pulled information from your presence in other sites around the web via widgets. I think it gives the design a sort of bustling, lively effect, especially as since information is being taken from services that these authors already use as part of their routine it isn’t extra effort to remember to update that part of their website. I also found the really clean, sleek Web 2.0 look growing on me, and liked the way they managed to fit quite a lot of information into a single page.

So, from looking around it was a bit easier to figure out generally what I wanted:

• Clean, sleek design (though still following the ChiGarden floating island idea)
• Content laid out clearly and in more interesting and dynamic way
• Content that doesn’t require me to go digging through HTML to update so that it will actually be updated
• Space for categories or archives
• A more focussed direction in posts
• A front page that fit in more information with less scrolling

Content

One thing I (and other designers, I’m sure) find frustrating is when clients have a vague or no idea about the content that will fill their website, especially on their front page. Web design isn’t just about building a frame around the content and sticking in some lorem ipsum; it’s about laying out the content as well, and having a more detailed idea of what that content will be allows you to do much more interesting things with the design to present it in the best way possible.

This time I actually had the opportunity to figure out a general idea of my content and design with it in mind, so that was the next thing I did. After doing some more research into the types of things other people had in their blogs and looking once again at what I did and didn’t have in my old design, this is what I came up with for the front page (in order of importance).

1. Most recent post/summary
2. Recent portfolio entries
3. Categories
4. Link/summary of a few recent posts
5. Recent photos (from Flickr)
6. Recent links (from del.icio.us)
7. Recently dugg articles (from Digg.com)
8. Links to my places around the web
9. Life To Do (from 43 Things)

I usually like to rank different content sections in order of importance (if I’m given enough details to be able to do so) since this will influence how they are arranged and the end design, which I’ll get back to later.

In terms of other pages on the site I wanted to simplify it down a bit from my old one (since most of it was never updated anyway) so decided to keep it to Home, About, Portfolio and Contact. I didn’t want to have all of the same sections from the front page repeated on these pages, to keep them more focussed while the front page is more of an overview of the site.

Sketching

Now armed with a decent idea of the kind of content I wanted, I moved on to the design. Again this step was made far easier than usual by being my own client - I had been thinking about the redesign for ages before I seriously started working on it, so had a pretty good idea of the direction I wanted it to head in. I wanted to build more on the ChiGarden island idea, throw in some original characters, keep the design professional looking though still cute enough to bring in a bit of my personality. I also needed it to be able to handle all of the content I wanted to put on the front page, as well as being flexible enough to work with pages other than the front one that might have less content.

I decided to keep the floating island at the top similar to the previous design with the content arranged underneath it. I thought it best to keep the illustration of the island fairly simple again as well, since my site will likely have a lot of pictures within the content and didn’t want the top illustration to distract from or conflict with these too much and the simpler style would be far quicker to draw.

With these things in mind I started sketching. Different people have different ways of sketching that work for them - for me this way is rough, scribbly and if its something for myself often done spontaneously on the bus or in the middle of a Japanese class as inspiration strikes. The point of sketching out a design before coding or even laying it out in Photoshop is that you can get ideas down fast and make changes fast; it doesn’t have to be pretty, it just has to get the idea across enough for you to be able to choose one or more designs that are working on paper to do up neatly as a proper concept. Skipping straight to the coding means you could be investing lots of energy into a design that might not work at all; same, though to a lesser extent, with skipping to a neat design concept. Sketches are quick, dirty and disposable, and I’ve found this step of the process invaluable when designing anything, whether it’s a website, logo, brochure or anything else.

My final sketch - still pretty messy!

When trying to figure out how to arrange the content I looked back to the ranked list I made earlier. In most cultures people will read from the top left to the bottom right, so the most important things should be near the top left with a nice strong ending in the bottom right. This works well in print, but on the web people tend to dislike scrolling and have short attention spans, so anything important needs to be visible within the browser without scrolling at all. Keeping this in mind I put my most recent post in the top left and thumbnails to my portfolio on the right (an area which is usually not a good place to put things, but the fact that they’re images bring enough attention to them). I put parts which I wanted to be there but would take people away from my site towards the bottom, since they were less important, and separated them visually from the rest with some clouds which would also contribute to the floating island idea.

Illustration

I tried to keep this illustration as simple as possible, as explained earlier, so there isn’t a huge amount to it. I wanted to bring in some cartoony characters so decided to go with a less realistic looking tree than the one in the previous design so they could fit together more easily. After some attempts I ended up going with a style inspired by a half remembered design on a character’s coat. I sketched the general idea on paper first, traced a more clean version in Photoshop and took it into Illustrator for vectoring. My characters, Chisa and Mojo the monkey were done by a similar process, and I took the fish from a previous illustration.

Illustration process: pencil sketch > cleaner digital sketch > vector

Clean Concept

The next thing I did was transform my messy paper sketches into a clean concept in Photoshop. I usually start out by setting up a 1024×768 canvas (as this is the most common screen resolution, and the lowest that I planned to support in this design), colours set to RGB and dpi to 72. Then it was a matter of putting in the pieces. I usually like to start by setting up some guides to block out the main areas, in this case three columns with the header illustration at the top and a ‘fold’ at the bottom. I also find it helpful to keep things in separate, logically named layers grouped into folders, so it’s much easier to move things around or change colours without affecting other areas of the design. I ended up increasing the canvas size to 1280px wide to draw in the clouds at the bottom, which I wanted to look decent at that resolution as well as lower ones.

Concept with illustration and guides showing where the sections will lie

With the sections roughly blocked out I started filling in some dummy content. Lorem ipsum is okay if there’s nothing else and it’s chopped up to suit its purpose, but I used bits and pieces from my current site and the content generated by the widgets I planned to use to better emulate the way it would look in the end. Font choices are pretty limited on the web so I fell back on my current favourites of Verdana and Century Gothic for the parts that needed to be rendered as text, and a cute round font called Howard Fat Ligh(t?) for the headings that I could put in as images instead.

I wanted to keep a similar colour scheme of blue, black and pale green from my old design, so choosing colours wasn’t too difficult. I decided to make the blue of the sky darker so that the silhouette made more sense, and so that there was enough contrast to use white for the text and the pale green for links.

Concept with dummy content

At this point I thought it was a little boring - the post, previous posts and categories were sort of blurring together, even with the blank space separating them. To bring out the most recent post and separate them all out a little more I put a round cornered box in a slightly lighter colour around it, then used the idea of the speech bubble from one of the rejected sketches. I decided to make the date look a bit more interesting by putting it in a mushroom, keeping with the ideas in the header illustration, and the same mushrooms shrunken down next to the dates in the previous entries. I kept with the speech bubble idea for the comments with a simple cartoon head.

Completed design!

You can probably also see that I gave up on some ideas and brought in new ones as I went along. In some parts of life sticking to your ideas might be a good thing, but I think in web design it’s important to be able to play around with and change your design as you go along, and to not be afraid to admit that a design isn’t working and start over. After playing around with the Digg and del.icio.us widgets it became clear that they took up more space than I’d allowed for them in my sketch, so I dropped the 43 Things ‘Life To Do’ area to give them more room. I also ended up dropping the ‘Chisa’s Places’ section too towards the end, since I felt it was making the design look a bit messy with the favicons that didn’t all go with my choice in colours.

When I was happy with my concept I cut up the pieces I would need in the website using more guides and the crop tool (there is a way to slice automatically, but I never managed to master it and find the cropping easy enough anyway). Knowing which pieces would be needed and how to do things using a minimum amount of images takes a bit of practice and experience.

Templating

I was new to Expression Engine’s templating system when I started this, but luckily once you get the hang of the way templates are grouped and where to look for tags it’s fairly easy to do. After discovering that I could pretty much code a (x)html template my own way and just substitute in appropriate tags later, I ignored the template system and just coded up the page in Notepad++ and tested it locally. My design is pretty much made up of a bunch of floated divs with a wrapping div around it all to keep it centered. I put the sections all in their own divs then played around with CSS using the Firefox Web Developer Toolkit (which is the most amazing plugin ever) to get them all to the correct dimensions and positions before turning to finer details like colours and fonts.

After getting it all working in Firefox I tested it out in Internet Explorer 6 and 7 and fixed up some problems, which mainly involved adjusting margins and paddings and using the underscore hack. Usually a separate IE stylesheet is a better solution than using dodgy hacks, but I haven’t had a chance to move them over to that yet.

Turning this into an EE template was mostly a matter of pasting it into the appropriate file (templates in EE are all created and edited through the browser; it’s nice to not have to bother ftping templates up) and adding in appropriate tags figured out from looking at default templates, the Expression Engine User Guide and the forums, which seems to have a nice community of people eager to help.

Other Stuff

After all that I then had to create templates for the other pages (full post/comments page, category pages, about page, contact page, work page) which followed a similar process to the main page, imported the posts I wanted from my old Wordpress blog and reformatted them to fit nicely in the new template. After that it was a matter of tweaking things here and there based on people’s suggestions and actually writing posts! To address the lack of focus issue I mentioned at the start I plan to keep this blog more professional and write mostly about design and leave more personal posts to a separate blog that I still have to finish.

If there is any particular aspect of my website or design process that you’d like to read about in more detail, please comment and I’ll see what I can do!

What is your design process?