Design and 3D

How to learn web design from scratch

Web design is about how a person finds what they need on a page and does what they came to do. The design editor is only a pencil; what you actually learn is composition, typography, grids and working with users. Below is a six-month plan and a way to build a portfolio without clients.

Updated
In this article

A time benchmark#

If you study for an hour and a half to two hours five days a week, the first tidy designs appear in two to three months, and a portfolio you can use to apply for internships in about six months. This is a benchmark, not a promise: a lot depends on how many of your own pieces you make and critique. Pick one design tool and do not switch it mid-plan — the most widely used in the industry right now is Figma, which has a free plan; see how to learn Figma.

Month 1: composition and hierarchy#

Every screen answers the question "what matters most here?". Study the basic principles: proximity (related things sit together), alignment, contrast, repetition, white space. The exercise for the week: take three real pages, make black-and-white screenshots of them and mark where the eye lands first, second and third. Then redraw one page so that something else becomes the main thing.

Month 2: typography and colour#

Typography is most of the web. Work out size, weight, line height and line length; learn to build a type scale of five or six steps and use only those. Choose one or two typefaces, no more. Learn colour through roles — background, text, accent, error, success — and check text-to-background contrast against the WCAG guidelines so that people with low vision can use your design.

The result of the month: an article page built only with type and one accent colour, no images, that is still easy to read.

Month 3: grids, components and responsiveness#

A layout grid sets columns, margins and gutters, and thanks to it elements on different screens look like parts of one product. Build grids for desktop, tablet and phone and move the same design onto each. In parallel put together a small component library — buttons, input fields, cards, navigation — with states: default, hover, pressed, error, disabled.

It also pays to understand how a page is actually built. You do not have to become a developer, but knowing roughly what HTML and CSS can do — how boxes stack, what flexbox does — keeps your designs realistic and makes handoff easier.

Month 4: UX and research#

An interface is tested by people, not by taste. Study user scenarios, journey maps and usability testing. Test your design with five people you know: give them a task ("find the delivery options and place an order") and silently watch where they get stuck. Write down the problems and fix the design. This loop — task, observation, fix — is the core of the profession.

Months 5–6: three portfolio case studies#

Make three projects of different types: a landing page for a service, a small mobile app, and a redesign of an existing website with your reasoning. In each case study show not only the final screens but the path: the problem, the research, rough drafts, test results. Employers look at how you make decisions, not only at how pretty the result is.

How to tell a stage is done#

  • You can explain why every element on a screen is exactly where it is.
  • Every spacing and size comes from your grid and scale, not by eye.
  • A stranger completes a task in your design without hints.

Step-by-step plan

  1. Month 1 — compositionProximity, alignment, contrast, repetition; analysing three real pages and redrawing one.
  2. Month 2 — typography and colourA type scale, one or two typefaces, colours by role and contrast; an article page without images.
  3. Month 3 — grids and componentsGrids for three screen widths, a component library with states.
  4. Month 4 — UXScenarios, a usability test with five people, fixing the design based on what you saw.
  5. Months 5–6 — portfolioThree case studies of different types with the problem, research, drafts and results.

Start learning this in your own space

The plan goes into your repository: tick off stages, keep notes — the change history shows how far you have come.

Start the plan

Sources

Was this helpful?

More articles

Design and 3D How to learn Figma from scratch Figma is an interface design editor that runs in the browser and lets several people edit one file at the same time. The basics take a couple of weeks, and confident work with auto layout and components takes a month or six weeks of practice. This article is about the tool: which features to learn and in what order. Design and 3D How to learn Blender from scratch Blender is a free 3D graphics program with modelling, sculpting, materials, animation and rendering in one package. Beginners are put off by the interface and the sheer number of shortcuts, but within the first two or three weeks it becomes familiar. This article is about the program itself — how to find your way around it and in what order to work through its parts. Design and 3D How to learn 3D modelling from scratch The term 3D modelling covers very different work — from parts for 3D printing and engineering drawings to game characters and interior visualisation. Before learning a program, figure out which direction you need: it decides both the tool and the order of topics. Below is how to choose a path and how to get through the first months. Music How to learn guitar from scratch Most adults can play their first songs with guitar accompaniment after two or three months of daily practice for twenty to thirty minutes. The main difficulty is not the chords but changing between them without stopping — most of the plan goes to that. Below is a week-by-week order, signs that a stage is done and common beginner mistakes. Arts and crafts How to learn photography from scratch You learn photography by shooting to an assignment and reviewing the results, not by buying gear. You can start with your phone and move to a camera with manual controls once it is clear what exactly you are missing. Below is a three-month plan, from light and composition to exposure and editing. Music How to learn piano from scratch An adult who practises half an hour a day can usually play simple pieces with both hands from sheet music after six months. The hardest part of that road is not the notes but making your hands independent, so the plan is built around that. Below is what to work on month by month, how to learn to read music without misery and what to listen for in a recording.

More solutions

Company knowledge base A company knowledge base rarely dies for lack of tools. It dies because nobody owns the pages and they quietly go out of date. Here is how to set up a base that has owners, a history and a clear way to change it. Personal knowledge base A personal knowledge base is not an archive of everything you have read. It is a set of your own notes, linked to each other, that you keep coming back to. Here is how to set one up so it works instead of turning into a dump of links. Where to keep notes You pick a place for notes once and live with it for years. What matters is not the number of features but three things — notes are easy to find, you do not lose them when you switch services, and you can see how they changed. Here are the options and what we offer.