DESIGN AESTHETICS FOR THE WEB

Aesthetics in design and why it’s important?

Aesthetics relates to art and beauty. We experience beauty through all of our senses. What we consider beautiful may vary from one person to another. Beauty is also dependant on historical, contextual and subjective factors. In Web and Graphic Design, visual attractiveness comes down to a few principles and elements that dictate our perceptual systems. It is often said that first impressions are vital, but not only that, they are immediate and unconscious therefore they become universal.

How good design can affect perception and communicate a mood, message or feeling? Well that depends who the target audience is? Certain content will be able to appeal to a certain audience.

People are attracted to beauty in its various forms:

• Glossy surfaces
• Symmetry
• Alignment
• Right colors/font
• Harmony
• Fluidity

We experience design absolutely everywhere, even in nature itself. This is actually where designers take their inspiration from the most. They have a responsibility to create meaningful designs that represent their clients, their clients’ image, products, reputation, services while also attracting people.

Principles and elements of effective Web Design (use images)

Some basic and universal rules are available in order to guide every designer towards their goal. When we design for the Web we have to take into account:

• Color: it helps tremendously with fabricating a mood/ generating a feeling / sparking emotion (insert colour wheel and some colour systems: primary/secondary/tertiary colors/tints/shades/color harmonies/monochromatic colors/complementary colors/split complementary colors/analogous colors/). A colour in itself sends a message, it is unconsciously received by a person with already some preconceived ideas and notions. When thinking about colors, it is important to keep in mind the nature of the product or service you’re trying to promote and also the audience.

• Value: light & dark values, colors & gradation give the illusion of depth, shadows, inner glow, shading. The value of a color is almost as important as the color itself, they set a mood, give the illusion of reflection, add depth, create contrast and more.

• Texture: is the surface quality of an element. It adds depth & consistency to a design and makes it visually more interesting and compelling. It can help emphasize important elements or used as a decorative tool (image of a reflective surface). It is a digitally created illusion to make it look like the object has been enhanced. There are multiple ways of combining texture with other different techniques such as filters, again helping to create a mood same as with color.

• Shape: is defined as any flat area bound by line, outline, value or color. We have the traditional geometrical shapes and the organic shapes that imitate the natural world. Positive (buttons, nav bars => image) & negative shapes (created in btw the space of 2 or more forms) can occupy space or create the illusion of space. It can set the tone of the web graphics, organize elements, define different areas. Within a design, the shape of an element can help bring together a page especially if it has repetitive character. The repetition of shapes can create a feeling of harmony & unity in designs (navigation, thumbnails, buttons, widgets).

• Form: is the overall mass of shapes & how they relate to one another. Form communicates to the overall structure of a page where all the elements fit together in a harmonious way. A web designer has to think of the structure of a design, and to begin they can plan out this structure using black, white and grey shaped sections.  In order to make it more interesting we can add interactive elements such as sliders, 2D and 3D animation type effects. The end result has to be a clean, balanced and well coordinated design that feels complete (grid system). The website’s structure

and construction has to be made with form in mind so that the whole design makes sense.

• Space: or white space, determines the layout organization. It allows the user to distinguish the different kinds of information. Sometimes less is more, and this is especially true in web design.

• Lines: define position / direction / space. The user is intuitively guided by these lines, which makes travelling across the page a lot more efficient. A line can be of any shape or size as long as it accomplishes the functions mentioned above.

• Type: or design fonts, are applied to texts in order to improve readability. The right font can communicate the right message to the target audience (image with the typography diagram). Other attributes should be taken into consideration such as style, color, size, height/weight and leading. The most important part is always text readability, which is why the text type should remain consistent throughout the website.

Using the principles and Elements of Design

Useful basic components that help in the process of creating web design that works!

1. Contrast: is juxtaposition of opposing elements. It can be achieved by using different colors, tones, directions, lines, shapes, texture, patterns and whitespace. The important content is highlighted: the logo, header, nav bar, etc.

1. Emphasis: guiding the viewer’s attention towards the important information. How? Manipulating the text attributes within the HTML code, like style types & spacing.

1. Balance:  the elements are organized in such a way that creates a feeling of balance and harmony. The grid system helps to achieve a balanced layout.

1. Unity: a pleasing arrangement between all the parts within a composition. The relationship between the individual parts and the integral design has to communicate an idea or emotion. Putting effort into creating interactive and responsive hyperlinks that actually look like they accomplish the expected function.

1. Pattern: are to be followed! Patterns of the same nature (size, shapes, decorative elements, color schemes) follow a sense of unity and cohesiveness.

1. Movement: adding a sense of movement brings with it a sense of interactivity for the site visitor.

1. Rhythm and repetition: using a set of repeating elements and playing with border styles.

1. Proportion: elements of design have to be scaled proportionally and accordingly to what the client is trying to communicate.  

1. Simplicity: or visual economy, promotes the idea of showing what is actually essential. It calls for elimination of any other elements that do not participate into conveying the intended meaning behind the design and content.

1. Gradation: adds a subtle sense of movement by gradually shifting from one state to another. Different elements are receptive to gradation that allows the to viewer to change perspectives in an organic way.