Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Visual Design with Data
Next
Download to read offline and view in fullscreen.

3

Share

Download to read offline

The 3-Hour Website

Download to read offline

Build a Squarespace Website in 3 Hours

Related Books

Free with a 30 day trial from Scribd

See all

The 3-Hour Website

  1. 1. Seth Familian Founder + Principal, Familian&1 THE 3-HOUR
 WEBSITE
  2. 2. SETH FAMILIAN, FOUNDER + PRINCIPAL, FAMILIAN&1 A BIT ABOUT ME 2 BUSINESS STRATEGY GROWTH HACKING PRODUCT MANAGEMENT WEB PRESENCE TEACHING + EDUCATION PROCRAFTINATION
  3. 3. MY 7-YEAR PLATFORM JOURNEY 3 2015-Present2009-2011 + OR 2012-2014 + OR Secure · Intuitive Elegant · Affordable Customizable · FAST
  4. 4. MY SQUARESPACE PORTFOLIO (SO FAR) 4
  5. 5. LET’S BUILD A SITE IN 3 HOURS! 5 ‣ Start with goals + structure ‣ Identify your content + assets ‣ Setup Squarespace basics ‣ Create + populate site pages ‣ Finalize + publish
  6. 6. THE 3-HOUR WEBSITE GOALS + STRUCTURE 6
  7. 7. GOALS + STRUCTURE DEFINE YOUR GOALS 7 ‣ 1-3 per website ‣ Verb + noun structure ‣ Clear + outcome-oriented ‣ What are your 3 goals? E.G. 
 “INFORM POTENTIAL CLIENTS”
 “GENERATE NEW EMAIL LIST SIGNUPS” “CAPTURE NEW LEADS”
  8. 8. GOALS + STRUCTURE IDENTIFY CONTENT TYPES 8 ‣ 2-4 per website ‣ Each drives a page or section ‣ Driven by EXISTING assets ‣ What are your content types? - ARTICLES/BLOG POSTS - IMAGE COLLECTIONS - EMBEDDED VIDEOS/PRESENTATIONS - "ABOUT” / STATIC PAGES - CALENDAR(S) OF EVENTS - CONTACT/INQUIRY FORMS - PRODUCTS TO PURCHASE
  9. 9. DEFINE YOUR ARCHITECTURE GOALS + STRUCTURE 9
  10. 10. GOALS + STRUCTURE 10 DEFINE YOUR ARCHITECTURE
  11. 11. GOALS + STRUCTURE 11 DEFINE YOUR ARCHITECTURE
  12. 12. GOALS + STRUCTURE DEFINE YOUR ARCHITECTURE 12
  13. 13. GOALS + STRUCTURE DEFINE YOUR ARCHITECTURE 13
  14. 14. GOALS + STRUCTURE CREATING AN 
 ARCHITECTURE 14 Current Exhibits Gallery Events Gallery Directory Private Events Leasing Space Bergamot History Contact Us Join Email List Google Map Follow on FB, etc. 1. LIST CONTENT ON POST-ITS
  15. 15. GOALS + STRUCTURE 15 2. GROUP POST-ITS 
 INTO 3-5 ITEMS 
 + A FOOTER Current Exhibits On View Gallery Events Events Gallery Directory Explore Google Map Visit Private Events Leasing Space Bergamot History Contact Us Learn More 1. LIST CONTENT ON POST-ITS Follow on FB, etc.Join Email List Site Footer CREATING AN 
 ARCHITECTURE
  16. 16. GOALS + STRUCTURE CREATING AN 
 ARCHITECTURE 16 1. LIST CONTENT 
 IN A TRELLO LIST
  17. 17. GOALS + STRUCTURE 17 2. GROUP CONTENT INTO NAV LISTS 1. LIST CONTENT 
 IN A TRELLO LIST CREATING AN 
 ARCHITECTURE
  18. 18. GOALS + STRUCTURE 18 COMMON QUESTIONS ‣ Can I have more than 5 nav items? ‣ What about dropdown menus? ‣ How do I plan for future site sections? ‣ What about hidden site pages?
  19. 19. THE 3-HOUR WEBSITE CONTENT + ASSETS 19 - WHAT ASSETS DO YOU HAVE? - WHERE ARE THEY LOCATED? - SELECTING A URL - DEFINING YOUR LOGO + COLORS
  20. 20. CONTENT + ASSETS EVALUATE YOUR CONTENT 20 - ARTICLES/BLOG POSTS - IMAGE COLLECTIONS - EMBEDDED VIDEOS/PRESENTATIONS - "ABOUT” / STATIC PAGES - CALENDAR(S) OF EVENTS - CONTACT/INQUIRY FORMS - PRODUCTS TO PURCHASE ‣ How many of each type? ‣ How are they categorized? ‣ Where are they located today? ‣ How do they SCALE over time?
  21. 21. ‣ Arrange files into Nav-based folders ‣ Title files intuitively! ‣ Create a site content outline ‣ Capture urls for embedded files CONTENT + ASSETS ORGANIZE YOUR CONTENT 21
  22. 22. ‣ Logo on a transparent background ‣ Pick Title, Text & Background colors ‣ Get HEX codes for each color CONTENT + ASSETS DEFINE YOUR BRAND ASSETS 22 coolors.co withoomph.com
  23. 23. CONTENT + ASSETS PUT EVERYTHING IN TRELLO! 23
  24. 24. VISUAL DESIGN WITH DATA BREAK TIME! 24 ‣ Stretch your legs ‣ Hydrate or grab a snack ‣ We’ll start again in 15 mins!
  25. 25. THE 3-HOUR WEBSITE SQUARESPACE BASICS 25 - ACCOUNT SETUP - TEMPLATE SELECTION - LOGO + BASIC COLORS
  26. 26. SQUARESPACE BASICS SET YOUR LOGO + TITLE 26
  27. 27. SQUARESPACE BASICS SET YOUR STYLES 27
  28. 28. SQUARESPACE BASICS EDIT YOUR SUBDOMAIN 28
  29. 29. THE 3-HOUR WEBSITE POPULATE SITE PAGES 29 ✓ IMAGE GALLERIES ✓ SUMMARY BLOCKS ✓ ARTICLES/BLOG POSTS ✓ CALENDAR(S) OF EVENTS ✓ STATIC PAGES ✓ COLUMNS + LAYOUTS ✓ EMBEDDED CONTENT ✓ CONTACT/INQUIRY FORMS
  30. 30. THE 3-HOUR WEBSITE FINALIZE + PUBLISH 30 ✓ TEST FORMS ✓ TEST ALL CLICKS ✓ CONNECT SOCIAL ACCOUNTS ✓ MIGRATE YOUR A-RECORDS (NAMECHEAP!) ✓ /SITEMAP.XML » GOOGLE WEBMASTER TOOLS ✓ WAIT + FINAL TEST BEFORE TELLING THE WORLD
  31. 31. DISCUSSION TIME VISUAL DESIGN WITH DATA 31 QUESTIONS · FEEDBACK · IDEAS · INSIGHTS
  32. 32. BUT MOST IMPORTANTLY… HAVE FUN! 32
  33. 33. THANK YOU KEEP IN TOUCH! 33 SETH@FAMILIAN1.COM · @SETHFAM1
  • AmandaFryer4

    Jul. 11, 2018
  • KangwonSong

    May. 22, 2017
  • ChristosXidias

    May. 10, 2017

Build a Squarespace Website in 3 Hours

Views

Total views

1,627

On Slideshare

0

From embeds

0

Number of embeds

75

Actions

Downloads

70

Shares

0

Comments

0

Likes

3

×