SlideShare ist ein Scribd-Unternehmen logo
1 von 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:

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
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
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
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
 
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
 
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
 
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
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
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
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
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
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 

Kürzlich hochgeladen (19)

Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
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...
 
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
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
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
 
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
 
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
 
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
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
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
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
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
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 

Web design: How to design and build great websites