Skip to main content





Front-End Journey: From Mockups to Code

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • The development of an application starts before the implementation of its core logic and functionalities. An initial journey of business analysis, test prototypes and design of reusable patterns is important to guarantee good alignment and to give the development team a good quick start to speed up the development. This journey goes through 3 different stages:

    1. Starts with a UX Concept, where you’ll try to translate the business requirements into some workflows and wireframes.

    2. Then goes to a UI Designer that will create High-Fidelity mockups to provide a good overview on what the application would look like.

    3. Next step is the Front-End Development, where we convert the mockups into application screens and user interactions.

    The Front-End Journey

    UX/UI: Design for OutSystems

    In the following session you will be guided through this journey, from the gathering of the requirements to the creation of the Live Style Guide (the base component of the Front-End Development phase) that will accelerate, guide and facilitate your front-end developers job.

    Your Custom Live Style Guide

    The design of a Live Style Guide is an essential part of the transition from Hi-Fi Mockup to Code. To help you creating your custom Live Style Guide, you can take as a good quick start, the OutSystems UI Style Guide, available in the OutSystems Forge.

    • Was this article helpful?