Blog Entry

Creating Original Websites

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.

4 Comments
Leave a Comment