Website Design Fundamentals for Effective Digital Marketing1. 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
https://ravingsoftware.com
410.989.1647
2. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.2
OverviewRaving Software Presents Website Fundamentals
Your Digital Marketing Strategy
Website Elements
Implementation
Options
4. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.4
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
5. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.5
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
6. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.6
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. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.7
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. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.8
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
10. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.10
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/
12. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.12
• 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
13. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.13
• 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
14. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.14
• 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
21. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.21
• 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
22. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.22
• 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)
23. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.23
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
24. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.24
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
25. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.25
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
34. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.34
• 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
35. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.35
• 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
37. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.37
• 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)
39. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.39
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
40. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.40
Implementation OptionsHow you get there matters
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
41. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.41
Implementation OptionsHow you get there matters
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
42. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.42
OPTION
03 Fiverr, UpWork, Freelancer.com
Freelancer
Implementation OptionsHow you get there matters
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
43. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.43
OPTION
04 Professional web designers and
developers
Hire an Agency
Implementation OptionsHow you get there matters
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
45. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.45
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
46. https://ravingsoftware.com
© 2020 Raving Software. All Rights Reserved.46
QUESTIONS?
CONTACT US
BARB HEINLEIN
President / CEO
Raving Software
HTTPS://RAVINGSOFTWARE.COM
P: 410.989.1647
E: barbarah@ravingsoftware.com