Archive for the ‘Design’ Category

Typography and Design

Monday, June 16th, 2014

One of the most overlooked aspects of website design – and of graphic design in general – is typography.  Typography is simply the art of arranging type in a way that achieves a desired visual effect and that conveys the meaning of the reading material.

For a good primer on typography, check out this blog entry on Typography 101.

But is typography really that important?  I’d argue strongly that it is the biggest component in a website design, for nearly all types of websites.  The obvious exceptions are sites for photographers, models, illustrators, etc.  In those visually-oriented sites, images don’t just make sense, they are essential.  The key to using images on a website is not to scatter pretty pictures around just because you think it needs them or because it’s the trend, but to make sure the images make sense for the purpose of the website.

Understanding the basic components of good typography makes it possible to use text as a design element, one that can be every bit as effective as an image.  It can be huge, simple, colorful, or crazy.  But make sure that whatever you’re using doesn’t obscure the content. After all, if I can’t read it or make sense out of it, it’s not very effective.

Three sites that make effective use of typography:

typography2

When you’re a copywriting firm, using only text makes perfect sense. Especially when it’s as eye-catching as this.

typography1

Just two simple images, and even one of them features typography, show case the words beautifully.

typography3

Words take front and center on this site. Even mixing several different fonts (in general, a no-no), adds to the whole effect, and focuses your attention on the individual pieces.

Typography can make or break your website.  It can take your site from good to great… or to confusing.  Choose carefully!

 

A bit of color-ful psychology

Thursday, May 15th, 2014

I found I could say things with color and shapes that I couldn’t say any other way – things I had no words for.  ~ Georgia O’Keeffe

Why do some places irritate you?  Relax you?  Energize you?  Chances are color in these spaces is playing a part.

Warm colors – such as red, yellow and orange – can spark a variety of emotions ranging from comfort and warmth to hostility and anger.  Red – love, warmth, comfort, excitement, intensity. Orange – enthusiasm, warmth, creativity, youth.  Yellow – cheery, warm, optimism, but it also the most fatiguing to the eye.  Brown – strength, reliability, natural, stability.

Cool colors – such as green, blue and purple – often spark feelings of calmness as well as sadness.  Green – nature, tranquility, health, good luck, jealousy. Blue – calm, serenity, wisdom, truth. Purple – royalty, wisdom, wealth, spirituality, exotic.

And don’t forget the “Are-they-really-colors” of white (space, cleanliness and adds highlights), black (sophistication, authority, strength but also death or evil) and gray (neutral, practical, timeless, serious). (more…)

Website Fonts

Thursday, April 26th, 2012

Fonts add style and personality to a website.  They make headlines stand out and they affect the readability of a site.  Back in the dark ages of the internet, good web designs were limited to using web-safe fonts — fonts that are routinely installed on all major operating systems. Websites generally use either Serif or Sans-serif fonts. Serif fonts have small strokes or lines that extend from the ends of letters and symbols. Serif fonts have been used for centuries in printed materials — books, newspapers, magazines. Sans-serif fonts are simple and straightforward, and lack the “lines” of the serif fonts (“sans” is French for “without”). Because the simplicity of sans-serif fonts makes them easier to read on computers, most websites use sans-serif fonts for the body.

In the Serif family, the web-safe fonts are Georgia and Times New Roman. For Sans-serif, the web-safe fonts are Arial, Arial Black, Impact, Trebuchet MS, and Verdana. A good list of web-safe fonts and what they look like can be found at www.upsdell.com.

Why limit your web site to web-safe fonts? Because if you use a font that isn’t installed on the user’s computer, then the user won’t see that font. Instead, the user’s browser will replace it with a similar font that is on his/her computer. So for consistency, web designers used and recommended web-safe fonts. After all, if only 5% of the users can see the beautiful font, why bother?

With CSS2 came the ability to embed fonts. Unlike web-safe fonts, this method actually downloads and displays the font the designer used, whether or not it is installed on your computer. One main issue with this method, however, is that anyone can easily embed a commercial font they have on their computer, without a license. This can cause legal problems fast. Ethical web designers steered clear of using fonts unless they were sure there were no licensing issues (either the fonts were royalty free, or the client had purchased a license).

All that changed when Google stepped into the arena with a new service. Google Web Font provides hundreds of quality fonts (last time I checked about 291) that can be used in any web page by anyone. Cloud-based fonts are now becoming standard. This method is compatible with all major browsers (Chrome, Firefox, Safari, Opera, and even the bane of all designers, Internet Explorer (6+). Best of all, the fonts will display reliably on the vast majority of mobile operating systems (Android, iPhone, iPad, iPod). So head over to Google Fonts and browse away!