This document jots down the simple seven principles to create great web designs for websites, apps, logos forms etc. I am sure this will be helpful for anyone who wants to learn about web design and create great websites. You may go ahead and download the stuff for personal use. Would be great if you drop in a couple words as feedback. Would be eager to know what do you think about this.

1. Seven Principles of Good Web Design
Authored by Srijata Bhatnagar
Dated: 28th March 2013

2. 1. Visual Importance
This is one of the most important things to keep in mind for an effective and user friendly Web
Design. A human eye and mind always sees and percieves things based on visual heirarchy.
To understand this better let's do an exercise; Let's rank the these pictures based on their importance
below;
I am sure all of you were able to rank them correctly based on their importance. This only proves
that human mind automatically ranks visuals based on their importance. Therefore while designing
a website it is important to rank content that the user may find most important and what the business
thinks they should promote and bring them both on the top of the website.
Also, hierarchy does not mean images in bigger size, it can be achieved through using different
fonts, colors, buttons etc. Like in the example below Linkedin has used a different Font size and
Button color to show their prominance;

3. 2. Golden Proportion
This is nothing but the Golden ratio of 1.618 that makes each and every thing look asthetically
pleasing to the eye. Golden ratio looks like this;
Photo Coutsey: Wikipedia.org
Researchers have observed that many creations of nature like tree branches, plants, animals has
golden ratio expressed in their arrangement. Like a snail or a sunflower they all follow golden
ratio.
Similarly we see application of Golden ratio in ancient architecture. One of the greatest example of
the same is the Pantheon of Greece;
Photo Coutsey: New World Encyclopedia

4. Golden ratio can be applied in music, painting, book design industrial design and in modern times
even Web Design. One of most prominent example of a website that applies golden ratio priciple is
Twitter
Photo Coutsey: Flickr
• How to apply Golden Ratio to Web Design?
This is quite simple to apply in Web Design. Example: If your website width is 1000
px, divide the same with 1.618 (=618px). So the content area should be 618 px
and the RHS should be 382 px. Same calculation can be done for height as well,
only if the height is fixed and it is long endless.
Additional source of information for using golden ratio;
Golden Ratio calculator that can be used for applying in a website
Apply Golden Ratio to Typography – to use it for text sections
3. Applying Hick's Law in Web Design
This describes the time it takes for a person to make a decision as a result of the possible choices he
or she has. More the choices more time it takes to decide. We always say “Spoilt for choice” this
actually means that the user cannot decide because he has too many choices.
Therefore it is important to eliminate too many choices given to users, for easy use of the website.
And this needs to be done as part of the web design exercise. For a website which caters to various
interest areas, it is impotant to provide better filters for easy and quick decision making.

5. The search functionality of Tripadvisor does the job quite well;
Even before an user chooses to go and perform an action it filters out the different options provided
by the website and allows user to make a decision upfront.
Read more on Hick's Law

6. 4. Applying Gestalt's Physchology for Web Design
This is a theory of mind and brain of the Berlin School. Operational principle of Gestalt Psychology
is that the brain is holistic, parallel, and analog, with self-organizing tendencies. The principle
maintains that the human eyes see objects in their entirety before perceiving their individual parts,
suggesting the whole is greater than the sum of its parts. Gestalt Psychology tries to understand the
laws of our ability to acquire and maintain stable percepts in a noisy world.
This is what it means;
Photo Coutsey: Digital-Design3D
What do you see in the above image? Do you see 3 Pac-man like thing eating on a traingle. But
where is the traingle here? It is an implied triangle.
The main point here is people see things on its totality before seeing the details, therefore it is
important to concentrate on totality before we concentrate on details.
There are 8 laws of grouping to make it easy for any user to access and percieve a website in a right
manner;
4.1. Law of proximity
According to this law people group things that are closer to each other and percieve them as
together.
Photo Coutsey: Wikipedia

7. For example if your Navigation bar and search bar are too close to each other users will percieve
them as one.
Craigslist does a good job of grouping numourus sub categories under each category.
4.2. Law of Similarity
This law states that objects that are similar to each other are grouped and perceived to be together.
Photo Coutsey: Wikipedia

8. A good example of the same is NPASource.com's 'recently added' section. It combines all the
similar boxes together.
4.3. Law of Closure
As per this law users percieve shapes letters, pictures etc. in their totality even when they are not
complete. Which means even if an element is not complete we tend to seek completeness in it.
One of the greatest example of this can be seen in World Wide Fund's famous Logo; even though
the image is not complete we know it is a photo of a Panda. Similarly the logo of IBM follows the
same rule.
Using the law of closure we can make interesting logos and design elements.
4.4. Law of Symetry
The law of symmetry states that the mind perceives objects as being symmetrical and forming
around a center point. It is perceptually pleasing to divide objects into an even number of
symmetrical parts. Therefore, when two symmetrical elements are unconnected the mind
perceptually connects them to form a coherent shape. Similarities between symmetrical objects
increase the likelihood that objects are grouped to form a combined symmetrical object. For

9. example, the figure depicting the law of symmetry shows a configuration of square and curled
brackets. When the image is perceived, we tend to observe three pairs of symmetrical brackets
rather than six individual brackets.
Mind preferes symetrical design over asymetrical ones. Therefore it is important to design web
pages symetrically. Pinterest does a good job of this, even though they have a fluid design.
4.5. Law of Common Fate
We tend to perceive objects as lines which move (or look as if they are moving) along the same
path. We perceive elements of objects to have trends of motion, which indicate the path that the
object is on and group them based on their movement path.
Photo Coutsey: Wikipedia
Using this we can achive beautiful drop down menus like how Puma has done it really well

10. 4.6. Law of Continuity
The law of continuity states that elements of an object tend to be grouped together, and therefore
integrated into perceptual wholes if they are aligned within an object. In cases where there is an
intersection between objects, individuals tend to perceive the two objects as two single
uninterrupted entities.
Photo Coutsey: Wikipedia
This means that people tend to percieve a line continuing based on its established direction. Even
when there is a intersection the stimuli does not change. Look at how Amazon guides users to 'click
inside' a book.
It simply guides the user to click on the book in a very effective manner following the principle of
law of continuity.
4.7. Law of Good Gestalt
This law explains that elements of objects tend to be perceptually grouped together if they form a
pattern that is regular, simple, and orderly. This law implies that as individuals perceive the world,
they eliminate complexity and unfamiliarity so they can observe a reality in its most simplistic
form.
This simply means when a person looks at an object they perceive it to be something that is more
familier to them. Let's do a small exercise around this;

11. Photo Coutsey: 101 Art Avenue
What do you see in the above image at first glance? Do you see a face of a young women or a
bunch of flowers and a butterfly? Both are true, but the perception is different. This particular law
aligns with optical illusion and using optical illusion in benefit of Web Design.
Using this principle interesting logos and other objects can be created. Some of the examples are
given below;
4.8. Law of Past Experience
The law of past experience implies that under some circumstances visual stimuli are categorized
according to past experience. If two objects tend to be observed within close proximity, or small
temporal intervals, the objects are more likely to be perceived together. For example, the English
language contains 26 letters that are grouped to form words using a set of rules. If an individual
reads an English word they have never seen, they use the law of past experience to interpret the
letters "L" and "I" as two letters beside each other, rather than using the law of closure to combine
the letters and interpret the object as an uppercase U.
Similarly if a button, text, links etc are supposed to behave in a particular manner, then changing the
same will be a disaster. In fact that is why most websites keep clickable links underlined in blue

12. text.
Or use Submit as a button text for any member profile related entry into the website's database.
Read more on Gestalt physchology
5. Design for Development
This means when one is designing a website he should keep in mind the way it will function and
use the elements accordingly. Blindly designing without keeping all the scenarios in mind will yield
poor design and a poor functional website.
One needs to answer these questions while working on web design;
Can this be coded tecnologically and will work smoothly?
What will happen if the screen size gets altered, will it still work as expected?
6. Typography
Keeping a close look at how typography is used makes a lot of difference in Web Design
Different fonts depicts difefrent characteristic personality, what does your
website want to do. Does it want to look professional, funky or playful?
Similarly even font sizes matter a lot. Text those are too small and unreadable
will be a put off for users, on the contrary if they are too big they will also not go
well with the users. Therefore making sure to use the optimum size that is
comfortable for users is very important.
Making sure to use text alignment is another important task. Generally middle
aligned or justified texts are not reader friendly. Therefore, it is best to stick to
left aligned text.
Color of the text is also quite important, if your text is a link, it is better to use
blue and/or underlined option. Also making sure to use dark contrast it very
important. The less the contrast, more difficult it is to read.
7. Consistency
It is very important to be consistant in all the aspects of Wen Design, starting from matching the
website layout with logo, choosing the right colors, button styles, spacing, design elements and their
functionality etc. Everything should be worked out in a way to make it holistic.
Consistency results in quality and precisison. If the website looks and works consistently then half
the battle is won. Users would not mind small errors if the website design and functionality is

13. consistent.
The best way to be consistant is to make early decisions and stick to them. When one is working on
a website for a longer time, it is evident that there will be changes to the initial plan. Therefore,
before implementing any new design or functionality it is important to have a look at how the new
design or functionality will effect the existing mechanism.
Conclusion
Bottomline a website should not be designed thinking it is a canvas for a painter. It should be
designed keeping all the objectives in mind, understanding the potential users and their needs, and
last but not the least keeping Web Design principles in mid.
If these can be cracked right, then the website is sure win big.