5 Web Design Tips for Beginners

Posted on: December 8, 2009 — 33 Comments

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

The Five Basic Elements of Web Design The basic elements and principles involved in web design are...
Key Elements of a Good Website There are several factors that go into making a successful...
7 CSS Layout Tips The most difficult thing in CSS to get right is...
10 Simple SEO Tips It is not hard to be barking up the wrong...
15 Sites That Will Inspire You To Become A Better Web Designer I remember back in the good ol’ days when I...

Posted in Code, How To, Web Design, Web Development | Tags: design, guidelines, tips

17 Comments for "5 Web Design Tips for Beginners"

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

Mahjong Kostenlos — August 8, 2010
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

Anime blog — May 11, 2010
thank you very much 4 cool designes

Reply To This Comment

Psychological impotence — May 11, 2010
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

keveenjames — April 22, 2010
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

Affiliate Marketing Lessons — April 9, 2010
thank you very much 4 cool designes, I’m beginner and they are good help for mee

Reply To This Comment

tamashebi — April 8, 2010
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

Freedom Venture Project — April 8, 2010
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

Colby Jones — April 8, 2010
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

Joseph McCullough — March 14, 2010
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

Ahmad lucky — March 10, 2010
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

Mozie — March 5, 2010
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

Matthew — February 1, 2010
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

Michael Cowell — January 30, 2010
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

Beth Charette — January 26, 2010
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

fishing organizations — January 24, 2010
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

services — January 9, 2010
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/

Sikat Pinoy — January 8, 2010