Step 6 — Visuals & Design (Beginner-Friendly)
In this lesson you will turn your clean draft into a page that looks clear, friendly, and easy to follow. You will choose simple visuals that teach the idea, not decorate it. You will use a white theme with small touches of color, the same as earlier steps, so the reader stays focused on learning. You will also write short alt text and check that your page reads well on phones and on print.
What “visuals & design” means in simple words
Visuals are the things that help the reader understand faster: tables, checklists, diagrams, flow arrows, small charts, and friendly callouts. Design is the way these pieces are placed on the page so the reader does not feel lost. In this step you add just enough visuals to make learning easier. You use white space and clear headings so the page is calm. You keep the style the same across all steps so the course looks like one family.
How Step 6 connects to Steps 1–5
Visuals and design are the bridge between your words and the reader’s eyes. When you align them with your plan and your checks, you remove friction. You also help future readers who use screen readers or print the page.
Your action is “Download the weekly planning checklist.” You will design a small, clear call-to-action band near the top and near the end. You will also design a simple 7‑day table, one comparison block, and two small diagrams that match the outline from Step 3.
Design roadmap (small flow)
Pick visuals
that teach
Set palette
minimal color
Build assets
SVG/PNG
Place & label
alt text
Mobile & print
preview
QA & export
final files
You can do these in short sessions. Do not try to create every visual at once; build the few that teach the most.
Pick the right visual for the message (decision helper)
| If you want to show… | Use… | Why this helps beginners |
|---|---|---|
| A process with steps | Flow with arrows | Readers see the order at a glance and know where to start |
| A small comparison | Do/Avoid two-column block | Clear left-right reading with short lines |
| A week plan or list | Simple table | Rows and columns keep items tidy and scannable |
| Progress or status | Waffle grid or bullet bar | Tiny boxes fill in as you finish tasks |
| Who does what | Swimlane | Shows responsibilities by role without long paragraphs |
| Drop-off through steps | Funnel (stacked bars) | Quick way to see where attention falls |
| Key numbers | Mini spark bars | Small bars show a trend without heavy charts |
| Important reminder | Side callout (sticky note) | Short yellow note that stands out gently |
Keep color simple and calm
Most of your page stays white with black text. Use the calm blue for links and light highlights. Use green for success, amber for warnings, and red for important mistakes. Avoid using many colors or bright backgrounds. This keeps attention on learning.
Small library of visual patterns you can copy
Flow with arrows
Use this when you need to show the order of steps from start to finish.
OrderStart → EndTwo‑column comparison
Use this to show “Do this” versus “Avoid this” with clear short lines.
ContrastClaritySimple table
Use this for week plans, checklists, or short data with clear headers.
RowsColumnsWaffle grid
Use small squares to show progress across tasks or sections.
ProgressLightweightSwimlane
Use lanes to show who does what in each part of the process.
RolesHandoffsFunnel
Use stacked bars to show drop‑off from step to step in a simple way.
Drop‑offQuick viewBuild your assets: file types and names
Save your visuals with clear names and simple formats. Use SVG for diagrams and icons because they stay sharp at any size. Use PNG for screenshots and images with text. Use JPG for photos. Keep a copy of the source file (for example, a design tool file) so you can edit later.
| Type | When to use | Name example |
|---|---|---|
| SVG | Diagrams, icons, simple charts | step6-flow-7day.svg |
| PNG | Screenshots, tables with text | step6-week-table.png |
| JPG | Photos | step6-example-photo.jpg |
| Downloadable checklists | weekly-planning-checklist.pdf |
Place all assets in a folder named /assets/step6/. Keep names short and lowercase. Add the step number so you can find things quickly later.
Place visuals close to the teaching point
Do not collect visuals at the end. Place each visual just under the sentence that needs it. Add a short caption when helpful so the reader knows what they are looking at.
| Teaching line | Visual idea | Caption |
|---|---|---|
| “Place one short task on each day.” | 7‑day table | “An example 7‑day plan with one short task per day.” |
| “Use three boxes to pick topics.” | Small comparison table | “Must teach / Nice to teach / Later.” |
Add alt text that tells the point
Alt text is a short sentence that says what the visual shows. It helps people who use screen readers. It also helps if the image does not load. Keep alt text short and factual. If the visual is decorative, consider removing it or leaving the alt empty.
Clear alt text
- “A 7‑day table with one short task per day.”
- “Two‑column block showing Do and Avoid examples.”
Weak alt text
- “Image of table.”
- “Graphic here.”
Contrast, size, and spacing: keep reading easy
Use dark text on white background for main reading. Keep headings larger than body text and add space above and below sections. Make sure touch targets (like buttons) have enough space for fingers on phones.
| Thing | Basic rule | Why it helps |
|---|---|---|
| Text color | Dark text (#222) on white | High contrast helps many readers |
| Heading size | 1.6× body size for H2 | Shows structure clearly |
| Spacing | 14–22px padding inside cards | Makes blocks feel calm |
| Buttons | At least 44×44px tap area | Easier on phones |
Design examples you can copy (inline demos)
1) Flow with arrows
Pick visuals
Build assets
Place & label
Preview
QA
Export
2) Do/Avoid comparison
Do
- Place visuals near the teaching point.
- Write short alt text that says the point.
- Keep color calm and simple.
Avoid
- Putting all visuals at the end.
- Using images with tiny text.
- Changing colors on every page.
3) Simple funnel
4) Waffle grid progress
Captions and labels: short and useful
Use captions when a visual needs one sentence of help. Keep the label short and helpful. If the visual is obvious, you can skip the caption and rely on the teaching line above it.
| Visual | Caption text | Why it helps |
|---|---|---|
| 7‑day table | “An example plan with one short task per day.” | Sets the reader’s expectation quickly |
| Comparison | “Simple words on the left, heavy words on the right.” | Explains how to read the block |
Keep file sizes small and sharp
Big files slow down the page, especially on phones. Export images at a size close to what you will display. Compress PNGs if they are heavy. Prefer SVG for clean shapes and lines because SVG files are often small and look sharp at any size.
Accessibility essentials for visuals
- Headings follow order (H2 → H3).
- Alt text describes the point of each visual.
- Links have descriptive labels (“Download the weekly checklist”).
- Color is not the only way to show meaning (also use labels or patterns).
- Tables use header cells (
<th>) for the top row. - Touch targets are big enough for fingers on phones.
QA checklist before you publish
| Check | How to check | Status |
|---|---|---|
| Visuals match teaching points | Read the line above each visual; does it match? | |
| Alt text and captions | Read with images off; can you still follow? | |
| Mobile and print preview | Open on a phone; print to 1 page | |
| File names and folders | Short, lowercase, step number included | |
| Link targets | Click each link; label matches destination |
Common problems and quick fixes
| Problem | What you will see | Simple fix |
|---|---|---|
| Visuals with tiny text | Readers pinch and zoom | Use larger text or move text to the caption |
| Too many colors | Page feels noisy | Use white background; keep one accent color |
| Heavy files | Slow loading on phones | Export smaller size; prefer SVG for shapes |
| All visuals at the end | Reader scrolls back and forth | Place visuals under the teaching line |
| Unclear labels | “Click here” links and vague captions | Use descriptive link text and useful captions |
Swimlane — who does what in Step 6
Practice lab — design one section
Below is a short “before and after.” You can copy the pattern and replace the words to match your topic. The goal is to place a helpful visual right under the teaching line and to keep color calm.
| Before (words only) | After (with visual) | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
“Place one short task on each day of the week so your plan feels light.” |
“Place one short task on each day of the week so your plan feels light.”
Caption: An example 7‑day table with one short task per day.
|
Mini KPI table — track visual impact
After you add visuals, you can watch a few light metrics later in Step 11. This small table helps you prepare the notes you will need.
| KPI | What you expect | Visual indicator |
|---|---|---|
| Time on page | Readers stay long enough to learn | |
| Scroll depth | Readers reach the action near the end | |
| Action clicks | Readers click the same action in two places |
Everything in one view (summary table)
| Part | What you do | Example under the content |
|---|---|---|
| Pick visuals | Choose patterns that teach the idea | Flow, table, Do/Avoid block |
| Set palette | White background; calm blue accent | Only use color where needed |
| Build assets | Create SVG/PNG; name clearly | step6-flow-7day.svg |
| Place & label | Put visuals under teaching lines; add alt text | “A 7‑day table with one task per day” |
| Preview | Check mobile and print | Buttons easy to tap; tables not too wide |
| QA & export | Run checks; export final files | Links and captions match |
Your next step
You now have clear visuals placed near the text, simple colors, readable tables, and short alt text. In Step 7 you will make the wording easy to find through search and simple to scan, which means you will set headings, links, and small rules that improve discovery and reading speed without changing the friendly tone.