Annotated Wireframes & UI: ValenTunes Search Feature
30 Days, 30 UIs: Day 2

My goal was to create a feminine iOS Product with a Monochromatic palette working only with a range of the color red, or Hex #C15B5B.

Thus, ValenTunes was a born. ValenTunes is a Social Media app concept that allows people to share their stories of love with the world by recording audio for anyone to listen to or interact with.
Layout & Structure
I started wireframing a 4x4 grid for dynamic content, creating a search experience for finding stories. Here’s a breakdown of the searches design:

Dynamic Story Cards
Annotation 1. shows a Story Card. These cards house the persons story in the UI and allows users to interface with the recording. Cards have buttons for playing/saving a story. Each Story Card has a dynamic content—an uploaded image, title, an audio file.
The Content Hierarchy
Annotation 2. explains the content hierarchy per Story Card. The user’s image has th most presence because we read images way faster than text. The Story Title is 2nd most important because it explains what this person wants to say to the world. The Person Name holds the least importance to deciding whether to listen to the story and has the least prominence.
Design Elements

I started with creating buttons in Sketch.
I created a doodle-looking heart outline. When represented vertically, a user can favorite, or “love” a track. It’s also used in the play button when displayed horizontal with a circle outline. Each of theses icons have active and inactive states. Active States are represented with a solid fill.
For navigation, I borrowed Design elements from Soundclouds iOS App.
Color Use: Action Colors & Secondary Flows.
Action colors are key to understanding the design. Hex #C15B5B, represents the intended action and current states in any flow.

Wine Red or Hex #803D3D is used to show any secondary information or secondary actions in a flow.

Pink and white are used to show the fore and ground of the search function.
