Creativity is not like gas in your tank, it is more like air in your lungs. The most important part of creating a web site is coming up with a style and a design that works for your client in terms of aesthetics, but also for functionality.
As a newbie web dev you will spend hours moving pixels back and forth, you will fuss and fret over the smallest details until it’s perfect. Design will be a torturous event causing so much stress and sweat you won’t soon want to revisit it. This part of the process might even turn you off of web design permanently. Always keep in your mind that this is a process and that your brain is a muscle which needs to be exercised to grow.
SO, keeping that in mind, here are some useful tips for getting your creative muscle flowing.
- Pick a working medium (are you familiar with photoshop or will you use a pen/pencil) – depending on my project i will alternate between sketches and pure photoshop layouts. Sometimes I am confident enough to jump right into photoshop, other times I need inspiration before I even try to move to the output phase. Build the idea first, then try to express it in a way you work well with. Make sure it’s easy for you to manipulate quickly and you will have an easier time formulating the final draft.
- Load your creative hopper – don’t try to use your creative muscles without a warm-up! This is a time when you can do things you enjoy, things that stimulate your sense of colour, shape and feel. Look at photos which are aesthetically beautiful to you, play a video game, look at your favourite artists portfolio. Browse deviantart.com for some new ideas, grab a coffee, change your location, stand on your head, even watch a bit of tv for inspiration.
- Focus the creative part of your mind – getting the juices flowing is the next step, SO what I usually do is check out the clients favourite sites (what?? You didn’t ask them for an example of the styles they like?) and see what they have in common, why did they choose them, what about them is appealing. Then I generally pop over to a website template site and browse some of the broader categories, business, creative/advertising sites, etc. This will start to give you a ton of ideas about shapes you would want to use or specific design ideas or features. I usually save a thumbnail in a folder and name the file a phrase about what i liked about the thumbnail. For example… maybe I like the fading gradient of a thumbnail i would name the file “sweet gradient.jpg.†Then I end up with a folder full of sweet ideas to browse through when my creativity muscle starts to fatigue. Eventually the design itself will have a life of its own but until then you need all the help you can get!
- Big bold shapes – start with the biggest parts of the design… where do you want text, where do you want images, where do you want to put some flash (if you’re using flash) and where do you want any other features or requests the client is looking for.
- Add context! – this is so important… the idea is being fleshed out roughly, but it’s too simple you say, or it doesn’t look like a site to you yet. Well here is a tip which helps me out a lot. Even if you just have basic shapes you should add a nav bar with some buttons, add the logo on the page and add the copyright information or links at the bottom of the page just to give you more stuff that will help you to visualize what you are getting at.
- Add text, images, etc – again, building the shapes and roughing out the design will be helped along by adding more stuff, it really helps you to put context to the site so you can start to add balance and style.
- Add visual details – now it looks pretty solid but something is missing? How about a drop shadow? What about a simple gradient? Did you consider a faded logo in the background? Something to draw your eye to a certain part of the site? Maybe even a stroke or outer glow. Keep it simple though, i don’t want to see big bright blue boxes with 3px red strokes and green drop shadows… subtle people subtle. I try to keep my drop shadows very light (low opacity) so they just add a little something to the eye but don’t distract or over-power.
- TAKE A BREAK – did I mention a big step in all this?? Things going well?? Then stop. It sounds weird, but as soon as things are going good and you are just losing some of your momentum, then you need to walk away for a minute… go work out or re-energize your brain. If you lose power and have to force yourself through the creative process then it’s no fun AND you will come up with a design you most likely won’t admire. I recommend revisiting steps 2 and 3. I personally like to play some Guitar Hero or Rock Band and let the design marinate in my old cranium for a bit.
A good way to know if you are done your design is to ask yourself this question, “does it look too simple for the amount of work I just put in?†If you can say yes, then you are most likely finished!
Another tip which will help you as you grow into pro web designers is to keep in mind how you are going to build the site as you are creating the design. You will eventually know what kind of things are pains in the ass and which are going to be easy to do with styles.
See this article for more information on what to do and not to do to make your life easier and to avoid style faux pas.