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