Skip to content

3. Lab: Design Skills & Flutter GUI

Estimated time to read: 4 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.

3.1 Preparation

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

3.1.1 Design

  • 📌 Read and understand the entire Design chapter.
  • 📌 In Figma, recreate a screen from an app you like, using styles and components.
  • 📌 Apply for a free edu license to be able to work collaboratively.

3.1.2 Flutter: GUI

  • 📌 Read and understand everything in the Flutter chapter up to "Flutter Principles" (13.7).
  • 📌 Implement an app that includes
    • The Flutter implementation of the Figma screen from the previous task.
    • A ListView or a GridView.

3.1.3 Paper Prototypes

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

3.1.4 Fonts and Colors

  • 🧰 Choose fonts and colors for your app.
  • 🧰 Design or choose a logo for your app. You may try Recraft.ai.

3.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.

3.3 After the Lab

  • 🧰 Finalize your paper prototype in Figma.

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).
  • 🧰 User flow diagram/navigation diagram.
  • 🧰 Data flow diagram.
  • 🧰 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, see Project Portfolio.

3.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.