Food Manager App
Design Mobile UI for my startup Replate: AR Menù & Food Manager
About the Project
Where do I start from ?
My idea was to put on the code what was born and raised in my head for several months. I wanted to implement a tool to take a series of photographs in series with each other, and use the images later to recreate a 3D model after starting a photogrammetry process.
What is Photogrammetry ?
Photogrammetry is the science and technology of obtaining reliable information about physical objects and the environment through the process of recording, measuring and interpreting photographic images and patterns of electromagnetic radiant imagery and other phenomena.
About Company
After studying how the photogrammetry works I have broken down the process in many simple steps and I linked them again to adapt all in a simple User Experience for a mobile device.
Project Execution
1 - Design the Mock Up of the scanner.
After creating a Low-Fidelity version of the scanner I started working on the High-Fidelity version. The scanner views have so many details so I choose to put he first focus on this and try to make the photographic acquisition process as simple as possible.
I created all custom components for the project.
1.1 - Create the Prototype
After creating a Low-Fidelity version of the scanner I started working on the High-Fidelity version. The scanner views have so many details so I choose to put he first focus on this and try to make the photographic acquisition process as simple as possible.
2 - React Native Project
- Structure
I created a new BuilderView.js file in the React Native project and started to compose the document. - Create Buttons
After building a general structure, I started working on the individual components in BuilderView.js. The main buttons were of two different styles. Once they were finished, I called them up in the main code. To avoid creating a different view for each animation, I decided to use Modals and customise them as needed. Using specific useStates for each button, I realised the logic for switching from one modal to the next. - Style
So what's the final modal sequence for the BuilderView?
1 - Design the Mock Up of the scanner.
After creating a Low-Fidelity version of the scanner I started working on the High-Fidelity version. The scanner views have so many details so I choose to put he first focus on this and try to make the photographic acquisition process as simple as possible.
I created all custom components for the project.
1.1 - Create the Prototype
After creating a Low-Fidelity version of the scanner I started working on the High-Fidelity version. The scanner views have so many details so I choose to put he first focus on this and try to make the photographic acquisition process as simple as possible.
2 - React Native Project
- Structure
I created a new BuilderView.js file in the React Native project and started to compose the document. - Create Buttons
After building a general structure, I started working on the individual components in BuilderView.js. The main buttons were of two different styles. Once they were finished, I called them up in the main code. To avoid creating a different view for each animation, I decided to use Modals and customise them as needed. Using specific useStates for each button, I realised the logic for switching from one modal to the next. - Style
So what's the final modal sequence for the BuilderView?
1 - Design the Mock Up of the scanner.
After creating a Low-Fidelity version of the scanner I started working on the High-Fidelity version. The scanner views have so many details so I choose to put he first focus on this and try to make the photographic acquisition process as simple as possible.
I created all custom components for the project.
1.1 - Create the Prototype
After creating a Low-Fidelity version of the scanner I started working on the High-Fidelity version. The scanner views have so many details so I choose to put he first focus on this and try to make the photographic acquisition process as simple as possible.
2 - React Native Project
- Structure
I created a new BuilderView.js file in the React Native project and started to compose the document. - Create Buttons
After building a general structure, I started working on the individual components in BuilderView.js. The main buttons were of two different styles. Once they were finished, I called them up in the main code. To avoid creating a different view for each animation, I decided to use Modals and customise them as needed. Using specific useStates for each button, I realised the logic for switching from one modal to the next. - Style
So what's the final modal sequence for the BuilderView?