When you are starting out to design a web page it can be tempting to simply slap ideas on paper or the screen and hope they come together into a coherent whole. But there are five key ingredients to all design projects. Once you understand these design ingredients, you will understand how they go together to create a beautiful design that meets your goals for the site. The five key ingredients are color, shape, texture, space, and flow.
Color is the Best Known Design Ingredient
There are millions of colors. Color is a design ingredient that can seem easy to use, but is really very difficult, because there are so many different ways to use it. Color theory is a way of organizing colors so that they make sense visually and are thus more appealing. The above image is of the RGB (Red-Green-Blue) color model. This is the additive color model that CSS and computer colors are based on. They are colors of light, rather than pigment. When the primary colors are mixed together they create the secondary colors cyan, magenta, and yellow.
Because of the way colors are represented in hexadecimal it is fairly easy to see the additive colors in action.
Hexadecimal colors are written with a pound-sign ( #) followed by three numbers in hexadecimal (base 16).
Red is #ff0000 The first value ( ff) indicates 100% red light, while the second two values ( 00 and 00) indicate zero green and zero blue light.
Green is #00ff00 The first value ( 00) indicates zero red light, the second value ( ff) indicates 100% green light, and the last value ( 00) indicates zero blue light.
Blue is #0000ff The first two values ( 00 and 00) indicate zero red and zero green light, while the third value ( ff) indicates 100% blue light.
When you combine red and green you get yellow, and in Hex colors that is represented as #ffff00 Combine red and blue to get magenta, which is represented as #ff00ff And combine blue and green to get cyan which is #00ffff in hexadecimal color codes.
There are other ways to represent color in web design. You can see a list of CSS color codes in the References section on this site. But to find out what colors go best with one another, you should use an online color palette maker. I have used tools like Paletton and Color Schemer Online, but I really like the Adobe Color CC because it gives you so many ways to find a color scheme.
You can generate a color scheme from a photo, as pictured left. But you can also use the color wheel and color rules to create analogous, monochromatic, triad, complementary, compound, shades, and even custom color schemes. When I’m working on a color scheme, I might take a photo I like and start with that color scheme and then work with it within the color wheel portion to find exactly the combination of colors I want to use. In fact I rarely use the first set of colors that any palette generator suggests, but Adobe’s tool makes it very easy to modify and find the perfect set.
Shape is the Design Ingredient that Defines the Layout
Everything is made up of shapes. On this page, there are the circles that make up the additive color mixing image above, the rectangles and squares of the images and the blocks of text, even the multi-sided shapes the logo makes. Shapes are a defined two-dimensional area that stands out as a separate entity. The easiest way to see the shapes of your design is to step back and squint your eyes a little. Once the text becomes blurry and hard to read, you can better see the shapes that make up the entire page.
This is why many design prototyping tools use shapes to define the layout rather than blocks of text or images. It’s also easy to use pen and paper to draw quick prototypes with shapes. You can block out your layout with the shapes you want to convey and then the text and image content will fill those shapes to fill your design.
But shapes can more more than your layout. The image of the sun at the top of this page is a stylized image using just shapes and colors to create a picture we recognize as the sun. You should also consider shape when you’re looking at your web typography. Consider the shape of the text when it comes to orphans, such as single words or short lines below a wrapped image. In fact, in writing this post, I considered the possibility of an orphan line when I was placing the images. I didn’t want just a few words to dangle below the pictures, as that would be hard to read and would take away from the rest of the page’s design.
Texture is More Than Just Tactile
Most people think texture can only be something that is felt–the rough feel of sandpaper, the silkiness of satin, the soft fur of a baby kitten. But texture in visual design either gives the sense of something that can be touched, like the rough grain on a board of wood, or it creates visual interest that suggests a roughness. The zebras pictured above make a visual texture with their stripes connecting and co-mingling.
In web design texture adds visual interest to the pages. You can add texture as background images behind text blocks or the entire page. One popular texture technique is to add faint pinstripes to the background. This helps the page feel more dynamic than flat color would.
Space or Form Defines the Dimensions of the Design
Space and form are design ingredients that can be difficult to define on web pages. They convey a sense of two- and three-dimensional space to two-dimensional web pages. These are illusions, but these illusions provide depth to a design and give them more visual interest.
While web pages are two dimensional, there are things you can do with the design of your pages to make them appear to have three dimensions. The simplest thing is to overlap elements. Using background images, with text above, immediately suggests depth. When drawing or painting, artists use shading and highlights to suggest three dimensions. A web designer can do it with CSS adding shadows and glowing highlights on elements. But even simple things like the size of an element on the page can convey a sense of space or form. Smaller items appear to be further away, while larger items appear closer. This is especially true when small items are near the top of the design while larger items fill the bottom portion.
Flow Defines a Sense of Movement in a Design
Flow is another design ingredient that can be difficult to see on static web pages. Flow is the sense of motion through a design. It relies on the way people read web pages and how their eyes track the contents. People read web pages in a standard order. If the language they are reading is left to right, like English, they tend to start at the top left corner, track across to the right, then slid diagonally down to about the middle of the screen, and then back right. Right to left language web pages tend to have a similar shape to the eye tracking, just starting at the upper right and tracking left.
A web designer can do things to affect that flow through the page by placing elements that stop the eye and elements that draw the eye on further. Some tricks you can apply to keep people moving through your pages include:
- Look at your photos–where are the people (or animals) looking? People like to look at what other people are looking at, so make sure people in your photos are looking at the content you want your customers to look at.
- Arrows may seem obvious, but they are great for increasing the flow of the design. It is possible to use arrows to point people at exactly what you want your audience to look at.
- Lines block flow. This includes borders around boxes. If you must have borders and lines, and they are an important shape, make sure that they act like arrows and draw the eye to the next part of the design. Follow the line in the direction of your text to see where your audience will end up.
Consider the Design Ingredients Before You Design Your Pages
It’s perfectly acceptable to continue to design your pages however you’re comfortable. But consider the design ingredients you may be using without realizing it. Once you have a sense of the elements of design you can make better choices about what your design needs to be better.