Web Design Part 2 of 5

Web Design:
An overview of web design from statistics to tips and more.
1

Table
of
Contents
Page Title: Page Number:
Web Design Statistics: 5
Web Page Conversions 6
Web Page Design 8
Web Page Loading Time 11
Web Page Responsiveness 14
Web Design Steps for Success: 17
Goal Identification 19
Scope Definition 23
Sitemap & Wireframe Creation 27
Content Creation 31
Visual Elements 37
Testing 41
Launch 45
2

Table
of
Contents
Top 10 Web Design Companies: 48
22SQUARED 50
360I 52
AKQA 54
Conversant 56
Cramer-Krasselt 58
Grey Global Group 60
North Kingdom 62
Publicis. Sapient 64
Razorfish 66
Tombras Group 68
Digital Marketing Aspects Impacted by Web Design: 70
Analytics & Monitoring 72
Brand Identity 75
Conversion Rate Optimization (CRO) 78
Search Engine Optimization (SEO) 81
User Experience (UX) 84
Tips for 2018: 87
Be Mobile Friendly 89
Create a Hierarchy 92
Declutter Pages 95
Increase Readability 98
Make Navigation Intuitive 101
3

Table
of
Contents
Trends 2018: 104
Asymmetry & Broken Grid Layouts 106
Bottom Sticky Elements 110
Color Schemes 113
Custom Illustrations 117
Drop Shadows & Depth 120
Dynamic Gradients 123
Fluid Shapes 126
Integrated Animations 129
Mobile First 134
Particle Backgrounds 137
Typography 140
Voice & Natural Language Search 143
White Space Without Minimalism 146
Work Cited 148
4

Steps for
Success
Compiled by Author From: webflow.com
5
Goal Identification Scope Definition
Sitemap and
Wireframe Creation
Content Creation
Visual Elements Testing
Launch
21
3 4
5 6
7

Steps for
Success
6
In this initial stage, the website’s end goal
needs to be identified
Questions to explore and answer in this stage
of the process include:
Who is the
site for?
What do they
expect to find
or do there?
Is this
website’s
primary aim
to inform, to
sell, or to
amuse?
Does the
website need
to clearly
convey a
brand’s core
message, or
is it part of a
wider
branding
strategy with
its own
unique
focus?
What
competitor
sites, if any,
exist, and
how should
this site be
inspired
by/different
than, those
competitors?
Step 1:

Steps for
Success
7
This is the most important part of any web design
process
If these questions aren’t all clearly answered in the brief,
the whole project can set off in the wrong direction
It may be useful to write out one or more clearly
identified goals, or a one-paragraph summary of the
expected aims
This will help to put the design on the right path
Make sure to understand the website’s target audience,
and develop a working knowledge of the competition
Step 1:

Steps for
Success
8
Tools for Website Goal
Identification Stage
Audience Personas
Creative Brief
Competitor Analyses
Brand Attributes
Step 1:

Steps for
Success
9
One of the
most
common and
difficult
problems
plaguing
web design
projects is
scope creep
Goals can
gradually
expand,
evolve, or
change
during the
design
process
If the
increased
expectations
aren’t
matched by
an increase
in budget or
timeline, the
project can
rapidly
become
utterly
unrealistic
Step 2:

Steps for
Success
10
This provides an invaluable reference that
helps keep everyone focused on the task
and goals
It includes: major landmarks, boundaries
and deadlines
A Gantt chart, which details a realistic
timeline for the project
Step 2:

Steps for
Success
11
Tools for Scope
Definition
A Contract
Gantt Chart (or Other
Timeline Visualization)
Step 2:

Steps for
Success
12
The sitemap provides
the foundation for
any well-designed
website
It helps give
designers a clear
idea of the
website’s
information
architecture and
explains the
relationships
between the
various pages and
content elements
The next step is to
build the wireframe
Wireframes
provide a
framework for
storing the site’s
visual design and
content elements,
and can help
identify potential
challenges and
gaps with the
sitemap
Step 3:

Steps for
Success
13
The wireframe
doesn’t contain
any final design
elements but it
does act as a
guide for how
the site will
ultimately look
Some designers
use tools like
Balsamiq or
Webflow to
create their
wireframes
Other may use
paper and pencil
instead
Step 3:

Steps for
Success
14
Tools for Sitemapping
and Wireframing
Pen/pencil and Paper
Balsamiq
Moqups
Sketch
Axure
Webflow
Slickplan
Writemaps
Mindnode
Step 3:

Steps for
Success
15
Once your website’s
framework is in place, you
can start with the most
important aspect of the
site: the written content
Content serves two
essential purposes: it drives
engagement and action as
well as SEO
Step 4:

Steps for
Success
16
Purpose 1: Content drives
engagement and action
Content
engages
readers and
drives them to
take the
actions
necessary to
fulfill a site’s
goals
This is affected
by both the
content itself
(the writing),
and how it’s
presented (the
typography
and structural
elements)
Long content
may not grab
the readers
attention
where as short,
snappy, and
intriguing
content grabs
them and gets
them to click
through to
other pages
Even if pages
need a lot of
content,
properly
“chunking”
content by
breaking it up
into short
paragraphs
supplemented
by visuals can
help keep
content light
and engaging
Step 4:

Steps for
Success
17
Purpose 2: SEO
Content also
boosts a site’s
visibility for
search engines
The practice of
creation and
improving
content to rank
well in search
is known
as search
engine
optimization,
or SEO
Getting
keywords and
key-phrases
right is
essential for
the success of
any website
Search engines
are becoming
more and more
clever, so
should content
strategies
Step 4:

Steps for
Success
18
Purpose 2: SEO
Keywords that
need to rank high,
need to be placed
in the title tag —
the closer to the
beginning, the
better
Keywords should
also appear in the
H1 tag, meta
description, and
body content
Content that’s
well-written,
informative, and
keyword-rich is
more easily picked
up by search
engines, all of
which helps to
make the site
easier to find
Step 4:

Steps for
Success
19
Content Creation
Tools
Google Docs
Dropbox Paper
Quip
Gather Content
Handy SEO Tools
Google Keyword
Planner
Google Trends
Screaming Frog’s
SEO Spider
Step 4:

Steps for
Success
20
Next, companies need to
create the visual style for
the site
This part of the design
process will often be shaped
by existing branding
elements, color choices, and
logos
Images are taking on a
more significant role in web
design now than ever before
Not only do high-quality
images give a website a
professional look and feel,
but they also communicate
a message, are mobile-
friendly, and help build
trust
Step 5:

Steps for
Success
21
Visual content is known
to increase clicks,
engagement, revenue
and people want to see
images on a website
Images make a page feel
less cumbersome and
easier to digest
They also enhance the
message in the text, and
can convey vital
messages without people
even needing to read it
Use a professional
photographer to get the
images right and keep in
mind that massive,
images can slow down a
site
Optimizilla can be
used to compress images
without losing quality,
and saving on page-load
times
Images need to be as
responsive as the site
because they are a way
to communicate and
appeal to the site's users
Step 5:

Steps for
Success
22
Tools for Visual
Elements
The Usual Suspects
(Sketch, Illustrator,
Photoshop, Etc.)
Moodboards, Style
Tiles, Element Collages
Visual Style Guides
Step 5:

Steps for
Success
23
Once the site has all its
visuals and content,
companies are ready for
testing
Thoroughly test each
page to make sure all
links are working and
that the website loads
properly on all devices
and browsers
Errors may be the result
of small coding
mistakes, and while it is
often a pain to find and
fix them, it’s better to do
it now than present a
broken site to the public
Step 6:

Steps for
Success
24
For this stage companies
can use Screaming
Frog’s SEO Spider that
allows you to do
standard auditing tasks,
and it’s free for up to 500
URLs
Have one last look at the
page meta titles and
descriptions too
Even the order of the
words in the meta title
can affect the
performance of the page
on a search engine
Step 6:

Steps for
Success
25
Website Testing
Tools
W3C Link
Checker
SEO Spider
Step 6:

Steps for
Success
26
When everything has been thoroughly tested,
and companies are happy with the site, it’s
time to launch
Don’t expect this to go smoothly because
there may be some elements that need fixing
Web design is a fluid and ongoing process
that requires constant maintenance
A key thing to remember about the launch
stage is that it’s nowhere near the end of the
job
Once the site goes live, companies can
continually run user testing on new content
and features, monitor analytics, and refine
your messaging
Step 7:

Steps for
Success
27
Web design is all about finding the
right balance between form and
function
Companies need to use the right
fonts, colors, and design motifs
The way people navigate and
experience the site is also
important
Skilled designers should be able to
create a site that walks the delicate
tightrope between the two
Step 7:

Work
Cited:
 “5 Essential Web Design Tips for a Stunning Website.” Color Design
Blog , www.colourlovers.com/blog/2018/01/09/5-essential-web-design-
tips-for-a-stunning-website.
 “9 cutting-Edge web design trends for 2018.” 99designs Blog, 12 Dec.
2017, 99designs.com/blog/trends/web-design-trends-2018/.
 “Blue Frontier.” Blue Frontier,
www.bluefrontier.co.uk/company/blog/item/the-importance-of-a-
website-to-your-marketing-strategy.
 Cousins, Carrie. “10 Web Design Trends to Watch for in 2018.” 10 Web
Design Trends to Watch for in 2018 | Design Shack, Design Shack, 12
Dec. 2017, designshack.net/articles/inspiration/web-design-trends-
2018/.
 Meazey, Matt. “The web design process in 7 simple steps | Webflow
Blog.” RSS, Webflow, 31 July 2017, webflow.com/blog/the-web-design-
process-in-7-simple-steps.
 “The Jaw Dropping 101 Web Design Statistics of 2017 You Should Not
Ignore!” SAG IPL - A Technology Blog, 27 Nov. 2017,
blog.sagipl.com/web-design-statistics/.
 Top 10 Rankings List: The Best Web Design Company in the World.
www.webpagefx.com/best-web-design-company.html.
28

ContactUs
fortheFull
Presentation:
Mediacontact USA Inc.
13575 58TH Street North #160
Clearwater, Fl. 33760
T: 727 538 4112
E: contact@mcusa.co
www.mediacontactusa.com

Web Design Part 2 of 5

Recommandé

Recommandé

Contenu connexe

Plus de Jennifer Irene Guevara

Plus de Jennifer Irene Guevara (20)

Dernier

Dernier (20)

Web Design Part 2 of 5