Users have different screen sizes, so many designers and developers define a live area, of a specific pixel with and depth, that will fit readily on a small screen. It was once hard to set up a website that will resize to fit a smaller or larger screen. Although nowadays, media queries let you design different layouts for different media types like screen, print, TV, handheld devices etc. Depending on the media type, you can configure the style, the font and other elements of the page.
Once you know the sizes of the page or screen and your primary text, figure out how the elements fit the page. If you are working with text only, you can fit your text into the allotted number of pages. If you also need to include images, headings, boxes, or charts, first determine the amount of required space for text — the remainder of the amount of space left for the artwork, tables, and so on. Often, you will need to calculate numbers for all elements simultaneously.
Hierarchy
Will your website have headings? Subheadings? Lists Bullets? Make the essential information larger or bolder or set it another typeface to distinguish it from the less-important text. Varying font, as well as text size and weight, can also help set apart different types of material, but keep it simple. If each style doesn’t have a clear purpose, many different styles can be confusing.
Although size matters, space mattes just as much. The location of a head and the amount of space surrounding it can also convey importance. To make a lot of different or varied material easy to parse, break it into segments for easy reading. Pull quotes are the visual equivalents of sound bites. Use sidebars and boxes to break information into chunks that can be quickly skim. Typography can help a user immediately understand the content.
Colour is a way to make sections stand out. Colour defines space as well to help organize elements within an area. Colour also enlivens a page or provides a psychological signal for the kind of message that’s being conveyed. When setting your colours, consider the material in a more understanding way. Too many colours can cause a piece to be busy or hard to navigate.
Golden Ratio
Designers often work by eye and instinct to determine the best-looking proportions. This is how I usually work when it comes to design. Others work in the realm of space and methods by using proportions and ratios. The golden ratio has been predominately used in art and architecture for over a thousand years. The golden ratio has been called the golden section as well, which describes the ratio of elements such as height and width.
The golden ratio can be used as a guide to determine the placement of content. Our eye is naturally drawn to the centre of the spiral, which is where it will look for details. Focus your design on the center of the spiral and place the visual concept within the spiral.
The ratio is approximately 1.618. In other words, the smaller segment (for example the width) is to the larger segment (the height) as the more significant segment is to the sum of both segments. So a designer could have a measure that is 220 pixels wide with a height of 360 pixels.
You can read more about Golden Ratio from a scientific standpoint by Live Science.
Vertical Rules
In such cases, a vertical rule can function as a dividing line between columns. This vertical rule keeps chunks of different information, sometimes with varying attributes of the type such as bold, upper case, italics, and so forth in their respective columns. Horizontal rules can separate information within columns by diving running text from boxed material, or by dividing the overall text area from the running feet and folios using another horizontal rule. Caution: Too many rules can dull a page or be busy.
White Space
When designing multiple columns, it’s not necessary to fill absolutely every inch of space. It’s good to leave specific columns open. White space directs the reader’s eye around the page, making it easy to pick and choose specific stories, images, or logos. Rules of varying weights help control and give punch to the information.
Colour Palette
Although many colours can create a visual buzz, an overabundance of colours can also overwhelm the overall message. Determining a controlled palette can provide coherence. When the function of intensity is to grab attention, it makes sense to use bright colours. When colours are used to serve more pressing text such as in an annual/financial report, the colour palette can be more muted to serve the content better.
Watch a quick video on colour basics (just a shade over 3 minutes).
Colour Coded
Coding information by colour can help viewers quickly find the information they need. A scan of a colour key, in conjunction with icons, quickly communicates far information than words or colours alone. Depending on the client or material, the colours can be muted or bright. Saturated colours—colours with less grey, immediately command less attention.
Alignment
Be consistent with aligning your mages, text, lists, forms, buttons (use a grid if you need). If your website isn’t aligned properly, it may appear clutter, unprofessional and poor design.
Contrast
One item is different from another item. Use colour, size, shape text for different hierarchy.
Repetition
A consistent look & feel of the design such as colour as a corporate brand can be used throughout the website. Another example is the business annual report. If the company’s annual report primary colours are blue and orange, the website should incorporate these as the primary colours on the website too.