Background

My favorite artist of all time is K-pop group Seventeen. In order to familiarize myself with Bootstrap and its components, I redesigned Seventeen's company profile home page into a sleeker, more concise web page.

Problem

Seventeen's company profile homepage lacks creativity and could massively improve with careful attention to design principles like color, information hierarchy, and grouping. After noticing that a lot of the content would fit better with certain Bootstrap components, I aimed to use Bootstrap to code a new artist homepage.

Wireframes

Using Figma, I developed low-fidelity wire frames with a mobile-first methodology and a column-drop transition pattern.

Final Prototype

The final design utilizes Bootstrap elements such as a container and grid structure, cards, navbar, carousel, accordion, and modals.

View Website

Key Insights

Through this project, I was able to familiarize myself with Bootstrap and its different components. Specifically, I learned to:

• Design a responsive website using the mobile-first methodology
• Code a responsive website using the Bootstrap container and grid system and breakpoints
• Incorporate Bootstrap elements like cards, navbars, carousels, accordions, and modals for a seamless design

Reflecting on the work, many improvements could be made, such as:

• Coding a smoother carousel with cards
• Integrating more customizations of Bootstrap elements to fit the theme