Lesson 5: Prototyping and Interface Layout

Prototyping is where design becomes tangible. A wireframe is a simple layout (often black-and-white) showing where elements go. For example, a wireframe for an app login screen would show a logo, two text fields, and a button block. It doesn't need visuals or color. A mockup adds visual detail and style, closer to a final look. In class, you might learn tools like Figma or even just pencil sketches. Prototyping early catches design issues (e.g. button placement) before any code is written.

Interface layout also uses graphic design principles. Key ideas: Contrast (make important buttons stand out with color or size), Alignment (line up labels and inputs for a clean look), and Hierarchy (title big, subtitles smaller). Filipino designers often consider cultural color meanings (e.g. green might imply go/success). Use grids or common layouts (like a header, content area, and footer) so users feel at home. Remember readability: use sufficient font size (≥14px) and spacing. A cluttered interface is a no-no – for example, avoid cramming twenty links at the top of a page.

Ready to apply this? The practice set below walks through exam-style problems with step-by-step solutions and a visual layout drill.