Hands-On UX Design for Developers

Mockup and design

In this stage, we grab a tool that we want to create the visual design with. It can be a simple one, such as Keynote or PowerPoint, or an advanced one such as Photoshop, Figma, or Sketch.

It all depends on your level of skill with those software. Whatever tool you choose for creating the designs, you will have to create the design based on your sketches from the preceding step.

Similar to creating wireframes, we align elements, create grids, and add design components. Also, here, we start by creating a color palette and the main design components that we will use inside our user interface, and add labels, buttons, text, and other necessary elements.

We continue doing this to create all the screens that we mentioned during ...