Last reviewed
Learn Landing Page and Web Design: From Zero to Expert
Landing page and web design builds pages people understand in seconds and act on: layout, typography and hierarchy, design tools such as Figma and Webflow, responsive and accessible builds, page speed, and testing what actually lifts conversions. This learning path takes you from your first page to designing pages that pay for themselves.
What is landing page and web design?
A landing page is a page built for one job: get the visitor to do one thing. Sign up, book a demo, buy, download or register. Web design is the wider craft of structuring and styling pages so people can read them, trust them and use them on any device. The two overlap, and marketing teams usually want both in one person.
The work runs from wireframe to live page. You decide what each section must answer, lay out the hierarchy so the eye lands in the right order, pick type and colour that stay readable, build or hand off a responsive version, check speed and accessibility, then test what you shipped. A designer who can show conversion lift, not just a nice mockup, is worth far more to a marketing team.
- 1BriefAgree the one action, the audience and where the traffic comes from.
- 2StructureWireframe the sections in the order the visitor's questions arrive.
- 3DesignApply hierarchy, type, colour and imagery so the page reads fast.
- 4BuildShip it responsive, quick and accessible in a builder or with a developer.
- 5TestMeasure conversions, find the drop-off and improve the page.
What does a landing page designer do?
- 1Take the briefAgree the goal, audience, traffic source and the one action the page must drive.
- 2Wireframe and structurePlan sections, hierarchy and the order of the visitor's questions.
- 3Design the pageApply layout, typography, colour, imagery and components in Figma or a builder.
- 4Build responsive pagesShip pages that work on phones, tablets and desktops.
- 5Check speed and accessibilityOptimise images and code, and meet contrast, label and keyboard standards.
- 6Test and improveRun A/B tests, read heatmaps and recordings, and ship the winning version.
How to learn landing page design: a step-by-step roadmap
Work through the stages in order. Design is learnt by rebuilding real things, so pick a page you use every week and redesign it in your first fortnight. Ship something live early, even a one-page site for a friend’s business, because a live page teaches speed, forms and mobile in a way a mockup never will. Use the filter to show only videos, courses or free resources.
Stage 1: Design and landing page basics
Learn what a landing page is for, how visual hierarchy works, and the parts of a page that do the selling.
Watch: how landing pages work
Start with the structure before the styling.
- VideoFree
What is a landing page?Unbounce - VideoFree
- VideoFree
- VideoFree
- VideoFree
No resources in this format for this topic.
Web design fundamentals
Layout, hierarchy and spacing decide whether a page reads easily.
- VideoFreeLearn web design for beginners: full courseFlux Academy
- VideoFreeThe full guide to layout and composition for designersSatori Graphics
- GuideFree
Web design principlesNielsen Norman Group, usability research - BookPaid
Refactoring UIAdam Wathan and Steve Schoger, practical design rules for non-designers
No resources in this format for this topic.
Typography and colour
The fastest way to make a page look professional.
- VideoFree
- VideoFree
- VideoFreeTypography in web design: what you need to knowSelf-Made Web Designer
- ToolFree
Google FontsGoogle, free web typefaces - ToolFree
Contrast checkerWebAIM, make sure text is readable
No resources in this format for this topic.
Study pages that work
Build a reference library before you design anything.
- ToolFree
Land-bookLand-book, gallery of live landing pages - ToolFree
SaaS Landing PageSaaS Landing Page, software page examples - GuideFree
Marketing ExamplesHarry Dry, short page teardowns - VideoFreeLanding page breakdown: the anatomy of an opt-in pageGame of Conversions
No resources in this format for this topic.
Check yourself: you are ready for the next stage when you can
Project
A page teardown
Pick three landing pages in one category. Break each into its sections, note the promise, proof, objections handled and call to action, and mark what you would change.
- Deliver
- A teardown document with annotated screenshots and your changes for each page.
- Done when
- You can explain in one sentence why one page is clearer than the others.
Stage 2: Core design skills
Learn Figma, design responsive pages, and turn a brief and some copy into a finished design.
Figma from scratch
The industry standard for designing and sharing pages.
- VideoFree
- VideoFree
- VideoFreeFigma tutorial for beginnersKevin Stratvert
- DocsFree
Figma learnFigma
No resources in this format for this topic.
Responsive design
Most of your traffic is on a phone. Design for it first.
- VideoFreeA practical guide to responsive web designKevin Powell
- VideoFreeResponsive web design: 10 basicsJesse Showalter
- VideoFree
- GuideFree
Responsive web design basicsweb.dev
No resources in this format for this topic.
Copy and design together
The words do the selling. Design makes them easy to read.
- VideoFree
- VideoFree
- GuideFree
Copywriting learning pathLearn marketing, research-led copy in depth - SKILL.mdFreeLanding page copy SKILL.mdSkill.md library, use with Claude or Codex
No resources in this format for this topic.
Build your first live pages
Pick one builder and ship something real.
- VideoFreeLearn Webflow in 16 minutes: crash courseFlux Academy
- VideoFreeLearn Webflow: ultimate beginner crash courseFlux Academy
- VideoFree
- VideoFreeHow to build a landing page: full guide for beginnersHostinger Academy
- ToolFree plan
FramerFramer, design and publish in one place
No resources in this format for this topic.
Check yourself: you are ready for the next stage when you can
Project
Design and ship a page
Take a real offer, a friend's business or your own, and take it from brief to live page: structure, copy, design, responsive build and publish.
- Deliver
- The live URL, your Figma file and a short note on the decisions behind each section.
- Done when
- The page works on a phone, loads quickly and someone outside the project understands the offer in five seconds.
Stage 3: Pages in practice
Make pages fast, accessible and measurable, then test them against the version they replaced.
Speed and Core Web Vitals
A slow page loses conversions before anyone reads it.
- VideoFreePageSpeed Insights explained and why 100 is a trapCraig Burgess
- VideoFreeHow to read a PageSpeed Insights reportHow to Universe
- GuideFreeLearn Core Web Vitalsweb.dev
- ToolFree
SquooshGoogle, compress images before you upload them - SKILL.mdFreeCore Web Vitals SKILL.mdSkill.md library
No resources in this format for this topic.
Accessibility
Accessible pages are easier for everyone to use, and often legally required.
- VideoFree
- VideoFreeLearn accessibility: full tutorialfreeCodeCamp
- ToolFree
- DocsFree
Accessibility fundamentalsW3C Web Accessibility Initiative
No resources in this format for this topic.
Forms and friction
Most landing pages are won or lost at the form.
- GuideFreeWebsite forms usabilityNielsen Norman Group
- GuideFreeForm design best practicesweb.dev
- ToolFree plan
HotjarHotjar, recordings show where people abandon - SKILL.mdFreeForm optimisation SKILL.mdSkill.md library
No resources in this format for this topic.
Testing what you design
Opinions end where the test data starts.
- VideoFreeHow to do A/B testing: 15 steps for the perfect split testHubSpot Marketing
- VideoFree3 landing page tests to lift conversionsAlex Hormozi
- GuideFree
- GuideFree
Conversion Benchmark ReportUnbounce, what conversion rates look like by industry
No resources in this format for this topic.
Check yourself: you are ready for the next stage when you can
Project
Rebuild and test a page
Take an existing page with real traffic, rebuild it based on your research, and run it against the original for at least two weeks.
- Deliver
- Before and after designs, speed and accessibility checks, the test setup and the result.
- Done when
- You can state the conversion rate change and explain which change probably caused it.
Stage 4: Advanced web design
Build design systems, work well with developers, and run pages as an ongoing programme.
Design systems and components
Stop designing the same button twice.
- GuideFreeDesign systems 101Nielsen Norman Group
- DocsFree
Material DesignGoogle, a full public design system - DocsFree
Figma design systemsFigma
No resources in this format for this topic.
Working with developers
The handoff is where good designs usually break.
- CourseFreeLearn HTML and CSS basicsweb.dev, enough code to brief a developer well
- CourseFreeCSS basicsweb.dev
- DocsFree
Tailwind CSSTailwind Labs, the styling system many teams build with
No resources in this format for this topic.
Pages as a programme
Treat the website as something you improve every month.
- SKILL.mdFreeLanding page CRO SKILL.mdSkill.md library
- GuideFreeExperimentation and CRO learning pathLearn marketing, testing in depth
- GuideFree
CXL blogCXL, conversion research and testing
No resources in this format for this topic.
Keep learning: people and galleries
Stay sharp by looking at good work weekly.
- PeopleFreeFlux AcademyRan Segall, web design craft and freelancing
- PeopleFreeKevin PowellKevin Powell, CSS and responsive layout
- ToolFree
AwwwardsAwwwards, site design inspiration - GuideFreeCreative and design learning mapLearn marketing, every design path on this site
No resources in this format for this topic.
Check yourself: you are ready for the next stage when you can
Project
A design case study
Write up your best page project: the brief, the research, the design decisions, the build and the conversion result.
- Deliver
- A published case study with before and after screenshots and the numbers.
- Done when
- A hiring manager or client could read it and trust you with their highest-traffic page.
Landing page design tools to learn
FigmaDesign and prototype pages, and hand off to developers.Free planLearn first
WebflowDesign and publish responsive sites without writing code.Free planFramerDesign and publish sites fast, with built-in interactions.Free planUnbounceLanding page builder with testing built in for campaigns.Paid
WordPressThe most widely used site platform, often with a page builder.Free
PageSpeed InsightsCheck loading speed and Core Web Vitals for any page.FreeHotjarHeatmaps, recordings and on-page surveys that show where pages lose people.Free plan
WAVEFree accessibility checker for any live page.FreeGoogle FontsFree typefaces that load fast on the web.FreeIs landing page design a good career?
Yes. Every company that spends on ads needs pages that convert, and most marketing teams have more page requests than they have designers. Designers who combine visual craft with conversion thinking work in-house, at agencies and freelance, and the skill pairs well with CRO, copywriting and front-end development.
Constant demand
Campaigns, launches and tests all need new pages, so the work rarely dries up.
Easy to prove value
A page that converts better than the old one is a number you can show in interviews and pitches.
Freelance friendly
Landing pages are small, well-defined projects, which makes them ideal first client work.
Pairs with other skills
Add copywriting, CRO or front-end code and you become far harder to replace.
Landing page design career path and jobs
- Entry
Junior Web or Landing Page Designer
Builds pages from templates and briefs, and handles edits and campaign variants.
- Mid
Web Designer
Owns page design from wireframe to live build across a site and its campaigns.
- Specialist
Conversion Designer
Designs and tests pages against conversion targets alongside CRO and growth teams.
- Specialist
Product or UX Designer
Designs flows and interfaces inside a product, not only marketing pages.
- Senior
Design Lead or Head of Web
Owns the design system, the website and the team or agencies behind it.
- Independent
Freelance Web Designer
Designs and builds sites and landing pages for several clients.
Common landing page design mistakes
MistakeSeveral competing calls to action.
Do thisPick one action and repeat it down the page.
MistakeDesigning around placeholder text.
Do thisGet the real copy first, then design around it.
MistakeHeavy images and fonts.
Do thisCompress images, limit font weights and check the page on a phone connection.
MistakeLow contrast and tiny type.
Do thisRun a contrast check and keep body text comfortably readable.
MistakeLong forms.
Do thisAsk only for what you need now and collect the rest later.
MistakeRedesigning with no baseline.
Do thisRecord the current conversion rate before you change anything.
How to get a landing page design job
Design hiring is portfolio first. Show three to five pages with the brief, your thinking and, where you have it, the conversion result. Rebuilds of real pages count if you say clearly that they were self-initiated, and a live URL always beats a static image.
Job-ready checklist
- You can take a brief and structure a page around the visitor's questions
- You can design a full page in Figma with a type and spacing system
- You can build and publish a responsive page
- You can make a page fast and accessible
- You can set up tracking and run an A/B test
- You have at least three pages in a portfolio with your reasoning
Portfolio pieces that get interviews
- A teardown of three pages in one category
- A page you designed and shipped, with the live URL
- A rebuild with before and after conversion data
- A small component library or design system
Landing page design interview questions
Walk me through how you design a landing page.
A strong answer covers: Start with the goal, audience and traffic source, get the copy, wireframe the section order around the visitor's questions, design mobile first with a type and spacing system, build responsive, check speed and accessibility, then set up tracking and a test.
How do you know a page design is working?
A strong answer covers: Compare conversion rate against the previous version or a test variant, then look at scroll depth, recordings and form drop-off to see where people stop. Agree the metric before you design.
A stakeholder wants to add three more sections. What do you do?
A strong answer covers: Ask what question each section answers for the visitor. Keep the ones that remove a real objection, move the rest lower or onto another page, and offer to test if there is still disagreement.
How do you handle speed on a design-heavy page?
A strong answer covers: Compress and correctly size images, use modern formats, limit font files, load heavy elements below the fold lazily and check Core Web Vitals on mobile before launch.
How much code do you need to know?
A strong answer covers: Enough HTML and CSS to read a build, write a clean handoff and make small fixes. You do not need to be a developer, but understanding how pages are built makes your designs realistic.
Landing page and web design FAQs
What is a landing page?
A landing page is a page built for one action, such as signing up, booking a demo or buying. It usually receives traffic from a campaign, and unlike a homepage it removes navigation and other offers so the visitor has one clear next step.
What's the difference between landing page design and web design?
Landing page design focuses on single-purpose pages measured by conversion rate. Web design covers whole sites, navigation and templates. The craft is shared, but landing pages are judged almost entirely on whether people act.
Do I need to code to design landing pages?
No. Builders such as Webflow, Framer, Unbounce and WordPress let you design and publish without writing code. Basic HTML and CSS still help: you will hand off cleaner designs, debug faster and make small fixes yourself.
Which tool should I learn first?
Learn Figma for design, then one builder you can publish with. Webflow and Framer suit designers who want control; Unbounce suits campaign pages with built-in testing; WordPress suits businesses that already use it.
What makes a landing page convert?
A clear promise that matches the ad or link people clicked, proof that it works, the objections answered in the order they arise, one obvious action, a short form and a page that loads fast on a phone.
Can I learn landing page design for free?
Yes. Figma, Webflow and Framer have free plans, web.dev and the Nielsen Norman Group publish free guidance, and the videos on this page are free. Learn by rebuilding real pages and publishing them.
