Christoph Kolloge

Compact Guide
to Web Design
Designing User Interface Elements

1
Preface
When designing user interface elements from companies such as Google and Ap-
of a website, such as headers, there are ple for universal insights from business
a number of things to consider that are practice. I then reviewed more than 1600
difficult to find on the Internet and have UI elements of 200 well-known websites
not been mentioned in any book to date. (see Appendix A-3) to see if they corre-
Until now: this book is the result of three spond to these statements as well as my
years of research that can save you the own findings from web design projects.
time-consuming search for helpful best
practices. By comparing them, I was able to filter
out some statements from books and
In this book, you will learn how to design online sources that are now outdated
visually appealing and user-friendly in- or not generally valid, so only the rele-
terface elements for websites. First, the vant best practices and guidelines were
most important basics of web design are included in this book.
explained, including topics such as color
schemes, responsive web design, and This book is for:
usability (see Chapter 1). This is followed
by descriptions of the purpose of user
interface elements and over 450 best ĵ Web & UI designers: gain new
practices for using them (see Chapters 2 insights into web design and
to 7). design inspiration

You will also find lots of information for ĵ Media design & interaction
reference, such as an overview of suit- design students: learn the
able fonts (see Appendix A-1), as well as basics for designing websites
a collection of recommended design and best practices
systems, blogs, resources, and tools (see
Appendix A-2). ĵ Web developers & computer
science students: learn the
As the basis for the book, I searched over purpose and terminology of UI
600 online sources and 50 books for best elements of websites
practices and guidelines for the design
of websites. In doing so, I included find-
ings from usability studies conducted by I hope you enjoy reading and have a
companies such as the Nielsen Norman steep learning curve!
Group and reviewed design systems

2 Preface
Procedure
The book is based on a four-step process:

Identification of Common
STEP UI Elements of Websites

01 Evaluation of website builders like

Elementor and website templates
(WordPress and HTML templates)

Evaluation of Best Practices

STEP and Guidelines

02 Among others from web design and

usability books, online articles, and
design systems

Collection of Visually Appealing,

STEP User-Friendly UI Elements

03 Creation of a collection with over

1600 screenshots structured by UI
elements

Comparison of Best Practices and

STEP Guidelines with the Collection

04 Checking the statements for general

validity and up-to-dateness as well as
filtering out outdated statements

Compact Guide to Web Design 3

Contents
1 Basics 3 Typographic Components

1.1 Clarity .................................................................. 7 3.1 Headings ........................................................ 54

1.2 Aesthetic Design ......................................... 11 3.2 Body Texts ...................................................... 62
1.3 Legibility .......................................................... 17 3.3 Lists .................................................................... 66
1.4 Usability ........................................................... 18 3.4 Alerts ................................................................ 70
1.5 Flexibility ......................................................... 21 3.5 Tooltips & Popovers ................................... 72
1.6 Performance ................................................ 23 3.6 Testimonials .................................................. 74
3.7 Pull Quotes .................................................... 76
3.8 Badges ............................................................. 78
2 Container 3.9 Counters ......................................................... 80

2.1 Headers ........................................................... 26

2.2 Sections .......................................................... 30
4 Image & Video Components
2.3 Cards ................................................................. 32
2.4 Icon Boxes ..................................................... 34 4.1 Image Galleries .......................................... 86

2.5 Tabs ................................................................... 36 4.2 Lightboxes .................................................... 88

2.6 Accordions .................................................... 38 4.3 Image Links .................................................. 90

2.7 Modal Windows ......................................... 40 4.4 Image Maps .................................................. 92

2.8 Carousels ........................................................ 42 4.5 Video Players ............................................... 94

2.9 Footers ............................................................ 44

4
 5 Navigational Components 7 Infographics

5.1 Main Navigation ......................................... 98 7.1 Interactive Maps ....................................... 158

5.2 Hamburger Menus .................................. 102 7.2 Tables .............................................................. 162
5.3 Drop-Down Menus ................................. 104 7.3 Horizontal Bar Charts ............................ 168
5.4 Mega Drop-Down Menus .................... 106 7.4 Vertical Bar Charts .................................. 170
5.5 Local Navigation ....................................... 108 7.5 Line Charts ................................................... 172
5.6 Pagination ..................................................... 110 7.6 Pie Charts ..................................................... 176
5.7 Breadcrumb Trails ..................................... 112
5.8 Footer Navigation ..................................... 114
5.9 Buttons ............................................................ 116 Annexes & Directories
5.10 Text Links ...................................................... 120
A-1 Recommended Fonts ........................... 179
5.11 Back to Top Links ..................................... 124
A-2 Recommended Websites ................... 180
5.12 Search Boxes ............................................... 126
A-3 Reviewed Websites ................................ 182
Index ............................................................... 184
Glossary ......................................................... 186
6 Form Components
References ................................................... 189
6.1 Input Fields .................................................. 136 Legal Notice ................................................ 192
6.2 Password Fields ........................................ 140
6.3 Date Picker .................................................. 142
6.4 Button Groups ........................................... 144
6.5 Drop-Down Fields ................................... 146
6.6 Checkboxes ................................................ 148
6.7 Radio Buttons ............................................ 150
6.8 Toggle Switches ....................................... 152
6.9 Progress Indicators ................................. 154

5
 Chapter 3

Typographic
Components
6
Font Categories

For typographic components, use fonts that are easy to read and match the
content and audience of the website. Fonts from the following font categories are
particularly suitable for websites:

CHARACTERISTICS APPLICATION (I. A .) EXAMPLES

A
Sans Serif
Sans serif fonts
with a modern,
minimalist feel
Sport
Technology
Start-ups
Montserrat
Fira Sans
Lato

ASerif
Traditional or classic
looking fonts with
serifs
Cosmetics
Banking
Science
Lora
Crimson
Alegreya

A
Slab Serif
Thick fonts with
block-like serifs
Advertising
Technology
Automotive industry
Arvo
Zilla Slab
Bitter

A
Script
Handwritten look,
elegant, feminine
fonts
Fashion
Wedding themes
Baby themes
Olivier
Cookie
Pacifico

A
Decorative
Fonts with highly
stylized, eccentric
letterforms
Products for children
Food
Baloo
Chewy
Medula One

Fonts from the categories sans serif and serif are suitable for both body text and
headings. Fonts from the categories slab serif, script, and decorative are especially
suitable for headings. Because of their good legibility, fonts from the sans serif
category are most often used on web pages.

Compact Guide to Web Design 51

7
Examples of Appropriate Font Combinations

Fonts from the Same

Yoga Font Family

10 Advanced Fonts from the same

font family have the
Exercises for You
same or similar anato-
my and can therefore
be used well together,
e.g. Museo 700 and
Museo Sans 700.

Serif Font with Sans

Serif Font

Bubble Corals
Another well-suited
font combination
consists of a serif font
Plerogyra Sinuosa like TheSerif with a
sans-serif font like
Source Sans Pro.

Curved Font with

Subtle Font

Find Curved fonts like Play-

your ball can be combined

well with subtle fonts

Happiness
like Calisto MT.

52 Typographic Components
8
 Wide Fonts with
Narrow/Normal Fonts

Explore
Wide fonts like Montser-
rat provide an appealing
contrast to narrower or
the Mountains normal fonts like Source
Sans Pro.

Fonts with Uniform

Line Thickness

MENORCA Fonts with a uniform

line thickness, such as
DIN Engschrift and the
The Holiday Paradise of the font Segoe UI, can also
Balearic Islands be combined well.

Fonts with Similar

X-Heights

The more similar the

height of lowercase

OrganicHoney letters without ascend-

ers and descenders, the
better the fonts match
(e.g. Helvetica Neue and
Playfair Display).

Compact Guide to Web Design 53

9
3.1 Headings
Typographical elements that are prominently placed next to the body
text

1 HOME

2
Smart Home
Solutions
Flexible smart home solutions
3
tailored to your home

Project request

Purpose of Use Typical Components

Headings can be used 1 Eyebrow heading (optional):

to highlight a topic
ĵ to lead the reader to the content he is
looking for 2 Main heading
ĵ to increase the readability and
3 Subheading/subline (optional):
comprehensibility of texts
to move less important words out of
ĵ to arouse the reader's curiosity
the main heading or to keep the main
ĵ to divide longer body texts into short
heading short
text sections
ĵ as an eye-catcher

10 Typographic Components
54
Techniques for Short Headings

Short headings are more eye-catching, look better, and can lead readers to the
content they are looking for more effectively than long headings. The following
techniques can be used to keep headings short:

Narrow Font and/or Reduced Replace Conjunctions with

Letter Spacing Shorter Characters

A narrow type style is especially For example, use the character

useful for longer headings to "&" instead of the conjunction
save space. Reduced letter spac- "and" or a slash (/) instead of the
ing also reduces space require- conjunction "or".
ments.

Forever
& Ever
SPORTS IN THE
LIVESTREAM

Omission or Smaller Design of

Less Important Words

Articles (the; a, an) should be

avoided in headings. If articles
Moving Words from Heading
cannot be avoided, they can be
to Eyebrow Heading or set smaller.
Subheading
The same applies to prepositions

such as "in" and other less im-
Summer Offers: 60 % portant words such as additions
Cheaper Sunglasses in brackets.


SUMMER OFFERS
EARLY BIRD
THE

60 % Cheaper
Sunglasses LABRADOR / Retriever

Compact Guide to Web Design 55

11
Best Practices for Main Headings and Subheadings

Reduced Letter Spacing Consistent Typeset Edges

Reduce letter spacing in main For left-justified main headings,

headings so that words appear make sure that the typeset edges
more compact and are more are consistent. Shift very large
clearly perceived as belonging headings slightly to the left to
together. With normal letter align the typeset edge with the
spacing, main headings usually following lines.
look too airy, especially if the font

is very large.


Main Heading
Follow-up line

Heading


 Main Heading
Follow-up line
Heading

Subtle Design of Subheadings

No Justification
Make subheadings more subtle
Do not use justification in head- than headings so that they do not
ings. This way you can avoid draw too much attention away
irregular spacing between words from the heading. It is usually best
in the heading. to use a much smaller font than
for the heading.

Heading with Justification and
Irregular Intervals
Swimming with
 Sharks
Heading with Justification and Travelogue of a snorkeling trip some
miles off the coast of Oahu
Regular Intervals

12 Typographic Components
56
 Large Font Size Short Main Heading

Design the main heading in a Keep main headings as short as

large font size so that it stands possible for the reasons given on
out clearly from the surrounding page 55. According to Nielsen &
elements and catches the read- Loranger (2006), main headings
er's eye. should contain a maximum of 60
characters.

The Most Beautiful  

Aquariums Example of a
Too Long Main Main Heading
We have selected the ten most beautiful Heading, which with less than
show aquariums in the world
Contains over 60 characters
60 Characters

Best Practices for Page Titles

Eye-Catching Design Integration in Browser Tab

Title
Make the page title stand out so
that it is noticed as one of the Include the page title in the
first page elements and cannot browser tab title to help users
be confused with subheadings. navigate between browser tabs.
For this purpose, consider under- Preface the page title in the
lying the page title with a photo. browser tab if it also contains
the website title. This helps avoid
that all or part of the page title
Waterworld.info
are hidden when users have a
large number of tabs open in the
Underwater World browser.


Dive In Compact Guide to W Compact Guide to W


News - Web Design C Contact - Web Desig

Compact Guide to Web Design 57

13
Best Practices for Eyebrow Headings

Highlighting a Topic or Smaller Font than for Heading

Category
Set eyebrow headings smaller
Use eyebrow headings with than the heading. Make sure the
long main headings that do not font is still legible and sufficiently
contain keywords from the as- separated from the heading, e.g.,
sociated text to highlight a topic by
or category. This way, users only
have to read the eyebrow head-
ing and not the entire heading or  Boldface
even the entire text to figure out
 UPPERCASE
the category or topic. Don't use
an eyebrow heading if the main  Colored Font
heading is short and contains
 COLOR AREA
multiple keywords.

SMARTHOME

Your Home. Easy. Smart.

Increased Letter-Spacing for

Uppercase Letters

Use increased letter-spacing

for eyebrow headings in upper-
Short Eyebrow Heading
case letters. According to UX
Keep the eyebrow heading short. Movement (2016), this gives the
A single word is ideal. edges of each word a tooth shape
instead of a straight line, making
 them easier to read.
THE PERFECT IDEAS FOR DINNER

Haute Cuisine


 SPACING
COOKING

Haute Cuisine
 S PA C I N G

14 Typographic Components
58
Best Practices for Subheadings

Clearly Assigned Paragraphs Placement Close to the

Related Text Section
Make sure that the paragraphs are
clearly assigned. Choose the same Place subheadings near the
or a slightly larger space between related text section. Placing a
the subheading and the following subheading closer to the related
text than between the paragraphs. text section than to the preced-
This makes the subheading and ing text section makes it clear to
the paragraphs of a section of text which section the subheading
seem to belong together. belongs. The space above a sub-
heading should be about two to
 three times the space below the
Subheading subheading.

2-3x
Subheading

Subheading

Avoid a Repetition of Words in

Consecutive Subheadings

Avoid word repetition in consecu-

tive subheadings, such as "Con-
clusion of topic 1" and "Conclusion
Bold/Semibold Font
of topic 2", as this affects the
Format subheadings in a bold or readability of the subheadings. In
semibold font style so that they this example, the user does not
stand out clearly from the body get new information until reading
text. the fourth word.

Compact Guide to Web Design 59

15
 No Color Stripes Left Alignment

Avoid color stripes behind sub- Left-align subheadings. Left align-

headings, as different background ment helps users quickly search a
colors make subheadings and page for relevant words because
related text look like separate ele- the edges of text blocks are con-
ments. sistent.

 
Subheading 1

Subheading

Subheading 2

Subheading

Subheading 1

Subheading 2

Maximum of Four Numbering

Levels

Use a maximum of four levels of

No Word Separations numbering. According to Will-
berg & Forssmann (2010), more
Avoid separating words in sub-
levels overwhelm the reader. The
headings. Separated words are
German standard DIN 1421 stipu-
recommendable only when the
lates that numbering should have
word parts can stand alone, e.g.,
a maximum of four levels.
in word compounds.

 1.1.1.1.1 Subheading
 Exemplary Sub-  Exemplary
heading Subheading
 1.1.1.1 Subheading

16 Typographic Components
60
Best Practices for Font Size

Always use a larger font size for headings than for body text so that they stand out
from the body text and attract the eye more. It's a good idea to create a heading
hierarchy based on a type scale calculator like the one at type-scale.com, where
the font size of each next larger heading level is multiplied by a certain factor.
As recommended by Joseph Mueller (2018), hierarchy levels should be based on
website type:

Marketing Sites

H1 For marketing pages, there should be a large contrast be-

tween the hierarchy levels, for example, by formatting the
H2 next largest heading 1.618 times larger according to the gold-
H3 en ratio. The large headings help guide the user through the
page and direct them to the most important information.

Informational Websites and Blogs

H1 For informational websites and blogs, a medium contrast

ratio is recommended, such as a factor of 1.333. This helps
H2 avoid unnecessary line breaks and saves space. With a
H3 smaller font, more words fit in one line (e.g. in a headline of
an article).

Product Pages and Dashboards

H1
Product pages and dashboards (user interfaces for data vi-
H2 sualization or system administration) require a large number
H3 of font sizes. For this reason, a relatively low size contrast
H4 between the hierarchy levels is suitable on these pages, e.g.
with a factor of 1.125.

Compact Guide to Web Design 61

17
 Chrome Browser Mockup
3.2 Body Texts
Texts of a website without headings, figures, tables, and similar items

Typographie Tipps New Tab

http://www.typographytipps.info

avoid long text lines with more than 75 charac-

1 ters, because otherwise it is difficult for readers
to stay in the right line. Also avoid short text lines
2
of less than 50 characters, because the eye has to return to
lines too often and the reading flow is interrupted. The text
lines of this text are about 61 characters long.

Purpose of Use Typical Components

Texts of blogs, articles, etc. are format- 1 Drop cap (optional): to highlight a
ted as body texts as long as they are not new section or to provide entry points
interrupted by headings, figures, tables, for the reader.
and similar items.
2 Text section/paragraph: to improve
readability and avoid the impression
of a monotonous text, longer texts
should be divided into small sections.
ShoutEx Inc. (2017) recommends sec-
tions of two to three sentences each.
Nielsen & Loranger (2006) recom-
mend a maximum of five sentences
per text section or paragraph.

18 Typographic Components
62
Best Practices for Optimizing Legibility

Appropriate Line Length

Avoid very short or very long lines of text. Very long lines of text make it diffi-
cult to stay on the right line. Very short lines of text require the eye to return to
the lines too often and interrupt the flow of reading. A line length between 50
and 75 characters is recommended.

0 50 75 90

 Too short Lorem ipsum dolor sit amet, consectetuer

adipising elit. Etiam bibendum elit eget
erat. Etiam dui sem. fermentum vitae,
sagittis id, malesuda in.

 Ideal Lorem ipsum dolor sit amet, consectetuer adipising elit. Etiam bibendum
elit eget erat. Etiam dui sem. fermentum vitae, sagittis id, malesuda in,
quam. fermentum vitae, sagittis id, malesuda in, quam.

 Too long Lorem ipsum dolor sit amet, consectetuer adipising elit. Etiam bibendum elit eget erat. Etiam
dui sem. fermentum vitae, sagittis id, malesuda in, quam. Lorem ipsum dolor sit amet, consec-
tetuer adipising elit. Etiam bibendum elit eget erat. Etiam dui sem. fermentum vitae, sagittis id,
malesuda in, quam.

Readable Font, Appropriate No Justification

Line Spacing, and Sufficient
Avoid justification. Justification
Color Contrast
without hyphenation can create
Use a legible, neutral font, such large, unsightly gaps in blocks
as one of the fonts marked with of text.
an asterisk in Appendix A-1.

Ensure that the font contrasts
sufficiently with the background This is a slightly longer exam-
ple text that demonstrates
(see page 17). Use line spacing the influence of justification
between 140 and 170% of the font on the readability of a text.
size.

Compact Guide to Web Design 63

19
 Sufficiently Large Font Size No Maximum Black and
White Contrasts
Use a sufficiently large font size.
Taking into consideration the fol- Avoid maximum black and
lowing specifications, a font size white contrasts. Instead, use
between 13 and 18 pt is recom- softened versions, such as dark
mended. gray rather than jet black text
on a white background, or black
SOURCE FONT SIZE text on a light gray background.
This softening of contrast makes
Material De- Standard: 16 pt the text on the screen both easy
sign (Google) Small: 14 pt
to read and pleasing to the eyes.
Human Inter- Standard for iOS:
face Guide- 17 pt; Standard
lines (Apple) for macOS: 13 pt  Jet black  Dark gray

WCAG 2.0 18 pt
Standards

No Long Texts in Capital

Letters

Left Alignment Avoid displaying long texts

entirely in capital letters. Such
Align especially long body text
texts are less legible and appear
flush left. Avoid long, centered
obtrusive.
body text, as the inconsistent edg-
es of the text block can make it 
difficult to read and look messy.
THIS IS A SAMPLE TEXT THAT
DEMONSTRATES THE IMPACT OF

UPPERCASE LETTERS ON THE LEGA-
BILITY OF A TEXT.


 This is an example text that
demonstrates the influence of upper
and lower case letters on the legability
of a text.

20 Typographic Components
64
Other Best Practices

Few Words in Bold Font

Print Version
PDF version from 2021 Highlight only individual words of
File size: 12 MB
a body text by using bold type. In
DOWNLOAD
this way, the words in bold do not
distract you while reading and do
not disturb the flow of the text.

Embedding Long Texts Only in Highlight only a few words of body text in
bold. This way, the words in bold do not
PDF Version disrupt the flow of the text.

Due to factors such as screen dis-

tance and backlighting, texts are
easier to read in paper form than
on screen. Therefore, provide very
long texts as PDF files - prefera-
Visual Relief
bly in the common format of the
country like DIN A4 or US Letter, Provide visual relief to make long
so that the PDF file can be print- texts more inviting and avoid the
ed without page adjustment. impression of monotonous text,
e.g. by using illustrations, lists,
or initials. If visual relief through
visual elements is not an option,
you can also avoid the impression
No Underlining of monotonous text by hiding
longer texts after a few lines by
Do not use underlining in body default and only displaying the
texts. The use of unlinked, un- full text when you click on a text
derlined words in body text is link such as "Read more".
discouraged because they may
be mistaken for links.
This example shows a text that is hidden after a
few lines. Only by clicking on the text link below
it, the full text is displayed. This can avoid the
Underlined words can easily be mistaken
impression of a monotonous text.
for links, especially colored words.
READ MORE

Compact Guide to Web Design 65

21
3.3 Lists
Enumerations or numberings to represent successive steps or items

3 Website Easy to Responsive Integrated

2
Layouts Customize Web Design Online Shop

Purpose of Use Typical Components

Enumerations, according to Nielsen 1 Icons: Please keep the following in

& Loranger (2006), should be used to mind when using icons:
highlight four or more bullet points in
ĵ use of icons whose meaning is easier
no fixed order. They have the following
to recognize than when reading text
purposes:
ĵ consistent shape, color, and size so
ĵ easier comprehension of content that icons are perceived as belonging
ĵ easier selection of relevant passages together (e.g. from the same icon set;
by the user see page 35)
ĵ visual relief to make texts more ĵ shapes and colors that match the
inviting style of the website
ĵ enabling the user to scan the website ĵ clearly distinguishable icons
instead of reading it
2 Texts/list items
If the order or number of elements is im-
portant (e.g. step-by-step instructions),
numbering should be used instead.

22 Typographic Components
66
Best Practices for Lists

Usage of Icons Generous Spacing between

List Items
Use icons instead of bullet points
when there are icons that fit the Provide generous spacing be-
list topics and aid comprehen- tween list items to maintain a
sion. This helps to highlight the clear and readable list and to
content of lists. Icons can also visually separate list items. Use
help lists stand out from body larger line spacing than for body
text. text.

   
Color  Color  Design
 Design
Brightness  Brightness  Marketing
 Marketing
Contrast  Contrast  Support  Support
 Statistics
 Statistics


Color Brightness Contrast

Avoidance of Very Long Lists

Avoid very long lists. Grant (2018)

recommends splitting lists with
more than 7 items into smaller
Hanging Indents
groups, as most users can re-
Use hanging indents for vertical member a maximum of 7 items.
lists. With a hanging indent, the
first line is left-aligned and sub-  
sequent lines of text are indent-
ed slightly to the right.

 Without  With hanging

hanging indent indent

Compact Guide to Web Design 67

23
 Separated Numbers/Icons Similar Line Lengths

Make sure that numbers or icons Make sure that the line lengths
stand out from the list items. For are similar to achieve a smooth,
numbers, you can achieve this, for uniform-looking typeface. Also,
example, by using a colored box structure each list item in the
in the background, a larger font same way, such as starting each
size, or a different color. list item with a noun or verb.


Heading
01 This is an example text.
 Sleeping bag
 Swimsuit for our trip to the
waterfalls

01.
 Sunscreen
Two-Line
Heading

 Sleeping bag
01 Single-Line Heading
 Swimsuit
 Sunscreen

Capitalized First Word

Capitalize the first word in list No Articles

items. This makes it easier for the
user to scan the list. This format- Do not use articles in lists. This
ting is recommended by Loranger makes it easier to distinguish and
(2017b) and others. scan bullet points.

   
 email  Email  the city  City

 phone  Phone  the country  Country

 visit  Visit  the river  River

24 Typographic Components
68
Best Practices for Icons in Lists

Consistent Shapes Optical Balance

Make sure that icons have consis- Visually align icons in back-
tent shapes. If necessary, enclose ground shapes when a mathe-
icons with different basic shapes matically exact centered align-
in a background shape so that ment does not look balanced. For
they look consistent and propor- example, move a triangular icon
tional to each other. in a background shape slightly to
the right to make it look bal-
 anced and harmonious.
Email
Send us an email
 
Visit
Visit us


Email
Send us an email

Visit
Visit us Sufficient Spacing between
Icons and Texts

Make sure there is adequate

spacing between icons and list
items so that users can easily
Top or Left Placement scan lists. Avoid placing text too
close to icons.
Place icons to the left of the text
or above the text. This way, users  
will see the icon first and then the
 Design  Design
associated text.
 Marketing  Marketing

Heading  Support  Support

 Statistics  Statistics

Compact Guide to Web Design 69

25
3.4 Alerts
Banners that draw the user's attention to an important message

1  Success: You have successfully registered. 6

2 3 4 5

Purpose of Use Typical Components

Alerts are used to provide feedback that 1 Accent border (optional): line in
applies to an entire page or website. They an accent color that can be used
can be used when on important alerts to attract more
attention
ĵ an error has occurred
2 Icon: has the purpose of communi-
ĵ a system status could lead to an
cating the notification status more
error in the future
quickly (e.g., whether it is an error
ĵ users are in offline mode notification or a warning notification)

ĵ an action has been completed 3 Notification status: e.g. error or

warning
ĵ additional information is available or
needs to be highlighted 4 Message

ĵ user-related notices should be 5 Text box: usually highlighted in a

displayed color to make it stand out from the
ĵ maintenance instructions should be surrounding elements
displayed
6 Close function: to close the
alert

26 Typographic Components
70
Best Practices

Prominent Placement Color Coding

Place alerts in a prominent place Use color coding to quickly com-

so that users do not miss them. municate the type of the message.
For example, place alerts between Use colors here that correspond to
the page title and the page con- the notification status:
tent. In this case, use an anima-
ĵ Blue for information
tion that pushes the page con-
ĵ Orange or yellow for warnings
tent down. Alternatively, you can
ĵ Red for error messages
display alerts in an overlay above
ĵ Green for success notifications
the page content.

Logo
Info: User-dependent action

Page Title
Warning: Missing permissions
 Error: Internal server error

 Error: Internal server error

 Success: Your flight is booked

Logo

Seitentitel
Error

Internal server error

Displaying one Alert at a Time

Display only one alert at a time.

Multiple alerts make a page con-
fusing.
Short Message
Logo
Keep the message short to ensure  Error: Internal server error
that users do not miss the rele-
vant information in the message Warning: Connection failure
and that the alert takes up little
space on the page.

Compact Guide to Web Design 27

71
3.5 Tooltips & Popovers
Short additional information about an element, displayed by click,
tap, or mouseover

2 Apparel Knitted Scarf 4

This pleasantly wide knitted scarf 5
has a particularly soft cotton yarn.
You can use the scarf as a neck
warmer or drape it stylishly over
3 your winter jacket.

Purpose of Use Typical Components

Tooltips that open on mouseover can 1 Tooltip/popover trigger: link that

be used to provide supplementary opens a tooltip via mouseover or a
information or brief explanations about popover via click/tap
elements such as form fields, icons,
buttons, or labels, like hints on how to fill 2 Heading (optional)
out a form field. They can also be used to
3 Content: short text in tooltips;
display values in a chart. Popovers, which
interactive elements like links, longer
open with a click or tap, can be used to
texts, lists, or photos in popovers
display interactive elements such as links
and extensive content. 4 Function to close the container:
only used in popovers
Tooltips and popovers help make a page
feel less cluttered because they only 5 Container: usually with an arrow
appear when the user needs them. Their pointing to the tooltip/popover
advantages over modal dialogs are that trigger
they are less distracting and have a close
relationship to a single element they link
to.

28 Typographic Components
72
Best Practices

Compact Size Displaying one Tooltip or

Popover at a Time
Include only short sentences or
keywords in tooltips, as longer Never display more than one tool-
texts are difficult to read in them. tip or popover at a time, otherwise
Agrawal (2019) recommends less the pages will look cluttered and
than 150 characters. Atlassian confusing.
(2017a) recommends a maximum
of 2 short sentences. Longer texts
can also be inserted in popovers.
However, make sure that pop-
overs do not cover more than a Clear Allocation to the Element
third of the screen so that the they Refer to
link to the element they refer to is
Make sure that tooltips and pop-
recognizable.
overs are clearly related to the
element they refer to. Therefore,
display the tooltip or popover
Notes on filling in the box
near the related element and add
Label an arrow to the container if there
are multiple elements nearby.
Placeholder text

 

New element New element

Do not Hide Important Things

Position tooltips and popovers so

that they do not hide information
that is relevant to the user.

Tooltip Smooth Fade-In and Fade-Out

 
Effect

Fade tooltips and popovers in

Tooltip
and out with a smooth animation
to avoid an abrupt effect.

Compact Guide to Web Design 29

73
3.6 Testimonials
Statements used for advertising purposes by persons who support a
product or service

I am very pleased with the 53

management consultancy. We
were able to open up several new
1 sales markets for our portfolio.

Akira Wang
Project Manager

Purpose of Use Typical Components

Testimonials are used to increase the 1 Portrait photo (optional)

credibility of a website, product, or ser-
vice. On a landing page, for example, you 2 Closing quotation mark (optional):
can additionally encourage customers is often displayed enlarged
to download a free demo version of a
3 Quote: should refer to a key feature of
product.
the product or service; should be left-
aligned, especially for longer quota-
Testimonials can describe how a product
tions, to ensure good readability
solved a particular problem or how it
helped solve the problem. This not only 4 Full name and job title of the per-
puts the reader in the customer's shoes son quoted: can be supplemented
but also helps them learn more about by professional branch, company, or
the features of a product or service. Internet address

30 Typographic Components
74
Best Practices

Authentic Portrait Photo Proof of Authenticity

Use a portrait photo that has the If possible, substantiate the

following characteristics: authenticity of the testimonial to
users by providing the full name
ĵ authentic photo for a believa-
and a portrait photo to strength-
ble effect
en the credibility of the quote.
ĵ look into the camera to make
Credibility can additionally be
users feel involved
strengthened by the job title.
ĵ happy facial expression to
express satisfaction with the
product or service
ĵ low-contrast or removed
background to draw attention
“With the product you get a
professional web design tool at a
fraction of the price charged for other

to the person
systems on the market.

Jane Doe
Web Designer

 

Short Text Excerpt

For an appealing design, you

should use a text excerpt with a
Appropriate Design maximum of two to three sen-
tences. Longer testimonials should
Match the design of the quote to
only be displayed by clicking on a
the style of the website and the
text link such as "Read more".
tone of voice of the content.

Patrick Meier
Manager company xy
The software is the right choice
for me because of its user- Since the relaunch of our online store,
friendly and modern interface. our sales have increased by 200%, which
is truly an amazing increase in sales.

READ MORE
John Doe
Web Designer

Compact Guide to Web Design 75

31
3.7 Pull Quotes
Highlighted important text excerpts

Turning Your Hobby into a Career

Many people are waiting to find out what their true purpose in
life is supposed to be. There are whole books on this subject
about finding a passion.

Choose a job you love, and you will 2

1
never work a day in your life.

If you no longer want to perceive work as work, think about

how you can combine your hobby with your profession and
work towards that goal.

Purpose of Use Typical Components

Pull quotes are short excerpts of text that 1 Accent border or text box with a
are used to highlight important ideas in background color (optional): to
a text using typographical means such emphasize the pull quote
as a larger font size. Pull quotes can be
2 Quote: usually formatted in a larger
used for the following purposes:
font size than the body text; a short
ĵ to make readers curious about text text excerpt should be used for an
ĵ to help readers visually scan the page appealing layout; Scott (2015) and
ĵ to make long texts less monotonous Pilcher (2013) recommend a text
ĵ to better convey a text's message excerpt of up to two sentences, Bear
(2019) recommends a maximum of
five lines of text

32 Typographic Components
76
Best Practices

Sufficient White Space Consistent Alignment

Make sure that the pull quote For left-justified pull quotes,
stands out sufficiently from the do not use opening quotation
body text. Most important is marks in the body of the text
sufficient white space around so that the alignment looks
the text excerpt. Tilda Publishing consistent. If necessary, add a
(2018) recommends 75-120 pixels closing quotation mark before
of white space from the sur- the body of the text to identify it
rounding body text. In addition, as a quote.
the following can be used:

ĵ large and/or colored font
ĵ different font "A logo is good if you can
scratch it in the sand with
ĵ large quotation marks
your big toe."
ĵ text indentation Kurt Weidemann, Typographer, Designer
ĵ box with background color

A logo is good if you can

The details are not the details. scratch it in the sand with
They make the design. your big toe.
Kurt Weidemann, Typographer, Designer

Few Pull Quotes on a Page

Placement within a Paragraph
Don't use too many pull quotes
Place pull quotes within a para-
on a page. Otherwise, pull quotes
graph (see figure on page 76).
will lose their appeal and make it
Avoid placing pull quotes at the
difficult to scan the content. The
beginning of a section so that the
University of Minnesota (2019) rec-
pull quote is not confused with a
ommends a maximum of two pull
heading or subheading.
quotes per page.

Compact Guide to Web Design 77

33
3.8 Badges
Labels which hold small amounts of information

NAME SALARY LOCATION STATUS

Svenja Mueller
$35,000 Bremen Approved
Graphic Designer

Patrick Meier
Programmer
$38,000 Hamburg Approved

Peter Beck
Illustrator
$40,000 Cologne Rejected

1 2

Purpose of Use Components

Badges are used to highlight important,
1 Shape with fill color: usually a pill
small pieces of information and allow
shape or a circular shape
quick scanning. They can be used as a
pure circular shape without labels or
2 Label or number (optional): usually
numbers to indicate the availability of
in bold/semi-bold letters and capital
new or unread items.
letters

Badges with labels are used in tables,

among other places, to highlight status
information or other important contex-
tual information.

Numbers can also be displayed in badg-

es. For example, you can highlight the
number of new or unread items or the
number of products added to the shop-
ping cart.

34 Typographic Components
78
Best Practices

Short Word or Short Number Adapted Shape

Ideally include only a single word Match the shape and size of
with a few letters or a number badges to the content. Use a
in badges, maximum 2 words. circular shape for single-digit
Lengthy or multi-line badges do numbers and a pill shape for
not look appealing. multi-digit numbers. For text,
you can use a pill shape, a round
 ACTIVATED ITEM  ACTIVE shape, or a sharp-edged shape.

123
3
Number

Minimized Danger of
Confusion with Buttons

Do not place badges in areas Text ACTIVE ACTIVE

where users expect buttons, and

make them smaller than buttons
to minimize the risk of confusion.

 
METHODS

Color Coding
12 Tips for Better Meetings 12 Tips for Better Meetings
METHODS April 5 Use color coding for badges with
multiple categories. This makes it
easier for users to distinguish be-
tween categories and notice new
or changed items when scanning
Clear Separation of Icons multiple badges.

Provide clear separation when

badges are displayed over icons so Matches +53

that the icon is recognizable as a

distinct form. Favorites +99

  Blocked +3
3 3

Compact Guide to Web Design 79

35
3.9 Counters
Animated modules used to emphasize important numbers

1 2 3

1350+ 1500+ 2000+

QUADS AND ATVS DAILY VISITORS REVIEWS

Purpose Typical Components

Counters can be used to draw attention 1 Icons (optional): can be used for
to important numbers: better scannability and recognition of
content if there are icons that match
ĵ Corporate success in numbers,
the topics of the counter and promote
e.g. numbers of
comprehension
ĵ customers
2 Numbers
ĵ employees
ĵ awards
3 Suffix (optional): e.g. percent sign,
ĵ projects
currency, or plus sign
ĵ years of experience
4 Title and/or supplementary texts:
ĵ Promotional numbers on products, usually centered
services, or events, e.g. numbers of

ĵ reviews
ĵ awards
ĵ downloads/sales

36 Typographic Components
80
Best Practices

Similar Line Lengths Up to 6 Numbers

Be sure to use similar line lengths Highlight only a few, important

for numbers and titles to achieve numbers with counters. A max-
an appealing, harmonious de- imum of 6 numbers is recom-
sign. To this end, for example, the mended, otherwise the user will
number 100,000 can be formatted have to scroll a lot in the view on
as "100K". smartphones to read all the num-
bers and associated text.


1600 100.000


DAILY VISITORS TO REVIEWS

1350+ 1500+ 2000+ 1500
QUADS AND ATVS DAILY VISITORS REVIEWS RESELLERS

THE WEBSITE

600 450 100 220

AWARDS ONLINE SHOPS EMPLOYEES CLIENTS

1600 100K

1350+ 1500+ 2000+ 1500
DAILY VISITORS REVIEWS QUADS UND ATVS DAILY VISITORS REVIEWS RESELLERS

Animated Numbers
Large Numbers
Implement counters so that when
Design the numbers in a larger the page refreshes, the numbers
font size than the associated text count up in an animation from a
so that they are noticed before starting number (usually 0) to a
the text and to increase the final number. An animation dura-
likelihood that website users will tion of about 2 seconds is recom-
memorise the numbers. mended.

 

200
TEMPLATES
200 34 6
7 347
TEMPLATES
CLIENTS CLIENTS

Compact Guide to Web Design 37

81
Index
60-30-10 rule 16 D H
Data marker 170, 171, 172, 173 Hamburger menu 102
A Date picker 142 Hanging indent 67
Accent border 70, 76 Depth effect 10 Header 26
Accordion 38 Donut chart 177 Header image 28
Aesthetic-usability effect 18 Dot navigation 42 Heading 54
Alert 70 Drop-down field 146 Horizontal bar chart 168
Alignment 11 Drop-down list 146 Hotspot 92
Analogous color 12 Drop-down menu 104 Hyperlinks 120
Asymmetric balance 11
Autocomplete 127 E I
Enumeration 66 Icon box 34
B Expandable row 165 Image gallery 86
Background map 158, 160 Eyebrow headline 54 Image link 90
Back to top link 124 Image map 92
Backward navigation 110 F Inline link 120
Badge 78 Farbwirkung 180 Input field 136
Body texts 62 Favicon 29 Input stepper 147
Breadcrumb trail 112 File uploader 23 Interactive colors 117
Breakpoints 21 Filter 86, 130 Interactive map 158
Browser tab title 57 Fitts' law 18
Button 116 Fixed aspect ratio 87 J
Button group 144 Focal point 28 Jacob's law 18
Font category 51 Justified grid 87
C Font combination 52
Calendar drop-down 142 Footer 44 L
Call-to-action buttons 116 Footer navigation 114 Law of closure 19
Card 32 Forward navigation 110 Law of common fate 19
Carousel 42 Law of common region 20
Checkbox 148 G Law of continuity 20
Color association 14 Gestalt principle 19 Law of figure and ground 19
Color coding 71, 165 Ghost buttons 116 Law of proximity 19
Color contrast 17 Gradient 16 Law of similarity 20
Colorful-uncolorful contrast 9 Gradual fade effect 85 Law of symmetry 20
Complementary color 12 Grid 21 Layering 10
Container 24 Letter-spacing 17
Counter 80 Lightbox 88
Current page indicator 98, 108, Light-dark contrast 9
110, 112 Line chart 172

38 Index
182
Line spacing 17 Phonetic search function 131 T
Link title 121 Picture superiority effect 18 Tab 36
List 66 Pie chart 176 Table 162
Loading animation 23 Placeholder text 133 Testimonial 74
Local navigation 108 Popover 72 Tetradic color 13
Logo 29 Price table 166 Text link 120
Progress indicator 154 Thumbnail 86
M Pull quote 76 Thumbnail navigation 88
Main headline 54 Toggle switch 152
Main navigation 98 Q Tooltip 72
Map marker 158 Quilted image list 87 Top footer 46
Map switcher 158, 160 Transition 31
Map tip 159 R Triadic color 13
Marker cluster 161 Radio button 150
Masonry image list 87 Responsive navigation 22 U
Mega drop-down menu 106 Usability 18
Menu item 97, 98, 108 S
Miller's law 18 Search box 126 V
Modal window 40 Search result 129, 130 Validation 139
Monochromatic color 12 Section 30 Vertical bar chart 170
Segmented control 144 Video player 94
N Shadow 25 Viewport 28
Numbering 66 Skeleton 23 Visual hierarchy 7
Social media link 46
O Sort function 162, 164 W
Optical alignment 69 Spinner 23 Warm-cold contrast 9
Overlap 10 Split-complementary color 13 White space 11
Square color 13
P Standalone link 120 Z
Page navigation 110 Stemming 131 Zoom function 158
Page title 57 Sticky navigation 100, 109
Pagination 110, 132 Sub footer 44
Password field 140 Subheading 54, 59
Performance 23 Symmetrical balance 11

Compact Guide to Web Design 183

39
Legal Notice
Concept, design, layout, text, and translation com // P. 62, 123, 124, 125: "Chrome Browser Mockups" from
Christoph Kolloge cssauthor.com // P. 101: "Tablet Screen Mock-Up App Show-
case Edition" from itscroma, graphicriver.net // P. 116: "Book
Editing Mockup" from itscroma, graphicriver.net // P. 129: Mockups
Alexander Kolloge from www.anthonyboyd.graphics // P. 130: "Realistic Cap
Mock up" from Zlatko Plamenov from www.Freepik.com und
Version "Woollen-Beanie-Cap-Mockup-Empty-PSD" from www.apem-
September 2021 ockups.com // P. 131: Mockups from www.empty-mockup.com
// P. 134: "Responsive Mockup Set App Web UI Laptop Phone
Credits (images & illustrations) Tablet Pro" from itscroma, graphicriver.net // P. 156: "Laptop
Cover: aurielaki/123RF.com // P. 3, 106: Macrovector_Offi- Mock-Up Touch-Bar Perspective" from itscroma, graphicriver.
cial/Freepik; aurielaki/123RF.com // P. 6, 7: Katarzyna Bi- net // P. 191: „Android Phone with Notch Mockup“ from psd.
ałasiewicz/123RF.com // P. 7: Prostock-studio/stock.adobe. zone // Back cover: "Paperback Psd Book Mockup Vol2" from
com // P. 8: SpicyTruffel/stock.adobe.com // P. 9: .shock/stock. pixeden.com
adobe.com, Vadim Georgiev/123RF.com // P. 10: Kidsada Man-
chinda/123RF.com // P. 19: Krolone/stock.adobe.com // P. 20: Credits (icons)
sentavio/Freepik // P. 22: satura_ /stock.adobe.com // P. 22, 126, P. 4: iconixar und Pixel perfect from www.flaticon.com // P. 7:
back cover: pikisuperstar/Freepik // P. 27: silvae/stock.adobe. Freepik und Zlatko Najdenovski from www.flaticon.com // P.
com // P. 28: Alexander Raths/stock.adobe.com, Freepik // P. 30: 22: srip, Freepik und Gregor Cresnar from www.flaticon.com
Dmytro Vietrov/123RF.com // P. 32: VIAR PRO studio/stock.adobe. // P. 26, 27, 34-35, 46, 48-50, 64, 65, 67, 69, 73, 89-90, 105, 111, 113,
com // P. 36: photos.icons8.com // P. 41: master1305/Freepik // 118, 121-124, 127, 128, 129, 130, 134, 136-138, 142-143, 149, 151, 155,
P. 54: macrovector/Freepik // P. 55: Freepik // P. 57: silvae/stock. 163-165, back cover: Freepik from www.flaticon.com // P. 27:
adobe.com // P. 62, 65: roserodionova/Freepik // P. 72: Drobot Vitaly Gorbachev from www.flaticon.com // S. 35: icons8.de //
Dean/stock.adobe.com // P. 74: Shao-Chun Wang/123RF.com // P. P. 36: Freepik und Dave Gandy from www.flaticon.com // P. 40,
75: pressfoto/benzoix/Freepik // P. 84: Jacob Lund/stock.adobe. 73: Dave Gandy from www.flaticon.com // P. 41, 79: Pixel per-
com // P. 91: AA+W/stock.adobe.com // P. 92: deagreez/Olga/stock. fect from www.flaticon.com // P. 66-69: Freepik, Dimitry Miroli-
adobe.com // P. 93: Alex Kondratenko/stockphoto-graf/tussik/ ubov und Gregor Cresnar from www.flaticon.com // P. 70-71:
stock.adobe.com // P. 96, 102, 103: lzf/stock.adobe.com // P. 98: Freepik, Dave Gandy, Google und Gregor Cresnar from www.
New Africa/stock.adobe.com // P. 101: 9dreamstudio/Marti/stock. flaticon.com // P. 79: Kiranshastry from www.flaticon.com // P.
adobe.com // P. 104: halayalex/stock.adobe.com // P. 106: Andrii 83: Freepik, Smashicons und Those Icons from www.flaticon.
Torianyk/123RF.com, aurielaki/123RF.com // P. 108, 109: Mix and com // P. 86: Google und Dave Gandy from www.flaticon.com
Match Studio/stock.adobe.com, Pixel-Shot/stock.adobe.com // P. 94-95: Freepik, Google, Dave Gandy und Chanut from
// P. 112: Lightfield Studios/stock.adobe.com // P. 120: Freepik // www.flaticon.com // P. 97: itim2101 from www.flaticon.com // P.
P. 124: jemastock/Freepik // P. 129: max776/123RF.com // P. 158: 102: Freepik, Pixel perfect und Simple Icon from www.flaticon.
rh2010/stock.adobe.com // P. 158-161: max776/123RF.com // P. 78: com // P. 104: Smashicons from www.flaticon.com // P. 119-120:
nensuria/asier_relampagoestudio/Freepik // P. 166: macrovector/ Dave Gandy und Egor Rumyantsev from www.flaticon.com
Freepik // P. 178: belchonock/123RF.com // P. 123: Pixel Buddha und Dave Gandy from www.flaticon.
com // P. 129, 144: Kiranshastry from www.flaticon.com // P.
Credits (mockups) 135: Freepik und surang from www.flaticon.com // P. 140-141:
The photo collages were created using the following mockups: Dave Gandy from www.flaticon.com // P. 145: Smashicons und
P. 4, 24: "Psd Laptop Web App UI Mockups" from itscroma, Freepik from www.flaticon.com // P. 154-155: Smashicons, Dave
graphicriver.net // P. 4, 50: "Psd Laptop Mockups for Instagram" Gandy und Pixel perfect from www.flaticon.com // P. 158-161:
from itscroma, graphicriver.net // P. 5, 82: "Psd Laptop Mock-Up Google und Freepik from www.flaticon.com // P. 163: Google/
- Working on Laptop" from itscroma, graphicriver.net // P. 5, Freepik from www.flaticon.com // P. 164: Roundicons from
96: "Psd Laptop Mock-Up - Working on Laptop" from itscroma, www.flaticon.com // P. 168: Freepik und Icomoon from www.
graphicriver.net // P. 8: "Laptop Mock-Up Psd 8" from itscroma, flaticon.com // P. 173: Lyolya from www.flaticon.com // P. 177:
graphicriver.net // P. 12: "Macbook - Desktop Mockup Creator" Google und bqlqn from www.flaticon.com
from mocks_co, graphicriver.net und "Flying Business Card
Mockup Empty PSD" from psd.graphics // P. 22, Back cover: Note
"Multi Devices Responsive Web Mockups Pack" from maula- The book has been carefully prepared. The author cannot
nacreative, graphicriver.net // P. 25: "Flying MacBook Mockup" accept any liability for any disadvantages or damages result-
from mockupworld.co // P. 26: "Soda Can Mockup" from ZippyP- ing from the information given in the book. All information is
ixels.com // P. 43: "home wallet slider pic" from dailymockup. without guarantee.

40
Web UI Design
in a Nutshell
The "Compact Guide to Web Design" with 192 pages
full of best practices and design examples is now
available as paperback and e-book:

Buy the book Buy the e-book

41