Flutter App: PotatoVerse — Prototypes
Well, it’s about time we bring our PotatoVerse wireframes to life by creating prototypes. Prototyping is an essential stage in the design process that involves building interactive, visual models or screens of your app that closely resemble the final product or system.
In part 6, we created wireframes, the skeleton of our app. Those wireframes now guide this next phase: developing high fidelity prototypes, where we start adding the meat. This includes the colour, typography and perhaps even motion.
Before we get started, here is a quick refresher on how wireframes actually differ from prototypes.
In product design, prototypes serve a few key purposes as summarised in the chart above. Here’s a quick expansion. They serve to:
- Visualise the final experience. Prototypes display how colours, fonts, and different components come together in the application. So you can clearly visualise How the final product will look like.
- Test usability early. The visual appeal coupled with added interaction will help the designers in conducting usability tests. Therefore, they can catch layout or navigation issues before the complex development work begins.
- Gather stakeholder and user feedback. Prototypes serve to validate the ideas shared with something tangible. From them, we can get stakeholder feedback and possible iterations can be easily implemented.
- Guide developers. During the implementation phase, prototypes provide a visual reference for how the app should look and behave. The developed final product should mimic the prototypes created.
Prototyping is the bridge between concept and code. It will help you to test any assumptions, validate design choices and ensure the user experience is always front and centre. Prototypes help to answer questions like:
- Does the navigation feel intuitive?
- Are users finding the main actions e.g., buttons, drop-downs, menus etc. easily?
- Is the user able to go to the right areas to complete a required action?
- Are the transitions or animations serving a purpose? And are they smooth?
- Are all the key components captured in the UI?
Part 7— Prototypes
Step 1: Choosing a prototyping tool
There are many tools available for creating interactive, high fidelity prototypes. Like; Figma, Adobe XD and Sketch. For this project, we’ll be using Stitch by Google.
Google Stitch is a new experiment from Google Labs that allows you to turn simple prompt and image inputs into complex UI designs and front-end code in minutes. It relies on the multimodal capabilities of Gemini 2.5 Pro to create a more fluid and integrated workflow between design and development.
Get Jackie Moraa’s stories in your inbox
Join Medium for free to get updates from this writer.
Stitch key features:
- Generate UI from natural language
- Generate UI from images or wireframes
- Rapid iteration and design exploration
- Easy transition to development e.g., Figma for further UI refinement or front-end code exportation for code refinement.
Step 2: Defining the visual language
Wireframes give the structure but the prototypes add the look and feel that will make our PotatoVerse instantly identifiable.
- Colour palette: We’ll use warm, earthy tones inspired by the might potato. So think yellows or oranges, browns and creams
- Typography (fonts): I’m thinking about a combination of something clean and friendly like Poppins, Nunito Sans or Roboto. Typography should remain consistent across all the screens and text types e.g., body, headlines, sub headlines etc. to maintain hierarchy and readability. I’m also researching on other fonts similar to what Instagram is currently using. If you know the name of such a font, please share :)
- Icons & Images: Rounded icons will be fitting for the nature of this app. It’s a fun app so nothing boxy or sharp. Use high-quality recipe photos that are crisp with minimal filters to make the food look delicious and inviting.
- Spacing: Ensure we have generous white space between elements. This improves readability and gives the screens a calm and very modern look.
Step 3: Create the prototype
With the visual tone we have set, we can now turn our wireframes to hi-fi prototypes. For stitch, I uploaded the wireframes images, set the prompts for how I wanted the screens to look like. You might need to do a series of iterations through additional prompts to get the screens to look how you want them to look.
Step 4: Adding interactions
At this point, the design is complete. We have polished screens, colours and consistent elements. So ideally, here is where you can make the prototype come to life by adding interactions. Look at the functionality and user interactions that will bring the prototype to life and apply design thinking to identify key features for testers and stakeholders.
These interactions will provide the testers with a clickable experience. That is; button taps to move between screens similar to how a real app would behave. So go ahead and…
- Link buttons, icons, and cards to the other screens
- Add transitions e.g., slide-in, fade etc.
- Add gestures e.g., swipes, scrolls etc.
I’ll not be adding the interactions for our prototypes as I just want to focus on the visual design and I don’t really have actual stakeholders/testers.
Step 5: Testing
With interactions in place, test the flow of the app with real users, stakeholders and developers to gather feedback before development starts. This is like a ‘rehearsal’ for your product. Users can see how everything feels in motion and pain points can be easily spotted and thus refined.
And that’s it! Our PotatoVerse wireframes have been transformed into high-fidelity prototypes. Now our rough sketches from Part 6 now look closer to what a finished app would. Even without the interactivity, the prototype tells a beautiful visual story with the fonts, colours and images. We have created something tangible enough for the developers to visualise and build.
In our next article in the series, we’ll take these visuals into the implementation phase, where they begin to take shape in code.
“It is a mistake to think you can solve any major problems just with potatoes.”
― Douglas Adams, Life, the Universe and Everything
Thank you for reading ❤
Check out the previous articles on this project.
References
1. https://www.figma.com/prototyping/
2. https://developers.googleblog.com/en/stitch-a-new-way-to-design-uis/
3. https://www.figma.com/resource-library/high-fidelity-prototyping/
4. https://www.interaction-design.org/literature/topics/high-fidelity-prototypes
