Wized Docs

Appearance

Put all the pieces together ​

Introduction ​

It’s time to turn all this architecture into a functional web application! At this stage, we will bring together all the elements we have explored so far: the type of application, the key functionalities, the technological stack, and the workflow. With Wized as your ally, you will transform your architecture into an interactive and dynamic experience for your users.

Designing the Workflow ​

The first step in bringing your app to life is defining the workflow – the sequence of steps users will follow to interact with your site and achieve their goals. A well-designed workflow ensures an intuitive and fluid experience, which increases your users’ satisfaction and engagement.

  • Identify key tasks: What key actions do you want your users to take? Sign up, log in, search for products, make a purchase, manage their profile, etc.?
  • Create a visual map: Use flowcharts or prototyping tools to visualize the sequence of steps users will follow to complete each task.
  • Define interactions: What UI elements will you need at each step? What actions and events will trigger the transition from one step to another?
  • Consider different scenarios: What happens if the user makes a mistake? What alternative options will you offer? How will you handle exceptional cases?

Implementing Logic with Wized ​

Once you have the workflow clear, it's time to implement logic and interactivity in Wized. For each step of the flow, identify:

  • The elements involved: What buttons, forms, lists, or other elements of your Webflow website will be needed at each step?
  • Actions to perform: What should happen when the user interacts with each element? Submit a form, make a request to an API, show or hide content, etc.?
  • The events that will trigger the actions: What specific events, such as clicks, value changes, or form submissions, will trigger the actions?
  • Element settings: How should elements change in response to actions or data received from APIs? Use settings like Set Text , Set Visibility , Render List , and Set Style to customize the appearance and behavior of your elements.
  • Conditional Logic: Use the Function Editor to define conditions and validations that control the flow of your application and personalize the user experience.

Connecting to the Backend and External APIs ​

If your application requires a backend or uses external services, it is important to understand how data will flow between these components and your frontend in Wized.

  • API Requests: Use Wized API requests to send and receive data from your backend or external services.
  • Data Storage: If you use a backend, make sure that data is stored and managed securely and efficiently in your database.
  • Data Processing: Use the Function Editor to process and transform data received from APIs or the backend before displaying it to the user or using it in your logic.