Web design for beginners: how to design your first landing page

Step 1

Structure: one goal and the order of blocks

A landing page is a page with one goal: sign up, buy, send a request. Before opening Figma, write the goal in one sentence and list the blocks as text in the order a person should read them. A typical structure:

• •first screen: what it is, who it's for and the main button;
• •the problem or the benefits: why the person needs it;
• •how it works: three or four steps or features;
• •proof: reviews, case studies, numbers, only real ones;
• •answers to common questions and a repeated call to action at the bottom.

💡 People scan pages rather than read them in full. Headings and the first words of paragraphs should carry the message even if the rest is skipped.

Step 2

Grid and spacing

A column grid is the page's skeleton. Desktops get more columns, phones fewer; pick a number that divides neatly into halves and thirds. Set the grid on a frame in Figma, limit the content width so text doesn't stretch across a large monitor, and stick to one spacing system: smaller gaps inside a block, larger gaps between blocks.

• •align elements to column edges, not by eye;
• •use spacing based on one unit, for example 8 px;
• •check that each block is separated from the next by more space than the elements inside it.

Step 3

Typography and colour

A landing page needs one or two typefaces and three or four text levels: a large headline, block headings, body text and captions. Don't make body text small or lines too long: web.dev notes that classic readability theory puts the ideal column at 70 to 80 characters per line. For colour, use a main colour, an accent for buttons and neutrals; under WCAG, regular text needs a contrast ratio of at least 4.5:1 against its background.

💡 Save the accent colour for the main action. If every other detail is bright, the “Sign up” button gets lost.

Step 4

Responsive design: phone first

Sites are opened on very different screens, so the layout has to rearrange itself, not just shrink. Start with a narrow frame, then widen it until the design starts to break: that's where you need a breakpoint. Web.dev advises choosing breakpoints based on content, not on specific device models.

• •on a phone, columns stack on top of each other and the order of blocks stays the same;
• •buttons and links must be easy to tap: WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels, and main buttons should be larger;
• •check long headings, buttons with long labels and tables on the narrowest screen;
• •in Figma, auto layout and constraints show you how a block behaves as the width changes.

Step 5

Prototype, handoff and publishing

Link buttons and anchors into a clickable prototype and give it to two or three people with a task: “find the price and sign up”. Wherever they hesitate is where you need changes. Then there are two paths. Hand off to a developer: tidy layer names, components, documented button and field states, and layouts for phone and desktop; Figma's Dev Mode shows developers the sizes, spacing and styles. Publish it yourself: no-code builders such as Framer, Webflow or Tilda let you build and launch a site without programming.

💡 A live landing page behind a link is a stronger portfolio piece than a picture. For inspiration, see our community's AI landing page challenge.