Annotated Wireframes & UI: ValenTunes Search Feature

Charlie Walsh
Aug 9, 2017 · 3 min read

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.

Hex #C15B5B Monochromatic Color Palette

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:

Wireframe

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.

Hex #C15B5B Color use—intended actions and current flows

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

Hex #803D3D—secondary info & actions

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

Thank for reading! Please sub, comment, and share :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade