In the digital age, it is crucial for businesses to establish a strong web presence–one that is accessible, informative, and extends your brand. Web developers Lee-Anne Clark and yours truly, as well as interactive designer Jen Doyle helped business owners identify their website goals and establish information architecture, content layout, and more. We covered core web design principles, locking down a domain name, hosting, and finding the right Content Management Systems for their needs. Read more at: https://isl.co/2017/08/small-biz-big-impact-four-key-steps-to-build-your-brand

1. 641 S ST NW.
Washington, DC 20001
P: +1 202-683-9980
www.isl.co
Developyourwebpresence
J U LY 2 5 , 2 0 1 7
A H A N D Y GU ID E FOR S M A LL B U S IN E S S E S

2. 2
1. Establish Website Goals
2. Determine Key Content
3. Web Design Overview
4. Build Your Site
5. Basic Website Structure
6. Resources
A G E N D A

3. D E V E L O P Y O U R W E B P R E S E N C E
Introduction
3

4. 4
Whymakeawebsite?
R A I S E
AWA R E N E S S
PRO MOTE
EV ENTS
SE LL
PRO DUCTS /
SE RVICE S
C R E D I B I L I T Y
INTRODUCTION
+ many more

5. 5
WHY MAKE A WEBSITE?
Awebsiteshowcasesyourbusiness
totheworld.

6. 6
Whatkindofwebsite
doyouneed?
PO RTFOLI O
INFORMATIONAL
B L O GE-COMME RCE
INTRODUCTION
+ many more

7. 7
STATIC

8. 8
E-COMME RCE

9. 9
B L O G

10. 10
PORTFOLIO

11. D E V E L O P Y O U R W E B P R E S E N C E
Establishwebsitegoals
11

12. • Raiseawarenessofyourproduct,service,ormission
• Sellproductsorservices(i.e.e-commercestore)
• Promoteevents
• Shareknowledgeonatopic(i.e.blogging,thoughtleadership)
• Buildcredibility
12
ESTABLIS H W EBS I TE G OAL S
Whatareyourgoals?

13. • Whatisyourbudget?
• Hireafreelancer-costanywherefrom$2k-$15k
• Doityourself!-roughly$300/yr
BUILDING A WEBSITE IS LIKE BUILDING A HOUSE!
13
ESTABLIS H W EBS I TE G OAL S
Budget:thingstoconsider

14. D E V E L O P Y O U R W E B P R E S E N C E
DetermineKeyContent
14

15. WhattypeofcontentdoIneed?
D E T E R M I N E K E Y C O N T E N T
15
• Textualinformation?
• Images?
• Video?
• SocialMedia?
• Products/Services?
• ContactInformation?

16. Whatdoyouwanttosay?
D E T E R M I N E K E Y C O N T E N T
16
1. Writedowneverythingaboutyourbusiness
2. Trytoorganizeinformationintolistsorpages
3. Lookatcompetitorsitesforinspiration
4. Whatdotheysay?Howdotheysayit?

17. 17
D E T E R M I N E K E Y C O N T E N T

18. D E V E L O P Y O U R W E B P R E S E N C E
WebDesignOverview
18

19. Howtodesignfortheweb?
WEB DESIGN OVERVIEW
19
1. Branding
2. Color
3. Type
4. Photography
5. ResponsiveDesign

20. 20
Branding
• A set of cohesive elements that
visually communicates who you are
and what you represent
• Builds trust, loyalty and recognition
B R A N D I N G

21. 21
Colors
• On the web, we use RGB (0,0,0) and hex values
(#000000) to represent colors.
• Make sure there is enough contrast between
text and background color for web accessibility.
• A color scheme should have a base color, an
accent color and three neutral colors.
B R A N D I N G

22. 22
Type
• Use web safe fonts, and make licensed fonts
available for the developer.
• It’s important to choose a typeface that works
well in multiple sizes and weights to maintain
readability and usability in every size.
• Having the right amount of characters on each
line is key to the readability of your text.
B R A N D I N G

23. 23
Photography
• JPEG for photos
• GIF for animations
• PNG for transparent backgrounds
B R A N D I N G

24. 24
ResponsiveDesign
• A responsive design responds to changing viewport
sizes and is optimized for different devices.
R E S P O N S I V E W E B D E S I G N

25. D E V E L O P Y O U R W E B P R E S E N C E
BuildingYourSite
25

26. WhatdoIneedtogetstarted?
C O R E W E B S I T E E S S E N T I A L S
26
1. DomainName
2. SSL?
3. Favicon
4. WebHosting
5. ContentManagementSystem

27. 27
DomainName
Unique name that identifies the location of
a website. This should be clear, concise,
and communicate your company to
potential visitors.
D O M A I N

28. 28
Breakingitdown
Parts of the url
D O M A I N
Hypertext Transfer Protocol
(Secure)
World Wide Web Domain extensionName

29. 29
SSL
Stands for SecureSocketsLayer.
Necessary if you are collecting personal
information from users, such as names,
emails, addresses, and credit card
information.
SSL CERTIFICATE

30. 30
Favicon
• Favicons are small 16x16 pixel icon files
• Displayed next to the name of your site in an
open tab and in bookmark listings
• Helps user easily and quickly identify your website
• Have a “.ico” extension
FAV I C O N

31. 31
WebHosting
• Websites are hosted, or stored on,
special computers called servers
• Store data & files
• “Serve up” your web pages
• Web hosting allows people to see your
web pages on the internet
WEB HOSTING

32. 32
CMS-Content
ManagementSystem
• Applications that allow users to easily
create and edit digital content without
writing code.
• Typically a “drag-and-drop” interface
• Some include domain registration, web
hosting, SEO
C M S

33. D E V E L O P Y O U R W E B P R E S E N C E
BasicWebsiteStructure
33

34. 1. Navigationmenu
2. CalltoAction
3. Aboutyourbusiness
4. Contactform&contactinfo
5. Socialmedialinks
6. Footer
34
B A S I C W E B S I T E S T R U C T U R E
BasicWebsiteStructure

35. 35
N AV I G AT I O N

36. 36
C A L L TO A C T I O N

37. 37
A B O U T Y O U R B U S I N E S S

38. 38
C O N TA C T F O R M

39. 39
C O N TA C T I N F O

40. 40
TERMS & PRIVACY

41. 41
FOOTER + SOCIAL MEDIA LINKS

42. 1. FAQs
2. Testimonialsfromclients
3. Pressreleases
4. Blog
5. E-Commerceshop
6. Teammembers
7. Hiring?Jobpostings!
42
OTHER THINGS TO CONSIDER

43. D E V E L O P Y O U R W E B P R E S E N C E
SEO
43

44. 44
SearchEngine
Optimization(SEO)
• Strategies to obtain high-ranking placement in
search engine results
• Google, Yahoo, Bing
• Drives free, organic traffic to your site
• Higher rankings more customers
• Many CMS applications have free tools to boost
your site’s visibility on search engines
SEO

45. 45
SEO

46. 46
GOOGLE SEARCH CONSOLE
https://www.youtube.com/watch?v=SoxU5kz15Kc

47. D E V E L O P Y O U R W E B P R E S E N C E
SampleUseCase
47

48. 1. BusinessName-Phodographer
2. Product/Service-Takeprofessionalphotosofdogs
3. Goals-Raiseawarenessofproducts/services
4. Logo-Polaroidofapawprint
5. DomainName-www.phodographer.com
6. CMS-Squarespace
7. KeyContent-Servicedescription,imagegallery,contactform,
pricinginfo48
SAMP LE USE CA SE
Phodographer

49. D E V E L O P Y O U R W E B P R E S E N C E
Resources!
49

50. 50
R E S O U R C E S
Domains/Hosting CMSDesignResources
• Unsplash
• Color Scheme Generator
• Adobe Color CC
• Website Inspiration
• Squarespace
• Google Domains
• Hover
• Hostgator
• Dreamhost
• Flywheel
• Squarespace
• Wordpress
• Wix
• Weebly

51. 51
R E S O U R C E S
Fonts FaviconsFreelancerSites
• Fiverr
• Freelancer
• Upwork
• Google Fonts
• Typekit
• DaFont
• 1001 Fonts
• Real Favicon Generator
• Fav-o-Matic
SSLCertificates SEOStockPhotos
• Unsplash
• Pexels
• Death to Stock Photo
• What is SSL?
• What is a certificate?
• Let’s Encrypt
• What is SEO?
• Beginner’s Guide to SEO
• Squarespace SEO
• Wordpress Yoast Plugin

52. 1. Master Social Media: Next week - same time, same place!
2. Optimize for Success: Tuesday, August 8 6:30-8:30PM
What’snext?!

53. 641 S ST NW.
Washington, DC 20001
P: +1 202-683-9980
www.isl.co
A J. WALTER THOMPSON CO.
Thanks!