Issuu on Google+

all about web design

Apple website analyzed

What can we learn about web design from one of the biggest brands in the world?

Trends for 2011

Get up to speed about the trends for 2011 and don’t stay behind!

issue

1

Interview with

Liz Andrade

An interview with Liz, who runs her own one-woman design studio

Explaining the F layout

One of the most popular layouts


advertorial


whitespace There are a number of elements that make up a great web design, but probably one of the most overlooked and underutilized is whitespace. Every design has whitespace, but the problem is that not every design has enough. This could be due to the fact that inexperienced designers and their clients see whitespace as empty space and therefore a waste of valuable screen real estate. The truth is, whitespace might be one of the most valuable parts of your design. Whitespace is made of nothing, but shouldn’t be treated that way. There are several benefits that a generous dose of whitespace can bring to a design. Simply by increasing the space between elements in a layout, a design can take on a more elegant appearance, and by injecting more whitespace into a web design’s typography, content becomes more legible. In print design, paper is a valuable resource and clients will usually want you to use every square inch of it. After all, it costs them money and they want to get their money’s worth. Similar value is placed on screen real estate in web design. They both have set dimensions and represent limited space in which a message can be presented by displaying text and graphics. This is why being generous with your whitespace will speak volumes about your brand. By using large amounts of it, you’re saying that your content is far more important than the screen real estate that it rests on, and you can afford to sacrifice that space in order to better present your message. Both in print and on the web whitespace is crucial for good design. That was one of the few elements we were known with during the making of this magazine. As most of us are web designers we had to switch to CMYK mode, and that wasn’t as easy as expected. So we were glad that we at least found one element which has the same importance in print as in web! We hope that we succeeded in making a good magazine which will help you as a web designer and stay around for a long time!

Damir Colo executive editor


CONTENT

3

7

11

Web design trends for 2011

Examining the F layHow Apple has influenced webdesign out

2010 has been an incredibly verdant year for web designers. Thanks to new coding techniques we can get more creative with designs. In this article we will dig into what the trends are for 2011

Apple is one of the biggest brands in the world and with that popularity comes great influence. In this article we’ll be discussing Apple’s overall design style and how it has influenced others.

-1-

In this article we will explain the F layout, how it works and what it can do for your designs. This is the first article in our ‘layout’ series. Every month we will explain one layout, and this month it’s the F.


15

19

23

Review: The Smashing Book 2

Interview with Liz Andrade

Why Typography Matters

The popular website Smashing Magazine has released their second book. The first one was good, but not that great. Especially the feel and construction of it were on the downside. Will the second one make it up?

Trained in design, and a selfproclaimed ‘web geek’, Liz Andrade has been working in the design field for several years. We’ll interview Liz to find out more about her studio and we’ll discuss some of her projects.

A basix article for beginners about typography. The difference between typography for ‘offline’ and online media is explained. Also you will learn what’s important for typography on the web.

-2-


EDITORIAL

Web design trends 2011

2010 has been an incredibly verdant year for web designers. Mobile has hit the mainstream; Web typography has reached new levels of sophistication; New coding techniques have vastly improved our ability to get creative with design. All in all, it’s been a year that’s moved fast, even by the standards of the web, so let’s dig in to the state of web design in 2011

Here’s a trend that’s been happening for more than just this last year. Massive images were once taboo for web designers, but thanks to better image optimization, faster internet connections, and smarter loading methods, designers can gain a lot in some sites by pushing image sizes to the max. More than just “big images”, we’re beginning to see more trending towards sites that use vast illustrative (and photographic) backdrops that are as a part of the actual experience as they are simply additional artwork.

Massive Images

-3-


Typographic Explosion I guess you could make the claim that “typography will explode” each and every year… but 2010 has seen a few major changes to the underlying technology that actually make this claim legitimate. Primarily, the huge amount of growth of font-replacement technology over the last year and the mass adoption of “fonts as services” where third party companies host fonts (and licenses) that designers can use in live development environments. More and more designs coming out lately that blur the line between print design and web design.

The software environment seems to have gone completely berserk over the past year or two. All of this excitement over creating applications has trickled into the web design style-lexicon in an interesting way: where once the web looked, well, like a website, nowadays it can often look more like an application. Everything from modal windows, context menus, OS inspired buttons, and more are being brought into the web design environment in new and exciting ways… the end result: sites that feel more user friendly and natural.

Application UI Influence

-4-


More Textures Textures aren’t new, but as each year passes we see it being integrated in new and interesting ways. 2010 saw a lot of the “subtle noise” texture, but more than anything, we’re beginning to enter a style phase where more designs are starting to feel “touchable”. This doesn’t necessarily mean that big, file-heavy textures are being used… instead, we’re seeing more subtle, well designed textures that repeat naturally.

Grid layouts aren’t new to 2010 (or even 1980), but web designers are starting to break away from traditional web layouts (header, content column, sidebar, footer) in favor of more unique, grid driven layouts. What started out with the 960.gs movement has quickly spread to grid systems that can actually adapt to the viewers screen resolution.

Grid Intensive Layout

-5-


advertorial


ANALYSIS

1996

1999

2000

2001

2004

2006

2008

How Apple has influenced web design

Apple is one of the biggest brands in the world and with that popularity comes great influence… Perhaps more than any other company in the world, Apple has played a hugely influential role in the way that products, applications, and websites are designed. In this article, we’ll be discussing Apple’s overall design style and how it has influenced a bunch of others. -7-


Apple’s site has earned a reputation for

Apple’s homepage normally features a

everything onto you at once. Instead,

it’s attractive brand identity and clean

large product shot with single tagline and

they want you to click through to the indi-

layouts. Thanks to this reputation, it has

some other pages linked under the fold.

vidual product page where they can show

influenced a wave of other sites to follow

For example, at the time of writing, Apple

off more information. Take this approach

“ Apple’s site has earned a reputation for its attractive brand identity and clean layouts ” suit. The biggest feature of Apple’s influ-

features a large image of Apple’s second-

in contrast to Microsoft’s homepage.

ential web design is its minimalism.

generation iPad with a large title and sub

Microsoft also has a large featured image

Apple keeps it simple by using large

headline.

but the page is cramped with multiple ads

areas of white space and big margins to

The assumed thinking behind this design

and the highlights at the bottom are even

focus on single areas of content.

choice is the Apple doesn’t want to push

harder to read.

-8-


Organized Information

Interface Influence

There are some areas of Apple’s site that

Apple has pioneered a new age of user

needs to convey a lot of information at

interface design, one that’s clean and

once. It would be derogatory to the

simple to use. The influence of Apple’s UI

usability if it were split up. However, these

translates to a great experience on web

areas still seem very clean and organized

applications that have took the idea of

thanks to it all being confined to a grid.

minimalist, simplistic interface with key

Apple’s current iPod site features a

functions being easily identifiable through

sliding hero image with three smaller

the type of element being used.

ones positioned neatly below. This trio

Whilst the actual UI elements generate

then breaks down into a further six items

their own influence on web applications,

which creates a hierarchical sense. Apple

the clean, minimalist style of the UX can

features it’s most important product at

also be seen as a having an impact on

the top and shows off the lesser products

design. The subtle gradients demonstrat-

below (such as software updates and ac-

ed in the image above make the design

cessories). This pyramid effect is evident

look less than flat and more like an actual

throughout Apple’s site.

interface.

-9-


Product Shots

Icons

As we mentioned previously, Apple uses

As you navigate through Apple’s site,

mainly singular, large photos of its

you’ll notice most of the marketing points

products instead of multiple, smaller

have associated images that give a little

ones. As you visit one of their few product

vision into the otherwise boring marketing

pages, the image takes center stage

dribble. For example, Apple’s Mac OS X

before any pricing, features or availability

site (pictured below) uses a large icon

is mentioned. This particular technique

next to it’s 64-bit OS section. The rest of

plays very nicely into the general theory

Apple’s points each have thier own icon

of visual hierarchy by bringing the product

too. As you get deeper into Apple’s site,

up first and foremost.

the icons start becoming more apparent.

This theory is very simple but very effec-

When Apple try to demonstrate that this

tive in forming a good image of a product

interation of their software is 40% faster,

as a first impression.

they use an image to highlight this. This breaks up the content and adds a little extra colour to Apple’s otherwise plain design.

- 10 -


TUTORIAL

- 11 -


As the first part of our Web Design Layouts series, we’re going to examine the “F Pattern Layout”; Rather than trying to force the viewer’s visual flow, the F-Layout gives in to the natural behaviors of most web surfers and it uses scientific studies to back it up. This article will walk you through the principles of the F-Layout, why it works, and how you can create your own.

This article is the first in a series where we’ll be examining the

Allow me to walk you through the general behavior pattern:

wide variety of layouts that exist in the world of web design.

Visitors start at the top left of the page.

The goal: to better understand why you might choose one

Then they scan the top of the site (navigation, subscrip-

layout concept over another. In this series, we’ll also be look-

tion, search, etc.)

ing at the “Z” shaped layout, the open layout, and some out

of the box layouts that are sure to give you some great ideas.

Next they move down, reading the next full row of content… all the way to the sidebar.

Attaining a better grasp of how different layouts can change

user behavior is one of the central principles of the creating

Last, surfers enter a “scanning pattern” once they hit the bulk of the site content.

Below you can see this pattern in a wireframe.

an effective user experience.

“Attaining a better grasp of how different layouts can change user behavior is one of the central principles of creating an effective user experience” The F-Layout relies upon various eyetracking studies for its

Reading is largely done the same way that a book is read:

foundational concept. These scientific studies show that web

top to bottom, left to right; Sidebar content is often dismissed

surfers read the screen in an “F” pattern – seeing the top, up-

below the “fold”, and usually is only scanned briefly.

per left corner and left sides of the screen most…

A close inspection reveals a visual hierarchy that you might

only occasionally taking glances towards the right side of the

logically expect:

screen. These eyetracking studies argue in favor of placing

the most important elements of your site (branding, naviga-

Within the contest structure, images receive the greatest level of attention.

tion, call to action) on the left side of the design.

- 12 -

Text appears to be scanned, not read thoroughly.


Applying The F-Layout to a Design As an exercise, let’s walk through the creation of a design

Now, let’s overlay the original F-layout to see how we match

using the F-Layout. First, let’s sketch out the rough placement

up.

of our main content elements using a wireframe method.

What happens when you want to break the surfer out of the

Notice that we’re trying to make our primary “mission state-

“scanning pattern” though? You certainly don’t benefit from

ment” as near to the top of the page as possible in an attempt

a bored user if they begin to dull everything out, so let’s add

to

one “awkward” element within the scanning area to keep the

communicate the site’s purpose quickly. We’re also giving in

user interested.

to the visitors desire to “scan” content by breaking our design into two main columns… one for our primary content, the

This technique of “breaking the expectations” of the layout

other for ancillary information (the sidebar).

can be useful when you have really long vertical spans of content that feel dull or boring once you scroll past the first

Next, let’s add some actual content to the design to see how

couple headlines. By throwing the viewer a curveball, you

it looks. It’s rough, but the key ingredients are there. You’ll

can keep the users moving around your site by providing

notice that the main intent of the site is now communicated

visually interesting elements 1000, 2000, even 3000 pixels

within a few seconds… the top row of content is now fulfilling

below the fold. You can still be creative with the lay-out below

it’s duty to

the fold.

“orient” the visitor; If your navigation is here, they also know where they can go.

The F-Layout works because it allows web-surfers to scan content naturally. The layout feels comfortable because

Below the top row, we’re using images and “catchy” headlines

people have been reading top to bottom, left to right for their

to grab a surfer’s attention.

entire lives. The implications of this behavioral pattern are

We’re also trying to capitalize on the second-row of the “F” by

something of a double-edged sword though:

placing an advertisement or “call to action” here.

- 13 -


• •

If you need to say something, you absolutely must say it

gets, catchy headlines, and engaging images are all useful

at the top, because…

tricks, but you’ll likely want to take it a step further.

Users aren’t going to read each and every word on the

Don’t stick too much on a layout, feel free to experiment.

page. In fact, most readers won’t really even bother read-

Once you dip below the top two rows of the “F”, it often be-

ing the excerpt of an article. Anything past a headline is

comes a challenge to a designer to keep things interesting.

probably only going to be there for SEO purposes.

I’ve found that lots of designers sell the top 600px of a site to their clients… this is all fine and well (it is what visitors see

If this all sounds like you’re designing a site more like an

first), but the lessons of the F-layout are that it’s also impor-

advertiser would than a designer, you’d be right. Most sites

tant to keep things interesting as you begin to scroll down.

that rely heavily on the F-Layout also rely on advertising or other “call to action” pitches in the sidebar to drive revenue

Breaking the rhythm of a design by limiting repetitious

or some other sort of user-engagement. This isn’t necessarily

elements is a crucial technique that you’ll want to design into

a bad thing (hey, are those advertisements over there on our

your sites to bring your work to the next level.

sidebar?!), but it does underline the relationship between the content and the sidebar… the content is king, the sidebar is usually there to get you involved in something that will take you to another level. There are drawbacks to relying too heavily on the “F-Pattern” as your design foundation. For one, designs that stick too closely to the F-layout can feel boring and predictable… to combat this, you as a designer will have to bring a certain level of innovation to the table. Well designed sidebar wid-

Vernatenis alitatur, ut haribea rcillis maiore enda volorum as unt, et ab ipsam qui consequi dit, simos sequiatesed ere porporeptas nobitaque quae nesti quam, nosa volor am re sus mi, ommodis sequi videl eat perferitiur? - 14 -


REVIEW

- 15 -


Review:

The Smashing Book

2

So I’ll start this review with some harsh honesty: I really didn’t care for the first Smashing Book. The content may have rocked but from the basic construction of the book to the poorly set typography, the first book just felt like it was a bit off the mark from what the writing team was aiming for. I applauded their efforts at creating a neat little book, but Smashing’s extraordinary efforts on the web just didn’t translate to a printed book very well.

As a designer with a strong print back-

Hallelujah! The second Smashing Book

ground, I’ve always been a huge fan of

easily wipes away the sins of the first.

the book arts (yes, it’s an artform!) – so

There, I said it! From the luscious hard-

finding a book on web design that fell

cover binding to the professional quality

short of the greatness that the content

type setting, this second Smashing Book

warranted was a bit of a let down. There

is going to be one that you’ll actually want

really aren’t a ton of awesome books

to keep off of your book shelf and in your

on web design out there, and the sheer

grubby little web designer hands. Oh, and

physical difficulty of reading the first book

it’s actually chalk full of well written

doomed it to becoming just another in a

lessons on design… so you can thank

long list of books that I keep on my shelf

your lucky stars because you’ve finally

so that I look smart when people visit my

got a book to take with you on vacation

office.

for next to the pool.

- 16 -


The Construction Normally I wouldn’t bother with a sec-

using stitch binding with a nice weight

tion on construction for a book on web

to it. Heck, it even comes with a “hand-

design. Why? For one reason, most

some” bookmark. What really got me ex-

books on web design are pretty ordinary.

cited was when I opened the first couple

Simple typography, paperback glue bind-

pages and the book actually stayed open

ing, pseudo-glossy paper, and a couple

without me prying at it like a 6 year old

images to break up the monotony of the

trying to get to the bottom of the Lucky

text. What warrants this section is two

Charms box.

things: The Smashing Book 1 was poorly con-

It’s amazing what a few small tweaks to

structed. Anyone who bought the book

a book design can change. While the

probably wants some reassurance that

Smashing Book 1 was difficult to read

this second one is the good stuff.

because of it’s type layout edging into the

The Smashing Book 2 nails it. Where so

gutter, the Smashing Book 2 is a breath

many other web design books are just a

of fresh air. The size of the page is a bit

publisher’s excuse to cut down trees, the

larger, the margins are properly set now

SB2 is a one sweet slab of book.

(no more grabbing a crowbar to read the

The book actually rests well in your

text inside the crease), and the typeface

hands. Solid hard cover construction

used just feels more dignified.

- 17 -


The Content Enough about the construction though.

book that does so while addressing web

What you guys care about is whether or

designers as an audience is something

not this book is worth your hard earned

that doesn’t come along nearly often

cash… you’ll need the actual content of

enough. What’s better is that these are

the book to convince you to loosen your

all topics that any designer can’t possibly

purse strings. The content covered isn’t

get enough of. Design (with a capital D)

limited to just web design, although web

as a topic of study is one of those things

designers will get a lot of solid lessons

that the more you read and saturate your

out of this book. The content doesn’t dig

mind in, the better you’ll be able to see

deep into the coding and development

and design the world around you. Like

side of the industry, but what it does

we’ve been preaching here on this site,

cover, it does so thoroughly and with

Design Theory is the foundation of good

plenty of visual examples and illustra-

web design… and this book has got the

tions. The chapter illustrations in the book

chops. The beauty of the lessons in this

are provided by Yiyung Lu, who de-

book is that they are timeless. Whether

signed the (in)famous Twitter fail whale.

you read them here, there, in a book,

Above are just some examples. A book

on a train, or with green eggs and ham,

about reinforcing good design principles

you’ll be able to apply these lessons over

certainly isn’t revolutionary, but having a

and over again.

- 18 -


INTERVIEW

Trained in design, and a self-proclaimed “web geek,” Liz Andrade has been working in the design field for several years. With experience working as the principal web designer at a Seattle boutique-style firm, she took a knowledge and passion for web to her own one-woman design studio, located in Seattle’s Lower Queen Anne neighborhood. Today, we’ll interview Liz to find out more about her studio, CMD+Shift Design. She’ll even walk us through a few of her projects to show us a little bit more about how she approaches different design challenges. Let’s dig in!

Liz Andrade (CMD+Shift Design)

- 19 -


Tell us about your decision

What are the most important

to run your own studio

skills for a web designer to

No matter how much you love your job,

have / develop?

no matter how cool your boss is — you’re

Observation and listening. I feel like the

still executing the vision of someone else.

best work I do is when I am able to take

The way you interact with clients, the way

a step back in the early stages and focus

work is presented, the philosophy and

on listening to the goals of the project

attitude of a small business comes from

and really studying the needs of the cli-

the owner. I had my own ideas of how I

ents community. Jumping too quick into a

wanted to do things, present things, the

solution when you don’t fully understand

philosophies and attitudes… so I had to

the problem is probably one of the #1

start my own thing.

mistakes designer make.

What are your best methods

You design a lot of projects

for finding clients?

on the WordPress. Can you

Most of my clients come to me by referral — and then there is a group that random-

explain what you like about WP?

ly find me through my website. My great-

I really learned WordPress by just jump-

est marketing effort is just to deliver good

ing into it feet first! I’d break things and

service to my clients — when they’re

figure out what I did wrong, I’d pick apart

happy they tend to want to talk about the

other themes and figure out what was

experience with others.

good practice and bad practice. When I started to see how versatile the software really was, I started selling my

Where do you look for inspiration?

clients on it. It’s not JUST for blogs — and while it isn’t the right solution for all projects, it can do a lot of

I get inspired a lot by my clients. My

cool things! I love that is is so

favorite person to work with is someone

easy for my clients to use, it’s

who is really passionate about their

great to give them the power to

business and what they do. When you’re

control their brands message.

around someone like that you just can’t

It’s great that they can do that

help but get excited about it yourself!

and feel totally comfortable.

- 20 -


- 21 -


The Case Study www.undeadlabs.com

How did you approach the start of the project? I totally landed this job by being a nerd. The client called me up after seeing my website and told me about his start up studio. He said “We’re going to be creating a console based MMORPG, which do you know anything about what that is?” ‘Ofcourse I do’, I answered. It was a fast-paced gig, design done within 2 or 3 days and then development of the WordPress site in bout 3 more. It was a lot of long days and communication with Undead Labs. When you’re working on a rushed schedule, there is no room to go off on the wrong path!

Were there any interesting challenges? It was a roller coaster, we did an initial round of design on the first day and then I started day 2 finding out that the branding had been changed — so we almost had to start all over again — but it was worth it, the end result ended up being 100% better!

- 22 -


BASIX

Why Typogra Typography is one of the most important skills that a designer can have… industry veterans spend years honing their technique and you could easily spend years at a university studying the topic; But where is the best place to really start out? This month in our Basix series, we’re introducing typography for beginners by explaining one simple thing: why typography matters so much in web design.

Typography is an ancient discipline that can be most simply

with readers. From larger headlines and bold blocks to small

explained as the art of arranging and designing the written

body, the various uses of text on the web are the core com-

word. The earliest examples of typography go back as far

munication method… so it’s natural that how a web designer

as 1800 B.C. with the ancient Greeks, but the modern era of

decides to arrange type on a web-page is crucial to the ef-

typography is tied to the mid 15th century when the printing

fectiveness of that site.

press was invented. I’ll keep the history lesson short here: typography is important

Using typography for print medium like brochures, flyers,

for one reason: because it is the primary way that designers

magazines, books or outdoor mediums like pole signs and

can communicate with readers… whether the medium be a

billboards is different than using it for the computer screen.

book, a print advertisement, billboard, or a television show,

In terms of typography, the screen is a completely different

typography is important because it the embodiment of the

medium… and as with any type of design, you truly need to

visual language.

consider the medium that people will be viewing your design

Typography is the most important part of a web design

through. When you are using typography in a print design for

because it influences the way that a website communicates

something like a book, the fact that it will be viewed from a

- 23 -


aphy MaTters

relatively close proximity gives you the ability to play with the

divide lots of information into different segments and sub-seg-

fonts quite a bit because it won’t hurt the readability much. If

ments. Also, a web page is not constant as it has to appear

you are using typography for outdoor communication medi-

on different browsers, different Internet access devices and

ums like a billboard or poster, you know that the reader has

with different screen resolutions. So the web typography has

only a fraction of time to view the board and consume what is

to deal with a good number of issues as compared to other

being communicated and so you don’t mess with the fine tun-

mediums. So, while choosing typography for their website, a

ing of the typography much, instead you might focus on the

designer must consider the cross-platform compatibility and

initial impression an readability of the type. However, with a

readability. These are just a few of the concerns that a web

website there are totally different objectives in mind. Design-

designer has to keep in mind when approaching a website.

ing typography for computers and the web requires the

“ Using typography for print mediums like brochures and magazines is different than using it for the computer screen ”

designer to

- 24 -


“ Typography is not rocket science, but it does take a lot of work to discover the best way of doing things ”

When it comes to web design, typography is not limited to

height, and font-size to give it a sense of character;… but the

choosing a font and laying it out; It is the art of dividing up

best web designers can organize type across an entire layout

bundles of information in such a way that the reader will have

in a way that imparts meaning to readers and helps guide

a good chance of finding what is of interest to him… this is

them across an entire website.

where typography on the web becomes more like information

This is what we mean by typography being information

design.

design.

Drawing attention to a certain block of text, helping users find the content they are searching for, or fitting a wide variety of

It’s often helpful to begin the typographic system for a design

content onto a single page is all done through typographic

by breaking it up into two different segments:

skills.

Macro-typography, which comprises of overall text structure

The idea of designing type to be more than just legible, but

of the document

to also be meaningful is part of what confuses a lot of people

Micro-typography, which covers the smaller and much de-

about web typography. Anyone can type out a paragraph of

tailed aspects like the font type, line-height and spacing etc.

text; fewer people can use things like letter-spacing, line-

By approaching the Macro-typography first, it can be easy to

- 25 -


The website ‘thinking with type’ has a clean and clear hierarchy of typography

sketch out the “bigger picture” elements of the type system in

one of these things. A web designer who truly understands

a design. Where will the navigation be? How will type on the

the importance of typography will be able to hit the success

site be laid out? One column? Two? More? All of the over-

factor more often than not… and all it really takes is practice

arching structural rules should be defined first. At this point

to train your mind to see the best possible way to lay out any

you can use just about any typeface that you want… but you

given piece of type! Typography is not rocket science, but

can begin getting a feel for the size and scale of a design.

it does take a lot of work to discover the best way of doing

Once you have the “big picture” outlined, it’s time to approach

things for any given project.

Micro-typography. This is where you’ll begin to really refine your type system by defining the stylistic elements such as

Take some time every day to practice – try taking an article

your primary (and possibly secondary) font-face, how large

that you really like and re-design it; Design your own resume,

big headlines will be, the default size of things like sidebar

portfolio, whatever you can find… just use whatever ideas

titles, paragraph text, link color, etc.

that you can to practice and you’ll find yourself getting better

Web design requires you to master a number of things in or-

in no time! Trust me, as soon as you understand the basics,

der to make a really great layout, and typography is definitely

it’ll become a piece of cake!

- 26 -


Web Typography Tips Clean and Clear Hierarchy

Colors and Typography

The hierarchy of typography is very important in a web

This goes without saying for lots of designers, but the color

design. Think of all of the different places that you use text

of text is another important thing to consider. There are

on a website: the navigation, headlines, paragraphs, image

hundreds of websites which take this point for granted and

captions, sidebars, etc… Chances are good that there’s a lot

use font colors that either:

of text! How are you going to turn all of this into a logical type

Make typography immensely difficult to be read

system? By developing a type hierarchy.

or… are boring! (and boring colors are wasted colors)

A well-developed hierarchy enables you to know where to

You don’t need to go and splash the entire rainbow across

start reading, how to proceed reading further, and the differ-

the page, and you don’t need to use something awful like red

ence between most important and less important information

text on a green background… just use simple, sensible color

on a page. With an effective type hierarchy, you don’t need

theory to pick colors for your fonts that are readable and inter-

to rely in text placement anymore to highlight what you want

esting. Remember, links should be colored in most cases… it

your readers to go through first.

tells people they can click them!

Macro and Micro - Both Matter!

Show Your Typographic Personality

For a successful web design, a web designer should pay

The wonderful thing about web typography is that there are a

attention to both macro and micro typography. Even the best

wide variety of ways to approach it – every designer will have

layouts can fall apart if things are missing on the “micro” side

his or her own style for doing things, and there really isn’t a

of things… and even the best micro-typography won’t be

single “right” way of layout out type on the web.

useful to readers if it’s not laid out using proper macro-typog-

Find out what you like and with what kind of typography you

raphy principles. Both are important!

feel comfortable with, some will like it and some won’t, that

Lots of designers are especially good on one or the other…

will always be the case, don’t let that scare you of. Develop

so take some time to consider what your strongest suit is:

your own personality in typography and let it show.

macro or micro? Then do your best to strengthen your abili-

Type has personality, just like you or the client you’re working

ties (through practice and attention to detail!) in your weaker

for, so don’t be afraid to play around with your own creative

skillset.

variations once you nail the basix of a site design.

- 28 -


advertorial


Edition 1 June 2011 â‚Ź6,95


Pixdot