Website Design Fundamentals for Effective Digital Marketing

https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.1
Presented by
Barbara Heinlein
Raving Software
Website Design
Fundamentals
For Effective
Digital
Marketing
April 2020
410.989.1647

OverviewRaving Software Presents Website Fundamentals
Your Digital Marketing Strategy
Website Elements
Implementation
Options

Your Digital Marketing StrategyGoals are critical to business success

Create An Investment MindsetExpect a Return on Investment
A website should
be approached as
a sales tool
investment, not
simply an expense
• You will invest:
• Planning &
consideration
• Time
• Resources
• Expect ROI

Mission
Image
Audience
Vision
• Evaluate your brand
• What is your company mission?
• Delineate your products & services
• Benefits? Features?
• Why these products & services?
• What makes them special?
• What is your company image?
• Consider company reputation
• Additional qualities to associate?
• Determine your target audience
• What do they want and/or need?
• Where do you want to take your
company?
• Why and how are you going to grow?
Your Digital Marketing StrategyStart with your Brand

Evaluate Your Sales FunnelHow do you get Clients?
Source: The consumer decision journey -
McKinsey Quarterly (2009)
AWARENESS
CONSIDERATION
PURCHASE Active Evaluation
Information gathering, shopping
social, review and reputation
resources customers consult
online
social, review and reputation
resources customers consult
onlineOngoing exposure
includes the experience with
the product or service, and
information that may either
reinforce their choice or
conflict with it
a need, a circumstance-changing
event, a piece of news or
information, a cultural shift -
even an advertisement
Trigger
Loyalty LoopPost-Purchase
Experience
FAMILIARITY
1
23
4

7
Branding Model ApplicationCreate Your Company’s Voice
KEEP PRESENTATION
CONSISTENT ACROSS
MEDIA CHANNELS
Powerful
Website
Name
Logo
Price
Product
Value
Graphics
Content
Online
Marrketing
DEVELOP A TAGLINE

8
Tie It All TogetherPut Your Digital Marketing Plan In Action
SEND A
CLEAR MESSAGE
YOUR DIGITAL
MARKETING PLAN
SHOULD BE CONSISTENT
THROUGHOUT YOUR
SALES CHANNELS

Website ElementsEnsure your website properly balances the entire symphony

Great Design is Key
• First impressions matter
• Assessment made in 2-5 seconds
• 94% of first impression related to design*
• Beautiful design builds trust
• Poor design is major reason users distrust
websites
• Avoid template-looking websites
• Customize your website to your business’
brand & digital marketing plan
• Focus on client’s viewpoint
Great Design is KeyWorking Together in Symphony
* Source: https://conversionxl.com/blog/first-impressions-matter-the-importance-of-great-visual-design/

Fundamental ElementsWorking Together in Symphony

• Message must be clear, intuitive
• Complex, busy design repels users
• Fully responsive on all devices
• Well-planned Information
Architecture
• Resonate with audience
• Effective Navigation
• User can easily interact
• Key to retaining visitors
Element #1: Simplicity

• Pages maintain overall design
• Website looks like it was created by
one person
• Consistent placement and “feel”
• Logo, header, footer, search bar
• Consistent:
• Color scheme
• Typography usage
• Images consistent with branding
Element #2: Consistency

• Typeface and font choices
• Large impact on the success of
your website
• Add their own personalities to a
website
• Ex: Script typefaces are elegant or fun
• Select 2-3 fonts for website
• Combine complementary fonts
• Stay consistent for usage, size
• All “h1” headers use same font,
size, etc.
• Clear size hierarchy must exist
Element #3: Typography

Element #3: Typography - Serif
Let the Feeling of the Font Wash Over You

Element #3: Typography – Sans Serif

Element #3: Typography – Slab Serif

Element #3: Typography - Script

Element #3: Typography - Monospaced

Element #3: Typography - Display

• Expert-level content builds trust
• Influence users; Convert to clients
• Keep tone professional and
conversational
• Focus from client’s viewpoint
• Happy client testimonials are powerful
• Optimize for search engines
• Key words, long-tail phrases
• Headers and sub-headers
• Short, easy to scan bullets
• Hard hitting, Grab attention
• Focus on business objectives
• Search Engine Optimization (SEO)
• Only one “h1” header per page
Element #4: Content

• Introduction/landing page
• Defines purpose, draws user in
• Make standard (expected) items
easy to locate
• Contact Information
• Hours
• Address
• Email
• Services offered
Element #4: Content (continued)

Element #5: Speed
• Fast website is critical
• Users leave most websites after 3
seconds
• Irritated after 2 seconds if not
loaded
• Options to increase speed
• Images optimized
• “Lazy loading” of images
• Memory manipulation (e.g.
caching)
• Remove unused material/plugins
• Remove Flash, music
• Limit animation, slideshows

Element #6: Intuitive
• User is guided to where they
want to go
• Complies w/ industry standards
• Logo linked to Home page
• Email address linked to email
• Search bar
• Social Icons
• Fully accessible

Element #7: Color Palette
• Sets business tone, personality
• Colors evoke emotions
• Can convey trust, seriousness, fun
• Be careful of the overuse of red
• Too many colors can overwhelm
• Select up to 3 coordinating main
colors, 2 accent colors
• May vary hue tones for variety
• Categorizes types of content
• Indicates desired action
• Ex: Red typically indicates an error

Element #7: Color Palette - Selection
Colors Convey Emotions

Element #7: Color Palette - Blue

Element #7: Color Palette - Green

Element #7: Color Palette - White

Element #7: Color Palette - Red

Element #7: Color Palette - Orange

Element #7: Color Palette - Purple

Element #7: Color Palette - Yellow

• Tell a story
• Be expressive
• Capture the user’s interest
• Perfectly selected images indicate
attention to detail, build trust
• “They serve people like me.”
• Text alone is boring
• Align with branding
• Embody spirit of the company
• Consistent across all channels
• Coloring should complement the
website color scheme
• Avoid controversial images
Element #8: Imagery

• Conforms to current industry
standards
• White spacing is critical
• Important element in web design
• Guides user’s eye
• Use proper English and grammar
• Keep the message concise and
clear
• Complicated, wordy text is
confusing and hard to read
• Use fonts that are easy to read
Element #9: Readability

Element #9: Readability
Select a Font Users Can Read

• Position key CTA “above the fold”
on home page
• Create sense of urgency
• Clear invitation
• Stands out
• Contrasting, bold colors
• Immediate action wording
• “Call Now” “Click Here”
• Short, direct statement
• 2-5 words
Element #10: Call To Action (CTA)

Implementation OptionsHow you get there matters

OPTION
04 Professional web designers and
developers
Hire an Agency
OPTION
03 Fiverr, UpWork, Freelancer.com
Freelancer
OPTION
02 WordPress, Joomla, Drupal
DIY Template
OPTION
01 WIX, Weebly, Squarespace, etc.
DIY Drag and Drop Builder

OPTION
01 WIX, Weebly, Squarespace, etc.
DIY Drag and Drop Builder
Advantages
• Low price of entry ($0 - $400/year)
• No coding experience needed
• Drag and drop functionality
• Templates provided
• Online instructions allow novice to create
website
Disadvantages
• Time required to implement
• Not good for large websites
• Poor navigation at 30+ pages
• Templates are limited
• May be impossible to migrate code to new
platform
• Increasing/hidden costs may be surprising

Advantages
• Low price of entry ($100 - $500+/year)
• Little coding experience needed
• Community Support
• Templates provide options to implement
• Many plugin options allow greater functionality
• Many themes update periodically
Disadvantages
• Time required to implement
• Modifications require HTML, CSS, PHP
• Lack of customization
• Templates are limited & may appear stale
• Hosting may get complicated
• Maintenance must be accomplished
routinely
• Otherwise, potential security holes
created
OPTION
02 WordPress, Joomla, Drupal
DIY Template

OPTION
03 Fiverr, UpWork, Freelancer.com
Freelancer
Advantages
• Competitive cost
• By hour or project
• Less than an agency
• Typically specialist in one type of technology
• Freedom of choice for particular skill sets
• Global accessibility
• Relatively easy to find freelancer with right
skill set
Disadvantages
• Initial Risk on experience and capabilities
• May disappear
• Multi-tasking freelancers may spread
themselves too thin
• Lack of accountability
• Potential missed deadlines
• Lack of buy-in/commitment

OPTION
04 Professional web designers and
developers
Hire an Agency
Advantages
• Knowledge and skill
• Quality products
• More resources available
• Higher success rate
• Known reputation
Disadvantages
• Costs money ($2,500 - $40,000+)
• Still requires time investment
• Website vision
• Feedback/Approval/disapproval process
• Prioritization of project may cost extra

What We DiscussedWebsite Fundaments for CPAs
Your Digital Marketing Strategy
Website Elements
Implementation
Options

Get to Know Raving Software
The right culture makes all the difference
FOCUSED ON
SUPERIOR CLIENT
RELATIONSHIPS
FULL RANGE OF SOFTWARE
DEVELOPMENT LIFECYCLE
(SDLC) EXPERIENCE
EXECUTIVE-LEVEL
EXPERIENCE
PASSIONATE
ABOUT OUR WORK

QUESTIONS?
CONTACT US
BARB HEINLEIN
President / CEO
Raving Software
HTTPS://RAVINGSOFTWARE.COM
P: 410.989.1647
E: barbarah@ravingsoftware.com

Website Design Fundamentals for Effective Digital Marketing

Website Design Fundamentals for Effective Digital Marketing

Recommended

More Related Content

Recently uploaded

Recently uploaded(9)

Featured

Featured(20)

Website Design Fundamentals for Effective Digital Marketing