Everyone appreciates good design. It's the reason we are drawn to great works of art, such as Michelangelo's David or Picasso's Starry Night. It's the reason our eyes are captivated by beautiful machines, such as the 1959 Corvette Stingray Concept Car. And it's the reason Apple's products have captured the public's attention and dominated its competitors' products for over a decade.
I can't tell you how to do any of that. I learned everything I know about design from a textbook I checked out from the library, and my meagre portfolio contains a very small number of amateurish websites and documents. However, I do think that my limited experience has helped me come a long way. I want to share what I've learned with you because I believe the world is a better place with more designers in it, and because I think you'll be impressed with how much better your work can be with a few basic design tips.
In this post I'll cover 5 tips and show you how to use them to design and style a web page. But, before we move on, we need to consider two important questions:
What is design? Design is the method by which an object fulfills its function. For example, this web page is an object. Its function is to communicate information to users. Its design - the way in which it communicates information- consists of everything from the code that runs the backend to the layout and colors of the text on the page.
What is good design? Good design is effective use of an object's medium. A medium is the material or materials an object is made of. This web page's medium is its server, your browser, and my writing. I like to think it exhibits good design - its backend code is clean and fast, and the information on the page is, hopefully, laid out and written in a way that makes it easy to understand.
That's it! Let's move on to those tips.
5 tips for Designing a Web Page
Consider the embedded page below. It's not well designed - it's hard to read and it isn't easy to look at. We're going to take a few steps to improve it.
1. Use whitespace
Whitespace is the easiest tool to use. You can use it to separate the elements of a page, which helps clarify the structure of the information you're presenting.
For example, it's now much more clear that the short strip of text at the top of the page is the title.
2. Use proportions
Proportions - the ratios of the sizes of the elements on your page - are a fantastic tool. You can use them to balance the elements of a page, highlight important information, and more clearly separate information. You should ensure that the size and spacing of your elements have some sort of proportional relationship.
What do I mean by a proportional relationship? Just that the size of one or more elements on your page has some sort of scalar relationship to the size of one or more separate elements. For example, the page title's text size is now 3 times the text size of the main content. The spacing between the bottom of the page title and the first paragraph is also about 3 times as great as the distance between the first paragraph and the second paragraph. The text content is now constrained to be 5/6 the width of the entire page.
Playing around with the proportions on the elements of a page can make the page much easier to read and much more aesthetically pleasing. For reference - the most common proportions used in web design are 1/3, 1/4, 1/6, 1/8, and 1/12.
3. Use an appropriate font
Fonts are an easy way to improve a page's design. Broadly speaking, there are two types of fonts: Serif fonts (those with accented strokes, such as Times New Roman) and Sans-Serif fonts (those without accented strokes, such as Helvetica). Serif fonts were designed specifically for printed information, and so they're best used on paper. Sans-serif fonts are usually easier to read on screens and are typically best for web design. If serif fonts are used on a web page, it's usually for short text such as titles and section headers.
You can vary the weight and size of fonts to separate information as well. For example - bold text usually indicates importance.
In the example below I've used two different fonts - Aleo for the page title, and Lato for the main content. I've used a serif font for the page title to further differentiate the page title from the main content.
4. Use like or complementary colors and contrast them
Colors provide yet another way to separate or highlight information. The effective use of color is also a hugely complex topic - there is much debate on which types of colors you should use for the various types of websites. Because of that, I won't give you any tips on what colors to use in your work. However, I will tell you that when deciding on what colors to use on your site, make sure that they are like or complimentary.
What do I mean by like or complimentary? Well, it turns out that colors can have scalar relationships as well - web colors are determined using the rgb scale - a 3 channel scale in which the Red, Green, and Blue channels can each range from 0 to 255. As a result, you can consider a single color to be a point in a 3 dimensional coordinate system. When selecting a set of colors for a site, you generally want to select colors (points) that are separated by proportional amounts of distance. Like colors are colors whose RGB values share similar proportions (for example - rgb(30,30,30) is like rgb(120,120,120) - both are shades of gray). Complementary colors are colors that are relatively far from one another in one or more dimensions (for example - orange, rgb(255,116,0) is complementary to teal, rgb(0,153,153)).
Thankfully there are tools that can perform distance calculations for you and give you sets of colors you can choose from. My personal favorite is Paletton.
5. Content is king
Finally, the most important design aspect of a web page is its content. The actual information you're presenting is vastly more important than the way in which you present it. Consider the example below: it's much more visually appealing than our original example. However, the information doesn't actually tell you anything about Design. Since the function of the page is to communicate a basic description of design to the reader, the page below is pretty terrible.
Conclusion
That's all! I hope the tips above help you improve your work. If not, then I've designed this post poorly.
