Among billions and billions of websites how do you make yours stand out from the rest? When other sites are only a click a way it is important to create a design that will spark interest in your visitors and make them want to keep coming back. Yesterday I discussed the web design process from a freelancers perspective. Today I’d like to go into how I actually design a website and what is necessary to create a site that is both effective and unique.
Before I get started let me say that I’m not a web design guru and I don’t claim to be. These are the techniques and tricks I use and have picked up over the years to create websites. I am currently working on the design of a new site and I will be redesigning this site on May 1st because of the CSS Reboot. These articles have been written to help me think through how I work and I hope my writings can help some of you.
As soon as I hear the name of a website I normally can see a picture of the site in my mind. The goals of the site are rarely addressed in this design and I may never use it, but I draw down the idea in my notebook just in case. If the design is good enough I might take parts of the idea and incorporate it into the site but I never use the whole idea. If I do then I know I didn’t really think through the goals and purposes of the site. For me, the design process always starts with a thought that I try to transfer onto paper. Paper and pencil designing is much quicker in the early stages of a sites design then starting a design on screen. Sometimes I may not think of a design right away. I get lots of good ideas in boring classes at school and if I keep my notebook with me I can work on a sites design no matter where I am. Sketches can be as big or small as you want. Some of my drawings are less then 2 inches wide and some take up an entire piece of paper. Some of my drawings are very detailed and others are just a bunch of boxes but they are all helpful for me to see the site and the code in my head before I even turn on my computer.
Once I can see the site exactly how I want it in my head and on paper I transfer my drawing to the screen. I use Macromedia Fireworks to create visual representations of my sites. I should teach myself Photoshop because it is sooo much better but I haven’t done that yet. Now I can get more picky and decide on colors and fonts. All my drawing are done in black in white since I use either a pen or a pencil to make the sketches. Often I’ll draw a site that looks really cool on paper but when I actually try to design it, it looks terrible. Does this happen to you to?
Now that I’ve drawn the site in my notebook and created it in Fireworks the design of the site is basically done. As I develop the site I sometimes realize cool things that I want to add or delete but for the most part I’m done with designing. Once you start to code your design into the site you shouldn’t need to make any major changes to the look of your site. I hope you like what you’ve done because once you start to develop the site it can sometimes be a huge pain to change anything.
But how do we create sites that are both effective and unique? Sites like Design Shack, CSS Reboot, CSS Mania and many more showcase some of the best web designs on the internet. I’ve found some of my favorite sites while browsing through these galleries and have even had this site showcased by some of them. These site are incredible and most of them very unique but copying one of their designs isn’t going to be very original or satisfying, even if no one else notices. What I like to do is find sites that I like and try to use their ideas but present them in my own way. Every site has the basic elements like a navigation, a logo, a footer, etc. The trick is to combine these elements into a design that is understandable but different from the norm.
With this site I needed to have a navigation, a sidebar, a footer, and all the things that come with having a blog but I wanted to present them a little bit differently from anything I had seen. Instead of a plain text navigation I used large images and set each element into its own section. I still have a navigation, a sidebar, a footer, and everything else that most websites have I just present them slightly different from what you might normally see.
In the next design of mattbobjones.com I hope to add a little more color and a little more uniqueness to the site but until then I hope you like the current look of things. Since it’s my site I get to experiment and be as different as I want. I don’t know what the real secret is to designing an original website but I like to try.
Great article Matt, I can’t wait to see our collaboration on the new website go live. I have some suggestions for the next version of your site here though. Make the form text and post details copy a little bit larger. it renders extremely small and is unreadable without scooting closer to the screen
Posted by Zeerus on Feb 23, 2006.
I should teach myself Photoshop because it is sooo much better
Actually, no it’s not better, not even close… not for Web site layout work at least. Photoshop is great for heavy duty pixel image manipulation but it’s a horrible design tool. Layout work is much better done with a vector based app like Fireworks. For more details and things you may not have considered, check out this article I recently published on my site:
Why Choose Fireworks
Btw, I use basicaly the same process you do and I rely on Fireworks because of its flexibility, precision and ease of use. A raster based app like Photoshop cannot compete with the kind of workflow advantages Fireworks offers.
Posted by Stéphane Bergeron on Feb 23, 2006.
I guess it all relies on what you’re more comfortable with, and which program you know how to use better. I personally use Photoshop all the time for my designs because I find it eaier to work with than Macromedia Fireworks. I have seen work done with that, and Photoshop in my opinion, can develop more customized designs. It’s more a digital creation tool when it comes to the topic of creating websites. That’s my view, so, don’t go all jumping on me and all.
Posted by Lasha on Feb 23, 2006.
I think you can do more with Photoshop but Fireworks is easier to use. I learned Fireworks first so I’m more comfortable with it and it’s been hard for me to switch to something new.
Stéphane: Great artcle! I didn’t know that Fireworks could do all of that and that well. I need to get better with graphics because I won’t always have Zeerus to help me.
Posted by Mattbob on Feb 23, 2006.