Design and UX
Web design
Web design is layout for a medium with no fixed page size. A web designer plans how content reflows from phone to wide monitor, how navigation holds up as a site grows, and how a theme or site builder can deliver the design without fighting it. This topic covers responsive layout, WordPress themes and builders such as Webflow and Elementor, and the point where design hands over to front-end code.
Why this topic exists: Layout for the browser, responsive design, WordPress themes and the hand-off to code: Udemy's Web Design shelf; the programming field owns the build.
A print designer knows the size of the page before starting. A web designer never does. The same content will be read on a phone held in one hand, a laptop, a wide monitor and sometimes a television, and the design has to say what happens at each of those widths. MDN credits Ethan Marcotte with coining responsive web design in 2010 for layouts built from fluid grids, flexible images and media queries, and that remains the working definition.
Designing for a page without edges
In practice a designer plans a small number of breakpoints, the widths at which the layout rearranges itself, and increasingly starts from the narrowest screen, adding columns and detail as room appears. MDN calls this mobile first. A handful of questions then shape the site:
- How does navigation behave when there is no space for a menu bar, and does the collapsed version still reveal what matters most?
- Which content stays, moves or shrinks on the smallest screen?
- Are touch targets large enough, and can the whole site be used from a keyboard? The accessibility topic covers the standards.
- How heavy are the images and fonts, given that every extra file costs time on a mobile connection?
- Will the structure still hold when the site has five times as many pages as it had at launch?
The beginner's mistake
Designing the desktop version in full and treating the phone as an afterthought squeezed out of it. For many sites the phone is the first screen a visitor sees, and a layout planned for width collapses into a long, awkward column. Sketch the narrow version first, then decide what the extra space should add.
Themes, builders and the hand-off
A great deal of web design today ships through a platform instead of custom code. WordPress themes and page builders such as Elementor, and hosted builders such as Webflow, Wix and Squarespace, let a designer launch a site without a developer, at the price of working inside someone else's structure. A designer who understands how a theme organises its templates and blocks produces designs the platform can deliver faithfully, not mock-ups that have to be forced into it. Most small-site projects begin from a web template, and the skill lies in knowing which parts to keep and which to replace.
On larger products the hand-off goes to front-end developers, and a shared design system of components and tokens is what keeps the built site close to the design. The build itself belongs to the programming field. Where a WordPress site runs, and what hosting does to its speed, is covered in the WordPress hosting guide. Web designers often grow towards UI and visual design for product work, towards front-end development, or towards conversion optimisation when the site's job is to sell.
Next to this topic
- UX researchInterviews, usability tests, surveys, analytics and when to use which: NN/g's Research Methods and User Testing topics; SFIA User research; the fourth course of Google's UX programme.
- UX and interaction designInformation architecture, flows, patterns and the behaviour of interfaces: NN/g's Interaction Design and Information Architecture topics, IxDF's UX and HCI literature, SFIA User experience design.
- UI and visual designLayout, typography, colour, hierarchy and the craft of the screen: NN/g's Visual Design topic, IxDF's UI design, colour theory and Gestalt literature.
- Design systemsTokens, components, documentation and governance so that many hands ship one product: the site's design-system concept, IxDF's brand-guidelines literature, and the meeting point with front-end code.
- Accessibility in designWCAG's four principles and conformance levels, assistive technology and inclusive design: NN/g's Accessibility topic, SFIA Accessibility and inclusion, W3C WAI.
- Prototyping and design toolsFigma, Sketch, Adobe XD and the prototyping loop from paper to clickable: NN/g's Prototyping topic; Udemy's Design Tools shelf; the third and fifth courses of Google's UX programme.
- Graphic design and illustrationComposition, type, image and print, and the Adobe and Affinity toolchain: SFIA Graphic design; IxDF's graphic design literature; Udemy's largest design shelf after 3D.
- 3D, animation and motion designModelling, rigging, rendering and motion in Blender, Maya, 3ds Max, ZBrush, After Effects and Cinema 4D: SFIA Animation development; Udemy's largest design shelf.
- Design assets and licensingTemplates, stock media and fonts, and the licences that decide what you may do with them: the site's design-assets concepts and the /digital-assets/ partner picks.
- Design thinking and service designProblem framing, ideation and the end-to-end service: IxDF's design-thinking and service-design literature; NN/g's Design Process and Customer Journeys topics; SFIA Customer experience.
Concepts to know
Glossary entries with the reason each one matters here.
- Template
The starting point of most small-site designs.
- Design system
Where web design meets front-end code.
Guides that apply
- WordPress hosting done right
Where a WordPress design ends up running.
Tools of the trade
- WordPress
Themes and page builders.
Frequently asked
- Do web designers need to code?
- Not necessarily, but knowing basic HTML and CSS makes a designer far better at the job. It shows what the browser does easily and what it fights, improves conversations with developers and makes builders and themes less mysterious. Many web designers who work on small sites deliver them through a builder without writing code.
- Should a web designer learn WordPress?
- If the aim is to build sites for small businesses, organisations or freelance clients, it is a practical skill, because many such sites run on it. Designers aiming at product companies will more often work in a design tool and hand off to developers. Learning how one content management system structures pages helps in either case.
- How does web design differ from UI design?
- Web design concerns websites: pages of content, navigation across a site and layouts that adapt to every screen. UI design concerns the controls and screens of software, including apps and web applications. The skills overlap heavily, and job titles often blur the difference.
Courses in the directory
416 courses are filed here; the top 5 by our ranking, details and the provider link on each course page.
Last reviewed 26 September 2026 · Getting Digital