Examining Formal Elements of Interface Design and Using them to create an Interface

Working of components Visual Design in the context of interface design.

UI designers try to envision what doesn't exist. They work with the Formal Elements of Interface like Language, shape, color, imagery, typography, and icons and try to define the Look and feel of the project.

To understand this better we will take an example and try to a create a sketch for an app that focuses on one simple task.

A heartbeat monitor for lovesick teens is the topic for which we will sketch an app.

Step 1 : We will try to answer the following questions about our product:

• What is it?
• Who is it for?
• Where will it live? On a smartphone, website, computer, or…?

(In the following paragraph all these questions have been addressed)

It is a heart beat monitoring app for teenagers who want to discover whether they are in love or not. The microphone of your phone will listen to your heartbeats and then it will discover whether you are in love or not.

( Our idea can be more speculative, regardless if it will work or not. What matters first and foremost is the interface.)

Step 2 : We will try to find the name of our digital product

Consider the words which comes in your mind after reading the topic, and using those words we will try to create something new which meaningful as well as fun.

“Heartbeat, Heartbeat monitor, Lovesick, Teens , Teenagers, Heart”

LoveBeats is the name of our digital product here.

Step 3 : We will try to find the tagline for our project, using suitable language aligned with the intended audience.

“Discover the real truth because your heart never lies”

Step 4 : We will try to describe the description of the main activity or function of the app

LoveBeats is a revolutionary software that allows a young teenager to unravel the secrets present in their heartbeats by using a regular microphone present in their mobiles. This software analyses the user’s heartbeats and reveals the whether they are in love or not.

Step 4 : We will try to define a mood board containing the visual research for this project idea.

(The mood board should contain between 15 to 20 images which define the mood or attitude of our product or service, with at least one possible typeface that will appear in your design. It should also have a color palette of 3 to 5 colors based on/pulled from the imagery you collected)

Step 5: We will try to create a small pattern library of interface elements for your digital product or service. We should apply the look and feel which we have established in our mood board when designing these elements.

Step 6: We will try to create an interface for our proposed digital product idea. We will be pulling together the elements which we have developed with our mood board.