Microinteractions

Designing the channels to create an immersive and enjoyable connection between the user and the digital environment:

A personal project devoted to the design of different interfaces and micro-interactions that smartphone users handle in their daily lives.

Type: UI / Interaction Design 

Tools: Illustrator, Photoshop, XD, Figma

microinteractions

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.