{"id":12026,"date":"2016-02-05T15:06:49","date_gmt":"2016-02-05T23:06:49","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=12026"},"modified":"2020-04-22T06:37:10","modified_gmt":"2020-04-22T13:37:10","slug":"5-web-design-tips-they-dont-formally-teach-you","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/5-web-design-tips-they-dont-formally-teach-you\/","title":{"rendered":"5 Web Design Tips They Don’t Formally Teach You"},"content":{"rendered":"

In design school, I learned fundamental lessons that apply to much more than the \u201cdesign\u201d part of my job today. A large part of my success founding and running <\/span>Brolik<\/span><\/a> can be attributed to what I learned there. <\/span><\/p>\n

That being said, a design degree is by no means necessary if you\u2019d 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.<\/span><\/p>\n

Everyone tends to learn something about type hierarchy and the \u201crules\u201d concerning whitespace, but I\u2019ve noticed several design practices that often seem to fall through the cracks. <\/span><\/p>\n

Here are five web design tips that most people aren\u2019t always formally taught\u2014and each one is simple, practical, and universal.<\/span><\/p>\n

Tip #1: Pay attention to horizontal line length<\/span><\/h2>\n

This may come straight from print design, but it\u2019s just as relevant for screens. <\/span><\/p>\n

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 <\/span>can be subconsciously energizing<\/span><\/a>, but if that break is too long, it becomes taxing.<\/span><\/p>\n

To ensure that text is comfortable to read, a good rule of thumb is 50\u201360 characters (including blank spaces between words) per line, according to <\/span>Emil Ruder in \u201cTypogaphie.\u201d<\/span><\/a> It\u2019s fine to do more (70 or 75), and it\u2019s fine to do less, just understand and accept the compromises that go along with using lines that are too long or too short.<\/span><\/p>\n

\"image01\"<\/p>\n

Credit: <\/span>http:\/\/www.magazinedesigning.com\/columns-pt-2-line-lengths-and-column-width\/<\/span><\/a><\/p>\n

This very concept is why newspapers use columns. We\u2019d see more columns on the web if CSS had better support for them (which is on the way). <\/span><\/p>\n

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.<\/span><\/p>\n

Tip #2: Be flexible with images<\/span><\/h2>\n

As designers, we\u2019re generally used to cropping and sizing images in careful detail. All that has changed with responsive design on the web; we don\u2019t have the luxury of art directing down to the pixel. <\/span><\/p>\n

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.<\/span><\/p>\n

Keep in mind that you\u2019re designing for a changing environment. The focal point or subject matter should generally be toward the center of an image, with a healthy \u201csafe area\u201d 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.<\/span><\/p>\n

\"image00\"<\/p>\n

Credit: https:\/\/headersize.com\/twitter-cover-dimensions\/\u00a0<\/span><\/p>\n

A perfect example of this is Twitter\u2019s profile cover photo. You can <\/span>read how to create the perfect cover photo<\/span><\/a>, but the point is that the image needs to be flexible.<\/span><\/p>\n

Tip #3: Limit your fonts<\/span><\/h2>\n

Even after it\u2019s coded, site performance and load times for a website or application can become a big concern for designers. When a project exceeds its <\/span>performance budget<\/span><\/a> (basically when it takes too long to load), carefully-selected fonts are often first on the chopping block.<\/span><\/p>\n

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. \u00a0<\/span><\/p>\n

By designing with this in mind and sticking to one or two universal, \u201cworkhorse\u201d fonts like <\/span>Open Sans<\/span><\/a> (sans-serif) or <\/span>Lora<\/span><\/a> (serif), designers can better ensure the ultimate success of a project, even if changes are required down the road.<\/span><\/p>\n<\/section>

Grab design ebooks created by best designers<\/h3>

All for free<\/p>