eSites Network Website Design


Communication, Mood and Meaning

Lines in Web Design

A line is a basic element that refers to the continuous movement of a point along a surface, such as by a pencil or brush. The edges of shapes and forms also create lines. It is the basic component of a shape drawn on paper. Lines and curves are the basic building blocks of two-dimensional shapes like a house’s plan. Every line has length, thickness, and direction. There are curved, horizontal, vertical, diagonal, zigzag, wavy, parallel, dashed, and dotted lines.

Lines, lines, lines. Lines are everywhere in design, they are used to divide space, direct the user’s eye, create flow, create emphasis and organize all design elements into form. Generally, we don’t think about lines that much, but we make use of them quite often to visually communicate our objective to the user. The web is about communication, so using lines to communicate your message properly is important.

Communication — Line Types

First of all, a line is simply a fluid connection between two or more points. It seems like there is an endless supply of differing types of lines, from thin lines to thick lines, short lines to long lines, wavy lines to straight lines. But just like everything in design — or in life — there are some basic lines that we need to understand.

  • Literal line – A literal line is just that, a line. It’s the visual or actual line you see.
  • Implied line – This type of line is the “imaginary” line that your mind instantly creates by connecting dots or elements together. The best example of this is a dotted line.
  • Psychic line – This type of line is another “imaginary” line that differs slightly from implied line in that psychic lines are generally used to create eye direction form one element to the next. A great example of this in web is a photo of a person looking in a particular direction, or a series of arrows.
  • Contour lines – Contour lines are mainly used to define edges and create boundaries of elements. This type of line is probably the line type mostly used or seen in web design, borders being a classic example.
  • Dividing lines – Dividing lines divide space and are commonly implied lines that are used to divide content areas such as the dividing spaces between columns of text.
  • Decorative lines – This type of line is generally used to add something to an element: texture, depth, shading, function or any other decorative embellishment. The most well know decorative lines in web design is the underline under a text link.

Meaning and Mood

Lines are great for creating mood and meaning. Beyond the foundational line types above, other line types and styles can be used to create meaning and mood. Because there truly are an endless number of line types and combinations within, we’ll just take a look at the few main types.

vertical lines
Vertical lines simulate height and can create a mood of grandeur or spirituality. Great examples of this is the vertical line usage in churches and cathedrals where ceilings are lifted on tall vertical pillars guiding the eyes upward. In web design vertical lines tend to represent or create length and indicate to the user that there is more content below the fold.

horizontal lines
Horizontal lines generally create relaxation or a calming mood, they tend to be quiet and subtle whereas vertical lines are more imposing and powerful. In web design horizontal lines are also known for their ability to organize content. When you look at gridded layouts you’ll notice that horizontal lines are the elements creating balance and organization — even though grids are generally laid vertically.

curvy lines
The majority of curved lines create familiarity and comfort, they also suggest relaxation. Curved lines are very easy on the eyes and are interesting to follow. Curvy lines are associated with nature — they feel very organic.

diagonal lines
Diagonal lines are the greatest way to create movement and direction. Where horizontal lines suggest gravity and are stable, diagonal lines are more unstable. These lines don’t lay down or stand up in a restful position, they are in motion and you can actually create a sense of speed just by simply adjusting the pitch of the lines: the steeper, the faster.

thick lines
Thick lines are visually powerful on the canvas, they represent power and respect. The use of thick lines can build a feeling of power and boldness. However, the overuse of thick lines can be very overwhelming and way too demanding so you’ll need to be careful and balance them off with other visual elements or differing weights of line.

thin lines
Thin lines tend to feel fragile, but their subtle feeling makes them great for directing the eye without being annoying. They are also empathetic to the viewer and tend to create a feeling of comfort and tranquility. Combining thin and thick lines is a great way to create visual interest and hierarchy by balancing the visually demanding thick lines with the subtle, comforting thin lines.

In general, its more about how you manage to add them to the general alignment of the entire website, its less about the lines on their own. One of my favourite ways of creating nice subtle lines which encourage continuity within my designs is by using a nice solid grid system. This gives the design more structure and organisation without having to directly use visible lines, the lines are created by the eye of the user.

Architecture in Web Design

Let’s make a real world comparison: buildings are very much like web sites. So are web designers and developers essentially just architects? When you compare web design with any other major form of art, fine art, print design, music, sculpture, architecture, it almost directly compares itself to architecture. Web design, like architecture, is an art form that has many differing interests. Web sites and buildings have users, clients, companies, products, information, technology, structure and design.

So the question is, can we learn from architecture to make web designs better? Fortunately architecture has been studied for hundreds of years so we have plenty of resources to tap into. One of the great artisans who pioneered engineering and architecture was Marcus Vitruvius Pollio, a Roman engineer, architect and artist. In his book De Architectura he describes three fundamental principles of what great architecture should accomplish:
Firmatis: It should stand up robustly and remain in good condition — be durable.
Utilitas: It should be useful and function well for the people using it — be functional.
Venustatis: It should delight people and raise their spirits — be beautiful.
These three principles can be directly applied to web design as well. Every really good web site should have these same principles: durability, functionality and beauty. In the beginning web design was just one document of information, a basic text document. As the web progressed, CSS allowed web sites to separate the content so that it could be re-skinned without altering the structure of the site. Today, HTML5 semantics is allowing us to finally separate meaning from structure and style so that web sites can be durable and be ready to embrace new technologies as they come.

These principles are fundamental for web design as much as they are to architecture. We’ve all designed, developed or have used sites that do not follow these principles. Without durability a site loses its ability to grow with the times, without good function a site will never be used and without a pleasing design nobody would even stay on a site let alone revisit it. A website is complicated but I like these principles because it makes the task of designing and developing a site easier to digest. They allow you focus on what is important and not get lost in every little detail of a site.

Building for “Firmatis”

Durability is probably the most overlooked aspect of web design. Most of us never consider the life span of a website when we start to design. But durability is important even to web design because web products are starting to live longer. Some web applications and sites will probably live to be older than most of us. Now, I know what you are thinking — it’s really easy to redesign a web site — and that is true, but what if it could be even easier? If you design and develop for durability your next redesign is going to be so much easier if you don’t have to rewrite every file HTML, CSS and JS file in the structure.

Semantics and a progressive approach to web design are required for durability. Creating semantic markup – markup that describes but not specifies – is important because it allows the site to be updated quickly by any designer or developer. Most designers and developers don’t stay on a web project or even the same company for the life span of it, so by using proper semantic markup you can leave behind a good foundation for others to modify or build on without them having to know everything about the code structure.

Progressive enhancement and responsive design also play a huge part in durability. When you keep in mind that people will view the site differently in whatever browser they prefer and that it’s okay for the site’s design to render a little differently, or adjust to that browser, then your site can stand strong for a long time. If you design a site to look best in one particular browser, you not only isolate users, you also hurt its life span. When a new browser comes out that has better user adoption then the one you designed for, you will lose users, or you will have to completely redesign and rewrite for that new browser. Don’t waste time chasing browsers, flexibility in web design builds durability.

Developing “Utilitas”

Aw, usability. Over hundreds of years of building things we have come to understand that you can have the best invention ever, but if you can’t use it, it doesn’t matter. An architect has to make sure that all the doors open the right direction, that all the light switches have to be close enough to doors so people can reach them, that all doorknobs and elevator buttons must be placed so that all user can access them. Same goes for web design — even though some will argue against usability. A successful web site must be functioning and usable: the navigation needs to be clear, buttons need to have hover states, and all elements need to be accessible to all users.

Proper function and usability are probably the hardest things to develop in a website. So much of it depends on preference and the skill level of your users. Standards and conventions solve most usability problems. Just imagine if buildings didn’t have standards and conventions, if a particular architect put power outlets in the ceiling because he/she liked the way it felt or if he/she decided to go super minimalist and not use outlets at all. Standards are proven concepts, they represent years of bad functionality corrected. As designers we need to understand that the first priority of the site is to be functional to the user, to work in a comfortable, familiar fashion so that the user can accomplish their goals.

Create “Venustatis”

Websites should be easy on the eyes, they should appeal to people and people should be drawn to use them. A great web design should be able to spark some kind of thought or emotion simply by the color scheme, unity or composition alone. Design is a powerful tool and when done correctly can accomplish many things that function and durability can’t. Design has the unique ability to fill something in all of us, whether is be print ads or architecture.

Web design is no different than the design of a great building. A well designed and beautiful web site will attract people for no other reason and when they stop to enjoy the design they will be able to discover what is “inside”.