Continuing with website workflow tips, we are going to start with choosing your colour theme. During the process of choosing a set of typefaces, you should start exploring what colours you will use in the interface, backgrounds and text.
We will cover the points listed below however, If you have missed Part 1, you can back track here – Website Concepts & Workflow Tips
- Choosing your Colour Theme
- Layout Concepts
- Elements Position
- Placing Content and Secondary Content
- Choosing Grid System
- Whitespace
- Balance
- Think in Motion – Interactive Experiences
Choosing your Colour Theme
When creating a site, choosing the optimum colours is one of the most difficult tasks that arise in spite of the apparent easiness. Choosing the perfect chromatic palette is important in order to effectively communicate the message, in order to strengthen the idea of a unique entity and to create brand awareness.
Researchers agree that colours greatly influence the human state of mind. The colour scheme that you use on your web site can entice the visitor to engage in the goal of your site (i.e. make a purchase or request your services) or leave it after the first few seconds. Even if they are not aware of it, your visitors will be greatly influenced in their decision to keep browsing your site or to leave it because of the poor selection of colours and other visual displayed elements.
Below is some common colours and their most common meanings. You can read more about our colour theory here – Choosing Right Colour For Your Website
- Red: energy, passion, excitement, power; also implies aggression, danger.
- Blue: coolness, spirituality, freedom, patience, loyalty, peace, trustworthiness; can also imply sadness, depression.
- Yellow: light, optimism, happiness, brightness, joy.
- Green: life, naturalness, restfulness, health, wealth, prosperity; in certain contexts, can imply decay, toxicity.
- Orange: friendliness, warmth, approachability, energy, playfulness, courage.
- Violet: wisdom, sophistication, celebration.
- White: purity, cleanliness, youth, freshness, peace.
- Black: power, elegance, secrecy, mystery.
- Gray: security, maturity, reliability.
- Pink: romance a feminine color.
- Brown: comfort, strength, stability, credibility.
Layout Concepts
What is Web Page Layout?
Layout is the arrangement of different elements of a webpage to make the page more engaging. Different elements of a webpage are logo, navigation menu, body, sidebar, footer, images etc. We would suggest to keep the layout simplified.
The simpler the structure of the site, the easier it is for users to navigate. Each section needs to tell a story; it needs a reason and a final outcome for the user. The layout should help the content to highlight what are the most important pieces in that story.
In reality there shouldn’t be too many calls to action on a page – everything should drive to that final ‘What can I do here?’
Think about the most simple layout you can imagine for a simple purpose, and start adding components and elements that are necessary. In the end you’ll be surprised how hard is to keep it simple.
Elements Position
Primary elements of a webpage are logo, navigation menu, body, secondary content and footer. These primary elements can contain secondary elements inside them. Body of the page can contain other elements depending on what kind(home page, blog post, about page, contact page etc) of page it is. Similarly a navigation bar can contain social sharing buttons, search box, menu items etc.
Logo
Website logo can be image or text. Users usually look at the top-left corner of the website when they visit therefore place it on top-left corner.
Navigation Menu
Navigation menus are usually placed below the logo called as vertical navbar or places on right side of logo called as horizontal navbar.
Placing Content and Secondary Content
Page Content
The content of the page can be placed below the navbar or on the right side of navbar. Depending on your layout. See two examples below.
Secondary Content
Secondary content usually are not directly related to the primary content of the page. They usually remain constant throughout all the pages of the website.
You can place secondary content on the side of body or else below the body. When putting it on side of primary content make sure 70-80% of the width is occupied by the primary content.
Footer
Footer is placed at the end of the page.
You have more complex position for these elements on the page. For example you can have a over layered navbar that covers the whole page which can be hidden and viewed. The positions I showed are most used ones and I would prefer to use these same positions in my websites because users are familiar with these things and if you make complex designs then it will be difficult for users to find things on your website.
Now we created the sketch of our design and we know the position of elements. Now let’s see how to put our design on a webpage using grid system.
Choosing Grid System
A grid system is a way of providing a system that designers can work with to structure, position and present content in a much more readable, manageable way. Obviously we can design a website without grid system but grid system makes it easy to position the content and also helps us the create whitespace and balance.
One more good thing about grid systems is that they allow you to design in proportions, balancing between all of the different elements that you might have in your design.
A grid is made up of vertical lines. Vertical lines are also called columns and they contain gutter(spaces) between them. Vertical lines are used to position elements in the page. More grid systems contain 12 columns in them.
Grid systems can be fixed or fluid(or responsive). Fixed grid systems are used in fixed width websites. Whereas fluid grids are used in responsive websites. When using fluid grids on smaller screens the columns occupy full width of the device screen and changing the browser width grows or shrinks the column widths. These features of fluid grid make the website responsive.
Let’s plot our sketched design on a grid.
Whitespaces
Whitespace is space between the elements of the webpage. It increases readability and helps users to differentiates elements. whitespace doesn’t need to of white color its just some space. Whitespace is the horizontal and vertical space.
You must have whitespace between the primary elements(navbar, content, sidebar etc) of the webpage. And also elements inside the primary elements must have white space.
In the below grid layout you can see whitespace(or gutter) between the primary elements.
Balance
When we divide a webpage or a section (a part of page with 100% width of page and some height) of a webpage vertically we get two pages. Balance is how much difference these two parts will have when compared one with another on the basics of size, color, grid position and whitespace.
If they both form mirror image(difference is less) then its called symmetric balance otherwise asymmetric.
Symmetric is beautiful, formal, cohesion, professionalism but sometimes static and boring. Asymmetric is dynamic, uniqueness and interesting but sometimes informal.
Different sections of your webpage can be symmetric or asymmetric i.e., both can be used together in you design.
Check out the example below.
Think in Motion
Motion is essential when designing interactive experiences. No design can be judged on its own or as a static comp any more. Every component is defined by its relationship with the system, and that relationship needs motion to be conveyed properly.
Motion can illustrate dynamic effects on content or interactive states within your layout. For that second purpose we recommend taking your designs a bit further into prototyping.
Prototyping is the best way to test interactions and technology. There are lots of prototyping tools that make it easy nowadays, and you don’t need to be a coding guru to create effective prototypes. This is yet another way you can get your client excited and on board with concepts and ideas that would otherwise need a lot of explanation.
Conclusion
We have covered some important Workflow tips that will help you design websites to look professional and awesome. If you missed the first part of this post, you can follow the first steps here – Website Concepts & Workflow Tips
Thank you for reading.
