Web design standard document final

1,673 views
1,557 views

Published on

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.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,673
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web design standard document final

  1. 1. Seven Principles of Good Web Design Authored by Srijata Bhatnagar Dated: 28th March 2013
  2. 2. 1. Visual ImportanceThis is one of the most important things to keep in mind for an effective and user friendly WebDesign. A human eye and mind always sees and percieves things based on visual heirarchy.To understand this better lets do an exercise; Lets rank the these pictures based on their importancebelow;I am sure all of you were able to rank them correctly based on their importance. This only provesthat human mind automatically ranks visuals based on their importance. Therefore while designinga website it is important to rank content that the user may find most important and what the businessthinks 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 differentfonts, colors, buttons etc. Like in the example below Linkedin has used a different Font size andButton color to show their prominance;
  3. 3. 2. Golden ProportionThis is nothing but the Golden ratio of 1.618 that makes each and every thing look astheticallypleasing to the eye. Golden ratio looks like this; Photo Coutsey: Wikipedia.orgResearchers have observed that many creations of nature like tree branches, plants, animals hasgolden ratio expressed in their arrangement. Like a snail or a sunflower they all follow goldenratio.Similarly we see application of Golden ratio in ancient architecture. One of the greatest example ofthe same is the Pantheon of Greece; Photo Coutsey: New World Encyclopedia
  4. 4. Golden ratio can be applied in music, painting, book design industrial design and in modern timeseven Web Design. One of most prominent example of a website that applies golden ratio priciple isTwitter 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 sections3. Applying Hicks Law in Web DesignThis describes the time it takes for a person to make a decision as a result of the possible choices heor she has. More the choices more time it takes to decide. We always say “Spoilt for choice” thisactually 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 variousinterest areas, it is impotant to provide better filters for easy and quick decision making.
  5. 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 providedby the website and allows user to make a decision upfront.Read more on Hicks Law
  6. 6. 4. Applying Gestalts Physchology for Web DesignThis is a theory of mind and brain of the Berlin School. Operational principle of Gestalt Psychologyis that the brain is holistic, parallel, and analog, with self-organizing tendencies. The principlemaintains 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 thelaws of our ability to acquire and maintain stable percepts in a noisy world.This is what it means; Photo Coutsey: Digital-Design3DWhat do you see in the above image? Do you see 3 Pac-man like thing eating on a traingle. Butwhere 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 isimportant 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 rightmanner;4.1. Law of proximityAccording to this law people group things that are closer to each other and percieve them astogether. Photo Coutsey: Wikipedia
  7. 7. For example if your Navigation bar and search bar are too close to each other users will percievethem as one.Craigslist does a good job of grouping numourus sub categories under each category.4.2. Law of SimilarityThis law states that objects that are similar to each other are grouped and perceived to be together. Photo Coutsey: Wikipedia
  8. 8. A good example of the same is NPASource.coms recently added section. It combines all thesimilar boxes together.4.3. Law of ClosureAs per this law users percieve shapes letters, pictures etc. in their totality even when they are notcomplete. 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 Funds famous Logo; even thoughthe image is not complete we know it is a photo of a Panda. Similarly the logo of IBM follows thesame rule.Using the law of closure we can make interesting logos and design elements.4.4. Law of SymetryThe law of symmetry states that the mind perceives objects as being symmetrical and formingaround a center point. It is perceptually pleasing to divide objects into an even number ofsymmetrical parts. Therefore, when two symmetrical elements are unconnected the mindperceptually connects them to form a coherent shape. Similarities between symmetrical objectsincrease the likelihood that objects are grouped to form a combined symmetrical object. For
  9. 9. example, the figure depicting the law of symmetry shows a configuration of square and curledbrackets. When the image is perceived, we tend to observe three pairs of symmetrical bracketsrather than six individual brackets.Mind preferes symetrical design over asymetrical ones. Therefore it is important to design webpages symetrically. Pinterest does a good job of this, even though they have a fluid design.4.5. Law of Common FateWe tend to perceive objects as lines which move (or look as if they are moving) along the samepath. We perceive elements of objects to have trends of motion, which indicate the path that theobject is on and group them based on their movement path. Photo Coutsey: WikipediaUsing this we can achive beautiful drop down menus like how Puma has done it really well
  10. 10. 4.6. Law of ContinuityThe law of continuity states that elements of an object tend to be grouped together, and thereforeintegrated into perceptual wholes if they are aligned within an object. In cases where there is anintersection between objects, individuals tend to perceive the two objects as two singleuninterrupted entities. Photo Coutsey: WikipediaThis means that people tend to percieve a line continuing based on its established direction. Evenwhen there is a intersection the stimuli does not change. Look at how Amazon guides users to clickinside a book.It simply guides the user to click on the book in a very effective manner following the principle oflaw of continuity.4.7. Law of Good GestaltThis law explains that elements of objects tend to be perceptually grouped together if they form apattern 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 simplisticform.This simply means when a person looks at an object they perceive it to be something that is morefamilier to them. Lets do a small exercise around this;
  11. 11. Photo Coutsey: 101 Art AvenueWhat do you see in the above image at first glance? Do you see a face of a young women or abunch of flowers and a butterfly? Both are true, but the perception is different. This particular lawaligns 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 aregiven below;4.8. Law of Past ExperienceThe law of past experience implies that under some circumstances visual stimuli are categorizedaccording to past experience. If two objects tend to be observed within close proximity, or smalltemporal intervals, the objects are more likely to be perceived together. For example, the Englishlanguage contains 26 letters that are grouped to form words using a set of rules. If an individualreads an English word they have never seen, they use the law of past experience to interpret theletters "L" and "I" as two letters beside each other, rather than using the law of closure to combinethe 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 thesame will be a disaster. In fact that is why most websites keep clickable links underlined in blue
  12. 12. text.Or use Submit as a button text for any member profile related entry into the websites database.Read more on Gestalt physchology5. Design for DevelopmentThis means when one is designing a website he should keep in mind the way it will function anduse the elements accordingly. Blindly designing without keeping all the scenarios in mind will yieldpoor 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. TypographyKeeping 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. ConsistencyIt is very important to be consistant in all the aspects of Wen Design, starting from matching thewebsite layout with logo, choosing the right colors, button styles, spacing, design elements and theirfunctionality 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 halfthe battle is won. Users would not mind small errors if the website design and functionality is
  13. 13. consistent.The best way to be consistant is to make early decisions and stick to them. When one is working ona 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 newdesign or functionality will effect the existing mechanism.ConclusionBottomline a website should not be designed thinking it is a canvas for a painter. It should bedesigned keeping all the objectives in mind, understanding the potential users and their needs, andlast but not the least keeping Web Design principles in mid.If these can be cracked right, then the website is sure win big.

×