Creativity 101 ? The beginning of the process

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.

  1. 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.
  2. 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.
  3. 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!
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.

CSS 101 – Basics of style sheets

What is a style sheet and why is it the talk of the town? CSS as us web dev people call it is a way of applying different basic styles to all of the files in a site. CSS files actually exist independently of the html files, but within the html file there is a link to the style sheet file. These files can be named anything as long as the link is correct. I usually call my main sheet global.css just because it’s is the global set of basic styles.

For example, maybe you want all of the font on your site to be arial. You would create a style sheet that says * { font-family: arial } and then every time there is some font anywhere on your site it will automatically be arial. This prevents you from having to add the <p style=”font-family:arial”>This is some text</p> to every single instance of text in your entire site. NOW, think if you wanted to change from arial to Tahoma on a whim… well all you would need to do is change the global stylesheet.

Now this gets more complicated… didn’t think it would be that easy did ya? Well they are known as cascading style sheets for a reason. They cascade commands down the ranks. Starting with the actual style sheet which is the highest of the cascade, so it is the basic default throughout all of the html pages. From here the next cascade down would be tags in the head of the document itself. So if you had an index.html file with the following code in the <head> tags then you would see all of the text on THAT page only be changed to Times New Roman despite the highest cascade telling us it should be arial.

Index.html contents follows:

<html>

<head>

<style>

* { font-family: Times New Roman }

</style>

</head>

<body>

This is some text

</body>

</html>

Now if you don’t know what all the < > is about with all the tags, check out my HTML tutorials to help.

There is now a third level of cascading, and that is with the element itself. SO, maybe we want to change that text to Verdana cause we’re crazy. Here is what we could do for the actual text element itself. Again if you don’t understand the basic tags, check out my HTML tutorials.

<html>

<head>

<style>

* { font-family: Times New Roman }

</style>

</head>

<body>

<p style=”font-family:Verdana”>This is some text</p>

</body>

</html>

SO despite the actuall .css file saying it should be arial and the page itself saying it should be TNR, the element says it is now Verdana. Which one wins? Well it’s the lowest level cascade which in this case is the element level. So you can see how you can tune certain parts of your site to have a different look or feel, size or colour, but the main global.css style sheet will keep everything that isn’t out of the ordinary looking consistent and clean.

More syntax and explanation to come!

Faux Pas 101 – 10 Things to NOT Do

Knowing what not to do is as important as knowing what TO do. To that end I’m publishing a list of my no-no rules for web dev. Follow these rules and you will always know what not to do.

NO:

1. Animated gifs – there is really no reason to use these horrible little miniature pixelated blobs. Long gone are the days of cramming cutesy moving objects into every empty space of a web site. That’s so geocities…

2. Full-screen flash – what are you? Coca-Cola? Cause if you’re not then you should not be using full-screen flash. It’s ridiculous, hard to update, hard to develop in, doesn’t look good unless you are really pro and have a ton of time. It is not indexed by google and most of all! It is hard to navigate and has sound.

3. Sounds – you know that awesome new song you have that you think everyone should hear? Or that cute little ding or bing or bloop that every button needs to have? Nobody cares and nobody wants to wait for it to load. Is this myspace? There is no time for buffering Kenny G or any G-Unit ballads for a web site. Bandwidth is precious, don’t clog it with your website noise.

4. Anything blinking – if it blinks, you better be able to justify it. Maybe it’s a simple flash movie to explain what the site is about? Maybe it’s a promotional blinker item… other than that, if it blinks permanently, nobody will take the site seriously. There is a reason why all the major browsers removed the parsing of <blink> from their repertoire.

5. Too much text – this one is simple but keep this in mind. People hate to read, they hate to scroll and they hate to wait. Anything that doesn’t slam them in the face with info quickly or direct them to where the info is will be passed over. Even the most basic Communications course teaches you about white space. Break up the copy so you have room for the eye to roam or better yet, get rid of it altogether or edit it down to be more concise.

6. Ugly pictures – this includes pics that are blurry, out of focus, don’t fit the page, have poor anti-aliasing around the edges, take away from the site or are just plain amateur. One of the most important things about web design in general is quality pictures! Get them from Getty, get them from anywhere. Use a photographer if you have to, here is a good one, http://www.collateral-photography.com/

7. Offensive colours – (yes I’m Canadian) here is another one. Seriously, you might think it looks good but if it’s hard to read… abandon ship. I would even go so far as to say black backgrounds are offensive. I used to love the contrast, I loved how striking it was, but there are better ways to make things stand out. Don’t use yellow… ever and don’t use too much purple unless it’s a nice light background or a gradient somewhere and it’s balanced out by another colour. Take advantage of the beautifully crisp LCD monitors with high res screens and put something on them people will want to view. I’m a fan of bold colours, just not ones that F up the design. Green and red do not go together, purple and orange do not go together, yellow and black hurt my eyes and too much contrast really isn’t a good thing.

8. Impossible to read text – too small, too yellow, weird fonts… your font can’t be anything other than the windows/mac system fonts or I will shoot you.

9. Ultra small navigation – it’s cute for hipster coffee housers but most people simply don’t have time to play hide the nav. It looks good in photoshop but the number one thing people have told me when I’m making a web site is to make the navigation bigger!

10Too many ads – now I’m a fan of monetization and yes I’ve been known to view about.com (a serious offender of number ten) but just keep them to a minimum. Ten blinking flashing animated banner ads will just piss me off, and if i can’t see the nav for the ads i will leave and most other people will. Use google ads sparingly and follow their limitation guidelines to stay in a reasonable boundary.

Stay classy San Francisco.