Blog Post #2

A web designer needs to find balance between text and images for a harmonious web page.

Typography is, without a doubt, the most important part of a webpage’s design.  Along with images and graphics, it directly communicates with the audience with varying uses and treatments of text from big, bold webpage titles, to itty-bitty body text.

One of the biggest faux pas a web designer can make is focusing only on images and the graphical aspects on a webpage and, in most cases, leaving typography as the “third wheel” in the design.  A web designer needs to find balance between text and images for a harmonious web page.

Say you have a website in which the designer puts typography in the back burner. You probably wouldn’t notice the text. Where do you go? How do I navigate? Is that even a link? It would be similar to trying to interpret an obscure painting by some 16th century European artist. It’s going to take some time to get hold of what you’re trying to find.

So, when you have effective typography, the information is clear. The information is instant. Convenient for your audience.

Print vs. Web

Print medium and an electronic medium are far different from each other. The designer needs to consider how the audience is viewing the design.

(Fig. 1)

(Fig. 2)

Take the above examples. The top image(Fig. 1) is a screen capture of the website for the musical artist, Goldfrapp, and the bottom image (Fig. 2) is a poster promoting one of their shows. When a designer creates, he knows that first impressions are crucial. Kind of like a first date. The poster has very little time to capture the viewer’s attention and pull them in. The poster (Fig. 2), I feel, just reeled in fields of suitors. Because it’s a poster, it’s not always neccesary to fine-tune every little detail, just as long as it captures attention and is straightforward with its information.

The typography on websites serve a different purpose. Seen in the website screen cap (Fig. 1), information is divided into sections and subsections, as a means to keep all of the info organized for the viewer. This means fine-tuning is essensial for being nice eye-candy for your audience. Also, designers must keep in mind that there are diverse numbers of Internet browsers with different screen resolutions. It has to deal with a hefty number of issues, compared to other mediums, like platform compatibility and readability.

Source: http://webdesign.tutsplus.com/articles/typography-articles/web-design-basix-why-typography-matters/

A list of important things to take into account when designing a website:

  • Read the text. Simple. Just proofread. Make sure there are no extra spaces or misspelled words. Text should be attractive enough to read.
  • Apply a clear hierarchy. A developed hierarchy will help the viewer know where to start reading and how to continue.
  • Consider macro and micro typography. Is it readable as a whole? Is it readable as you view the details like the spacing?
  • Pay attention to type colors. Use colors that are pleasing and readable. A bad color scheme can cause headaches!
  • Your CSS. Maintain a level of consistency. “If you have solid CSS, you can move flawlessly in your website.”
  • Use the right font size. Too-big or too-small fonts causes eye straining! Be sure fonts are comfortable reading sizes.
  • Spacing. Too many spaces or too little spaces will interrupt the flow of the viewer’s reading.
  • Line-height. Allow enough space between each line, making sure they’re not overlapping with one another.
  • Alignment of text. Most people read from left to right. Text should be flushed to the left.
  • Identifying links. Links are usually in a different color or underlined.
  • Use safe fonts. A safe font can be read regardless of what internet browser you’re using. You want your text so that it can be read by anyone online.

Source: http://naldzgraphics.net/design-2/typography-web-design/

As said before, designers need to keep in mind that there are many Internet browsers and they need to  deal with a number of issues like platform compatibility and readability. Using @font-face, a useful feature in CSS3, helps identify fonts that are not already on the viewer’s computer. This tool will allow the browser to download the font from a remote site or a local folder. The font will be installed and then rendered in the way the designer intended.

Source: http://www.css3.info/font-face-fonts-the-way-you-want-them/

Examples

What impressed me most about this website was definitely the typography. If I counted correctly, there is a total of three different fonts used throughout the website. Supposedly, using more than 2-3 fonts is hard to pull off, but through careful consideration and decision-making it turned out to be a very successful and attractive design. Though there is a great amount of information within a page, the designer gave generous amounts of space for the content, and made use of hierarchy so it can flow down the page without causing headache for the reader.

This website and its content complement each other so well, it’s like a happy marriage. The hand-rendered look of the type suggests the playfulness and light-heartedness of the images and the style of the designer’s work. What is also interesting, is that the contents of the page change its appearance when expanding or contracting the size of the window.

About these ads

3 thoughts on “Blog Post #2

  1. Wow I love the layout of the Francesca Nini website. I looked it up and it’s awesome how different it is from traditional sites. The site is very easy to navigate through with no distraction keeping you from going to the next page. Fun site!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s