The user interface is one of the most important features of any website. It directly affects how users interact with the application. How a site looks, feels, and functions plays a major role in user retention.
If you work at a larger company, user interface design is usually handled by a designer. Companies with multiple products often have a core design team that creates a design system, a shared set of components and standards used across all products. This keeps the user experience consistent as customers switch between products. Apple is a strong example: the design language is shared across Mac, iPad, and iPhone, so users feel at home moving between them.
In this article, we cover how web interfaces are designed and introduce a basic matrix for evaluating user interfaces. You will learn the key terminology, the process, and the standards used in the industry so engineers and designers can work together more effectively. We leave the creation of full design systems and higher-level design work for another day.
What is Design?
The definition of design is contested, and sources define it differently. For this article, I use a definition from my interaction design professor, Professor Lu Weiquan at NUS, design is solving problems given a set of constraints.
In my opinion, a good designer should not only consider the users but also available resources, time, cost, and technology. A designer may produce an elegant, polished interface in 10 days, but if it takes five senior engineers three months to build, the company will probably run out of money to ship it making it a poor design choice. A good designer weighs constraints of the different stakeholders before producing the final design
Design thinking
Design thinking is a human-centred, collaborative problem-solving approach that is creative, iterative, and practical.
IDEO is a design consulting firm famous for popularizing this approach, along with Stanford's d.school. Design thinking follows a 5-step process:
Empathize — understand user needs and goals. Designers conduct interviews to uncover feelings, frustrations, and pain points. Strong designers gather both qualitative feedback and quantitative metrics. For example: Users complains that the wait time to collect their medicine is very long. But how long in minutes? Only during peak hours? What is the staff-to-patient ratio during that period?
Define — synthesize information from the empathy phase to identify the core problem. Designers create user journey maps to visualize the problem and personas to represent different user groups, their interests, and goals. If many problems surface, rank them by severity; the Product Owner selects the most critical one to address.
Ideate — generate ideas to solve the problem. No idea is ridiculous at this stage — everything goes on the brainstorming board. Keep the user journey map and personas visible to stay focused.
Prototype — create a mock-up of the product that can be tested with users. Prototype types are covered in the next section.
Test with real users and gather feedback. Repeat as needed. If users do not like the prototype or do not believe it solves their problem, do not invest engineering effort building it — doing so wastes time, resources, and money.
Prototyping
Prototyping is one of the most important phases of design thinking. After user testing, a prototype may need revisions before being handed off to the engineering team. In general, there are three kinds:
- Quick & Dirty
- Low Fidelity
- High Fidelity
A Quick & Dirty prototype is done very quickly, often with pen and paper (paper prototyping) or using an iPad. It gives a basic visualization of what the user or client wants, including essential information, page flow, and the main sections of the pages. It yields a shared visual understanding of the product fast.
A Low Fidelity prototype focuses on layout and concepts — the big structural pieces, or the major sections of a webpage. Today, AI-powered tools such as Replit, Lovable, and Base44 make it faster than ever to spin up a working prototype and share it with clients or users for early feedback. They typically get the intent across to the users, but will look very different from the final product.
A High Fidelity prototype closely resembles the final product but lacks backend functionality and full user interactions. These are typically created using design tools such as Figma, Adobe XD, or Claude Design. Frontend engineers typically reference this when building the actual website. For highly technical design teams, they will be able to use tools like Claude Code, or event the low fidelity tools to create these high fidelity prototype.
From a web development perspective, the high-fidelity prototype should be finalized before the sprint planning phase. This allows development to proceed smoothly. The more changes made to the high-fidelity prototype during a sprint, the greater the risk the team will not achieve the sprint goal.
Facets of Web Design
While prototyping is important, what do designers actually consider when creating one? How do we judge whether a product is good or user-friendly? More advanced frameworks exist, such as Nielsen's 10 Usability Heuristics, but we will stick to these six usability facets:
| Facet | Description |
|---|---|
| Effectiveness | Can users achieve their goal? |
| Efficiency | How quickly can users achieve their goal? |
| Learnability | Is it easy for first-time users to learn? |
| Memorability | How easily can returning users remember how to use the site? |
| Error Handling | How well does the site help users recover from errors? |
| Satisfaction | Are users satisfied, and would they recommend the site to others? |
These facets guide what to measure during usability testing. The unit of measurement depends on the taskm effectiveness might be binary (yes/no), or broken into subtasks with different scoring. Once you choose a metric, keep it consistent across iterations so you can compare results and track improvement. For efficiency, compare two prototypes to see if one reduces the number of clicks or the time needed to complete a task.
The Effect of AI on Design
AI is fundamentally changing how design work gets done. Tools like Claude Code, GitHub Copilot, v0, Lovable, and Bolt have compressed the design-to-prototype cycle from days to minutes. A concept sometimes called "vibe design" borrowed from Andrej Karpathy's "vibe coding" describes the new norm, describe your intent in natural language and AI generates a working interface.
A common 2025 workflow looks like this, use v0 for UI components, Lovable or Bolt to assemble the full application, then Claude Code for production polish. What once required a dedicated designer, a frontend engineer, and several sprint cycles can now be bootstrapped by a single person.
Traditional design tools are adapting rather than disappearing. Figma launched Figma Make in 2025 a prompt-to-interactive-prototype feature alongside Figma Sites, which turns designs directly into live websites. Anthropic entered the space with Claude Design, which builds a design system from your existing codebase and brand assets, then outputs designs that hand off directly to Claude Code. The tight design-to-development pipeline reduces the friction that traditionally existed between designers and engineers.
According to Figma's 2025 AI Report, 67% of design teams have adopted AI tools, and designers now spend only 30–40% of their time on polished prototypes, down from 60–70% previously. Research synthesis that once took three to four days now takes under an hour.
The pressure is felt most by junior designers. AI now automates roughly 40% of entry-level UI tasks wireframing roles at studios are shrinking, and recruiters expect AI literacy alongside classic UX fundamentals. The roles that remain and are growing require taste, empathy, systems thinking, and the judgment to direct AI rather than be replaced by it. As Forrester put it at Figma Config 2025 "In an AI world, design matters more than ever."
Conclusion
We have only scratched the surface of designing a user interface. For those just starting out in web development, this should be a solid foundation. This brings us to the end of our content on the Sprint Planning series. In the next few articles, the focus shifts to code less reading, more building. We will go through a basic repository setup on GitHub that will impress your technical assessors.