Tuesday, December 08th, 2009 
 Author: Jon B

5 Web Design Tips for Beginners

1. Layout
In web design, the first step is to choose the layout which best suites your needs. Layout is basically the placement of your content, images and information in your web page. Normally layout is designed in Adobe Photoshop or any other graphic editing software. Please consider these few things while designing your layouts.

  • Width and height of design screen (What resolution to design?)
  • Height of header and footer content
  • Where to place the content so it can be useful or readable
  • Keep white spaces (gaps) within your text content and images
  • Keep it simple and clean, don’t make too much information stuck on just one page
  • You can also draw the layout on simple paper by your hand

2. Color Scheme
Second step in web design is to choose the right color scheme. Your color scheme may be comprised of two or three colors. But don’t use more than 3 colors, it will be difficult to control more than 3 colors. There are some websites where you can pick up the color schemes like kuler.com or you can find amazing color schemes at www.colorlovers.com.

Tips on color choices:

  • Choose at least 2 colors or 3 colors, like black, dark brown and dull green.
  • Keep your text in a readable color like white text on dark brown background.
  • Keep your links a little bit more sharp in colors than your text
  • Keep the balance in colors like light colors on dark backgrounds
  • Don’t make a fruity effect by using too many colors in one place
  • Try to use Web 2.0 sleek and clean color schemes

3. Content Positioning (Balancing)

Third step is to position and maintain your contents so that the user feels like all the pages of the site are in balance. It is a very crucial step in web design. You also have to keep in mind to view your web pages in multiple major browsers.

4. Optimization

First three steps were purely design based; now when you have built your page a bit, you must not overlook the page size and how it is going to load in the browser. Web page optimization means a very broad term. It may also include Search engine friendly coding.

  • Keep the usage of images at minimum, loading time will suffer due to heavy images
  • Minimize the usage of too many scripts and Flash content
  • Use CSS and div based layout and eliminate any unnecessary CSS and HTML codes
  • Words in the title of page and headings and your meta tags all count towards Search Engine optimization
  • Check your web page in different browsers, cross browser compatibility is a must

5. Design Exposure

Your exposure to new and latest technologies, design patterns and layouts will also improve your web design overall sense.

  • Search for latest trends in web design and latest web design techniques
  • View portfolio websites of other great designers
  • View art related websites like Deviantart.com to get some good exposure
  • Try learning new tutorials on Photoshop, CSS, HTML

Article By: Ahsan Idrisi

Tags » design, guidelines, tips «

Trackback: Trackback-URL | Comments Feed: RSS 2.0
Category: Code, How To, Web Design, Web Development

You can leave a response.

 

  1. 1
    Mahjong Kostenlos 

    I am not jet beginner. Your article gave me very good tips.
    Thank you for sharing

    [Reply To This Comment]

    Muhammad Ahsan Idrisi   Replied:
    August 8th, 2010 at 2:46 pm

    Yeah thanks a lot for liking it. it is my first article….

    [Reply To This Comment]
  2. 2
    Anime blog 

    I am really struggling and a bit weak in terms of color usage or combination.

    [Reply To This Comment]

    Ahsan Idrisi   Replied:
    May 12th, 2010 at 1:12 am

    I think you need kuler.com or any other color website like colorlovers so you can easily pick the combination there.

    [Reply To This Comment]
  3. 3
    Psychological impotence 

    thank you very much 4 cool designes ;)

    [Reply To This Comment]
  4. 4
    keveenjames 

    Firstly, I would like to say that you blog design and layout is very unique and looks very nice. Your technique will be very useful for my sister because she is beginner in web designing.

    [Reply To This Comment]

    Ahsan Idrisi   Replied:
    April 23rd, 2010 at 10:46 am

    By the way, author of this article is me and not the author of this website.Anyhow, thanks for liking the article.

    [Reply To This Comment]
  5. 5
    Affiliate Marketing Lessons 

    Great tips I really love the look of your blog the layout is top notch. I am somewhat familiar with basic HTML but I still have a lot to learn. Thanks for the tips they are appreciated. And like Arnold Schwarzenegger said I’ll be back I love this blog!

    [Reply To This Comment]

    Ahsan Idrisi   Replied:
    April 9th, 2010 at 10:42 am

    Thanks for liking my article, this is my first article i have ever written.

    [Reply To This Comment]
  6. 6
    tamashebi 

    thank you very much 4 cool designes, I’m beginner and they are good help for mee

    [Reply To This Comment]
  7. 7
    Freedom Venture Project 

    Thank you for sharing your wonderful post regarding web design, Finding a nice color theme is very essential on the website’s appearance thank’s also for sharing the links..

    [Reply To This Comment]
  8. 8
    Colby Jones 

    thank you for sharing this web design tips. This is very helpful.

    [Reply To This Comment]

    Ahsan Idrisi   Replied:
    April 8th, 2010 at 2:27 am

    you are always welcome

    [Reply To This Comment]
  9. 9
    Joseph McCullough 

    I disagree with the order of thought within this post. It makes more sense (and creates much better code) When you create semantic HTML without even thinking about the layout. It really helps you separate layout from content too. Use the available tags to make meaningful code, and afterwards, begin making your layout sketches. Then create your CSS. You should barely have to touch the HTML file at this point. Divs and spans should be used as a last resort. They have no semantic meaning.

    [Reply To This Comment]

    Ahsan Idrisi   Replied:
    March 14th, 2010 at 12:16 pm

    You might be right, but everyone has his own style of doing things. And i think you have given a good idea.
    But making layout first also makes the same sense as semantic html.
    In the layout, you can see how many images are going to be on the page and how many javascripts you need and where will be the text.

    [Reply To This Comment]
  10. 10
    Ahmad lucky 

    thnxfor the tips

    [Reply To This Comment]

    Ahsan Idrisi   Replied:
    March 10th, 2010 at 7:26 am

    thanks for liking my tips

    [Reply To This Comment]
  11. 11
    Mozie 

    Very cool Article, keep up the excellent work. I have to mention that your blog looks very cool. Contact me if you need help with your Web Design and graphics :)

    [Reply To This Comment]

    Ahsan Idrisi   Replied:
    March 6th, 2010 at 2:31 am

    thanks a lot for appreciating my article.

    [Reply To This Comment]
  12. 12
    Matthew 

    Thanks for the tips. For compatibility testing, check out http://browsershots.org/. This neat service allows you to test your website on around 50 different browsers, and best of all it’s free :)

    [Reply To This Comment]
  13. 13
    Michael Cowell 

    Nice tips. first three are all good, But I have problem regarding the optimization part. I created a wonderful layout but when I tried it on firefox the loading time was soooo long. so I decided to trim off some colors and pictures. Is there any other way to keep the loading time of my site faster?

    [Reply To This Comment]

    Ahsan Idrisi   Replied:
    January 31st, 2010 at 2:30 am

    There are a lot of techniques for heavy image websites. First of all use height and width tags on all images. Then try to squeeze the size of jpeg and png images through some image compression softwares. But keep the original images somewhere else.
    You can also compress any javascript files .js and also css files through a lot of online tools. Then check the website again in pingdom tools to see which component is taking a long time.

    [Reply To This Comment]

    Jon B   Replied:
    January 30th, 2010 at 10:59 pm

    My advise is to steer away from table based layouts and start using divs instead.

    Tables have long been known to affect a site’s load time since the browser has to render it along with the images.

    [Reply To This Comment]
  14. 14
    Beth Charette 

    I had left a comment about color schemes that didn’t show up.

    Basically I said that being artsy or attempting to be unique is one thing.

    Designing a site, like for recipes, in blacks, browns and yellows, goes beyond artsy to vulgar chic.

    [Reply To This Comment]

    Ahsan Idrisi   Replied:
    January 27th, 2010 at 2:09 pm

    There are other options like mixing two or more site designs into one. For example you get two very nice designs from deviantart and you can get colour scheme from one and layout from other.

    [Reply To This Comment]
  15. 15
    fishing organizations 

    Thank you so much for your post. Things like these are some of the most helpful for me since, as you may have guessed, I’m beginning in website design.

    Please, keep the “beginner’s tutorials” coming.

    [Reply To This Comment]

    Ahsan Idrisi   Replied:
    January 27th, 2010 at 2:07 pm

    Thanks a lot for liking this article. This is my first article. Most people hide their tools and techniques. I think i have never seen someone saying about your exposure to designs.

    [Reply To This Comment]
  16. 16
    services 

    I think number 1 is the most important. A good layout might not necessary work for every niche.

    -Kai

    [Reply To This Comment]

    Ahsan Idrisi   Replied:
    January 11th, 2010 at 12:57 am

    you might be right in cases where you follow all the ideas of your clients(which dont have much design sense).

    [Reply To This Comment]
  17. 17
    Sikat Pinoy 

    I am really struggling and a bit weak in terms of color usage or combination. I always ended up using black, white and gray combos.

    [Reply To This Comment]

    Ahsan Idrisi   Replied:
    January 9th, 2010 at 11:25 am

    oh, that’s the same problem i faced 5 years ago. Your exposure to design will make it better. Try to copy other designers color schemes. And get your color combination sense developed….Hope this helps. Go to deviantart.com and visit web designs to get good exposure of top designers of the world

    [Reply To This Comment]

    Sikat Pinoy   Replied:
    January 12th, 2010 at 12:54 am

    Thanks Ahsan,

    I am already lurking around Devianart but still, facing the same problem.

    I guess, I should start to learn it via experience.

    [Reply To This Comment]

    Jon B   Replied:
    March 9th, 2010 at 1:13 pm

    There are many blogs out there to learn great designs from, it’s important to base your ideas around them and not just copy the design.

    You might want to check out the link below:

    http://www.jbwebdev.com/blog/better-web-designer/

Leave a Reply






Copyright © 2010 | Theme By JBWEBDEV | All Rights Reserved