YG FAMILY
RESPONSIVE DESIGN

The Problem

YG Entertainment is one of the top ranking music companies in the Korean music industry. They are widely known for their wild and crazy fashion style. The genre of music that they mostly have their artists focus on is Hip-Hop and R&B. They have an extreme number of fans from all over the world. The current website YG Family are still actively posting videos and updates on their artists. I decided to choose to re-align and re-design this website because it is not responsive and the overall style was too bland for such a hip company!

img

The Solution

A complete re-design and re-alignment for a flexible grid responsive layout to match the companies hip and funky style, while maintaining the simple use. All of the previous designs have been completely striped and the overall functionality has become much more easier to navigate.

img

Home Page

Simple full page parallax scrolling, color coded by the name of artists. Within each section of the artist, you can scroll through the images. When the images or titles are clicked on, you will be directed to the page it is associated with.

img

Artist Page

When you are presented to a page with a huge button like element, one will be tempted to do no other than push it or tap it. Once the user presses the button, the navigation bar and the artists names will be activated. Users will now be able to choose the artist of their choice.

img

Artist Details

img

Media Page

A full-width video player will start playing as soon as the media page is opened. A filter was added to the video player, so users can differentiate that they are on the targeted page. There will be no sound being played with this full-width video.

img

Media Details

img

Final Visuals Overview

An overview of some of the final visual screens when viewed in a web browser.

img img img

Prototype

View and test prototype of the final design layouts. This protoype is best experienced when viewed on a screen 15" or lower.

UX Methods/Responsive Design Process

The development process for this project consists of sketches, style tiles, and high fidelity visual comps with flexible grid on and off. You can download or view the entire process here.


Sketches


UI Style Tiles