3. Lab: Design & Flutter GUI
In this lab you will improve your design skills. Design is a craft that you can learn. It is an art if you want to be exceptional. You do not need to be exceptional to get a good grade in this module. However, you need to learn the skills ;) In addition you will continue to learn flutter.
- Everything which should be done individually is labeled with .
- Tasks divided in the team are labeled .
- Remember, everyone needs to do some tasks for each lab.
- You will get feedback for everything with three days after this lab, and we will discuss it at the start of lab 3, i.e. another chance for feedback ;)
3.1 Preparation
Everything if this chapter should be available in a alpha feature complete version.
3.1.1 Design
- Read and understand everything of the chapter design.
- Copy a screen with a list of an app you like using styles and components in Figma.
3.1.2 Flutter: GUI
- Read and understand everything of the chapter flutter up to Flutter principles (13.6).
- In your team repository create a folder learning/yourLastname/lab3 with an app with
- implementation of the Figma screen of the previous task in Flutter
3.1.3 Paper prototypes
- prepare 2 different paper prototypes that may be used for evaluation
- define 3-5 major tasks for your app for the evaluation
3.1.4 Fonts and Colors
- Choose fonts and colors for your app.
3.1.5 Icon/Logo
- Choose/design a logo for your app, you may try recraft.ai.
3.2 During the lab
- We discuss your questions.
- We will all look at your Figma screen and its implementation in Flutter.
- We will look at all documents of all teams of lab 2 and discuss them.
- You will evaluate your paper prototypes with another team.
- You finalize your paper prototype.
- You assign the to-dos.
3.3 After the lab
- you realize your final paper prototype in Figma
Document the following parts in your portfolio (use the file docs/3-Design.md)
- your process up to the final Figma prototype
- user flow diagram
- data flow diagram
- reflect shortly, what went well, what was a waste of time and what was surprising
Within gitlab
- you add screenshots of your figma prototype to your issues
- you create your app in your repository in the folder src
- define the theme
- add your logo
- implement the bottom navigation
- create all files for your screens and widgets