BANDTALITY
Overview
Project
Bandtality (website)
Role
Design Lead
Accomplishments
- logo design
- design + front end // pages for landing(home), sign up,
login, profile, login side-menu, messages, input forms
- back end // basic Model, Views, Controller setup
Skills
- Photoshop, Illustrator
- languages: Ruby on Rails, HTML, CSS
- gems used for design: bootstrap, font-awesome
Process 1: Branding
Keeping in mind Bandtality's goal--bringing musicians, artists, and venues together--and the larger purpose it was promoting--music, I tried to symbolically incorporate the two elements through its logo.
First, the triangle not only resembles a play button, but also lays out a path within the shape that continuously leads to its three corners, which represents the three stakeholders.
Second, the bright orange and contrasting dark borders show both liveliness and boldness. It is also consistent with the website's color patterns.
Purpose
As the final capstone project for my summer 2015 web dev bootcamp, my team and I created a networking website for the local music and art scene in Salt Lake City. While we all collaborated and participated in the website's idea and technical development, my main focus was its design.
Bandtality--hybrid of 'band' and 'vitality'--aims to provide a platform for musicians, artists, and venue representatives to connect and communicate. Through the website they could search and contact resources as well as promote their business, all while supporting the arts.
Process 2: Web
Right off the bat, I knew I wanted a clean, straight-forward design for any user type. My team and I discussed how different users' profile pages should have a unifying design theme and generally similar functions (e.g. photo albums) ,while also noting special features depending on profile type (e.g. soundcloud for musicians, Google maps for venue reps).
Because users sign up, the logged-in version needed a separate design from the landing page. I decided side navigation were appropriate, leaving space for other pages while visually keeping other menu options in tact. Since a high contrasting color motif catches the eye without too much strain, the dark navy/bright orange was kept similar to the landing page for coherence. Card-like arrangements nicely divided contents without breaking their larger flow. In general, clutter-free simplicity governed design direction.
Though I did not specifically learn front-end in my program, I picked it up as I referred to bootstrap documentation and manipulated basic templates.