WEB DESIGN PRINCIPLES | GOWEBLIVE.COM
Author - Tim Weber, GoWebLive.com
In web designing, design is more than just using HTML tags on a web page. The principles outlined below will help you create a more useful and effective website.
One of the most basic principles in web designing is balance. It is the distribution of the light and heavy elements on a page. It shows one to layout web pages so that they will work effectively. It is also a visual interpretation of design gravity. Remember that darker and larger objects appear heavier than lighter and smaller objects.
Symmetrical Balance – done by placing elements in an even manner
Asymmetrical Balance – more challenging to design because they don’t have elements that match across the designs centerline
Discordant or off-balance – designs that suggest more action and motion
When people encounter the word contrast, color is the first thing that comes to mind. However, contrast is more than just a difference in color. There can be contrasts in shapes, sizes and even textures. It is an accentuation of element differences in a design. When you apply contrast in a web design, think beyond or more than just colors. Think about how you can attract your readers in terms of contrasting font sizes, shapes, images and text styles.
1. Changing of fonts.
2. Providing links.
3. Using different sizes of images and elements.
4. Using contrasting colors.
The eye is drawn to what is emphasized in a design. Though it is very tempting to give emphasis on everything in your website, as a designer you should determine element hierarchy and apply emphasis accordingly based on the hierarchy.
With emphasis, you make the most important element stand out in your design. To include emphasis or dominance in your design, try doing the following ways:
1. Use semantic mark up that will provide some emphasis even when there are no styles
2. Changing of fonts or images
3. Use of contrasting colors
Rhythm is also called repetition. It allows the design to build an internal consistency which helps the viewers to understand it easily. It is said that the whole design can only be understood once the brain has recognized the pattern in the rhythm. Furthermore, rhythm instills a sense of order in the design because it seldom occurs on its own. Due to this, viewers become attracted and therefore tend to investigate further.
To include rhythm in your web design, you can repeat actual HTML texts, add images several times, use background-repeat property and repeat navigation elements of your design
In design, unity is also termed as proximity. It is the method of keeping same elements together and keeping different elements apart. It provides cohesiveness to designs and is said to pull elements together. It is primarily achieved through layout placement but can also be accomplished with the use of padding and margining of the elements.
Unity can be implemented through adjusting the layout of elements, changing the text spacing and playing with the box properties to influence the padding and margins.
GoWebLive! offers professional web development services for start-ups to medium size businesses. Our stylish websites are search engine friendly and easy to use.
Have a few more questions for us first? Send us a note via the contact form or call us directly to get in touch!
Press "Ctrl + E" or "Cmd + E" in the Designer and enable "Select on-page element".
Search for the class named, "Cloneable Area".
Copy the element inside this container to your own project.
Rename the classes accordingly if they are clashing with your project.
Ensure custom code from the in-page setting has been copied into your project as well (if there's any).
'Page Trigger' interaction can't be copied directly. You can only clone the whole project, or rebuild it.
A simple trick to copy the 'Page Trigger' interaction into another project is as below:
1. Create a dummy element.
2. Apply any type of 'Element trigger' into the dummy element and select the 'Page Trigger' animation.
3. Copy the dummy element with the animations applied into your new project.
4. The animation should have been copied into your project and you can reapply the 'Page Trigger' animation into your project.
If you have further inquiry or need assistance, feel free to contact us.
Lastly, please do not copy this project and claim it as your own. We wish to continue sharing and giving to the community. In order to do so, we will need your cooperation and full support. Thank you very much,