The Principles of Website Design

1. The Principles of Website Design

2. Learning Outcomes
• Importance of good website design
• Website Essentials
• UX
• User testing and Analytics tools

3. Why is Website Design Important
for a Business?

4. Why is Website Design Important
• It sets the first impression
Visitors will judge your business within seconds. In these first few seconds, you want to make a
positive impact on your audience
• It is a crucial part of your Search Engine Optimisation (SEO) Strategy
If your on-page SEO fundamentals are not up to scratch, you’ll struggle for visibility from the start
• It sets the impression for customer service
People can judge how you will treat them by looking at your website. If you don’t put any effort
into your website’s design, your audience assumes that you won’t put effort into helping them
• It builds trust with your audience
If they see your poor design or the information looks outdated, they won’t trust your site
• Your competitors are doing it
If you want to remain in competition with them, you must use web design for your site

5. Great site design = More trust = Better conversion

6. Mobilegeddon (2015)
• Google posted this message on the official
Webmaster Central Blog, as they sometimes
do, and explained the update in brief detail
accompanied by a picture to show the
difference between what mobile-friendly
was and wasn’t
• This update provided no grey area. Your
pages were either mobile-friendly, or they
weren’t. There was no in-between.

9. Exercise 1- How Good is Your
Homepage?
• You've got a website. But is your homepage any good?
• How can you improve it?
Complete the quiz and we’ll discuss the results!
https://gillandrews.com/quiz-how-good-is-your-homepage/

10. Website Design Essentials

11. First things first!
Are your visitors in the right place?
• What does your product do? What does your service offer?
• What makes you/your business better or different
• What are the benefits?
• Who is it for? Demographics, lifestyle, online behaviour and what
makes them tick
The most beautiful website will fail to grow your business if it’s aimed to
the wrong audience

12. Every Page Should Include
Relevancy
• Content must be relevant to your target audience
• Content matches the expectations of your visitors based on the link they clicked to get to
your page
• Page content delivers what the title has promised
Clarity
• Clear copy
• Avoid Jargon
• Use short sentences
• Avoid meaningless words “Welcome to our website!” & ‘Click Here’
• Focus on your customers use “you/your” not “I/my”

13. Copy Examples
Self-centred:
X I teach great marketing
X We oversee one project at a time
X These windows are double-glazed
Customer-focused:
✓ Learn how to turn great ideas into great marketing campaigns
✓ As we oversee one project at a time, you’ll have our undivided attention
✓ These double-glazed windows will save you heating costs in winter

14. Clear Design
• What’s important is prominent
• Logically related elements are also visually related
• Clearly defined page areas
• Links visually stand out (anchor text)
• Text doesn’t look like clickable elements
Don’t include all the ‘bells and whistles’. The best design isn’t the most
beautiful, it’s the one that converts the most visitors

15. Add Value
• Put your customers needs first, not your business goals
• Build trust by solving their problems or answering their questions
• Provide tips, hints, how to’s
• Provide unique content based on your expertise
• Research the appropriate content formats
• Add a tool (mortgage calculator) or a special feature (360 degree
tour)

16. Trustworthiness
• Use, like, proper grammar and don’t missspeell nufin (Bing prioritises
error free content)
• Avoid superlatives (“best”, “greatest”, “awesome”, etc.)
• No capitalisation (Exception: Section headings)
• Include trust indicators and evidence any claims, USP’s etc
• HTTPS domain

17. Avoid Distractions
• No auto play of video / audio
• The rule of one
• No elements that are moving on their own
• Reduce number of ads (ideally no ads!)
• Use pop-ups wisely
• Make sure each goal can be reached in 3 clicks
If your website doesn’t get much traffic yet, your interstitial (interruption ads and/or banners) may cost
you more money than they bring in.

18. Minimise Friction
• All pages on you website must be:
• Easy to read
• Unobtrusive background
• Readable font types and sizes
• High contrast between font and background
• Text is well-formatted and scannable
• Headings
• Short paragraphs
• Text highlights (bold, italic, etc.)
• Lists / bullet points

19. Minimise Friction
• Easy to use
• Meet your visitors’ expectations on where to find certain elements and how
to interact with them:
• Make clickable elements look like buttons or visually prominent links
• Non-clickable elements (body text or headings) shouldn’t look like buttons
or links
• Navigation labels and CTA copy should be obvious and understandable

20. Makes Calls to Action Clear, Obvious & Enticing
• Create every page with one action/goal in mind
• Calls to action must be visually prominent
• Calls to action are clear and understandable (fill in the blanks - “I’d like
you to…” or “I’d like to…”)
• Use strong action words (shop, order, reserve, try, get started, claim,
learn more)
• Provoke emotion or enthusiasm

24. Call to Action Examples
Bad:
X More info
X Become a hero
X Evolve with it
Good:
✓ Find out more
✓ Book a free course
✓ Register for this webinar

25. What Must a Homepage Include?
•A clear website tagline and a paragraph of text (if necessary) that explains:
• Who are you?
• What do you do?
• Why should your visitors care about your busienss?
• What’s the benefit (to your visitor)?
Does your tag line explain your business to a stranger? Would you
personally use those words to explain your business to a prospect?

28. Navigation
• Plan your navigation and prioritise important pages
• Stick to conventions - no more than 7 navigation labels
• Positioned as your website visitors expect it (one row at the top of the page)
• Link the logo back to the homepage
• Mouse pointer changes on clickable links
• Label your menu clearly and be descriptive
• Add a search bar
• Ensure visitors can reach any page from any page
Navigation is the last place you should try to be creative. Your visitors won’t read
it. They’ll scan it for familiar labels. Anything that is unclear or requires them to
pause and think will cause irritation or will be overlooked

30. Other Homepage Musts
• Photo of yourself or your team
• A paragraph about yourself / your team
• Call to action (you can have multiple calls to action)
• Logo
• Search box
• Social proof e.g. Credible client testimonials, Client logos, Certifications &
Awards
• Smart Footer e.g. Copyright, Navigation to main pages, Privacy policy,
Terms of use, Contact, Postal address / link to a map etc (Just select the
most relevant for your business).
• Featured posts & Videos
• Social media links
• Prominent phone number and email address

31. About Page
• Useful and informative
• Your photo or a photo of your team
• A short personal introduction that shows you as. likable, relatable &
approachable
• Your mission - what problems do you solve and for whom?
• Credibility enhancers, such as, qualifications, awards, features in famous
publications & client testimonials
• Examples of your work
• A clear Call To Action

33. Service Pages
• Short description of what you offer and for whom
• Featured services (one section for every service):
• Service title
• Brief service description
• Link to the corresponding page in a form of a call to action
• Credibility enhancers
• Client logos
• Credible client testimonials
• Link to your contact page
Create a dedicated page for each major service you provide. This will
help you rank better for the relevant keywords.

35. Service Pages
Unique value proposition
• What is it?
• Service title
• Whom is it for?
What’s the benefit?
• Expose reader’s need
• Demonstrate importance
• Tell what’s in for them
• Focus on benefits, not features
• Tell them what makes your offer unique
Slack – Be More Productive at Work with Less Effort

36. Service Pages
•Earning trust
• Add a short description of your process (what happens next)
• Answer frequently asked questions
• Address and remove possible objections
•Credibility Enhancers
•Call to Action
•Link to contact page or embedded contact form (minimal fields)
You must show your prospects that you are the right person to solve their
problems. Make your them feel comfortable to contact you by keeping the
conversational tone and anticipating their questions.

37. What makes a website credible?

38. Service Pages
• Try to avoid drop-down menu in the navigation
• Users tend to skip top-level navigation labels if there is a drop-down menu
• Users find drop down menus irritating and confusing
• Drop-down menus don’t work on certain devices
• Drop downs encourage visitors to skip important top-level pages.
• They can hide information
• They can affect SEO

39. Alternatives to Drop Downs
• Create a main Services page that features separate services on it and link to
the corresponding pages Link only to your main Services page from the top
navigation without a drop-down menu
• If you offer only a few services, you can omit the main Services page and
link directly to the single services from your top navigation.
• Consider sticky menu’s or scroll panels

40. Blog Pages
• Links to your blog posts (internally link blogs from the same topic cluster)
• Enticing titles relevant to your target audience
• Only a short snippet of the posts’ text
• Add a paragraph of what to expect on your blog
• Feature several categories above the fold to increase the chances of your
readers to find a topic they are interested in
• A short paragraph about your blog’s focus, featured categories, featured
blog posts, etc

42. Blog Posts – Step by Step
• Step 1: Plan your blog post by choosing a topic, creating an outline, conducting
research, and checking facts.
• Step 2: Craft a headline that is both informative and will capture readers’
attentions.
• Step 3: Write your post (minimum of 300 words, however studies show long
blogs (1500+ words) rank more easily
• Step 4: Use images to enhance your post, improve its flow, add humour, and
explain complex topics (also think video, infographics, diagrams, charts, tables
etc)
• Step 5: Edit your blog post. Make sure to avoid repetition, read your post aloud
to check its flow, have someone else read it and provide feedback, keep
sentences and paragraphs short, don’t be a perfectionist, don’t be afraid to cut
out text or adapt your writing last minute.

43. Blog Posts
Engaging Content
• Keep the promise of the tagline
• Grab readers’ attention from the first sentence
• Use cliff-hangers to keep them reading
• Get to the point quickly
• Use short sentences
• Use words anyone will understand
• Optimise for SEO

44. Blog Posts
Choose the right format
• Break content in sections with headings and subheadings Use font big
enough to make it easy to read (also on mobile)
• Use short paragraphs
• Use enough white space
• Use bold and italic highlights wisely
• Use visuals – images, videos, charts, graphs etc
• Bullet points
• Internal & External Links to related content

46. Search Engine Optimisation
• Target medium & long-tail keywords
• Use words that are semantically related to the main keyword
• Use keyword in
• URL
• Meta title
• Meta description
• Beginning of the text
• Throughout the text where it sounds natural to do so
• H1 Header and H2 Subheadings
• Images (file names, image titles & ALT tags)
• Add internal links & calls to action
Apply this process to every
page you want to be found
in search

47. • Se
•Earning

48. A very high % of keywords lie in what’s called the ‘long-tail’ of search. The long tail
contains hundreds of millions of unique searches that might be conducted a few
times in any given day, but, when taken together, they comprise the majority of the
world’s demand for information through search engines.

51. Blog Posts
Blog Authors Biography:
• Create a separate Bio URL and link all blog posts to it (Medic 2018)
• Keep the Bio Short and Concise
• Include Information on Job Title and Function
• Include Your Experience
• Highlight Expertise & Trustworthiness
• Include Social Media Profiles
• Include a Good Photo
• Inject Your Personality

52. Contact Page
Must haves:
• A photo of you/the team
• A friendly paragraph explaining why prospects should contact you and how
you’ll solve their problem
• Mention how long it usually takes you to respond to inquiries
• Use contact form instead/or along with an email
The advantages of a contact form:
• Ask for particular information
• Track submissions
• Reduce the number of spam emails
• Add a “thank you” page (conversion tracking)
Link to your contact page from
your main navigation, service
pages & footer

54. Testimonial Pages
• Short and direct
• Believable
• Full names and, if possible, headshots of the clients
• Specific enough to sound authentic
• Backs up your claims
• Reinforces your USP
• If possible, includes the keyword you’ve optimised the page for

56. FAQ’s
• Use service data to identify your most common questions
• Make is easy to navigate
• Make it scannable (headings, lists, highlights, spacing, follow conventions)
• Most asked questions come first
• Avoid duplication of content
• Answers are succinct and to the point
• Link to contact page
In addition, think about which questions visitors may ask when on certain
pages and add them in so visitors don’t have to leave the page to get an
answer to a question.

57. UX

58. What is UX and why is it important?
The user experience (UX) is what a user of a particular product experiences
when using that product. A UX designer's job is thus to create a product that
provides the best possible user experience.
UX ENSURES USERS FIND VALUE IN WHAT YOU ARE PROVIDING TO THEM

59. The 7 factors that influence UX
USEFUL: should be original and
fulfil the need of the user
VALUABLE: the website must offer and
deliver value to the customer by solving a
problem and providing solutions to it
USABLE: easy and enjoyable to
use, effective (goal completion)
and efficient (speed)
FINDABLE: the website must be
easy to find and so must its
content – SEO + organised
sections
CREDIBLE: the user must be able to trust and believe
that what you are telling them is true – give your
users a reason to stay and not leave after a few
clicks
DESIRABLE: UX makes sure all
the visual components come
together to make the website
desirable
ACCESSIBLE: to everybody
regardless of disabilities

60. Empathise – with your users
Define – your users’ needs, their problem, and your insights
Ideate – by challenging assumptions and creating ideas for innovative solutions
Prototype – to start creating solutions
Test – solutions

61. • Who is our main user and what do they want?
• Are we using data to back up our assumptions or is it a subjective
feeling?
• Have we collected enough evidence to validate our idea of our target
market?
RESEARCH your CORE DEMOGRAPHICS
DEVELOP a basic understanding of your USER BASE
Empathise

62. Fictitious person representative of your target market based on the data
and information you have collected - not imaginary people
Create Your User Persona
• What are the users going to do when we they first approach our
website?
• When will these users most likely use our website?
• What goal will our users like to accomplish on this page/through this
flow?
• What would make their user experience better?

63. Ideate
WIREFRAMES are the rough guide of any website. Void of any visual element
they are only about structure, hierarchy, content and leading the users where
you want them to go.
• What’s the page content (picture, text, video…)?
• How do you link the different sections?
• Where do you go from each page?
• What comes first and where are the hyperlinks?
FREE WIREFRAME TOOLS

64. Prototype
• UX COPY focus is on trying to get things done quickly and efficiently, it is
not about the feel and tone of the brand.
• Does this motivate the user to accomplish their goal and is their goal our
goal?
• Is the bigger text more important than the smaller, why?
• Does this copy inform the user enough or does it assume a certain level of
prior knowledge?
• Is it clear, direct, functional?
• Does it work?

65. •

66. Journey Mapping
• Once you’ve created a detailed buyer persona to help guide your website’s
content, messaging, and design, what is the next step?
• Think about your buyer persona’s relationship to your website, and how they
engage with it before, during, and after they become a customer.
• It’s important to identify the key interactions at each stage, and pinpoint
what the user is feeling, what questions they may have, and what motivates
them.
• Many customer journey maps depict this information via an infographic or
diagram for easy visualisation

68. User Testing
• It’s hard to evaluate your own website because you already know how it’s
supposed to work.
• Find a few friends or volunteers willing to help you out. Don’t worry too
much about finding the “perfect” tester. Since you’re testing universal
website behaviour, almost anyone will do.
• Give the tester a specific task to achieve on your website, then see what
they do. Ask them to narrate out loud as they click so that you can
understand their thought process.
• Keep your tasks open-ended. No hints! For example, instead of saying “Use
the navigation bar to find the ‘Contact Me’ page,” say, “If you wanted to get
in touch with me, what would you do?”
• Apply lessons from the test to your website. If the tester encounters a
problem, use this information to improve the design of your website.

69. User Testing and Analytics

70. Website Analytics
• Web analytics is the measurement, collection, analysis, and reporting of web
data to understand and optimize web usage.
• Web analytics is not just a process for measuring web traffic but can be used
as a tool for business and market research and assess and improve website
effectiveness.

71. Thank you
Please complete the feedback form for this course using
the QR code or this link.
https://forms.office.com/r/6G0cgGKLA1