In design school, I learned fundamental lessons that apply to much more than the “design” part of my job today. A large part of my success founding and running Brolik can be attributed to what I learned there.
That being said, a design degree is by no means necessary if you’d like a fulfilling and successful career. In fact, plenty of designers start out in another field, ranging from those closely related to design, to those that are entirely separate.
Everyone tends to learn something about type hierarchy and the “rules” concerning whitespace, but I’ve noticed several design practices that often seem to fall through the cracks.
Here are five web design tips that most people aren’t always formally taught—and each one is simple, practical, and universal.
Tip #1: Pay attention to horizontal line length
This may come straight from print design, but it’s just as relevant for screens.
If the reader has to move their head to read across a line of text, the line length is too long. Even something as simple as moving their eyes back and forth can result in cognitive strain. Studies show that going from the end of one line to the beginning of the next can be subconsciously energizing, but if that break is too long, it becomes taxing.
To ensure that text is comfortable to read, a good rule of thumb is 50–60 characters (including blank spaces between words) per line, according to Emil Ruder in “Typogaphie.” It’s fine to do more (70 or 75), and it’s fine to do less, just understand and accept the compromises that go along with using lines that are too long or too short.
This very concept is why newspapers use columns. We’d see more columns on the web if CSS had better support for them (which is on the way).
In the meantime, line lengths can be shortened to a comfortable size by centering a single column of text or using text and images side by side. For every column of text, you should at least set a maximum width.
Tip #2: Be flexible with images
As designers, we’re generally used to cropping and sizing images in careful detail. All that has changed with responsive design on the web; we don’t have the luxury of art directing down to the pixel.
As device size and shape changes, the size and proportion of images needs to change, too. This means that very same image on a desktop could be a full-screen background as well as a thin banner image on a mobile phone in landscape view.
Keep in mind that you’re designing for a changing environment. The focal point or subject matter should generally be toward the center of an image, with a healthy “safe area” around the edges to ensure it can be cropped without losing meaning. While not true in every case, horizontal images tend to be more versatile than vertical.
A perfect example of this is Twitter’s profile cover photo. You can read how to create the perfect cover photo, but the point is that the image needs to be flexible.
Tip #3: Limit your fonts
Even after it’s coded, site performance and load times for a website or application can become a big concern for designers. When a project exceeds its performance budget (basically when it takes too long to load), carefully-selected fonts are often first on the chopping block.
However beautiful and thoughtful the design, your developer might have to make some drastic cuts to bring the performance back in line. In other words, entire families of beautifully considered fonts could get replaced with the baseline/default font if the design relies heavily on specific typefaces in multiple weights and sizes.
By designing with this in mind and sticking to one or two universal, “workhorse” fonts like Open Sans (sans-serif) or Lora (serif), designers can better ensure the ultimate success of a project, even if changes are required down the road.