(E-Book) Design Vol. 1 - Principles of Design - Alpha - Omega PDF

The Alpha and The Omega
Copyright © 2019 by TDA
All rights reserved. No part of this book may be reproduced or used in

any manner without written permission of the copyright owner except
for the use of brief quotations.
May 2018
Book Design by Filip Felbar

Compiled and Edited by Christopher Wallace
Published by TDA
www.topdigital.agency
Foreword
Let me begin with a heartfelt thank you to anybody and everybody who is reading this
e-book, and all of those who created the articles presented in this e-book.
Next, I have to thank everybody who was a part of the creation of this e-book, and the
subsequent e-books that will come down the line. A huge thank you goes out to our
designer at TDA, Filip Felbar, without whom this e-book would not become real, and
whose design stylings are invaluable to making this e-book beautiful.
We at TDA decided that one of the best ways we can showcase some of the best agencies
on our platform is by showcasing their work. This came from the belief that the quality
of content from a digital agency is a good assessment of their work ethic and the quality
of their work, overall.
We hope that you’ll enjoy this e-book, and all subsequent e-books, because both the
topics and the content within are deeply interesting to us, and we believe that they’ll be
just as interesting to you. Enjoy!
- Christopher Wallace, Editor-in-Chief

Table of Contents
Foreword 3
10 Common Design
Mistakes and How to 5
Avoid Them
Why Graphic Design is

Important for Content 16
Why the Right Choice of
Typography is Integral to 20
Your Business
9 Infographic Design
Examples That will 24
Leave You Inspired
5 Timeless Web Design

Elements That Will 33
Always Be in Style
About the Authors 38
More about TDA 39
Index 40
DESIGN VOL. 1: Page 5
PRINCIPLES OF DESIGN topdigital.agency
10 Common Design Mistakes…
and How to Avoid Them
Design is complex. It’s far too easy to mess it up. Learn about 10 incredibly
common design mistakes and weaknesses — and how to avoid them.
Design work is a complex business. It’s far too easy to mess up.
To create high-quality products, all of the small details are crucially important. Each detail
must be taken into account. It can be easy to get lost in the details and lose sight of the
big picture. That’s why there are several incredibly common user interface (UI) design
mistakes and weaknesses.
So how can you avoid these common mistakes? Read on for some tips and suggestions
focused on helping you avoid these too-prevalent pitfalls.
Yes, all of this is based on my own painful experience as a designer. And yes, any
resemblance to actual events is purely coincidental.
1. Lack of Planning for Edge Cases (Say No to Lorem Ipsum)

Using lorem ipsum and stock photos, you can easily create a beautiful, harmonic design…
that will quickly be irrelevant to reality. Your beautiful design will be broken once it’s
been filled by the real content.
To prevent this situation and avoid clients’ frustration about final p roducts t hat look
nothing like you intended, you need to get information. Gather the most information
possible about the content that already exists or the
content that will be produced.
Specifically, before you start working on a UI design, you need to know what kind of
content will be shown in each and every section of the page. You also need to know
the minimum and maximum sizes of the content (i.e., how many lines of text, image
sizes). These turning points are called edge cases because they show when and how the
interface will change.
SELECTING IMAGES
You’ll also want to investigate image limitations. If your client doesn’t have any custom
photos or isn’t going to purchase any, there’s no sense in using beautiful but pointless
photos from Unsplash.
Why? Photos tend to be conceptual. It’s not enough to use something pretty. Instead,
you need to select images that create a narrative or imply a deeper meaning.
Whatever you do, don’t use photos that don’t need to be there. These days, people
become overwhelmed by huge amounts of information. One extra bit of useless visual
information will only irritate them.

UNDERSTANDING REPEATING BLOCKS
Another edge case is related to repeating blocks — for example, image + text, icon +
text, number + text, and so on. You should think about how these blocks will look with
two lines of text and with ten, as well as if they’ll stand one by one.
For small text blocks that describe features, you can easily use a three-column layout.
However, if you have more than five lines of text and you need to show it all without
ellipses, you have to come up with another visual solution. Why? Because reading long
columns of text is good only for newspapers, and not convenient for the web. Possible
solutions could include using slides with horizontal scrolling or a two-column layout.
PLANNING FOR SCALING

Knowing your content’s edge cases will help you use screen space more efficiently and
choose the right UI treatment for each piece of the interface. But keep in mind that edge
cases aren’t only about what you have currently. A good designer should always think
proactively, allowing for the possibility clients may need to scale the UI in the future.
2. Inadequate Screen Annotations

The next big mistake that’s better to avoid is a lack of annotation in your designs.
Your whole team — the project manager, QA specialists, and frontend and backend
developers — sees your design screens in their static forms, like a set of beautiful
images. They can’t know what behavior you suppose for each interface element. They
can’t predict how you designed it in your mind. What might be obvious to you and your
fellow designers won’t be obvious to all team members.
That’s why it’s crucially important to include annotations about each element’s behavior,
links’ addresses, animations, and screen interactions. When you skip this step, you risk
misunderstandings. You also risk a lot of unnecessary after-the-fact confusion, when a
lot of work has been done in exactly the wrong way.
It’s easy to see how a small thing like a screen annotation can waste a lot of
development time. It can even impact the entire project scope and increase
development costs.

3. Frustrating Error States
When you’re designing a user interface, don’t forget the main purpose of any user
interface: to provide as smooth an interaction as possible between the user and
the service. Interfaces are no place for doubts, questions without answers, or any
kind of uncertainty.
Designers should provide clear feedback to users about states, especially in the case of
error states. Accordingly, error notifications should satisfy the following simple rules:
- They should be recognizable and noticeable (e.g., the color red is a common UI
pattern indicating an error).
- They should clearly explain what has happened and how users can fix the error.
- They should be contextual. It’s better to show error messages near the element
they relate to.
- They should not be irritative. Isn’t your user already irritated enough by the error?
Designers should also take care of unexpected errors (e.g. server errors, page not found).
Any error message is an obstacle to the user’s flow. That’s why we need to help the user
handle it, provide any possible solutions, and try to smooth out a bad experience —
especially if it’s not the user’s mistake. For example, a good solution may be to design
illustrations or animations for 404 and 500 pages.
BEING CAREFUL WITH FORM CHECKS

When designing error states, try your best not to annoy your users. In particular, be
careful with all possible kinds of form checks.
For example, imagine you have a form with required fields. That means developers have
a corresponding check, “All required fields shouldn’t be empty.” Let’s say the user tries to
fill in the form, but in random order. When the first required field loses the focus state,
it returns an error: “Please fill in this field. It is required!”
Our poor user is exclaiming, “Hold on, mate, I’m just clicking between the form fields and
haven’t even clicked on ‘Submit’!” And things can even get worse. For example, let’s say
you have another check, and the “Submit” button will become disabled until all required
fields are no longer empty.

Just think about it for a second. Your poor user didn’t do anything and isn’t able to
submit the form, but you’ve already blamed several mistakes on him. This will definitely
piss off anybody, so it’s best to avoid such situations.
WEIGHING COST AND VALUE

Don’t listen to developers who try to tell you it will cost a high level of effort to implement
in the way you want. Remember: NOT avoiding this problem will cost you customers!
Nobody needs a service or product without customers. Even if it was cheap to develop.
4. Too-Empty Empty States

This topic relates to the previous one — error states — and is also connected with edge
cases. An empty state is the absolute edge case, so you need to think proactively about
avoiding them.
How will your UI look when there’s no data on every page or section? Will it be friendly
or frustrating? Will it look good, or will it look broken? Will users understand where they
are and what the state means?
The best practice here is to provide a nice visual that includes informative content. It
could be an illustration, an icon, or simply a text block with nice typography explaining
the situation.

5. Lack of Typography Hierarchy
Next, another topic that causes many design mistakes better avoided — typography.
Text is the primary unit of informational content. That’s why it must be readable,
recognizable, and well-organized. Properly formatted text facilitates users’ perception
of information, keeping them focused on what’s really important.
USING FONTS AND FONT STYLES

Playing with fonts may be fun. But if someone’s trying to read something that changes
fonts ten times in a paragraph, it quickly gets tiring and annoying.
To avoid this kind of font fatigue, I suggest using no more than three fonts in any single
layout. That said, remember the difference between fonts and font styles. Every font
has its own set of styles: regular, medium, bold, black, italic, bold italic, and so on. When
you combine all of these font styles with uppercase and lowercase, two or three fonts
are more than sufficient for creating an attractive system of typography.
PAYING ATTENTION TO KERNING

When thinking about typography, don’t forget about kerning. If you’ve never heard of
kerning before, don’t worry; it’s very simple. Kerning is the process in typography by
which the space between characters is adjusted either manually or automatically.
Kerning is important because, in some situations, adjusting the space between characters
can make typography more legible and pleasing to the eye. However, misusing kerning
— or not paying close attention to it — can cause major problems. It could cause
misinterpretations or unintentionally destroy a design’s cohesiveness.
MAINTAINING VISUAL HIERARCHY

Always try to maintain a visual hierarchy between the font styles on your page. Use
contrasting typography to visually divide different levels of text and establish a strict
hierarchy. For information hierarchy to be clearly visible on a page, the main headings
should be most prominent on the page. Subheads should be considerably smaller, but
still clearly visible.

The same principle applies to the visual hierarchy within a logical block. The headline
should be the largest design element on the page, followed by a smaller, less prominent
subhead. Next, any feature titles that follow should be noticeably smaller than the
heading, and of the same weight. The smallest fonts should be used for descriptions of
features, and so on. This visual hierarchy helps site visitors to distinguish between more
and less important information.
6. Inadequate Padding and Spacing

Proper padding and spacing keep your layout looking clean and orderly while making it
easier for readers to read and understand information.
Same-size spaces should be set around logical blocks (e.g., at the top and bottom, and
on the left and right sides). If the spaces are uneven, your page will look messy, and
users may not give equal consideration to each section.
Padding that’s too small means users can’t break down content into logical blocks. To
keep logical parts from blending together, keep them separate and insert a large space
between them.
An easy way to maintain visual hierarchy is to follow this simple rule: The padding
between different logical blocks should be larger than the padding between the heading
and text inside of each block. For example, say you have a long block of text that includes
headings, subheads, and paragraphs:
- Set the heading padding-bottom to 40px, then follow it with a paragraph of text.
- Set the paragraph padding-bottom to 10px.
- If there’s a subhead after the paragraph, give it 30px for padding-top (i.e., the
space between the paragraph and the top of the subhead will be 30px) and 20px
for padding-bottom (i.e., the space between the subhead bottom and paragraph
will be 20px, which is larger than the space between the paragraphs).
That will put the desired emphasis on the most important and biggest elements. The
largest text — the heading — has the larger space around it. But this space should be
closer to the related elements that follow it.

7. Messy Iconography
Icons are incredibly useful when you need to express meaning via a small symbol or to
briefly illustrate a description. They’re also a fundamental part of modern interfaces,
especially on mobile.
In applications, icons are often the equivalent of buttons. Just check out Instagram: You’ll
see only icons and text.
That’s why it’s very important to select the right visual image to correspond to an
element’s meaning. Sounds simple, right? Nope. Every designer in the world knows how
painful it can be to find exactly the right icon.
You need to tell the story using very simple and common images that will be
understandable to everyone. And you need to match these icons with the overall style
of the UI. Then, you need to provide them to developers in SVG format.
Maybe you’ve searched for free icons, and you were thrilled when you found a nice
image for each element. You think, how perfectly they correspond to each other! They
will be understandable to everyone! Sadly, somehow, the overall impression of the
icon set you’ve selected feels rather messy and untidy. How can you avoid this kind of
messiness? Here’s a short checklist for you:
- Line Width — After resizing, all of your icons should have equal line width.
Otherwise, it will be very noticeable that they don’t.
- Corner Radius — If your icons include some rectangular shapes, compare the
corner radius of every icon in your set. If it’s different for different icons, you’d
better fix it.
- Line Cap Shape (for outlined icons) — It can be rectangular or rounded.
- Corners Join Shape (for outlined icons) — It can be rectangular or rounded.
It’s true that unsophisticated users may not specifically notice different line widths or
corner radiuses. Still, the overall impression will be wrong, and the users will feel it.
In other words, while it’s not wrong to use free icons, it’s best to go easy on them. Using
free icons makes a project look cheap and, in some cases, unprofessional. Plus, there are
plenty of free icons out there that people will recognize instantly. Why? They’ve already
seen them used everywhere.
That’s why my advice is to be strictly selective with free icons or — even better — design
icons yourself. Custom icons always provide a superior experience.

8. Low Contrast
Contrast a fundamental principle of graphic design. Our eyes like contrast. Contrast is
an instrument which designers use to manage users’ attention.
Contrast occurs when two elements on a page are different. For example, contrast could
come from using different colors for the text and the background color. It could be a
heading set in a big, bold, grungy font used alongside an elegant sans-serif font for the
body text. It could be the difference between a large graphic and a small graphic, or it
could be a rough texture combined with a smooth texture.
The important thing about contrast is that the contrasting elements should be completely
different. Not just a little bit different — a noticeable, bold difference.
USING WHITE SPACE

That said, if you place two completely different elements very close to each other, the
user won’t understand which element is the “main” one. That’s why we can say that
contrast isn’t just about applying different visual styles to elements, but also about the
art of using the white space. This is because, sometimes, to make elements contrast,
you need to separate them with blank space.
White space is important to make your content easy for users to read. Of course, white
space can be used improperly: having too much blank space or cramming too much
content into a small area. Many websites with excessive advertisements also lack
sufficient white space.
ENSURING SUFFICIENT CONTRAST BETWEEN TEXT AND IMAGES

Avoid low contrast for text copy placed on an image. There should be sufficient contrast
between the text and the background. To make copy prominent, place a contrasting
filter over the image. Black is a popular color, but you can also use bright colors, mixing
and matching them.
Another option is to use a contrasting image from the start. In this case, you can place
the copy on top of a dark section of the photograph or image.
AVOIDING CONTRAST OVERDOSE

Avoid using too many styles on one page. Too many typographic and design styles on a
single page make it look unprofessional — and also make it hard to read. To avoid this,
limit yourself to a single font and two options for saturation (e.g., normal and bold).
Avoid emphasizing narrow page elements with color. It just doesn’t look good. For
example, headings are already well-marked thanks to their size, type saturation, and
paddings. Would you like to highlight a particular point on a page? Use a color background
for the entire block, including a related heading and text copy.

9. Failing to Think Cross-Platform
Yes, ideally, this should no longer be a problem in today’s world. We all know that most
users access web services from mobile devices. Unfortunately, many designers still have
a tendency to forget that fact (or maybe it’s that clients don’t want to fork over the
money to create mobile-optimized designs?).
For design professionals, however, the problem of not optimizing for multiple devices
shouldn’t occur. When creating a UI, you always should keep in mind the widely lauded
“mobile first” approach. Concentrate on the content that every type of user will see
on each page. Then, ask yourself, “Is the UI control I selected for displaying this particular
content convenient or not?”
You may choose a nice UI element that will work perfectly on desktop devices — but it
won’t be great for smartphone users. Or vice versa. That’s why it’s important to always
keep in mind the wide variety of devices we must design for nowadays.

10. Too Much Design
Just because you can add something to your design doesn’t mean you should. Simplicity
offers plenty of perks. So be careful about going crazy with styles. While over-designing
isn’t a major mistake, it can cause some serious problems.
For example, using too many colors on a page is confusing; it becomes unclear which
bits are more important. One or two colors are enough to give visual prominence to
what’s really important.
We can say the same about font styles. It’s enough to emphasize headlines and subheads
and use contrast for key phrases.
The more “stuff” you cram into your design, the harder a user needs to think to extract
the information it presents. A design needs to breathe and live on its own. So remember:
Having blank space isn’t necessarily bad. In many cases, it’s better than filling every
square inch of blank space.
ABOUT THE AGENCY
Distillery is a full-service software design and development company for

mobile and web applications. They’ve been featured by Apple, built mobile
apps with millions of downloads, and taken startups to large, successful exits.

Why Graphic Design is
Important for Content
Social media has given us the opportunity to connect to billions of individuals

in just a matter of a few clicks. And that’s important because mass audiences
aren’t too important, but individuals are.
There’s an ever-growing need for more personalized content and marketing. So, how
could graphic design factor into this? Here are 3 reasons why graphic design is important
for your content.
Keep Things Flowing by Breaking the Flow

Let’s explore two sheets, they both contain the same information, just presented
differently. Option A is what we call a wall of text, while option B has a bit of a more
modernly structured layout. At a glance, which one would you rather read? More
often than not, people will choose option B, because it’s easier on the eyes. But why?
According to research, a lot of readers will tend to quickly skim through whatever they
are reading to quickly take invaluable information. Using a creative layout can help focus
their attention on important details and accelerate the entire process.
Adding visual elements alongside textual explanations is an efficient method for

communicating your message plus it looks nicer, that’s always a great side effect.

Easy Identification
Your content can be easily identified with consistent design patterns. How does
this work? In its most basic form, design consistency can be utilized through colors,
typography, and visual hierarchy. Keep track of your color palettes and font families
so that every post’s styling stays unified, and the most important pieces of information
should be emphasized consistently through scale and style. Don’t leave your readers
guessing what the important part is — clearly show them, as this improves the pace at
which your audience can interact with your content. Define the style early on and only
slightly modify it over time if you feel it needs to evolve alongside your brand’s needs.
Attention-Grabbers
Speaking in terms of social media management and marketing, content can be everything
we post — from blog content to the copy on the websites we use as our central hubs. In
terms of product design, it’s every digital element we use to keep our user interacting
with our app. It goes without saying we need quality content to keep visitors, new and
old alike, entertained, but users don’t have any incentive to dig deeper. “According to
comScore’s 2016 mobile report, three of the five most used apps in the US are photo-,
video- and visual-first.” This is where some quality design can be more than helpful.
Adding a high quality featured image to your content helps explain the content before
users start reading and piques their curiosity at the same time.

Legendary designer Massimo Vignelli stated that “the life of a designer is a life of fight.
Fight against the ugliness. Just like a doctor fights against disease. For us, the visual disease
is what we have around, and what we try to do is cure it somehow with design.”
ABOUT THE AUTHOR
Filip Felbar is the Designer at TDA. In addition to conceptualizing and designing

static graphics and motion-graphic animations, he oversees a complete design
output. Before joining TDA, he worked as a freelancer through different
freelance platforms, such as 99Designs, and for various organizations, such
as music festivals, conferences, universities. Felbar was nominated as a
semifinalist for the Adobe Design Achievement Award in 2018 in the fields of
Commercial Graphic Design and Fine Art Photography.
He works out of Aarhus, Denmark but calls Zagreb home, where he graduated
from Zagreb University of Applied Sciences with a degree in IT Design. When
he’s not working, he enjoys meeting new people and sharing a cup of coffee.
You can reach out to him at filip@topdigital.agency.

Why the Right Choice of Typography
Is Integral to Your Business
When a business wishes to portray its brand image effectively, general

design and marketing is not always enough. Typography speaks just as
loudly as bold visual elements and color choices, but is often overlooked
when developing a brand’s imagery.
In the history of marketing, typography has often remained a neglected tool. The choice
of fonts seems harmless but, the typeface and the images along with the catchy phrases
do majorly impact our perception. So, think again, typography is very important both
for your content and for your brand positioning. Effective typography will reinforce
your company’s identity and make it distinctive. You may be surprised by the semiotic
effectiveness of such a discrete message dimension! Actually, the typography harbours
a semantic potential, meaning it is even more effective as it is unsuspected, almost
subliminal. Behind the innocuous appearance, typefaces carry three dimensions of the
message:
VISIBILITY – The greater the form and thickness of the letters, the more
straightforward the visual receptivity, but let’s leave some room for creativity, art
and the exceptional.
TONE OF MESSAGE – Emphasis or discretion, official or intimacy are suggested
by size, shape and thickness of the letters – the choice between Roman or italic,
capitals or lower case is often easier said than done as it considers a rather complex
evaluation of the overall compounds. And indirectly, the tone evokes values that
accentuate or change the overall message.
BRAND IDENTITY – Typography “speaks” of the issuer. Does it convey a posture of
authority, a popular or a solemn one, or simply an informal stance? Is it anchored in
tradition, or affirming modernity? The choice of typography with or without serifs
and the anchoring of the text in its environment are decisive. Well-orchestrated,
they lead the way to brand identity.
1. Content Is King and Typography Is Its Crown

Typography is really essential to Content Marketing. Even if often underestimated, there
is no doubt it plays a role in strengthening your brand, creating interest in your products,
and highlighting your core message. Evocative research has been done to reveal the
importance of typography and the effect that it can have on the reader.
Errol Morris performed an experiment on readers of The New York Times and published
that typefaces can sway beliefs and influence the way people perceive information. His
research indicated that the audience found a statement written in Baskerville more
credible than presented in a font such as Helvetica, Trebuchet, or Comic Sans.
When creating content for a website or any other marketing post, thinking about the
typography is as equally as important as what the content is saying.
As a content marketer, you should spend time considering how you’ll arrange text on
the page if you want to be credible and read.

2. Fundamentals of Typography Applied to Your Business
Now, why is it important to have a basic understanding of fonts for running a business?
The answer is simple – Typography is a vector of meaning. If you’re thinking about
rebranding your company, choosing one or two (never more!) fonts is an elementary
starting point. The look and feel of the typeface that you will choose for your logo, your
website and complementing marketing material, irrelevant if on- or offline, will convey
the very first idea on your company image. Its choice must not be trivial, or “wanton”
just because you like it, but it must be carefully thought out. Obviously, the graphic
designers, as specialists in typography, are there to help and advise you in selecting the
font which will suit perfectly to your needs, values and business objectives.
But in order to create a coherent, complete and distinctive identity, you must first look for
the «magic word» that will federate your brand. For example, if your company’s keyword
is “innovation”, then you may need to look into rather contemporary typography. On the
contrary, if your brand has a “traditional” side, then you will head towards typography
with serif.
Having these typography fundamentals in your toolbox empowers you to take

responsible and meaningful decisions when it comes to your marketing efforts. If you
like to “bounce off” an idea for your company rebranding, a font application or aim to
understand the need of web fonts – We’ll be glad to share a cup of coffee!
ABOUT THE AGENCY
Keen Ltd. is a full-service digital marketing agency. They can champion any
project on multiple channels and platforms, be it the traditional channels
like print, TV and radio or the digital world. They can be an extension of your
marketing team on all fronts.

9 Infographic Design Examples
That Will Leave You Inspired
Infographics aren’t a new phenomenon, but they’ve grown in popularity

over the last decade as more and more brands, creatives, and consumers
are seeing the value of visual content. It’s no surprise. Infographics can help
communicate information in numerous ways, no matter your message.
To show you just how versatile the medium is, we’ve compiled some of our favorite
infographic design examples. Some of these pieces are more practical, “how-to” stories,
while others shed light on important social issues. But they all have (at least) one thing
in common: They look badass.
We hope they leave you inspired to create your own infographics.
1. A Well-Balanced Blog
As the market becomes saturated with infographics, finding unique and creative ways to
rise above the noise is essential. This LinkedIn infographic does just that in two ways.
First, it takes a thematic approach to the content. Rather than providing a matrix
outlining when to post certain types of blog content, LinkedIn uses a visual metaphor
to communicate the information. This helps make the subject matter more exciting and
easier to understand.
Second, the use of photography is visually appealing. With photos of meats, vegetables,
and grains, the infographic design takes on its own personality. What could be better?
We’re left with a great resource that’s amazing to look at.

2. The Sound of Color
Choosing the right color is a challenge, whether
you’re buying a new car or decorating your
nursery. Kelly-Moore Paints knows this, so they
came up with a brilliant idea: Why not choose a
color based on your favorite music? It’s a novel
and fun why to provide a service, but best of all,
it’s also a beautiful infographic.
More conceptual art piece than infographic,

this piece turned favorite albums into
colorful data visualizations based on emotions
experienced while listening to the music. The
result is an infographic design example we never
get tired of looking at.
To see more data visualization

inspired by things in everyday life,
take a look at our coffee-themed
data visualization poster.

3. Boulder Is for Fun
You can’t have an infographic design roundup without featuring a map of some kind.
(We’re pretty sure it might be a law.) This infographic by AppliedTrust is a tourist’s guide to
the nature trails of Boulder, Colorado, and it leaves us with some serious wanderlust.
With a bit of a retro style and intricate illustrations, this infographic proves a great practical
resource for the hipster traveler in us all. So print this poster, stick it in your Herschel bag
next to your Toms shoes, and get ready for one happy adventure in The Centennial State.
For more travel-related

visualizations, check out our
interactive map of San Diego.

4. Carbs Are Killing You
Fats get a bad rap. We’ve all heard how curbing our
fatty food consumption will help us lose weight.
But according to this awesome infographic by
Massive Health, carbs (not fats) may really be to
blame.
This infographic does an excellent job of walking

the reader through a somewhat complex process,
while still maintaining a single takeaway: Fats
don’t make us fat; carbs do. What’s more, visual
learners can stand up and applaud the clear
illustration style that accompanies it.
If you dig health-related

infographics, we have
plenty for you to check out.

5) The Almighty Dollar
Great infographic design starts at the content level. A good data set or narrative is the
backbone of any infographic.
This infographic, produced by GOOD, examines income levels among different religious
groups in the United States. With an unbiased approach, it does a fantastic job of visually
presenting the data in a straightforward way—carefully opening up the conversation around
a somewhat touchy topic.
Great data visualization can do a lot for tough topics—if you

know what you’re doing. Find out how to design charts and
graphs the right way before you attempt

6) How Marketers Create and
Consume Content
Not all infographics have to be static. This
Newscred infographic (or infoGIF) proves this,
as it visualizes the brand’s survey findings in a
creative way.
The data visualization is presented along with

animated illustrations that reflect the survey
question. Even better, the graphic was designed
modularly, allowing it to be sliced up into stand-
alone panels, which can be published in blog
posts, on social, etc.
To see more data come to life, check

out our interactive infographics.

7. Ascend to New Heights in Content
Marketing
A good infographic can enhance any subject, as
this photo-heavy piece shows.
In this infographic, Captora breaks down the

tracking tools and metrics that marketers find
most useful in tracking the results of their
content marketing strategy.
From a design perspective, the balance between

photo elements and vector illustrations is visually
stimulating, while the modular layout enables
users to quickly find the content that interests
them.
If you’re a fan of photo-based

infographic design, you might like
to take a look at this piece too.

8. A Lyrical Good Time
On the opposite end of the spectrum, illustration
can also be used well in infographics. Financial
company Digit had a unique concept: Tally up
exactly how much a “good time” would cost,
according to the lyrics of different songs.
The information is accompanied by detailed

illustrations of all the trappings described in
the songs, offering an entertaining (and slightly
whimsical) presentation.
Illustrations are a great technique

for narrative storytelling in
infographics. You might also take
a look at this Course Hero series,
which visualizes famous novels.

9. Seeing Green
The topic of marijuana legalization is nothing
new, but the conversation has shifted in recent
years, as laws relax in various states throughout
the U.S.
Taking a more journalistic approach to join the

conversation, the folks at Digit sought to examine
shifting public opinion, new taxation policies,
and how global economies function under legal
marijuana status.
Naturally, the infographic design is also a driving

force behind the popularity of this graphic.
Its subtle use of texture, clear breakdown of
sections, and overall sharp design show how to
use a visual theme (e.g., weed) but not overpower
the graphic.
We love to celebrate good design,

so contact us with a comment or
link if you’ve found other awesome
infographic examples.
ABOUT THE AGENCY
Column Five is a content marketing agency and

the oldest of three brands in their larger ecosystem,
which includes Visual News (a publication that
curates the Internet’s best visualizations) and
Visage (a design tool they built to empower non-
designers to create beautiful and original visual
content).
They do good work with good people. Through

trusting partnerships, they build and distribute
powerful visual content that educates, engages,
and inspires.

5 Timeless Web Design Elements
That Will Always Be in Style
Cool web design trends may or may not be effective for your business.
Instead, you should focus on these timeless web design elements.
To show you just how versatile the medium is, we’ve compiled some of our favorite
infographic design examples. Some of these pieces are more practical, “how-to” stories,
while others shed light on important social issues. But they all have (at least) one thing
in common: They look badass.
Timeless Web Design Elements or Hot Trends?

Every year you hear about up and coming or “hot” web design trends that you should
consider as you design a new website that year. And each year we are curious which hot
web design trends will be around the following year. Usually, only a few, if any, last that
long. But what about timeless web design elements that will always be in style?
The thing with hot trends of any kind is that they are simply trends that someone else
feels strongly about. Remember dashed lines, curled paper, or vertical ribbons in web
design? They were all hot web design trends in 2011! But you don’t see them very
much in 2019. And even back in 2011, they did not appeal to everyone.
That’s another thing about hot web design trends. Even if you personally think they are
pretty cool they may not work very well for your business or industry. For instance, if
your target audience is older and less Internet-savvy having the latest hot web design
trends on your site may alienate them, which in turn hurts your business objectives.
So today we want to focus on five simple and timeless web design elements that will
elevate any business website to the next level. We are not going to mention hot trends
that may not be relevant by the time you finish reading this. These are the basic elements
that enhance the usability and user satisfaction of any website.

Timeless Web Design Elements
KEEPING IT SIMPLE
This is the first, and one of the most important of our timeless web design elements. No
matter what type of website you need, and how much content you need or plan to have,
if your website is confusing to visitors they will simply go away.
Sharing a huge amount of information all at once is a bad idea. It will only lead to
confusion, followed by site abandonment. If the primary reason for being on your
business website is not immediately apparent you need to start over.
To simplify your website focus on the primary reason why your visitor is there, and
what you want them to do next. Being cute is not going to work. Instead, keep your site
content structure and navigation simple and consistent.
INTUITIVE CONTENT AND NAVIGATION

The next of our timeless web design elements is the intuitive aspect of your website.
Simplicity and intuitiveness go hand in hand. That means you need to anticipate how
your website visitors will actually use your site. Keep in mind that you will have visitors of
different skill and comfort levels. In order to be effective, your website has to be intuitive
for all of them.
In this case, function has to dictate design. Don’t add elements that serve no specific
purpose other than to make a few visitors go WOW. Make sure that all of your design
elements serve a specific purpose, remain consistent across your pages, and are easy to
use across all devices.
Ask yourself who will be using your website, how will they be using it, and what do you
want them to do at the end? Once you address all of these questions your website will
be that much more intuitive to the end-user.
GREAT PHOTOGRAPHY
The Internet is visual, folks. We really cannot stress that enough. As humans we are
hard-wired to respond to visual clues, so be sure to provide as many as you can on
your website. But not just any visuals! Another of our timeless web design elements are
striking and impactful images that tell your story.
Nothing will ruin your business website as fast as having low-quality visuals. Think about
it; would you buy a product if the product image is too dark or out of focus? Of course
you wouldn’t! You can have the most amazing products known to mankind, but if your
product images suck nobody will give them a second look.
And this is not just for product images. Any photographs on your website, regardless
if it is of your location and team, your specialty menu items, or your latest conference,
need to be the best they can be if you want to tell your story. If your photography skill is
snapping pics on your iPhone you should consider hiring a professional photographer
instead!

LEGIBLE AND READABLE TEXT
The next of our timeless web design elements relate to your text content, specifically the
readability of it. Most likely you have come across websites with text so small you had to
squint to read it. Not a great user experience, is it? This is especially true if your website
features a lot of unbroken text.
You see, modern visitors don’t read text on a web page; they scan it. And nobody reads
everything on a page any longer. We are becoming more and more impatient as a
species, and we certainly don’t want to waste time reading a bunch of illegible text.
In order to capture the interest and attention of your target audience, you must ensure
that your content is easy to read. Use a font and size that is legible across all devices,
break your content up by using images, bulleted or numbered lists, or different colored
backgrounds.
USING WHITE SPACE

The last of our timeless web design elements actually ties them all together. Sometimes
it is not what there is, but what there isn’t, that makes a great website. This makes the
use of empty or white space such an effective design element. Unfortunately, it is also
one of the most overlooked.
White space simply means giving the different elements of your website enough room
to spread out and breathe. You don’t like getting smashed in the rush hour subway,
do you? Well, your website content doesn’t feel or look engaging all smashed together
either.
A better approach to web design is to use white space to draw attention to different
elements on your website. And no, it does not need to be a white design element. White
space simply refers to empty space in your design; it can be any color and even texture
to be effective. Mix it up a bit for even better results!

Final Thoughts About Timeless Web Design Elements
Many web design trends are simply that, a trend. That means that they will be hot one
day, and forgotten the next. Here are some previous design web design trends that have
outlived their usefulness that you may remember. The thing to remember is that having
outdated web design trends on your website will make your brand appear outdated as
well. Not a good thing, is it?
A much better approach is to remember these timeless web design elements and be
sure to include them in your website design. You can add a few hot trends if you like
in order to appear extra hip and relevant. Just remember that hot trends can and will
change. But timeless web design elements will always be in style!
Do You Have Timeless Web Design Elements?

Does your online presence include some or all of these timeless web design trends? Or
did you recently upgrade your site and add a few of them? How did that work out for
you? Did it help you achieve your business objectives? Or did you have problems with
our suggestions? Please feel free to let us know so our audience can benefit as well,
and grab our feed so you don’t miss our next post! And feel free to share our post with
your audience!
Thank you! We appreciate your help to end bad business websites, one pixel at a
time!
ABOUT THE AGENCY
ESPRESSO.digital exists to help humans and brands cut through the digital
noise, connect and captivate their audience in a world of 280 characters and
always-on mobile consumers.
They are fueled by a passion for digital design, innovative solutions, and single
origin espresso. Creating and growing brands, engineering innovative online
functionality, and making the web a better place for all is what they are all about.

About the Authors
Diana Cokarić, Christopher Wallace,

Marketing and PR Assistant Editor-in-Chief
at TDA at TDA
Diana Cokarić is the Marketing and PR Assistant at Christopher Wallace was named the Editor-In-Chief
TDA. Previously she was the Social Media Manager at of TDA in June 2018, just a few months after he started
ForgeBIT, one of the leading digital agencies specialized as a content editor. Under Wallace’s leadership, the
in digital marketing and WordPress development content volume on TDA increased by 600 percent. He
in Croatia, where she planned and executed digital oversaw the complete platform transfer to the
marketing campaigns, management of brands’ new medium, the launch of the redesigned TDA
online communities, and content production as well marketplace, and the introduction of TDA’s yearly
as optimization. At TDA, Cokaric is in charge of TDA’s awards. Prior to TDA, Wallace was the Editorial
online communities on Facebook, Twitter, LinkedIn, Assistant in charge of handling the editing work
and Instagram, while she takes care of public relations for the Online Multidisciplinary Journal, RIThink, a
as well. She planned and launched TDA’s crowdfunding leading journal among universities in Croatia.
campaign in March 2019 which raised more than
€400,000 for the company. Wallace is a born and raised San Franciscan. He
graduated from Rochester Institute of Technology
Cokaric was born and raised in Split. She got her with a bachelor’s degree in International Business and
master’s degree in Marketing in Tourism from The now lives in Zagreb, Croatia. His big dream is to one
Faculty of Tourism and Hospitality Management in day start a record company and publishing house. In
Opatija. Now she lives in Zagreb, Croatia. She is a the meantime, he enjoys compiling e-books, editing,
marketing enthusiast and a huge animal lover. She is writing surreal fiction and playing video games. You
an optimist, and in her free time, she loves to travel, can reach out to him at christopher@topdigital.
hike, rollerskate, and box. She is the first person to ask agency.
about food suggestions. You can reach out to her at
diana@topdigital.agency.
Filip Felbar is the Designer at TDA. In addition to conceptualizing and designing static
graphics and motion-graphic animations, he oversees a complete design output. Before
joining TDA, he worked as a freelancer through different freelance platforms, such as
99Designs, and for various organizations, such as music festivals, conferences, and
universities. Felbar was nominated as a semifinalist for the Adobe Design Achievement
Award in 2018 in the fields of Commercial Graphic Design and Fine Art Photography.
Filip Felbar,
Digital Designer He works out of Aarhus, Denmark but calls Zagreb home, where he graduated from
at TDA Zagreb University of Applied Sciences with a degree in IT Design. When he’s not
working, he enjoys meeting new people and sharing a cup of coffee. You can reach out to
him at filip@topdigital.agency.

More About TDA
D igital services can be provided from any

location and a company does not need to be
next to a digital agency for them to work together.
marketplace for companies and digital agencies
in the world. We function like an online dating
site for companies and digital agencies and help
them connect in 3 simple steps:
For example, an agency in Croatia can build a
1. Companies leave project requests on
website for a company in San Francisco without the site;
ever meeting in person. As a result, it should be 2. Agencies see the projects and pitch to
possible for a company to choose any agency in the company; and
the world to work for them – all they need to do 3. Companies then decide whether or
not to contact the agencies for further
is find the right fit.
discussions.
Through this process, TDA makes it possible for
The problem is that there is no simple, efficient
any company and any digital agency to meet
and unbiased way for companies to find digital
no matter where they are in the world without
agencies. Search engines are not precise. Listing
needing to leave their office.
sites are expensive, time-consuming and not
transparent for both companies and agencies.
TDA solves a number of problems for both
Consultants are limited to the agencies that they
companies and digital agencies. First, companies
know, charge big commissions and are often
can quickly and easily find out about digital
biased in favour of bigger and more expensive
agencies all over the world. Whether they are
agencies. As a result, companies and digital
looking for (i) a particular niche service, (ii) a
agencies that could be a perfect match will simply
particular budget, (iii) agencies in foreign markets
never meet. After an extensive internal research,
or (iv) simply the best agency available, TDA helps
the concept of marketplace seemed as the most
them search the planet quickly and cheaply.
plausible global solution.
Second, agencies can quickly and easily generate
To our knowledge, TDA is the first global

Index
Distillery: User Interface Design

https://distillery.com/expertise/user-interface-design/
A DESIGNER’S HANDBOOK TO NOT WASTING ANYONE’S TIME

https://distillery.com/blog/designers-handbook-not-wasting-anyones-time/
THE FUTURE OF TYPOGRAPHY: AN INTRODUCTION TO VARIABLE FONTS

https://distillery.com/blog/the-future-of-typography-an-introduction-to-variable-fonts/
KEEPING SMALL CHANGES FROM ADDING UP: A GUIDE TO WORKING WITH ICONS
https://distillery.com/blog/keeping-small-changes-from-adding-up-a-guide-to-working-
with-icons/
DIGITAL TRANSFORMATION: WHY ENTERPRISES NEED PROGRESSIVE WEB APPS

https://distillery.com/blog/digital-transformation-why-enterprises-need-progressive-
web-apps/
TDA: Distillery Agency Profile

https://topdigital.agency/agency/distillery/
The 2016 U.S. Mobile App Report

https://www.comscore.com/Insights/Presentations-and-Whitepapers/2016/
The-2016-US-Mobile-App-Report
TDA Homepage
https://topdigital.agency/
TDA: Keen Ltd. Agency Profile

https://topdigital.agency/agency/keen-ltd/
The Blogging Food Groups: A Well-Balanced Diet of Content [INFOGRAPHIC]

https://business.linkedin.com/marketing-solutions/blog/t/the-blogging-food-groups-a-
well-balanced-diet-of-content-infographic
What You Can Learn from LinkedIn’s Content Strategy

https://www.columnfivemedia.com/what-you-can-learn-linkedin-content-strategy
The Sound of Color

https://kellymoore.com/color/sound-of-color/
The Data Basics You Need to Know

https://www.columnfivemedia.com/data-basics-need-know
In Caffeine We Trust: Infographic Print For Tracking Your Coffee Consumption

https://www.columnfivemedia.com/caffeine-trust-infographic-print-tracking-coffee-
consumption-data

11 Simple Tips to Improve Your Infographic Design & Get Way More Traffic
https://www.columnfivemedia.com/11-best-practices-fo r-infographic-design-
and-distribution
How To Spend 48 Hours In San Diego

https://www.huffpost.com/entry/san-diego-itinerary_n_6204450
Column Five Media: Clients — Massive Health

https://www.columnfivemedia.com/clients/massive-health
Column Five Media: Clients — GOOD

https://www.columnfivemedia.com/clients/good
Data Visualization 101: Bar Charts

https://www.columnfivemedia.com/data-visualization-101-bar-charts
INFOGRAPHIC: How Marketers Create and Consume Content

https://insights.newscred.com/how-marketers-create-and-consume-content/
Column Five Media: Services — Infographics

https://www.columnfivemedia.com/services/interactive-infographics
10 Hard-Won Lessons I’ve Learned About Content Strategy

https://www.columnfivemedia.com/10-hard-won-lessons-ive-learned-content-strategy
Column Five Media: Work Items — Marketo Mad Men of the Millenium
https://www.columnfivemedia.com/work-items/marketo-mad-men-of-the-millennium
Column Five Media: Work Items — Inferno

https://www.columnfivemedia.com/work-items/inferno
TDA: Column Five Agency Profile

https://topdigital.agency/agency/column-five/
Popular Web Design Trends in 2011: Over 50 Inspiring Examples

https://designshack.net/articles/layouts/popular-web-design-trends-in-2011-
over-50-inspiring-examples/
ESPRESSO.digital — Contact
https://espresso.digital/contact-espresso/
ESPRESSO.digital — Feed
https://espresso.digital/feed/
THE BIG PROBLEM WITH SMALL BUSINESS WEBSITES AND HOW TO OVERCOME
THEM!
https://espresso.digital/big-problem-small-business-websites/
TDA: ESPRESSO.digital Agency Profile

https://topdigital.agency/agency/espresso-digital/


(E-Book) Design Vol. 1 - Principles of Design - Alpha - Omega PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

(E-Book) Design Vol. 1 - Principles of Design - Alpha - Omega PDF

Uploaded by

Copyright:

Available Formats

The Alpha and The Omega

Copyright © 2019 by TDA

All rights reserved. No part of this book may be reproduced or used in

Book Design by Filip Felbar

- Christopher Wallace, Editor-in-Chief

Why Graphic Design is

5 Timeless Web Design

About the Authors 38

More about TDA 39

1. Lack of Planning for Edge Cases (Say No to Lorem Ipsum)

DESIGN VOL. 1: Page 6

PLANNING FOR SCALING

2. Inadequate Screen Annotations

DESIGN VOL. 1: Page 7

BEING CAREFUL WITH FORM CHECKS

DESIGN VOL. 1: Page 8

WEIGHING COST AND VALUE

4. Too-Empty Empty States

DESIGN VOL. 1: Page 9

USING FONTS AND FONT STYLES

PAYING ATTENTION TO KERNING

MAINTAINING VISUAL HIERARCHY

DESIGN VOL. 1: Page 10

6. Inadequate Padding and Spacing

DESIGN VOL. 1: Page 11

DESIGN VOL. 1: Page 12

USING WHITE SPACE

ENSURING SUFFICIENT CONTRAST BETWEEN TEXT AND IMAGES

AVOIDING CONTRAST OVERDOSE

DESIGN VOL. 1: Page 13

DESIGN VOL. 1: Page 14

ABOUT THE AGENCY

Distillery is a full-service software design and development company for

DESIGN VOL. 1: Page 15

Social media has given us the opportunity to connect to billions of individuals

Keep Things Flowing by Breaking the Flow

Adding visual elements alongside textual explanations is an efficient method for

DESIGN VOL. 1: Page 17

DESIGN VOL. 1: Page 18

ABOUT THE AUTHOR

Filip Felbar is the Designer at TDA. In addition to conceptualizing and designing

DESIGN VOL. 1: Page 19

When a business wishes to portray its brand image effectively, general

1. Content Is King and Typography Is Its Crown

DESIGN VOL. 1: Page 21

Having these typography fundamentals in your toolbox empowers you to take

ABOUT THE AGENCY

DESIGN VOL. 1: Page 22

Infographics aren’t a new phenomenon, but they’ve grown in popularity

We hope they leave you inspired to create your own infographics.

DESIGN VOL. 1: Page 24

More conceptual art piece than infographic,

To see more data visualization

DESIGN VOL. 1: Page 25

For more travel-related

DESIGN VOL. 1: Page 26

This infographic does an excellent job of walking

If you dig health-related

DESIGN VOL. 1: Page 27

Great data visualization can do a lot for tough topics—if you

DESIGN VOL. 1: Page 28

The data visualization is presented along with

To see more data come to life, check