Skip to main content

UI Design

Design Process Preparation

The most successful application designs are built upon in-depth knowledge of the user’s needs, wants, and expectations. Before entering the design phase:

To ensure optimal user experience and reduce development time, use these Design Principles — Communication, Simplicity, Workflow, and High-Interactivity to guide you throughout the design process.

Concept Sketches

Before coding begins, Concept Sketches on paper help lay out the main navigation and controls. Sketches clarify the flow of user interaction from screen-to-screen.

Hand drawn wireframe example
Example of a hand drawn wireframe concept

Wireframe Design

Wireframes are analogous to creating a blueprint for a house. Before building the house, there is an architectural diagram to follow. Wireframes are detailed evolution of the Concept Sketches. They visually represent the user interface. Wireframes don’t include visual design or interactive elements.

The goal of wireframing is to communicate detailed screens views, the hierarchy of information, and the flow of one screen to the next. For example, when a user presses a “Next” button, the wireframe diagram should indicate what screen are they directed to.

Wireframes should:

Validate the wireframes with the users. It’s important that you elicit feedback from users on the wireframes prior to prototyping. Make sure the:

Low fidelity wireframes
Example of low fidelity wireframes executed in a design program