Web Design Principles

Low contrast fonts

Low contrast means a darker font on a dark background or a lighter font on a light background. The readability is impacted by such choices and it could also lead to eye strain. Usually you will want your website content to be easy to read. Nearly 9% of Americans are visually impaired.

Background images

There are a number of potential problems to avoid when choosing background images in contemporary web design. Since layouts shift responsively from phone screens to tablets and desktop browsers, the background imagery must work in a variety of layouts. Low contrast imagery can make it easier to overlay text in a legible way. Resolution is also critical because large image files may load slowly on mobile devices.


Small fonts

Eyes over 40, and under 40 for many people, have difficulty reading fonts that are smallish -- what would be called "10 point" in the print world. On screens, the size of fonts are based on pixel density. ("Retina" screens are high resolution, typical desktop monitors are lower resolution.) Each browser has a default body text font size ("baseline font size") that takes into account the resolution of the display. The size of this body text font is 1em. 2em is headline big, 0.7em is practically unreadable for the majority of the public. Take care not to assume that because your 20-something eyes may be able to read small fonts that others will be able to see them clearly.

Color

Color is often the most obvious thing about a design. Color is also capable of creating strong reactions among people, who consciously and subconsciously apply certain meanings or emotions to different colors (this is also influenced by culture, as many colors mean different things in different cultures). Color theory is an important aspect of design, and something designers should know how colors work together to create a mood or feel in a design. Sites like paletton.com and color.adobe.com can help to establish good color choices.

Too Many Fonts

This can make your designs look slapped together. As a general rule, pick a font for the main body text, and another for titles, and stick with them. With practice you may wish to branch out a bit more, but unless you really want to draw attention to the variety of type faces, it is advisable to be conservative. Using a variety of weights within a single font family can provide variety without distraction.

Value

Value describes the lightness or darkness of design elements. This relates directly to the mood a design projects. Darker values convey a different feeling than lighter ones. With very colorful compositions, you might not really be able to tell how high or low the value is. One trick is to convert the design to grayscale, to get a better sense of how light or dark it is. You can also look at the Photoshop histogram of an image to get an idea of where the value is more heavily concentrated.

Line length: too l o n g

Usability studies indicate that 50 to 60 characters per line are best, with up to 75 characters being acceptable. Long lines of text can be intimidating to read online. If the line length is too long, some people will not begin reading because it doesn't feel like a very good reading experience.

Poor Spelling and Grammar!

This reflects badly on the designer, institutions, and writers connected to a website. Copying and pasting a text into text editor and using a spell checker is a good start. There are also words like "they're" and "their" that require more subtle editing. Taking time to assure that the content of your site good grammar and spelling is a basic matter of quality control that many people will notice.

Call to Action Usage 📣

Internet marketers know that you need a good accent color to draw attention to design elements you want people to focus on. Thes are called "calls to action." If you're asking someone to "Buy Now" or "Start a Free Trial" you want to make sure you use a bright button color and contrast that will draw people's attention so they'll click and take the action you want them to take. The accent color should be complementary with the other colors on your website so that it doesn't clash, but don't choose a color that's already used on the site for something else.

Consistency

Use similar styles for things that have similar function. Unless you are consciously intending to force people to think about your interface design, you want them to be able to quickly understand the purpose of various user interface elements. Changing the shape or colors of "back buttons," for example, is an annoying way of forcing users to adapt to your lazy designs. As with many principles of design, such a rule can be broken, but don't break it without a reason. For example, you may wish to have a call to action button with a different quality, while other buttons have a secondary style. This is okay because it reflects your desire to drive people's attention to the call to action.