Web Design For Idiots

Step # 1 Conceptualize

So here is probably the single hardest step in designing a really eye catching and memorable website. Conceptualizing it. Before you start coding, you have to have an idea of what you want your website to look like, where you want the navigation to be, and the overall layout. The average designer working on a basic website will consider this an easy step. There are rules that you can follow to make a website that is very easy to use for the visitor. There is something called F shaped viewing. There was a study done that tracks where viewers immediately look at a website, and how they scan it. The majority of people in this study viewed a website in the same way. Have a look at this image to get a real idea of what an F shaped viewing looks like:

f reading pattern eye trackingAs you can see, no matter the layout of the website, people generally view the top left, center, and right first. On e-commerce sites, the shopping cart is generally in the top right, and page links are across the top, and the categories are on the left side. This is very standard and people are used to it.

This is great knowledge to arm yourself with, however you can not let this stifle you in creativity. Giving yourself guidlines for a good user experience is not a good excuse to have a bland website. I have seen amazingly wonderful websites that have the exact layout that I mentioned, and I have seen horrible websites with that same layout. If you take oscommerce for example, the layout of the stock install is exactly what it should be. (you can see it here). However, here you can see another website using oscommerce and the basic layout but this site has a much better impact using design, graphics, and images. (you can see it here or here).

So, now that you have looked at some examples of what good design can do to a rather bland layout, you will have to figure out how you will make your website stand out. It is all going to be different based on what you are selling, offering, and writing about. That clean look of the ono tea website might not work for you, or that very grunge look of the assault t-shirt line could be over doing it as well. This is where the designers work comes in. You have to feel out what you want the website’s design to portray and start working.

For instance, I am working on designing my graphic design company’s website. The conceptualization part was the hardest for me. My husband and I sat down and tried to figure out what we wanted to portray. With a graphics company, you can go one of two ways, really simplistic with putting a lot of emphasis on typography and the work in your portfolio, or graphic heavy with a lot of emphasis on the website’s design as a part of my portfolio.

We sat and came up with a bunch of concepts which range from simple to color heavy, and finally settled on a concept. We are combining photography with illustration in a nice clean looking design that still has a lot of graphical content. We are working on designing a horizontal layout where instead of scrolling top to bottom, you scroll left to right. Using a jquery plugin to create an animated scrolling experience ads a little more uniqueness to the design and overall layout. With a portfolio website, you can really take a lot of liberties, mainly because you are showing off your “chops”. You are not really concerned with making sure that the person finds the product that they are looking for, and you have a lot less pages to deal with. However, even with the liberties taken with a portfolio website, I will still be working with the same basic layout of navigation at the top, content in the center, and some lists on the left side to work as internal page links, similar to categories.

The moral of the story is, stick with what people know, and people will have a happier user experience, but do not let it stifle your creativity. Push the envelope a little.

Here are some sites that I feel have done an exceptional job and creating an easy to use website, with a very unique design that is unforgetable.

Sequence Branding

B.N. Weiss

We Bleed Design

VN:F [1.8.2_1042]
Rating: 0 (from 0 votes)

This is some text prior to the author information. You can change this text from the admin section of WP-Gravatar  Someone who is relatively new to web design. I am new enough to still remember how absolutely frustrating it was to try and get anything done in this field, but have also been around long enough to be able to help those that are where I was a year ago. Aside from web design, I run the office of my dad's engineering business, and do book keeping by trade. I love my pets.. All 6 cats, 1 peg legged dogs, and 1 hedgehog. LOVE THEM!! Oh yea, and my husband. He lets me chase my dreams and I let him do the same. We are happy people because of it. Read more from this author


9 Responses to “Step # 1 Conceptualize”

  1. ds r4 cardNo Gravatar says:
    UN:F [1.8.2_1042]
    Rating: 0.0/5 (0 votes cast)

    Al Pacino said it best, in Scent of a Woman: I’M IN THE DOCK, HEYEEH. I’M IN THE DOCK.

    UN:F [1.8.2_1042]
    Rating: -1 (from 1 vote)
  2. AlbertNo Gravatar says:
    UN:F [1.8.2_1042]
    Rating: 0.0/5 (0 votes cast)

    Interesting, but still would like to learn more about it. Love the article! :-) .

    UN:F [1.8.2_1042]
    Rating: -1 (from 1 vote)
  3. WebdesignNo Gravatar says:
    UN:F [1.8.2_1042]
    Rating: 0.0/5 (0 votes cast)

    i found out that i still have a lot to learn, when i see this.

    UN:F [1.8.2_1042]
    Rating: 0 (from 0 votes)
  4. AllisonNo Gravatar says:
    UN:F [1.8.2_1042]
    Rating: 0.0/5 (0 votes cast)

    How to Optimize Website For Bing …. ?

    UN:F [1.8.2_1042]
    Rating: 0 (from 0 votes)
  5. LindsayanngNo Gravatar says:
    UA:F [1.8.2_1042]
    Rating: 0.0/5 (0 votes cast)

    the exact same way you optmize it for all search engines. Do some research on SEO and you will find a plethora of information. You can also find a some on one of my articles here to get you started
    http://www.webdesignforidiots.net/2009/02/crash-into-seo-with-this-course/

    UA:F [1.8.2_1042]
    Rating: 0 (from 0 votes)
  6. Poker SpielNo Gravatar says:
    UN:F [1.8.2_1042]
    Rating: 0.0/5 (0 votes cast)

    We should thank you for giving such a creative website. Your blog is not only informative but also very stimulating too. We come across a limited number of people who can create technical content that creatively. All of us keep searching for information with regard to a topic like this. I Myself searched in dozens of websites to acquire information regarding this.Keep posting !!

    UN:F [1.8.2_1042]
    Rating: 0 (from 0 votes)
  7. UN:F [1.8.2_1042]
    Rating: 0.0/5 (0 votes cast)

    Awesome heat map, and very useful! I always wondered how they created these things..

    UN:F [1.8.2_1042]
    Rating: 0 (from 0 votes)
  8. r4 cardNo Gravatar says:
    UN:F [1.8.2_1042]
    Rating: 0.0/5 (0 votes cast)

    Really like your website, thanks for the useful info , I will be coming back soon!

    UN:F [1.8.2_1042]
    Rating: 0 (from 0 votes)
  9. UN:F [1.8.2_1042]
    Rating: 0.0/5 (0 votes cast)

    Many thanks for sharing such an informative article with all of us. I’ve bookmarked your blog will come back for a re-read again. Keep up the very good work. We have a Dan Kennedy Copywriting seminar that we offer to our customers you can check it out here Copywriting Tips Click here

    UN:F [1.8.2_1042]
    Rating: 0 (from 0 votes)

Leave a Reply




Comments links could be nofollow free.