Module 4: Design Basics
Good design isn't about being artistic — it's about being readable and easy to use on a phone. This module covers the three design skills that matter for a business site: type and color, mobile-first layout, and keeping images fast.
Typography and Color That Read Well
Readability is the entire job of typography on a business site. Use one font family for headings and one for body text — two maximum, and they should come from the same family or a classic pairing (your builder or theme's defaults are honestly fine). Body text should be at least 16 pixels on desktop and never smaller than it needs to be on phones; line spacing around 1.5 makes paragraphs breathable. If a visitor squints, you've lost them — size up before you style up.
For color, pick one primary brand color and one accent for buttons and links. Your body text should be very dark gray or black on a white or near-white background — that combination has the highest readability ever measured, and there's no reason to get creative with it. Check your color contrast with a free contrast checker (search "WCAG contrast checker" — you want a ratio of at least 4.5:1 for body text). Light gray text on a white background fails this test constantly, and it's the most common readability sin on small business sites.
Restraint
Two fonts, readable always
Build brief
Describe the feeling you want a visitor to have in the first five seconds on your site — then name one brand color and one font pairing that creates it.
Saved
Mobile-First Layout
Over 60% of web traffic in the US is on phones, and for local businesses it's often 70% or more. "Mobile-first" means you design the phone layout first and let the desktop version be the expanded one — not the other way around. In practice: build your page in a single column, big tap targets (buttons at least 44 pixels tall), and text that wraps without horizontal scrolling. Then check the desktop view, which mostly means the single column gets wider and some sections sit side by side.
Common mobile failures to fix before launch: text that runs off the screen edge, popups that cover the whole screen with no visible close button, forms with tiny fields, and navigation menus that require precise tapping. Also watch your header: on phones it should shrink to a logo plus a menu icon — a full desktop navigation bar crammed onto a 375-pixel screen is unreadable. When in doubt, simplify the phone view; nobody on a phone ever complained that a page was too clean.
Phone-first
Design the phone layout first
Build brief
What is the single most important action a visitor takes on their phone, and could it be done with one thumb on your current plan?
Saved
Images and Media Without Bloat
Images are the number one cause of slow business websites, and slow sites lose visitors — a page that takes over three seconds to load measurably drops conversions. The fix is boring and effective: resize every image to the largest size it will actually display (a photo shown at 800 pixels wide should not be a 4,000-pixel file), and compress it before uploading. Free tools like TinyPNG or Squoosh can shrink a photo by 70% with no visible difference. Aim for each image under 200 kilobytes; your whole homepage should stay under about 2 megabytes total.
Use the right format: JPEG for photos, PNG only when you need transparency (logos, icons), and WebP when your builder or host supports it (it's 25–35% smaller than JPEG for the same quality). Never upload a photo straight from your phone or camera — those files are 3–8 megabytes each and will crush your load time. Rename files descriptively before uploading ("marlowe-bakery-storefront.jpg" instead of "IMG_4829.jpg") — it takes five seconds and helps search engines understand your images.
The limit
Three seconds
Image checklist — run every image through this before uploading:
☐ Resized to max display width (usually 1200–1600px)
☐ Compressed (under 200KB for photos, under 100KB for graphics)
☐ Right format: JPG for photos, PNG for logos, WebP if your builder supports it
☐ Descriptive filename (marlowe-emergency-plumber.jpg, not IMG_4829.jpg)
☐ Alt text describing the image
Uploading 4MB photos straight from your phone. Images are the number one cause of slow business websites, and every extra second of load time measurably drops conversions. Resize before you upload — always.
Build brief
List the images your site needs — hero, team, work samples. Which ones do you already have, and which would need to be shot or created?
Saved
Run your homepage through PageSpeed Insights (pagespeed.web.dev — free) and write down your mobile score. If it's under 50, your images are the first suspect.
Before uploading a photo from your phone to your website, what should you do first?