SlideShare a Scribd company logo
1 of 64
Designing & building
  great websites
     www.designbystructure.com
Designing & building
  great websites
     www.designbystructure.com



                   For people who want
                   to produce outstanding
                   websites but don’t
                   know how
Its easy to get confused
about designing and
building websites
People talk in riddles...
                             CMS
               PHP
 Taxonomy
                              Mashup
                MySQL
    .NET
                             Ruby on
XHMTL         Web            Rails
              2.0
Not sure...
which direction
to take?
...how long it
will take?
...what the
process is?
...or what you
may need to do?
Ever felt a
bit like this?
Don’t worry
Here are a few
steps you can
follow to make
sure you get
it right
Chapter 1


            Planning
             makes
             perfect
            www.designbystructure.com
Think about
who will use the
website and
their needs
I want to buy
that product
I’ve just arrived
from Google-
what do you
do, can you
help me?
I just want your
phone number.
I hope its easy
to find
People choose
different ways
to get to their
destination
Website users
are the same
Produce a sitemap so
you know how content
will be organised &
how people will find
what they need
Sketch out pages to
show where specific
functions and content
will go
Check what you’ve
come up will work for
your audience
Chapter 2

           Make it
         look great
             &
        Easy to use
            www.designbystructure.com
There are lots of
reasons websites
disappoint their
users
“my website                  “it looks
 doesn’t look
 as good as my                really
 printed materials”           functional”


                      “it looks
                      really           “my online
                      boring”          sales aren’t
                                       all that great”

“i can never
find what i'm                “its really
looking for”                 hard to
                             navigate”
Mostly its because
the wrong people
were hired to
design them
BEWARE
design companies
who do software &
software companies
who do design
When someone
engages with your
website they are
engaging with
your brand
First
impressions
count!
Your website
should deliver a
great experience
for its users
Make sure people
feel like they are
in the right place
Now you’ve got
their attention
make it easy to
find stuff
Make sure the
visual language &
behaviour of your
site is consistent
If you want
a customer to
do something
make it         Checkout
obvious
Great design = credibility
  Credibility = success
Chapter 3


       Talk about it
        Managing a web
           project
            www.designbystructure.com
People you work
with probably have
a strong opinion
about the website
you are building
                     ****!

           ****!
****!                  ****!
Some want you to
stick a big button
on the homepage
promoting what
they do
                          ME
         ME
 ME                  ME
You might be irritated,
you should definitely be

worried
Your website is
in danger
Design by committee
does not work




              X
Take control
Engage people you
work with early in
the process
A bit of pain at the
start will save a
whole world of
pain later on :-)
Chapter 4


       Building your
         website
            Don’t re-invent
              the wheel
            www.designbystructure.com
Don’t be a
guinea pig
(unless you have very
deep pockets)
Don’t get
seduced by
“sexy”
technology
Find some existing
 web software you
 can build on
                  Open
Proprietary       Source
Licensed
Make sure it ticks the
boxes for accessibility
and web best practice
Find some
people like you
that use it
Have a
chat with
them
Check it meets
your main
requirements
Make sure you
can customise
it to do exactly
what you want
Don’t over
complicate it
Break the project up into small
bits. Launch something sooner
rather than later
Make sure it
works before
launch!!
Don’t forget
The journalist who’s reviewing
your site probably uses a
nice shiny Mac
Chapter 5


        Get found
        in Google
        AKA Search Engine
        Optimisation (SEO)
            www.designbystructure.com
SEO has nothing
to do with Wizards
or Black Magic
SEO has nothing
to do with putting
loads of stuff on
your website
Relax. SEO is all
about common
sense
Ask questions.
Research the terms people
use to search for the products
or services you have?




         “Settee”                “Couch”


                      “Sofa”
Put these terms
in the right place
on your website
Make sure your
site has relevant
content

Classic sofa /
settee Upholstered   Comfortable
in black velvet      couch / sofa
                     Upholstered
                     in red cloth
Because you chose SEO
friendly software, search
engines will be able to
find you
To get higher up
the rankings you
need votes
A hyperlink from
another website
to your site counts
as a vote
High rankings
take time & effort
Be patient. Check
rankings, tweak content.
Build inward links.
If you want to talk to someone
that speaks your language
get in touch

         Design by Structure Ltd
         Unit 34 Jack’s Place
         6 Corbet Place
         London E1 6NN

         t| 020 7247 2788
         m| 07976 539 082

         john@designbystructure.com
         www.twitter.com/dbstructure
         www.designbystructure.com


                                   Free download:

More Related Content

Recently uploaded

How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 

Recently uploaded (18)

How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 

Web design: How to design and build great websites