Course Overview
Website 101: Plan, Design & Launch a Website That Works
A practical, no-fluff grounding in what makes a website actually work β for beginners, small business owners, and marketers who need the strategy and craft, not a coding course.
π Instructor's Note: Work through the five modules in order β planning before design, design before launch is the biggest lesson in the whole course. Each module includes free resources, a hands-on task, and a short quiz. Pass the quiz to mark a module complete.
What You'll Be Able to Do After This Course
- Explain the three jobs a website has to do β build credibility, inform, and convert
- Plan a site properly: a feature list, a sitemap, and page templates, before any design work starts
- Apply research-backed design principles for layout, images, navigation, and writing
- Build a homepage that says what you do, for whom, and gets visitors to act
- Run a proper pre-launch and post-launch checklist so nothing gets missed
Further Reading
π° Blog
Orbit Media Blog
The research-backed source behind most of this course's design guidance.
β orbitmedia.com/blog
Foundations
Module 1: Why Your Website Matters
Before touching colors or fonts, get clear on the job your website is actually doing.
The Lesson
1
Websites have three jobs
Build credibility, inform, and convert. A visitor decides in seconds whether you're worth trusting β and if a page isn't doing at least one of these three things, it probably shouldn't exist.
2
Credibility comes first
Before a visitor reads a word of copy, they're already judging whether you're legitimate. Design quality and polish are doing that work whether you intend them to or not.
3
Design mobile-first
More than half of all web traffic is mobile. Design and test on a phone screen first, then scale up to desktop β not the other way around.
4
Speed is not optional
A slow page loses visitors before they ever see your design work. Every extra second of load time measurably reduces conversions.
5
Run the 5-second test
Show your homepage to a stranger for five seconds. If they can't say what you do and who it's for, that's the first thing to fix.
Further Reading
π In This Course
25 Strategies for a Great Website
A whole extra module distilling Orbit Media's most-read design article β save it for after Module 5.
β Go to Module 6
Hands-On Task
- 1 Open your current website (or a competitor's) on your phone. Time how long it takes to understand what they do and who it's for. Write down the number of seconds.
- 2 Run your homepage through Google PageSpeed Insights and note your mobile score.
- 3 Write down the single action you most want a visitor to take on your site.
π‘ Instructor Tip: Your website is the only part of your business that works 24 hours a day and never takes a day off. Treat every page as a stand-in for a real conversation β if it wouldn't hold up on a sales call, it needs work.
Foundations
Module 2: Planning Before You Design
The biggest, most expensive website mistakes happen before a single pixel is designed β they happen when planning gets skipped.
The Lesson
1
Think in verbs, not pages
List what a visitor will do: sign up, book, search, buy. Each verb becomes a feature requirement before it ever becomes a page.
2
Capture the invisible requirements
SEO, accessibility, ease of future updates, printability. None of these show up on a mockup, but all of them shape the build.
3
Build a page list
Every page you'll need, including the unglamorous ones: thank-you pages, a 404, a privacy policy.
4
Turn the list into a sitemap
Outline the pages into a hierarchy, then a flowchart showing how visitors move between them. That flowchart is your sitemap.
5
Group pages into templates
A blog template, a service-page template. Don't design every page from scratch.
6
Get feedback before you build
Show the plan to a few real prospective visitors. Cheap feedback now beats an expensive redesign later.
7
Be patient with the boring part
Outlines and flowcharts feel slow compared to opening a design tool. But for anything beyond a simple brochure site, this planning is what makes the visual design phase go fast instead of getting redone three times.
Further Reading
π Article
How to Plan a Website: Part I
Building a features list and general requirements before anything else.
β orbitmedia.com
π Article
How to Plan a Website: Part II
Turning your page list into an outline, a sitemap, and reusable templates.
β orbitmedia.com
Hands-On Task
- 1 Write your feature list as verbs (aim for 10+).
- 2 Turn your page list into an outline, then a flowchart β that's your sitemap.
- 3 Group your planned pages into no more than 4 templates. Can't group them? Your site is more complex than it needs to be β or your templates aren't defined yet.
π‘ Instructor Tip: Resist the urge to open a design tool at this stage. A messy outline on paper beats a beautiful mockup built on the wrong structure β fix the structure first.
Design
Module 3: Design Principles That Convert
Good web design isn't taste β most of it is testable. Four areas that matter most for a first website.
The Lesson
1
Build a visual hierarchy
Use size, color, and contrast so the most important thing on the page is also the most obvious.
2
Put a real headline above the fold
A visitor should understand what you do within seconds, without scrolling.
3
Skip carousels, tabs, and accordions
Most visitors scan, not click. Content hidden behind them is often never seen at all.
4
Use real photos of real people
Authentic photos of your actual team or product outperform generic stock imagery.
5
Make CTAs a distinct color
And repeat them where visitor interest peaks, not just once at the top.
6
Keep navigation specific and light
Use precise labels, limit off-ramp links on converting pages, and move social icons to the footer.
7
Stick to standard layouts
Logo top-left, navigation across the top. Familiar reads as trustworthy, not boring β this isn't the place to get experimental.
8
Avoid "false bottoms"
Be deliberate with background color changes between sections. An accidental color break can make a visitor think they've hit the end of the page β and stop scrolling before they see the rest.
9
Use arrows as visual cues too
A simple arrow pointed at your CTA or headline is a low-cost, effective way to direct attention β sometimes it outperforms a photo of a face.
10
Put "Home" on the left of your navigation
Where the rest of your menu items sit barely affects results, but visitors expect Home on the left β don't move it just to be different.
Further Reading
π Article
27 Research-Backed Web Design Tips
The full list this module's Key Concepts are drawn from β layout, images, navigation, and writing.
β orbitmedia.com
Hands-On Task
- 1 Audit your homepage against the four Key Concepts above.
- 2 Fix the three items with the biggest gap first β don't try to fix all 27 factors from the full guide at once.
- 3 Check where your CTAs are placed. Are they only at the top?
π‘ Instructor Tip: None of this is about personal taste. Every principle here is backed by conversion testing β when a design decision and a data point disagree, trust the data.
Content
Module 4: Homepage & Content Essentials
Your homepage carries more traffic and more assumptions than any other page.
The Lesson
1
Pass the "backyard BBQ test"
Your headline should say what you do and who it's for in about 6β10 words β clearly enough that you could say it out loud to a neighbor at a backyard barbecue and they'd get it immediately.
2
Pick one primary call-to-action
Multiple CTAs competing for attention dilute the page. Choose the one action that matters most.
3
Show proof, but skip the slider
Put testimonials near the copy they support, with a face or name attached where you can. Avoid a testimonial carousel β on average, only about 5% of visitors ever click to see a second slide.
4
Write meaningful subheads
A subhead like "Our Services" wastes both a reader's attention and a keyword opportunity. Describe the actual benefit instead.
5
Cut what doesn't earn its place
Auto-play media, walls of text, insider jargon, and pop-ups. If it doesn't help a visitor, remove it.
6
Write for scanners
Front-load value in headlines and subheads so a skimmed version still makes sense.
7
Use the serial position effect
People remember what's first and last in a list best. Put your strongest points there.
8
Answer top questions, directly
Address the objections and questions visitors already have, right in the copy. One case study saw a 30% lift in conversions from simply answering every common question up front instead of making people ask.
9
Be honest about scarcity
If something really is limited β availability, time, spots β say so; genuine scarcity triggers real loss aversion. Don't manufacture fake urgency, visitors can tell.
10
Make signup forms earn the click
The 3 P's: Prominence (make it visible), Promise (say exactly what they get), Proof (subscriber numbers or a testimonial). A form missing any one of the three converts worse.
Further Reading
π Article
Homepage Best Practices: 20 Things to Add (and 5 to Remove)
A practical checklist for what belongs on a homepage β and what to cut.
β orbitmedia.com
π Article
What Makes a Great Website? 25 Effective Strategies
Cleanly designed, uncrowded pages that deliberately guide the visitor's eye path.
β orbitmedia.com
Hands-On Task
- 1 Write your homepage headline in one sentence, without your company name.
- 2 List what belongs and what should be removed from your current homepage.
- 3 Rewrite one paragraph of homepage copy to be scannable β short paragraphs, value up front.
π‘ Instructor Tip: If a stranger couldn't tell what you do and who you serve from your headline alone, nothing else on the page will save it. Fix the headline first.
Launch
Module 5: Testing & Launching Your Site
Launching is a checklist problem, not a creative one β the risk is forgetting something boring, not making a bad design call.
The Lesson
1
Lock down content & SEO
Unique title tags (~55 characters), meta descriptions (~120), and alt text on every image.
2
Do a design QA pass
Compare the live build to the approved design. Fonts, spacing, and line height drift more than you'd expect.
3
Get analytics collecting before launch
Not after. Configure real conversion goals, not just pageviews, and confirm SSL is active.
4
Test like a visitor would
Real forms, real uploads, real phones. Then run a page-speed test and fix anything high-impact.
5
Confirm access before launch day
Domain registrar and DNS access stalls more launches than any design issue. Know it in advance.
6
Watch for the noindex trap
The single most common launch mistake: a leftover noindex tag from staging that makes the whole site invisible to search for weeks.
7
Tell people it's live
Announce the launch to your email list and social channels, publish a short "what changed and why" post, and update your email signature and social banner images to match the new site.
Further Reading
π Article
Website Launch Checklist: 49 Things To Do Before a Website Launch
The full checklist this module's Key Concepts are condensed from.
β orbitmedia.com
Hands-On Task
- 1 Turn this module into your own one-page launch checklist, ordered the way you'll actually do the steps.
- 2 Run a page-speed test and note anything flagged as high-impact.
- 3 Confirm who has access to your domain registrar and DNS today β not the day you plan to launch.
π‘ Instructor Tip: Keep your one-page checklist from Task 1 β you'll reuse it for every future site update, not just this launch.
Bonus
Module 6: 25 Strategies for a Great Website
A field guide to everything else that separates a great website from an average one β distilled from Orbit Media's most-read design article.
The Lesson
1
Understand your site's 5 focal points
Visibility (get visitors), usability (deliver a good experience), credibility (earn trust), sellability (achieve outcomes), and scalability (room to grow). A great site works toward all five β not just how it looks.
2
Forge a real plan
Document your target audience and objectives before design starts, get buy-in from everyone involved, and return to the plan often to stay on course.
3
Build on a foundation you own
Buy a domain, host on a reliable platform, and use a CMS you control. A site that lives entirely on a "rental" platform isn't really yours.
4
Keep your brand consistent
Logo, color, fonts, imagery, and voice should feel like the same company on every single page.
5
Make findability the priority
When visitors have a bad experience, their #1 complaint is that they couldn't find what they needed. One consumer survey found 76% say easy findability matters more than a beautiful appearance or flashy features.
6
Use your header and footer as a map
They're present on nearly every page, so make them count β the header for top-priority sections and search, the footer as a roadmap to contact info, policies, and resources.
7
Choose clarity over cleverness
A confusing headline undermines a fast site and a beautiful layout. Every headline should pass a simple test: would a visitor feel reassured they're in the right place?
8
Be thorough where it counts
Answer a visitor's likely questions in context, on the page they're already reading. Don't make them click around β or dig through an FAQ page β to piece the story together themselves.
9
Treat your website as never "finished"
A blog, resource hub, or gallery gives people a reason to return β and gives search engines a reason to keep indexing you. A site that's built once and left untouched gets very little of either.
10
Get the basics of SEO right
Make sure your site is properly indexed, uses descriptive links, and has on-page elements tagged with the keywords your actual audience searches for.
11
Go responsive and secure
Your layout should adapt cleanly to any screen size, and your site should run on HTTPS. Both are baseline expectations now, not upgrades.
12
Stack up real trust signals
Testimonials, client logos, reviews, and certifications work because people trust other people more than they trust a company's own claims about itself.
13
Build a real funnel, not just a CTA
A click doesn't pay the bills β a completed action does. Forms, landing pages, and thank-you pages should walk a visitor forward, not just invite a click.
14
Install analytics, then actually test
Get analytics running before you need the data, then use A/B tests, heatmaps, or a simple survey to keep improving instead of guessing.
Further Reading
π Article
What Makes a Great Website? 25 Effective Strategies
The full original article by Barry Feldman on Orbit Media β the 25 strategies this module is distilled from, with more examples and screenshots.
β orbitmedia.com
Hands-On Task
- 1 Score your current site 1β5 on each of the 5 focal points: visibility, usability, credibility, sellability, scalability. Circle the lowest score β that's your next project.
- 2 Check your site's header and footer. Does the footer actually work as a map to contact info, policies, and resources β or is it an afterthought?
- 3 List one form of trust signal (testimonial, logo, review, certification) you could add to your homepage this week.
π‘ Instructor Tip: Don't try to fix all 14 of these at once. Pick the one your lowest focal-point score points to, fix that, then come back to this list.