Layout and Composition - The core of website development
First is to do discovery. The discovery of the design process is about meeting the clients and learning what they do. This is used to gather information about the client’s business. Before meeting with the client, it is best to do some research on their business such as the field they are in, the industry they are working for, are they a well-known company and so on. This is needed to have an appropriate and effective design. For the discovery stage, meeting with clients are essential and it is better to have a face -to-face meeting to clear any misconceptions and clarify anything that is not clear.
The next stage is to do exploration. This is where you take the information you’ve obtained from the client and do analysis and experimentations. This is the best moment to gain a gasp on all the information, products, and services they offer and play around on how the information should be arranged. A good approach is to put yourself in the shoes of being a customer or a web visitor and ask yourself what these people are looking for. Example would be you are trying to buy a product from the website, but before purchasing what would you like to find out first, what service is needed and what are the steps to do so? This is also known as information architecture or IA, it is about organizing the content and flow of the website into a structure we can design around. The tools needed to do this is not much but a whiteboard or sticky notes. The steps are to make a list of all the bits and pieces of the website and start arranging them into groups / subgroups or categories.
This is not implementing on the computer yet but designing it on paper after getting the flow of the website down. Sketch out not only one but a few possible layouts. After that, decide which layout to use and open them in photoshop to experiment on the foreground and background colors.
Defining Good Design
To define a good design, communication is important. For example, if you create a website that works and presents information well, but is not pleasing to the client’s brand, no people would want to use it. Or vice versa if the website is nice but the information is hard to access. Therefore, the website design should work as a single cohesive unit, so that:
- Users are pleased by the design but drawn to the content
This means that the design should not be a hindrance but as a conduit (a channel) between the user and information provided. An example website would be Nick La’s Web Designer Wall as Nick’s rich, colorful illustrations flow around the structure of the page, which is embellished with navigation and site elements that look as if they were cut from a sketchbook.
Figure 1: Web Designer Wall
- Users can move about easily via intuitive navigation
The navigation block should be able to help users to recognize and navigate around your website easily. A simple trick is to able hovering features when mouse over with cursor and highlight the section that the user is in.
- Users recognize each page as belonging to the site
A site is like a book, user recognize a book by its design and contents. Thus, with a repetition of color palette such as our website with orange, white and yellow to help unify the pages. This will create the identity of our website.
Web Page Anatomy
Let’s look how a web page anatomy on a website is divided into at the picture below:
Figure 2: Web page Anatomy
Every web page has a container. In a web developer point of view, it can be considered as the <body> tag or <div> tag. Without it, there is no place for us to display the contents we want to put on our website. One thing to note is that a container can be a fluid where it will expand to fill the width of the browser window or so to say it will fix to the same size no matter what size the window is.
This is known as the identity block where it will increase brand recognition when you place your company’s logo or name there. It acts like a business card for your website.
Navigation is one of the crucial elements that a website must have. Without it, users will get lost and hard to navigate around and causes displeasure to people. Navigation system must be easy to find and use and should appear at the top of the website.
People are quick at getting what they want from websites. If information is not found on your website, they will leave in a matter of seconds and therefore we say that content is “KING” for a website. It’s important to keep the main content block as the focal point of a design, so that visitors will scan the page for the information they are looking for.
Footer usually is located at the bottom of the page and the contents of a footer are copyright, contact details, links to some sections in the website and legal information.
Whitespace (negative space)
Empty area which is an area without type or illustration are what we call “Whitespace”. For novice web designers (and most clients) feel that every inch of a web paged need to be feel with details such as photo or information but this may backfire as it will cause the page to be crowded or feel closed it. Whitespace helps a design to breath by guiding the user’s eye around a page while creating a sense of balance and unity.
Grid is used to give proportions of each elements on the page to be square and line up. There is a golden ratio which is using the length and divide it by 1. 6180339.. or commonly known as phi (1.62) as shown in the image below. The reason this is the golden ratio is because this will give us logical guidelines for producing appealing layouts for our website and is commonly used back in the Renaissance when designing their paintings, sculpture, and brochures. This “golden ratio” can be simplified into The Rule of Thirds where a line bisected by the golden ratio is divided into two sections, one of which is twice the size of the other. For a simpler explanation, try to follow me in this exercise:
- Draw a rectangle
- Divide into thirds horizontally and vertically
- Draw a line between each vertical line ( 6 columns will be created )
A grid layout is presented before you and the large, original rectangle represented the container that is discussed above. With this, we draw the layout of our website and can be seen as below with four different layouts:
Figure 3: Grid Theory
Besides The Rule of Thirds, a new tool for laying out website components is developed by Nathan Smith and it’s called 960 grid system where it consist of three layouts:
- 12 columns
- 16 columns
- 24 columns
The same concept apply from The Rule of Thirds but this time we divided them into more columns and the 12 columns framework can be seen by an open source tool called “Bootstrap”. To learn more about bootstrap click here.
Balance is divided into two categories which are symmetrical balance and asymmetrical balance. Let’s look into each of the type of balance starting with symmetrical balance.
Also known as formal balance, is said to be achieved when the elements of a composition are the same on both side which are divided by an axis line. Example would be the picture below where even the shadings of the background are mirror image of one another.
Figure 4: Image of Symmertrical Balance
Type of symmetry we can apply:
- Horizontal symmetry
- Bilateral symmetry (A composition is balanced on more than one axis)
- Radial symmetry (Elements are equally spaced around a central point)
Also known as informal balance is where you manipulate objects in terms of sizes, shape, tone and placement to equalize the weight of a page. This is also another form of balance where it is more visually interesting if compare to symmetrical balance. An example would be a poster by Jeremy Darty as shown below:
Figure 5: Image of Asymmetrical Balance
According to design theory, unity is all about the ways in which the different elements in your design interacting with one another where a design that is said to be unified is when each of the elements present are looked as a while rather than separate pieces. Thus, to achieve unity in a layout, we can achieve it by using proximity and repetition.
- Proximity is where you play objects close together in a layout to create a focal point in order to attract the attention of your users towards your design. A clear example can be seen below where the word “Unkgnome” acts as a separator between two paragraphs and the word “Gnomenclature” indicates that the paragraph below it belongs to that word and are linked to one another.
Figure 6: Proximity
- Repetition can come in many ways such as colors, shapes, textures, or similar object to ensure that the design of your website is united. Here is an example of patterns and textures use to show unity by Odopod. The design has many eye-catching elements, but the repeated uses of thumbnail images with the “Featured” banners creates a unified feeling.
Emphasis in the concept of dominance where you want to draw user’s attention towards it to deliver a message or even the next step to proceed in what they are doing. The method use to achieve this is to transform that element into a focal point where it will draw’s the user’s eye, rather than just blending with the design. To achieve a focal point, there are a few techniques to do so:
- Placement of the element in the design is very important and usually the point at which users look first is typically the most ideal location to produce emphasis. For instance, the top-left corner of the page of websites tends to be where users usually pay attention first.
- Continuance or flow implements a concept that when our eyes moves along in one direction, they tend to continue that path until a more dominant feature comes along. To express this, we use an arrow as seen in the image below.
Figure 7: Flow
What did you focus on? The small red patch at the end, am I right? Therefore, web designers use continuance as a common method to unify a layout.
- Isolation promotes emphasis where it stands out from the rest of the design and draw all the attention of the users.
- Contrast is the state of strikingly different from something else this is the most common method to create emphasis in your design by using different color, size and shape.
- Proportion is a principle of design that has to do with differences in the scale of objects. Once can do so by creating an object that is small in real life and enlarging it to fit it into a small environment. We can see an example below with a monkey being enlarged:
Figure 8: Proportion
No matter how much you look at it first, the monkey is always at the center of your attention until you force yourself to look away.
- Left-column navigation
This is the most common layout used by most people, in where the navigation is focus on the left and at the top of it , they will include a header for it.
Figure 9: Left column
- Right-column navigation
This is used when your sites has a lot of content to be shown, the right-side navigation can divide the information into further levels for the users to choose from.
Figure 10: Right column
- Three-column navigation
This layout is normally used when you have short bits of content to show or advertising to display in which the manipulation of whitespace is needed to prevent the layout from appearing cluttered.
Figure 11: Three-column
Resizing: Fixed, Fluid, or Responsive Layouts
Fixed width is like the name suggest where the pixels of the container or “div” element is fixed. A fixed-layout is easier to design and maintain because they are the exact of what you drawn in photoshop. While a fluid or liquid layout is design with percentage-based width where the container stretches when the browser is resize. Fluid width takes more planning, as you have to foresee the problems that would occur when the sizes changes. Below are the pros and cons of each layout:
- Designer has more control on how the layout will look like
- Whitespace an be planned ahead
- Narrow text blocks can improve the readability of your website
- Due to fixed size, it can appear very small in large browser windows
- User has no control over the size of the contents
- Adapts to most screen resolutions
- Reduces scrolling
- Text may be hard to read when it is spanning a wide distance
- Harder to execute
- Limited whitespace to use
Solution to the problems for those cons of fixed and fluid width will be a responsive layout where the layout will change according to the size of the screen. You can check more about how it works using bootstrap which talks about using a 12 column. Below is the example of the responsive layout in different browser width:
Figure 12: Responsive deisgn on all different sizes
Now you know all about the layout and composition of the website, is time to start designing and develop your own layouts.
Source: The Principles of Beautiful Web Design 2nd Edition, by Jason Beaird
Thumbnail: Designed by starline / Freepik