Skip to content

4. Lab: Design Skills & Flutter GUI

Estimated time to read: 15 minutes

In this lab, you will enhance your design skills. Design is a craft that can be learned, and an art if you strive to be exceptional. While you don't need to be exceptional to achieve a good grade in this module, you do need to master the essential skills! You will also continue learning Flutter.

You will find further instructions and hints in Design.

4.1 Preparation

The goal is to have everything in this chapter ready as an alpha, feature-complete version.

  • 📌 In Figma, create a page with two screens using styles and components.
  • 📌 Apply for a free edu license to be able to work collaboratively.
  • 📌 Implement an app that includes
    • The Flutter implementation of the Figma screen from the previous task.
    • A ListView or a GridView. You are encouraged to adapt this task to your own project idea and implement something genuinely useful.

4.1.1 Paper Prototypes

  • 🧰 Prepare 2 different paper prototypes for evaluation.
  • 🧰 Define 3-5 major tasks for your app to be used in the evaluation.

4.1.2 Fonts and Colors

  • 🧰 Choose fonts and colors for your app.
  • Add important visual design decisions to: docs/design.md
  • 🧰 Design or choose a logo for your app. You may try Recraft.ai.

4.2 During the Lab

  • We will discuss your questions and concerns.
  • Everyone will present their Figma screen and its implementation in Flutter.
  • You will evaluate your paper prototypes with another team.
  • You will finalize your paper prototype.
  • Assign tasks and to-dos for your team.
  • We will discuss the quality of your issues.

4.3 After the Lab

  • 🧰 Document your paper prototypes and the results of testing them in docs/design.md.
  • 🧰 Finalize your paper prototype in Figma. Use Figma components thoughtfully — anything you design as a component is a strong candidate for a reusable widget in Flutter.

  • 🧰 Annotate each major frame in your Figma prototype to prepare for implementation. For every frame, add a comment that specifies:

    • What data is needed on that screen (derived from your conceptual models and user flows)
    • Where the data comes from, using one of these symbols or labels: API · Supabase · Firebase · LocalStorage
    • How the state is managed, distinguishing between app state (shared across screens) and ephemeral state (local to a single screen)

teamwork

Divide the work by feature — both in Figma and later in Flutter.

Document the following in your portfolio (use the file docs/3-Design.md):

  • 🧰 Your process up to the final Figma prototype, including
    • Paper prototypes of your application with justified design decisions.
    • Description of test cases and testing process.
    • Summary of key findings and adjustments (~> Reflection on the UI test).
  • 🧰 A brief reflection on what went well, what felt like a waste of time, and what surprised you.

Remember, it’s not just about completing the tasks, but also providing thoughtful reasoning. Explain your decisions. Reference the relevant theory to support your process.

4.3.1 In GitLab

  • 🧰 Add screenshots of your Figma prototype to your issues.
  • 🧰 Create your app in the app folder of your repository:
    • Define the app theme.
    • Add your logo.
    • Implement bottom navigation.
    • Create the necessary files for your screens and widgets.