Website Design
Website: Goal and Purpose
5Ss Approach
• Sell: Growing sales e.g., Big Bazaar Direct
• Serve: Provide up to date & Credible information
e.g., makemytrip.com
• Speak: Get closer with customers/stakeholders
• Save: Save costs through original online content
• Sizzle: Through site design/ branding and
promotion
Web Standards
World Wide Web Consortium (W3C)
It checks if the website works on all browsers all
versions
Must in Website Today
Compatibility
• When assessing the technical elements of your site, check website’s cross-browser compatibility
• Use Google Analytics to see the volume of traffic coming in from particular browsers.
• BrowserStack is a highly regarded tool to check browser compatibility.
• Compatibility can be achieved manually by installing the web browsers onto your computer.
Mobile Friendliness
• Google gives greater SERP
preference to websites that are
compatible with mobile
• A responsive design responds to
different sizes of screens
• An alternative to a responsive
website is mobile-specific
website
• Google’s mobile-friendly Test is a
tool to determine if a site is
deemed mobile friendly by search
engines.
Homepage Design
• Conventions
• Visual
hierarchies
• Clearly defined
areas
• What’s
clickable
• Eliminate
distractions
Mobile Design
• Conventions
• Visual
hierarchies
• Clearly defined
areas
• What’s
clickable
• Eliminate
distractions
Web Design
• Structure
• Navigation
• Interaction
• Page layout
STRUCTURE
Structure
Arranging
information
Content Structure
Website Structures
• Simple Linear
• Complex Structures
Different Site Structure
NAVIGATION
Navigation: Too complex..???
How user navigates?
INTERACTION
Ways of Interacting
• Through blogs, case studies, gaming, animations, etc.
+
• Interactive product adviser
• Call back facility
• Chat facility
• Onsite search engine
• Email a friend facility
• Share on social media
• Reviews and Feedbacks
PAGE LAYOUT
Home Page
• It is a central reference point
• Used to highlight special offers, news, etc.
Writing Effective Web Content
• Know your audience
• Make it scan able
• Make it original
More on Writing Effective Web Content
• Shorter sentences, words and paragraphs
• One idea per paragraph
• Simple words and concise text
• Objective language to build credibility, rather than
exaggerated claims or overly promotional words like
"great", "tremendous“, etc.
• Replace text by photographs or videos
• Highlighted text (bold or color, also hyperlinked text)
for scannability
• Meaningful headlines and subheads
Web Page Elements
• Color Scheme
• Buttons
• Images
• Navigation
• Trust Symbols
• Video
• Forms
• Phone Numbers
What matters the most..?
• Personalize the experience: Integration of web
and data base which remembers the
customer’s name, preferences and behaviors
Website Content
• Write fresh content
Web Aesthetics
• Personality of the website
Aesthetics
• Layout
• Typography
• Graphics
• Color
• Style
Typography
• Use a consistent typography
• Arial or verdana tend to work better
Graphics
• 3 second rule: page upload time
Color
Online Value Proposition (OVP)
Customer Orientation
Faceted Search (Filters)
Featuring Best Selling Products
Use of Bundling
Customer Ratings and Reviews
Latest Trends
Less Text
Video or Moving Backgrounds
Richer Content Experience
Hypercolour
Cards/ Titles
Monochromatic Designs
Landing Pages
• Single product
• Multi product
• Lead generation
• Subscription
• Long copy
• Single purpose
Landing Page Type
Landing Page Example 1
Landing Page Example 2
Landing Page Example 3
Landing Page Example 4
Landing Page Example 5
Landing Page Example 6
