Design is the very first thing people will notice when coming to your page and will instantly give them an impression whether your company is legitimate or not. Web users are said to form first impressions of web pages in as little as 50 milliseconds (1/20th of a second). Most site visitors are not able to articulate why they like something or not, it’s just more of a "feeling". There is a lot that goes into this.
Since around 2005 to current, the "Web 2.0 look" ruled the internet when it came to fresh, professional looking and new upstart websites. There are a lot of web designers who now have come to somewhat despise this look because of it’s over-use and consequently you’re beginning to see more diversity among newer sites. Earmarks of a Web 2.0 site design are typically the following…
- Vibrant, high contrast colors
- Simple Navigation
- Solid areas of screen-real estate
- “Special Offer” badges
- Gloss / Sheen
- Beveled edges
- Diagonal lines
- Soft-focus effects
- Reflected Logos
Because of the Web 2.0 look, some designers are beginning to strive for something different, you’re beginning to notice more texture introduced into website designs. Texture is used to describe either the way a three-dimensional image actually feels when touched, or the visual "feel" of a two-dimensional work. Texture creates the illusions of these qualities of surfaces such as specific fabrics, rocks and stone, wood-grain, paper and more through use of lines, colors, and shapes. Textures are a great way to give a special touch to a website. Texture can be used in a specific part of a design or it can be used in the whole page, such as the background. Textures can versatile, beautiful and stylish if used correctly or if used incorrectly can over-power, distract and ultimately ruin a design.
Use of Color
Non professional designers generally do not understand why color is so important. They tend to pick colors half-haphazardly and without much thought. Color theory is very significant when it comes to designing web pages. If your company already has a brand color, what are it’s complementary colors? What are warm colors and what are cool colors and when and why should they be used for effect? Color is particularly prominent as it provides the first impression to the user. In the early days of the web, it was considered best practice to use what were known as "Web-Safe Colors". This was a limited pallet of only 256 colors. The reason for this was because of the limited color range of a vast number of monitors at the time. These days, the sky is pretty much the limit. We can now use just about any color imaginable. Knowing how to make the best use of all of those colors however, takes skill and know-how for optimal effect.
Defined, contrast is the difference between two or more elements. Contrast accentuates the differences between elements in the design.
Contrast is very important, especially when targeting an aging demographic. As we’re all far to familiar with, as we get older, our eyes just aren’t as sharp as they once where. Not understanding sufficient contrast can make things nearly impossible for users with degrading vision. So, while a lot of great looking design use very subtle contrast, it’s important that it’s not so subtle that you make things difficult and neglect this demographic.
Using contrast, a designer can create a visual flow to the page, leading the users eye along the trajectories they want the user to follow. Without contrast, all of the elements on a website would effectively look the same, there would be no way for the user to know where they should be looking without the sense of hierarchy that contrast can imply.
Many people think of contrast only as it applies to colors, but contrast can work with any design element. A few key ones are…
- Contrast in Color
- Contrast in Darkness and Lightness
- Contrast in Size
- Contrast in Alignment
- Contrast in Contour
Contrast in Web design can be implemented in many ways. When applying contrast to Web designs, many designers consider only the colors, which can easily be overdone and simply be painful to look at. By using more subtle differences, you can use different font sizes, font-weight, font-families layout shapes, use different sizes of images and page elements, or use different shades of darkness and lightness. Contrast can be achieved without blasting your sites users with a loud overbearing color scheme, flashing elements or moving items.
Website designs are made of many different elements, each having varying levels of importance and some demanding prominence over others. Some elements share a relationship and need to reflect so, while others are not related at all and should appear not to. Understanding contrast is the key in being able to communicate this visually and effectively in subtle ways.
Composition is the term used for the arrangements of the elements in or the subject matter of a painting. A successful composition draws in the viewer and pulls their eye across the whole painting so that everything is taken in and finally settles on the main subject of the painting.
In the notes of painter, Henri Matisse defined composition this way: "Composition is the art of arranging in a decorative manner the diverse elements at the painter’s command to express his feelings."
composition is the placement or arrangement of visual elements or ingredients in a work of art, as distinct from the subject of a work. It can also be thought of as the organization of the elements of art according to the principles of art.
The term composition means "putting together". In the visual arts, composition is often used interchangeably with various terms such as design, form, visual ordering, or formal structure, depending on the context. In graphic design and desktop publishing, composition is commonly referred to as page layout.
There are numerous approaches or "compositional techniques" to achieving a sense of unity within an artwork, depending on the goals of the designer. For example, a work of art is said to be aesthetically pleasing to the eye if the elements within the work are arranged in a balanced compositional way.
Conventional composition can be achieved by utilizing a number of techniques:
- Rule of thirds
- Rule of odds
- Rule of space
- Limiting focus
- Geometry and symmetry
- A Center of interest or focus
- Making use of Tangents
One of the most overlooked aspects of web design is negative space. This is the space between pieces of content on a page. It’s natural to want to stuff every little piece of screen real estate with something, but this actually begins having diminishing returns. Pieces of different content begin to run together into a visual blob making it difficult for the users eye to know where to land on the page and what to read, so they end up not reading anything and usually go elsewhere.
Shape pertains to the use of areas in two dimensional space that can be defined by edges, setting one flat specific space apart from another. Shapes can be geometric (e.g.: square, circle, triangle, hexagon, etc.) or organic (such as the shape of a puddle, blob, leaf, boomerang, etc.) in nature. Shapes are defined by other elements of art: Space, Line, Texture, Value, Color, Form.
Lines are most easily defined as a mark that spans a distance between two points, taking any form along the way. As an art element, lines pertain to the use of various marks, outlines and implied lines in artwork and design, most often used to define shape in two-dimensional work. Implied line is the path that the viewer’s eye takes as it follows shapes, colors, and form along a path, but may not be continuous or physically connected.