A short note on… Beginner’s Web Design

I recently had a stroke of inspiration to create my own website.

After alot of tinkering, thinking, swimming in code, i decided that simple is better. The result might not be visually stunning but it works for me… for now.

If you are like me then there were times when you had to do something small, simple, and yet time consuming, and you wished there was something out there that could do it for you. Now now, don’t be shy, laziness is human nature, repetative = boring and time has become too valuable nowadays.

Below are some tools that I have found useful in the past along with what i think are essential to a successfull begginer’s design workflow.

1. Pen and Paper – Thats right, start the old fashioned way, write/draw/doodle it down! Flowchart it, circle it, crumple it and throw it in the trash and start again!

2. Plan, plan, plan! Knowing what you want will get you where you want to be, will give you a foundation of what help you’ll need, what plug-ins and tools might help you get the result you need. It’s painful looking at the countless websites out there that have no idea what they want to be and instead spew worthless widgets and Flash at our face hoping it will WOW us into coming back…

3. Think color : monochrome or migraine-inducingly-saturated with color? Browse the thousands of palettes over at ColourLovers and get inspired!

4. Shrink-O-Matic – Need to convert a large amount of photos to a smaller size? This tool can be amazingly useful, It wins over opening every picture in PS and shrinking.

5. WhatTheFont – I was introduced to this website by my boss who came up to me with a small sheet of white paper with an unidentified font on it, something the previous designer had introduced into the publication, and wanted me to find out what it was and use it again. WhatTheFont can come in handy when you just need to know the elusive name of that piece of type you love so much. Simply scan and analyze, the forums can be very helpful too!

6. Lorem Ipsum Generator – Yes, when you need your dummy text you can find it here… I know I know “But -Insert name of design software here- has an auto generate feature!-  Well, believe me when I say it will come in useful at some point in your design career!

7. W3Schools – If you are an information black hole and love to learn all the nitty gritty behind web design in terms of code this is the place for you. A perfect place for beginners with tutorials on all the major Web languages, Css, HTML, Javascript, PHP you name it!

8. CssLeak – Stuck? Get inspired! A daily updated gallery of the most beautiful Web Design on…well…the web!

9. Tuts+ – Learn! Yes, there is no shame in admitting you know nothing and looking for help. I find the Tuts+ network the most beginner friendly collection out there, each tutorial is detailed and explains the most important part, namely not how to get the pretty picture…but “W.H.Y”.

That’s it so far, I’ve found all of the above useful at some point in my quest for knowledge and experimentation so give them a go. Web design can be daunting but i think we can manage 😉


6 comments so far

  1. Esteban on

    I did as you said, and what i’ve got are nothing but lines 😦 step 1 & 2 fail for me.

    • Kay on

      You fail so you can try again. Believe me i was working on Step 1 and 2 too today, while watching reruns of the Simpsons, I decided i need to be creative before the inevitable onset of school-ism…

      And guess what? I threw it all out, it was pure crap, but it makes me want to try again. If we don’t try we don’t succeed, in my horrible charting there were a few elements that stuck, and i plan on working on them.

      So who knows? I would imagine a website based on lines can come out great!

      • Esteban on

        Kay, hello again… I’m making a really simple style which has a header a sidebar a main area, and a footer, this is my actual css file:

        * {
        margin: 0px;
        padding: 0px; }
        #header {
        background-color: Aqua; }
        #sidebar {
        background-color: Red;
        float: left;
        width: 150px; }
        #main {
        background-color: Gray; }
        #footer {
        background-color: Fuchsia;
        clear: both; }

        And my markup very simple so far because I cant get what I need 😦 I need the content/main be the same height as the sidebar. maybe there’s a workaround, a trick or something, but as I’m not a designer, I don’t know much.

        Hope you could help me a bit here.


  2. Kay on

    /* CSS Document */

    * {

    margin: 0px;
    padding: 0px;


    /*Here we have formatted the header according to your sidebar and main area, modify the size according to the image or text you will use*/

    #header {
    background-color: Aqua;
    height: 100px;
    width: 550px;}

    /*I have given you an example based on rigid height and width measurement, the best practice for compatibility is to leave the size relevant to your content*/

    #sidebar {

    background-color: Red;
    float: left;
    width: 150px;
    height: 300px;

    /*This is the formatting for your main content area*/

    #content {

    background-color: Gray;
    float: left;
    width: 400px;
    height: 300px;

    /*Note that I have created a coloured area that is 550px wide simply to demonstrate the final result once previewed in any browser, fill up with own content*/

    #footer {

    background-color: Fuchsia;
    clear: both;
    width: 550px;
    height: 100px;

  3. Kay on


    — What we have done here is seperated the page into 3 logical areas vertically and then seperated the second area into 2 more. —
    div id = “header”
    — This is your header —

    div class = “main”
    –Here we create a main area which will include both your sidebar and your main content —

    div id = “sidebar”

    –Your sidebar, here you can insert your navigational menu —


    div id = “content”

    — This will be your content, or your main area with information, images, etc —



    div id = “footer”
    — Your Footer Area —


    Obviously close all the tags when trying it out.

    Hopefully this was helpful. Maybe there is a better way to do it but don’t forget I’m not a seasoned veteran either, just learning my way like you 🙂

  4. Esteban on

    Hello again and thank you very much, I appreciate your help.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: