UI Design-1
04. Screen (UI Design)

User Interface Design

UI Design in waterfall

With all the research, concept and architecture work done, there is still a lot of work to do to get to a high quality product. All the work before can be capped off by an excellent UI design. It can also be rendered worthless if the UI design is shoddy.

In a waterfall setting, the UI designer takes on all the screens or templates that need designing in one single process. This setting can occur when the client has not decided on a development team yet. The client may also want to do the design work before they start actual development. In that case, the client should be warned that the development team will need help when they do get going.

Why
  • Create the actual designs that developers need.
Who
  • UI Designer
Conditions
  • There is a UX Concept.
  • There is a UX Architecture.
  • A style has been determined for the product.
Client effort
  • Provide feedback on design versions.
  • Accept final designs.
Skills involved
  • Create low fidelity screen designs.
  • Create high fidelity screen designs.
  • Wireframe.
  • Visual design skills (structure + expression).
Steps
01

Analysis

Briefing of the requirements and the products that were designed before: UX Concept, UX Architecture, Styling.

If the UI Designer was involved in the preceding stages of the project then this step can be skipped.

02

Design

Design the needed screens or templates based on the requirements and the products that were designed before.

03

Review

Discuss the designs with the client for feedback. This activity is performed per high level user story or epic.

04

Adjustments

Refine and adjust the designs based on the feedback from the previous step.

05

Review

Discuss the designs with the client for feedback. This activity is performed per high level user story or epic.

06

Finalise

Process feedback, prepare for delivery and deliver.

Deliverable

De deliverables of the UI Design are:

  • Designs in a design tool, eg. Figma or Sketch. The designs are responsive. A design was created for 2 resolutions.
  • Files for front end development in Zeplin.

Got a Question?

Check in with Iwan or Linda
Portret-iwan
overons_linda-300x300-2