Website design is all about the process. From branding, to target audiences, to choosing the right calls-to-action. Also discuss S.E.O., social integration, and promoting your site once it goes live.
Website Design for 2012: Customer Focused Websites
1.
2. Irdc n W o m?
n out —
t io ha I
Michael Flint
Owner, Metropolis Creative in Boston
B.A. in Graphic Design from R.I.T.
I have 3 kids
I like to brew beer and play hockey
3. Irdc n
n out
t io
Metropolis Creative has been helping
companies build brands through web, print
and graphic design for over a decade.
www.metropoliscreative.com
4. T dy G a:
oa’s ols
• Website design is process-based
• Most site improvements can be
made through simple coding and
content changes
• Messaging is key
• We will discuss post-launch
marketing
www.apple.com 2012
5. T in A ot
h k bu :
• How old is your website design?
• Have you been involved in a website
design process?
• How well do you understand Social
Engagement?
• Search Engine Optimization (S.E.O)?
• Responsive Website Design?
www.apple.com 1997
Via http://www.archive.org
6. Poes a e g
rcs Mr t
: k in
A good website design needs a good
process
• Brand rediscovery/definition
• Define your target audience(s)
• Define your messaging (UVP), and prioritize
• Define your CTAs (and prioritize them)
7. Poes it Acit t e D sn
rcs Se r e u & eig
: h cr
Site Mapping
The legend we follow from start to finish
Wire Framing
Placement of elements defining the hierarchy.
Visual design
Transforming the rough wireframes into sleek designs.
8. U it f a a Eoo y we a e
ne o Fir cnm — ir r 1
d r fm
9. U it f a a Eoo y we a e
ne o Fir cnm — ir r 2
d r fm
10. U it f a a Eoo y we a e 2
ne o Fir cnm — ir r r
d r fm
11. U it f a a Eoo y fadsn
ne o Fir cnm — inleig
d r
12. BnfiaI uac G op Se hs
ee l sr e ru - kt e
ic n n c
13. BnfiaI uac G op D sn
ee l sr e ru – eig 1
ic n n
14. BnfiaI uac G op D sn
ee l sr e ru – eig 2
ic n n
15. BnfiaI uac G op F aD sn
ee l sr e ru - inl eig
ic n n
16. Poes oin & ee p et
rcs C d g D vl mn
: o
• Content Management
System
• How often and who will be
updating the site?
• Content types
• Social
• S.E.O.
• Responsive / devices
and screen sizes
17. Poes oin & ee p et
rcs C d g D vl mn
: o
Types of Social Media
Integration
• See my content (direct link to
channel)
• Subscribe to my channel (FB
Like,
Twitter follow, RSS subscribe)
• Engage with me (Retweet, post
a comment)
• List Twitter, Facebook, maybe
a trendy site, and “more”
• Blogs, RSS, and commenting
• Other social tools (Amazon,
google maps, yelp)
18. Poes oin & ee p et
rcs C d g D vl mn
: o
S.E.O.
• What does Google want?
Google wants what you want.
• Keywords are key phrases
• Use them:
• in context
• consistently
• repetitively
• unique per page
19. Poes oin & ee p et
rcs C d g D vl mn
: o
S.E.O. — technical notes
• Domain name
• File names
• Page titles
• Headers
• Page content (and alt-tags)
• Meta Description -->
• Links (in and out) with keywords
20. Poes oin & ee p et
rcs C d g D vl mn
: o
Responsive Website Design
21. Poes ot anh
rcs PsLuc
: -
Put your URL on everything
Use every tool to drive
traffic to your site
• E-blasts & landing pages
• Blogging!
• Social traffic (Yelp, Facebook,
Youtube, Twitter)
• Other places: Partners, paid
placement, etc.
• Use Keywords!
23. C s S d — Srgors agae osl g
a t y pinb a Lnug C nuin
e u d t
24. C s S d — C ra- ir r e
a ty
e u a lW e a
Tk fm
25. C s S d — C ra -Er D sn
a ty
e u a l ay eig
Tk l
26. C s S d — C ra -F aD sn
a ty
e u a l inl eig
Tk
27. Tka as
aewy:
Follow a process!
• Define your goals for your website.
• Review your online brand messaging. Is it
accurate for your targets?
• Do you have a prominent CTA?
• Evaluate your S.E.O.
• Do you have social tools?
• Can you capture leads?
Take a moment and do this with a couple of audience members’ companies.
1.Interview - Through interactions with your key people, we learn about your business and customers and explore your current challenges. 3.Plan - Through research of your industry, we build our knowledge in order to provide you with a plan that goes beyond that of your competitors. Good work begins with good planning. We evaluate project needs - people, technologies, time - and allocate them to ensure a smooth schedule and successful project. 4.Design - You have constant involvement in samples, demos, and revisions, so you get what you want - no surprises. 5.Build - The plans are set, decisions are made, and we know our direction. Now for the heavy lifting as 3000k does its thing. 6.Test - We test, re-test, and then test one more time. We triple check because we want to make you look your best to your customers. 7.Launch - Once you've approved it and we've prepared it, we launch your project, starting your business on the path to growth and greater success.
1.Interview - Through interactions with your key people, we learn about your business and customers and explore your current challenges. 3.Plan - Through research of your industry, we build our knowledge in order to provide you with a plan that goes beyond that of your competitors. Good work begins with good planning. We evaluate project needs - people, technologies, time - and allocate them to ensure a smooth schedule and successful project. 4.Design - You have constant involvement in samples, demos, and revisions, so you get what you want - no surprises. 5.Build - The plans are set, decisions are made, and we know our direction. Now for the heavy lifting as 3000k does its thing. 6.Test - We test, re-test, and then test one more time. We triple check because we want to make you look your best to your customers. 7.Launch - Once you've approved it and we've prepared it, we launch your project, starting your business on the path to growth and greater success.
1.Interview - Through interactions with your key people, we learn about your business and customers and explore your current challenges. 3.Plan - Through research of your industry, we build our knowledge in order to provide you with a plan that goes beyond that of your competitors. Good work begins with good planning. We evaluate project needs - people, technologies, time - and allocate them to ensure a smooth schedule and successful project. 4.Design - You have constant involvement in samples, demos, and revisions, so you get what you want - no surprises. 5.Build - The plans are set, decisions are made, and we know our direction. Now for the heavy lifting as 3000k does its thing. 6.Test - We test, re-test, and then test one more time. We triple check because we want to make you look your best to your customers. 7.Launch - Once you've approved it and we've prepared it, we launch your project, starting your business on the path to growth and greater success.
1.Interview - Through interactions with your key people, we learn about your business and customers and explore your current challenges. 3.Plan - Through research of your industry, we build our knowledge in order to provide you with a plan that goes beyond that of your competitors. Good work begins with good planning. We evaluate project needs - people, technologies, time - and allocate them to ensure a smooth schedule and successful project. 4.Design - You have constant involvement in samples, demos, and revisions, so you get what you want - no surprises. 5.Build - The plans are set, decisions are made, and we know our direction. Now for the heavy lifting as 3000k does its thing. 6.Test - We test, re-test, and then test one more time. We triple check because we want to make you look your best to your customers. 7.Launch - Once you've approved it and we've prepared it, we launch your project, starting your business on the path to growth and greater success.
1.Interview - Through interactions with your key people, we learn about your business and customers and explore your current challenges. 3.Plan - Through research of your industry, we build our knowledge in order to provide you with a plan that goes beyond that of your competitors. Good work begins with good planning. We evaluate project needs - people, technologies, time - and allocate them to ensure a smooth schedule and successful project. 4.Design - You have constant involvement in samples, demos, and revisions, so you get what you want - no surprises. 5.Build - The plans are set, decisions are made, and we know our direction. Now for the heavy lifting as 3000k does its thing. 6.Test - We test, re-test, and then test one more time. We triple check because we want to make you look your best to your customers. 7.Launch - Once you've approved it and we've prepared it, we launch your project, starting your business on the path to growth and greater success.
1.Interview - Through interactions with your key people, we learn about your business and customers and explore your current challenges. 3.Plan - Through research of your industry, we build our knowledge in order to provide you with a plan that goes beyond that of your competitors. Good work begins with good planning. We evaluate project needs - people, technologies, time - and allocate them to ensure a smooth schedule and successful project. 4.Design - You have constant involvement in samples, demos, and revisions, so you get what you want - no surprises. 5.Build - The plans are set, decisions are made, and we know our direction. Now for the heavy lifting as 3000k does its thing. 6.Test - We test, re-test, and then test one more time. We triple check because we want to make you look your best to your customers. 7.Launch - Once you've approved it and we've prepared it, we launch your project, starting your business on the path to growth and greater success.
- Accurate good succinct content. Feature and media rich. Viewed often.
- Accurate good succinct content. Feature and media rich. Viewed often.
Optimize user experience on any device/ screen size.
Brand, Target audiences, funnels! SEO - worked!! Image choices Social semi-integration
Now for a much more complex wireframe process. This design was made around existing site functionality What is the brand? The CTA? The Target audiences?
- Tons of rotating content. Very updatable More upscale cleaner
Redesigned around the concept of lots of content. A daily news site. Tons of content. From multiple sources. Landing pages for search play into the Ad model Target audiences? CTAs?