SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Downloaden Sie, um offline zu lesen
Seven Principles of Good Web Design
         Authored by Srijata Bhatnagar
               Dated: 28th March 2013
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;
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
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.
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
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
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
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
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
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;
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
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
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.

Weitere ähnliche Inhalte

Ähnlich wie Web design standard document final

Visual Perception
Visual PerceptionVisual Perception
Visual Perceptionsajid rao
 
Object Oriented Analysis And Design
Object Oriented Analysis And DesignObject Oriented Analysis And Design
Object Oriented Analysis And DesignSahil Mahajan
 
Semantic Search And Applications For The Online Vehicle...
Semantic Search And Applications For The Online Vehicle...Semantic Search And Applications For The Online Vehicle...
Semantic Search And Applications For The Online Vehicle...Jill Lyons
 
Term Paper On Money MyPaperWriter Custom Term Paper Writing Service
Term Paper On Money MyPaperWriter Custom Term Paper Writing ServiceTerm Paper On Money MyPaperWriter Custom Term Paper Writing Service
Term Paper On Money MyPaperWriter Custom Term Paper Writing ServiceLisa Garcia
 
Injustice Is Too Harsh For Particular Offender
Injustice Is Too Harsh For Particular OffenderInjustice Is Too Harsh For Particular Offender
Injustice Is Too Harsh For Particular OffenderMichelle Anderson
 
USABILITY DESIGN OF SOFTWARE APPLICATION
USABILITY DESIGN OF SOFTWARE APPLICATION USABILITY DESIGN OF SOFTWARE APPLICATION
USABILITY DESIGN OF SOFTWARE APPLICATION SrilekhaK12
 
Examples Of Introduction For Essay Writing
Examples Of Introduction For Essay WritingExamples Of Introduction For Essay Writing
Examples Of Introduction For Essay WritingDebbie White
 
5 principles of visual design in ux
5 principles of visual design in ux5 principles of visual design in ux
5 principles of visual design in uxBADELOHITHAKSHA
 
Reaction paper 1
Reaction paper 1Reaction paper 1
Reaction paper 1mjs100
 
The Llinked Data Cloud
The Llinked Data CloudThe Llinked Data Cloud
The Llinked Data CloudAlison Reed
 
Transcript for the presentation
Transcript for the presentationTranscript for the presentation
Transcript for the presentationPulavarthy Dheeraj
 
Action-Based Discretization For AI Search
Action-Based Discretization For AI SearchAction-Based Discretization For AI Search
Action-Based Discretization For AI SearchLindsey Williams
 
Peacock Bird Essay In Marathi
Peacock Bird Essay In MarathiPeacock Bird Essay In Marathi
Peacock Bird Essay In MarathiMichelle Price
 
Summary Of Defending Against The Indefensible Essay
Summary Of Defending Against The Indefensible EssaySummary Of Defending Against The Indefensible Essay
Summary Of Defending Against The Indefensible EssayBrenda Zerr
 
Buy Custom College Papers Buy Custom College Paper
Buy Custom College Papers Buy Custom College PaperBuy Custom College Papers Buy Custom College Paper
Buy Custom College Papers Buy Custom College PaperJessica Howard
 
Floral Stationery Set Purple Floral Statione
Floral Stationery Set Purple Floral StationeFloral Stationery Set Purple Floral Statione
Floral Stationery Set Purple Floral StationeTiffany Love
 

Ähnlich wie Web design standard document final (20)

Visual Perception
Visual PerceptionVisual Perception
Visual Perception
 
visual perception ppt2.pptx
visual perception ppt2.pptxvisual perception ppt2.pptx
visual perception ppt2.pptx
 
Object Oriented Analysis And Design
Object Oriented Analysis And DesignObject Oriented Analysis And Design
Object Oriented Analysis And Design
 
Semantic Search And Applications For The Online Vehicle...
Semantic Search And Applications For The Online Vehicle...Semantic Search And Applications For The Online Vehicle...
Semantic Search And Applications For The Online Vehicle...
 
Term Paper On Money MyPaperWriter Custom Term Paper Writing Service
Term Paper On Money MyPaperWriter Custom Term Paper Writing ServiceTerm Paper On Money MyPaperWriter Custom Term Paper Writing Service
Term Paper On Money MyPaperWriter Custom Term Paper Writing Service
 
Injustice Is Too Harsh For Particular Offender
Injustice Is Too Harsh For Particular OffenderInjustice Is Too Harsh For Particular Offender
Injustice Is Too Harsh For Particular Offender
 
USABILITY DESIGN OF SOFTWARE APPLICATION
USABILITY DESIGN OF SOFTWARE APPLICATION USABILITY DESIGN OF SOFTWARE APPLICATION
USABILITY DESIGN OF SOFTWARE APPLICATION
 
Examples Of Introduction For Essay Writing
Examples Of Introduction For Essay WritingExamples Of Introduction For Essay Writing
Examples Of Introduction For Essay Writing
 
5 principles of visual design in ux
5 principles of visual design in ux5 principles of visual design in ux
5 principles of visual design in ux
 
Reaction paper 1
Reaction paper 1Reaction paper 1
Reaction paper 1
 
The Llinked Data Cloud
The Llinked Data CloudThe Llinked Data Cloud
The Llinked Data Cloud
 
Transcript for the presentation
Transcript for the presentationTranscript for the presentation
Transcript for the presentation
 
Action-Based Discretization For AI Search
Action-Based Discretization For AI SearchAction-Based Discretization For AI Search
Action-Based Discretization For AI Search
 
Object Relation Theory
Object Relation TheoryObject Relation Theory
Object Relation Theory
 
Peacock Bird Essay In Marathi
Peacock Bird Essay In MarathiPeacock Bird Essay In Marathi
Peacock Bird Essay In Marathi
 
Nine Patterns Of Writing An Essay
Nine Patterns Of Writing An EssayNine Patterns Of Writing An Essay
Nine Patterns Of Writing An Essay
 
Summary Of Defending Against The Indefensible Essay
Summary Of Defending Against The Indefensible EssaySummary Of Defending Against The Indefensible Essay
Summary Of Defending Against The Indefensible Essay
 
The Diagram Of The Poverty Cycle
The Diagram Of The Poverty CycleThe Diagram Of The Poverty Cycle
The Diagram Of The Poverty Cycle
 
Buy Custom College Papers Buy Custom College Paper
Buy Custom College Papers Buy Custom College PaperBuy Custom College Papers Buy Custom College Paper
Buy Custom College Papers Buy Custom College Paper
 
Floral Stationery Set Purple Floral Statione
Floral Stationery Set Purple Floral StationeFloral Stationery Set Purple Floral Statione
Floral Stationery Set Purple Floral Statione
 

Kürzlich hochgeladen

Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesCeline George
 
How to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeHow to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeCeline George
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....Riddhi Kevadiya
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...CaraSkikne1
 
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxSlides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxCapitolTechU
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...Dr. Asif Anas
 
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTDR. SNEHA NAIR
 
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...M56BOOKSTORE PRODUCT/SERVICE
 
Protein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxProtein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxvidhisharma994099
 
3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptxmary850239
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptxraviapr7
 
Vani Magazine - Quarterly Magazine of Seshadripuram Educational Trust
Vani Magazine - Quarterly Magazine of Seshadripuram Educational TrustVani Magazine - Quarterly Magazine of Seshadripuram Educational Trust
Vani Magazine - Quarterly Magazine of Seshadripuram Educational TrustSavipriya Raghavendra
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17Celine George
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 

Kürzlich hochgeladen (20)

Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 Sales
 
How to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeHow to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using Code
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...
 
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxSlides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
 
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...
 
Protein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxProtein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptx
 
3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
 
Vani Magazine - Quarterly Magazine of Seshadripuram Educational Trust
Vani Magazine - Quarterly Magazine of Seshadripuram Educational TrustVani Magazine - Quarterly Magazine of Seshadripuram Educational Trust
Vani Magazine - Quarterly Magazine of Seshadripuram Educational Trust
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 

Web design standard document final

  • 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.