Microinteractions
Design of triggers to create an immersive connection between the user and a digital environment.
A personal project devoted to the design of different interfaces and micro-interactions that smartphone users could face in their daily lives.
12.2020 – 1.2021
Type
UI / Interaction Design
Tools
Illustrator, Photoshop, XD, Figma
Form
Functionalities
This is a proposal for a sign-in form interface.
For this project, I wanted to minimize the required fields in order to keep the interface as clean and clear as possible.
There is a bar menu, four mandatory fields, two checkboxes, and one CTA button to submit the form as interactive elements.
My goal was to do an elegant form that could be applied to several and different utilizations.
Design guide:
– Colors: Background: #FFFFFF; Fields: #E2E2E2 – #F9F6F6; Font-color: #000000; Logo: #3B3B3B – #FFFFFF; Button: #DAE2FE – #88A4FF – #88A4FF (inactive), #3448FF – #000A2B (active)
– Font-family: Helvetica (regular)
Settings Interface
Functionalities
Settings interface in smartphone App. Volume regulation, microphone activation, and camera activation.
A proposal in both, light mode and dark mode.
An interface that is intuitive to interact with, but also visually appealing inspired in neumorphism.
Design guide:
– Colors:
- Dark mode: Background: #313033 – #3A393D; Icons: #6562FC – #80EFDB – #4DC9FF;
- Light mode: Background: #F9F9F9 – #F1F1F1; Icons: #9D9BFF – #BCFFF3 – #8EDDFF;
– Font-family: open sans (regular)
Voice Recorder
Functionalities
Voice recorder interface for mobile App.
This proposal is a redesign of the voice recorder commonly used in both Android and iOS devices. It includes a button to start the recording, storage of previous recordings, and access to deleted recordings.
This project has the aim of being a clean and intuitive interface in an elegant and minimalist style.
Design guide:
– Colors: Background: #2D2D2D – #303030; Font-color: #FFFFFF; Previous voice files: #707070; Button: #FF0101 – #FF8E8E
– Font-family: Franklin Gothic (medium)
Internet Speed-Test
Functionalities
Interface for mobile App that measures internet download speed.
I have included a common color-coded bar to indicate the range from negative to positive values, code numbers, and a sine wave to add visual feedback.
My proposal was to create a nice and clear interface including elements from glassmorphism and neumorphism.
Design guide:
– Colors: Background: #010C2A – #148FA2 (gradient); Font-color: #FFFFFF; Menu: #004354; Button: #45A5B9 – #10798D (inactive), #073D58 – #96B3BC (active)
– Font-family: nunito (extralight, semibold)
Conlusions
About details
The importance of details is something that I have learnt by making these interfaces for different uses and applications. Each user receives diverse visual information and it is very interesting to know how they see in order to create something that is accessible, intuitive and pleasant.
Paths
By means of these small projects, I wanted to face new fields. I find it very interesting to explore the creation of interfaces that can cover all kinds of needs and applications.