S shawacademy

Graphic LESSON 7
Design DESIGN FOR SCREEN & WEB

summarynotes
The Diploma in Graphic Design Toolkit For further questions visit us online at:
www.shawacademy.com
S Lesson 7

S
shawacademy
 S Lesson 7

WE BEGIN WITH THE

“ WHAT IS” OF GR APHIC
1.01 What Is Web Design 2
DE SIGN AND HOW
GR APHIC DE SIGN IS ALL
ABOUT VISUALLY COM-
1.02 Usability & User Experience 4
MUNIC ATING AN IDE A ,
THOUGHT, ME SSAGE OR
ME ANING BY COMBINING
1.03 “F” Pattern Design/Layout 6
SYMBOL S, IM AGE S AND/
OR WORDS. WE AL SO
GIVE AN OVERVIE W OF
1.04 Colour for Web Design 8
THE “HOLY TRINIT Y ”
OF GR APHIC DE SIGN
APPLIC ATIONS -
1.05 Texture, Repetition & Space 12
ADOBE PHOTOSHOP,
ILLUS TR ATOR &
INDE SIGN AND HOW
1.06 Typography for Web 14
DE SIGNER S BE S T USE
THE SE TOOL S.
1.08 Imagery & Hierarchy 16

S What is Web Design?

What
Is
Web
Design?
 S What is Web Design?

Web design is the process of creating websites.

The task of designing web pages to be displayed
over the World Wide Web. It encompasses several
different aspects, including webpage layout,
content production, and graphic design.
Graphic Design is
“the art or
profession of visual Web design encompasses a number of important
communication that elements including colour, layout, and overall
combines images, graphical appearance.
words and ideas to
convey information While the terms web design and web development
to an audience” are often used interchangeably, web design is
technically a subset of the broader category of web
development.

Design must
be interpreted
the same way
by everyone
to function.
S Usability & User Experience

What is
Usability
& User Experience
S Usability & User Experience

1.02
Usability & User
Experience (UX)
Usability
Usability is the ease of use and learnability of a human-made object. The
object of use can be a software application, website, book, tool, machine,
process, or anything a human interacts with.

Usability of a Website
Web usability is the ease of use of a website. Some broad goals of usability
are the presentation of information and choices in a clear and concise way, a
lack of ambiguity and the placement of important items in appropriate areas.

Why Usability is Important

On the Web, usability is a necessary condition for survival.
If a website is difficult to use, people leave. If the homepage fails to clearly
state what a company offers and what users can do on the site, people leave.
If users get lost on a website, they leave.
If a website’s information is hard to read or doesn’t answer users’ key
questions, they leave.
Note a pattern here?
There’s no such thing as a user reading a website manual or otherwise
spending much time trying to figure out an interface.
There are plenty of other websites available; leaving is the first line of
defence when users encounter a difficulty.
Websites that are not well designed tend to perform poorly and have
sub-optimal Google Analytics metrics (e.g. high bounce rates, low time on
site, low pages per visit and low conversions).

User Experience (UX)

User Experience (UX) involves a person’s behaviours, attitudes, and emotions
about using a particular product, system or service. User experience includes
the practical, experiential, affective, meaningful and valuable aspects of
human–computer interaction and product ownership.
S “F” Pattern Design/Layout

1 2

5 We like to read from Left to Right

and from Top to Bottom

3 4

We like to read from Left to Right

6
S “F” Pattern Design/Layout

1.03
“F” Pattern Design/
Layout

Eye tracking studies have identified that people scan computer

screens in an “F” pattern. Most of what people see is in the
top and left of the screen and the right side of the screen is
rarely seen. Rather than trying to force the viewer’s visual flow,
effectively designed websites will work with a reader’s natural
behaviour and display information in order of importance (left to
right, and top to bottom).

F for fast. That’s how users read your precious content. In a few
seconds, their eyes move at amazing speeds across your websites
words in a pattern that’s very different from what you learned in
school.

Users first read in a horizontal movement, usually across the

upper part of the content area. This initial element forms the F’s
top bar.

Next, users move down the page a bit and then read across in a
second horizontal movement that typically covers a shorter area
than the previous movement.

This additional element forms the F’s lower bar.

Finally, users scan the content’s left side in a vertical movement.

Sometimes this is a fairly slow and systematic scan that appears
as a solid stripe on an eye-tracking heat-map.

This last element forms the F’s stem.

Obviously, there are exceptions, generally, however, reading

patterns roughly resemble an F.
S Colour for Web Design

“In graphic and

web design,
we really
must consider the
colours used in the
design to set the
right mood and to
convey a deliberate
feel or emotion
that supports the
information within
the design.”
 S Colour for Web Design

1.04
Colour for Web Design

Most design projects Using the colour wheel you can easily choose harmonious colours
use two to four colours, to set the right mood or meaning for the content in your web
with a main colour, a design. You can create different kinds of harmonious colour com-
secondary colour, and binations depending on the number of colours you plan to use in
one or two accents. your design.
If you choose a main The most popular colour combinations are monochrome, or mon-
colour for your project ochromatic, complementary, split complementary, analogous, and
that matches the triad. When choosing colours for your own projects, consider both
mood of the product the business and the target audience so that you select colours
or service, you can that will be appealing and harmonious. You might also want to
then use the colour consider the medium, history, fads and competitors.
wheel to help choose a
Don’t forget, on the web, colours are RGB, which tend to be
harmonious secondary
more vibrant than colour in print.
and accent colours.

TINTS Colour Systems

Monochromatic colour represents a single colour and all of its
Adding White to a colour,
iterations from white to black.
you get what’s called a
Tint. The more white you Complementary colours represent a pair of colours at opposite
add to a colour the lighter ends of the colour wheel.
the tint. Split Complementary are created when you select a main colour
SHADES like our blue, and then choose two colours on either side of that
first colour’s complement.
Similarly, when you add
black to a colour, you get Analogous colours, or adjacent colours, are created when you
what’s called a shade. The pair any 2 or more colours that are right next to each other on
more black you add, the the colour wheel.
darker the shade. Triads are any three colours that are equally distant on the
colour wheel, like red, green, and blue.
S Texture, Repetition & Space

Texture
which
when used
effectively
can give
your design
depth.
 S Texture, Repetition & Space

Texture
Texture which when Think of how a texture would look and feel. Such as rough,
used effectively can smooth, hard, soft. Shiny, dull and glossy. Also consider how
give your design textures are created. They can be made from natural and
depth. The simple synthetic materials like wood, fur, nylon and vinyl. There are lots
definition of texture of ways to add texture to a web design. You can photograph or
is the surface quality scan your own textures and then manipulate them in a graphics
of any shape within program like Photoshop.
your web layout. Textures can be used in a variety of ways in web design. They
Textures can be very can help emphasize a focal point in your layout or they can be
tactile or visual. used more subtly as a decorative element that you might not
even notice. Textures can be used as decorative backgrounds, in
headers and footers and sidebars, on your navigation bars and
buttons, regular buttons, banner ads, bars and dividers.

Repetition
Another fantastic way to use shape in web design is with
repetition. When you repeat similar shapes, it really helps create
this sense of harmony, or unity in your designs.

So you can use repeating shapes for your navigation, as

decorative embellishment, and for the organization of the
various elements within your design. It could be like a series of
Don’t be afraid of thumbnails, or any set of buttons, banners, or widgets.
leaving whitespace
in your layouts.
And above all, Space
remember that One of the other defining elements of a professional design is the
empty spaces give active use of white space. White space is any area that doesn’t
the eyes a chance to contain text or graphics. It doesn’t have to be white, just empty.
rest between your
Amateurs cram their websites full of text and images. Designers
objects and they
use white space to separate elements and, in designer-speak,
really help viewers
“give them room to breathe”.
understand which
parts of the designs An immediate way to add white space to a typical web page is to
are most important. increase the line height to at least 1.5 times its standard setting
(150%); I prefer a setting of 175%.
S Typography for Web

“Web Design is

95%
Typography”
- Oliver Reichenstein, 2006
 S Typography for Web

1.08
Typography for Web

In web design, serif fonts Text is the most common element of design, so it’s not
are always reserved for surprising that a lot of thought has gone into it. It’s
headlines, because at smaller important to consider things like:
sizes they become hard
Font Choices — Different types of fonts say different things about
to read. Body text should
a design. Some look modern, some look retro. Make sure you are
generally be sans-serif such
using the right tool for the job.
as Arial and Verdana are
Font Sizes — Make sure your text sizes are consistent, large
easier to read online.
enough to be read, and proportioned so that headings and
sub-headings stand out appropriately.
The ideal font size for
Spacing — Spacing between lines and away from other objects is
reading easily online is 16px
important to consider. You should also be thinking about spacing
and stick to a maximum of
between letters, though on the Web this is of less importance, as
3 typefaces in a maximum
you don’t have that much control.
of 3 point sizes to keep your
Line Length — There is no hard and fast rule, but generally your
design streamlined or it will
lines of text shouldn’t be too long. The longer they are, the harder
start looking cluttered.
they are to read. Small columns of text work much better (think
about how a newspaper lays out text).
Limit the number of fonts
Colour — Colour is in reference to Contrast, make sure there is
you use. I suggest between
enough between backgounds and text so it can be read.
no more than three per page.
You can get away with one,
but most well-designed sites
Web-Safe Fonts must be cross-platform, which means that
use two or three.
they need to be already installed on a visitors device, such as a
Generally speaking, you’ll computer or a tablet or a smart phone. There are different fonts
use one font for all your installed on Macs and PC’s, the list of web-safe fonts is small.
headings and one for your
Web Fonts are different from web-safe fonts. For starters, they’re
body copy (paragraphs). Any
platform independent, which means that they do not need to be
additional fonts will be for
installed on a visitor’s device. What’s more, there are hundreds of
specific purposes.
options for you to choose from.
S Imagery & Visual Hierarchy

Imagery
A picture can speak a thousand words, and choosing the right
images for your website can help with brand positioning and
connecting with your target audience.

If you don’t have high quality professional photos on hand,

consider purchasing stock photos to lift the look of your
website.

Also consider using infographics, videos and graphics as these

can be much more effective at communicating than even the
most well written piece of text.

In saying this avoid images that move. Resist the urge for flash.
Even .gifs are highly questionable, unless executed with the
utmost skill. In general, studies show that viewers much prefer
websites that keep still.

Don’t use images simply as a way to fill space; visitors will

pick up on this immediately and may lose interest in your
page. Instead, only use images which communicate useful
information—illustrating accompanying text or explaining
something about a product being described.
S Imagery & Visual Hierarchy

Visual Hierarchy
Visual hierarchy is the order or sequence in which our eye
moves and perceives the things it sees.

When it comes to a web page, the visual hierarchy can be

referred to the sequence in which our eye moves from one
topic/content/block to another.

When designing a web page, a designer first need to identify the

order of importance of the various topics and then place them
in such a way that the visitors first view what is most important
and then move onto the others in a hierarchical manner.

Size hierarchy – As the name suggests, size hierarchy is the kind

of hierarchy in which the most important content or image is
of the largest size on a webpage, followed by the second most
important content or image in the second largest size and so on.

The distinction in sizes should be such that a visitor would view

the items in the order of importance, and the pecking order of
things is obvious.

Content hierarchy – Besides the hierarchy of size, which is one

of the best ways to create the order of importance, another way
you can incorporate this principle is by creating a hierarchy of
content.

You can place content in such a way that the human eye first
travels to the content that is most important, for example, the
business’s objective or purpose and then moves to the less
important content blocks in a hierarchical order.
S