Module 4: UI Design From Scratch
The real test of a design system begins when you need screens that were never designed for you. A product rarely stops at the original mockup. It needs detail screens, about pages, contact forms, side menus, and supporting flows that still have to feel like they belong to the same app.
This lesson is about designing those missing forms without pretending you are starting from nothing. You already have a visual language: spacing, colors, image treatment, buttons, overlays, and a certain rhythm to the UI. The job is to extend that language rather than invent a different one for every new screen.
The dish detail screen is a good example. The content is different from the menu screen, but the priorities are not mysterious. The dish itself is still the hero. The supporting text, price, and action affordances need to stay visible without competing with the image. Once you recognize that hierarchy, the new screen can grow naturally out of the original design instead of feeling pasted on.
The same principle applies to the about and contact screens. These pages often exist outside the main product flow, but they should not look like they came from another app. If the contact form highlights the location, let the map become the dominant element. If the about page is content-heavy, use the platform’s strengths to present that content cleanly. The visual language can relax a little to suit the new purpose, but it should still be recognizably part of the same product.
The side menu is another case where familiarity matters. Users already understand the basic conventions of side navigation, so the most important job is not to reinvent the pattern. It is to make the menu feel visually consistent with the rest of the app while preserving the usability people expect.
This lesson also reinforces something developers often underweight: taste is partly a matter of noticing why an existing design works. If you study how other apps solve similar problems, not to copy them literally but to understand their decisions, your own additions become much more grounded. That is especially useful when the original design is incomplete and you need to make judgment calls quickly.