Making Your Website User Friendly – One Line At A Time

Line

A line is a series of adjoining dots. Just like points, lines are also abstract. Line can be considered as a two-dimensional shape in which one dimension is larger than the other. When one dimension dominates, it appears to be a line.

Some of its characteristics are:

i) Just like the fundamental characteristic of a dot is attracting attention, the underlying characteristic of a line is to connect or unite. This connection can be visible or invisible. Confused? Let me explain this to you by giving an example.

When we place two dots on a page, they seem to have a connection and we tend to subconsciously imagine a line between them regardless of it being present or not.

ii) Lines are dynamic and they lead somewhere. Another defining characteristic of a line is movement and direction. This characteristic helps the designer to control the eye movement through composition. User’s eyes seek the endpoints of a line even if the endpoints are located outside the layout.

If the endpoints are located outside the layout, the sense of movement in the line is increased. When one endpoint is located inside, the direction is no longer infinite and it becomes specific to that point. Hence, the tension between these two endpoints increases.

iii) Lines can separate as well as connect content. When a line is perpendicular to an invisible line, it may emphasize the separation of objects. The line may act as a barrier.

Lines are not limited to only being straight. They can be angled or curved. A line travels in a curve-like structure around a fixed point; eventually connecting the starting and ending point, thus forming a circle. A circle is nothing but a line that thickens to fill the negative space.

Relationship between Lines

When two lines join, an angle is created between them. The joint or the meeting point of the two lines becomes a starting point to move in either of the directions along the 2 different lines. Multiple joints lead to a perception of altered direction, just like a zig zag pattern.

When the angle between the line is acute (less than 90 degrees) the movement is perceived as quick and rapid. In contrast, when the angle between the lines is obtuse in nature (greater than 90 degrees and less than 180 degrees), the movement is perceived as gradual.

The convergence of two lines increases the effect on its direction. The eyes cannot resist following converging lines to the point at which they converge. These lines give perspective and add depth to the layout

Separating lines focus on attention, identity of each line and the interval between them. Rhythm is created by varying the interval or varying the size of the line. A designer can also create depth by varying the thickness or weight of the line or by changing the interval between them. Lines with less proximity have more tension and draw the user’s attention easily. Lines further apart carry less tension and blend into the background.

Lines with weight when placed together create a thin space between them. This could create a figure/ground relationship where that space is perceived as a figure and the thick lines as ground.

Why to use lines in Website Designing?

Lines are the building blocks of a design that communicate emotion and information. A designer can use them to:

i) Organize website elements and content by dividing sections of a page or layout. A designer can group the sections that are similar to each other and vice versa.

ii) Make a statement by utilizing different sizes and textures. A designer could also use thick or dashed lines to draw the user’s attention towards coupons and discounts.

iii) Guide the eyes and provide movement by using wavy lines or varying thickness.

Types of Lines

Horizontal Lines

The term ‘horizontal’ gets its name from being parallel to the horizon and is associated with the earth-bound products and ideas. Horizontal lines are subtle and generally create relaxation or a calming mood. They cannot fall over and are indicative of stability and security.

In web designing, horizontal lines are known for their ability to organize content. When you observe grids or gridded layouts, horizontal lines balance and organize the elements.

Vertical Lines

Vertical lines are perpendicular to horizontal lines. They appear to be more rigid because of their standing-up-like appearance.

Vertical lines accentuate height, create a mood of grandeur or spirituality, and are implicative of stability. A great example of vertical lines usage is in the churches and cathedrals where there are long vertical pillars perpendicular to the ceiling that guide the eyes upwards.

In website designing, vertical lines can act as borders, stop and guide eye movement, draw the user’s attention and differentiate between important and unimportant parts of the website. They also tend to create a perception of length and indicate the user that there is more content to unfold.

Diagonal Lines

Diagonal lines are unbalanced and help to create movement and direction. These lines, unlike vertical and horizontal lines, are unstable and do not lay down or stand in a restful position. They are in motion and create a sense of tension and excitement simply by adjusting the angle of the lines – the steeper, the faster.

In website designing, diagonal backgrounds and slanting lines give an off-centre appearance to the design. It gives a skewed like appearance that draws the user’s eyes across the whole composition. It also creates natural breaks in the webpage content and gives a gridless appearance to the layout.

Curved Lines

Curved lines create a feeling of familiarity and comfort and suggest relaxation. They are sensual, elegant and turn gradually between endpoints.

The user’s eyes follow a curved line at a slower and more relaxed pace than any other type of line. They express fluidity and flexibility depending on the activity of the curve.

Using lines in Website Designing

A designer may use lines in the design when they want to leverage the fundamental characteristics like movement, connection, and separation. These characteristics help to organize the information and elements by becoming a structural glue that holds the design together. The borders around an element or an object help to separate them from other elements and groups.

A designer can utilize lines when they want to draw the user’s attention towards a specific information or button. This can be done by employing movement and leading the user to identify what lies at the endpoint.

Conclusively, a designer can :

• Use lines when they want to define space in some way
• Use lines to connect two or more elements on webpage
• Use a line to distinguish and provide a barrier between elements or content.
• Use lines to direct the user’s eyes through the design
• Use lines to lead to a focal point.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]