Katy Perry's Responsive Website Proposal
PROJECT OVERVIEW
This personal project consisted of designing and developing a responsive website for an artist or music group.
SERVICES
One-page responsive website design and development with HTML 5 and CSS.
CHALLENGE
My role was to design and develop a one-page website, where all contents are presented on a single HTML file. This website had to count on a meticulous, elegant, trendy, and especially, usable, design.
The navigation system had to work through a network of anchor links with animated scrolling. The main menu had to remain fixed at the top of the window in order not to interfere with browsing through the content.
STRATEGY
The first step I took to confront this project was to select an artist or music group, who would be the focus of my website. I chose Katy Perry because of the great value this artist places on aesthetic aspects in her photos and concerts: attractive and creative outfits in which colours are always present.
Once I analyzed the style and tone this artist tends to reflect on its official website and the stage, I started to collect eye-catching quality images, including studio-quality photographs, concert photos, icons, logos, etc. This material would later allow me to create a static design for Katy Perry’s non-official website with Adobe Photoshop. There, I took relevant design decisions, including those related to composition, colour palette and typography.
Afterwards, I started to develop the one-page website for large screens with help, especially, of Brackets. Once satisfied with the look of the website, I included interactivity elements, such as CSS animations and other jQuery features.
After having checked that all interactive elements were working properly, I defined the functioning and variations of the website according to different screen sizes and orientations, to obtain a responsive website for all devices.
