![Page 1: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/1.jpg)
@michaelflint
03.20.14
Welcome!
![Page 2: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/2.jpg)
@michaelflint
03.20.14
Introduction
Michael Flint
Owner, Metropolis Creative in Boston
I have 3 kids
I like to brew beer and play hockey
![Page 3: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/3.jpg)
@michaelflint
03.20.14
Website design is process-based
1. Branding and Discovery
2. Architecture
3. Design
4. Technical (coding)
5. SEO and Social
6. Review
![Page 4: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/4.jpg)
@michaelflint
03.20.14
1. Branding and Discovery
All marketing materials tools work together.• Emails• Social channels• Printed materials• Your staff• Your office
![Page 5: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/5.jpg)
@michaelflint
03.20.14
1. Branding and Discovery
• Brand rediscovery/definition• What are you really trying to do?• Define target audience(s) (prioritize them)• Define your messaging for each audience• What is your UVP?• Define your CTAs clearly (and prioritize)• Look at competitors• Define technical functionality• Lastly – what do you like visually?
![Page 6: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/6.jpg)
@michaelflint
03.20.14
2. Architecture: Sitemap
![Page 7: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/7.jpg)
@michaelflint
03.20.14
2. Architecture: Wireframe Sketches
![Page 8: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/8.jpg)
@michaelflint
03.20.14
3. Design
• Set the Brand
• Clean design
• Clear messaging
• Clear calls-to-action
• Great photography
• Use color intentionally
![Page 9: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/9.jpg)
@michaelflint
03.20.14
Before
![Page 11: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/11.jpg)
@michaelflint
03.20.14
Before
![Page 13: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/13.jpg)
@michaelflint
03.20.14
4. Development
• Involve the dev team from day one• Lead with the concept, not the solution• Discovery: include time to determine the best approach early• CMS / platforms to consider• Hosting: which host is right for you?• Other tools / plugins: why reinvent the wheel?• Responsive / mobile • Prototypes & Staging • Content entry: who and how? • Testing, and launch
![Page 14: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/14.jpg)
@michaelflint
03.20.14
Published
![Page 15: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/15.jpg)
@michaelflint
03.20.14
Admin
![Page 16: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/16.jpg)
@michaelflint
03.20.14
5. SEO and Social
• Twitter, Facebook, and “more”• Blogs, RSS, commenting• Other social tools: Pinterest, Google Maps, Yelp
Social Engagement
• See my content: direct link to channel• Subscribe to my channel: like, follow, subscribe• Engage with me: retweet, comment
![Page 17: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/17.jpg)
@michaelflint
03.20.14
5. SEO and Social
S.E.O: Search Engine Optimization
1. What does Google want? Google wants what you want
2. Keywords are key phrases, so use them:
• in context• consistently• repetitively• unique per page
![Page 18: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/18.jpg)
@michaelflint
03.20.14
5. SEO and Social: Key phrases
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
![Page 19: Website Design Presentation at The Hawthorne Hotel 03-20-14](https://reader035.vdocument.in/reader035/viewer/2022081518/548c9ac9b4795961318b45e1/html5/thumbnails/19.jpg)
@michaelflint
03.20.14
Thank you!