How I Created Rihanna's Conceptual Homepage Mockup

Who wouldn't want to work with Rihanna on her brand design and website!? I know I would!

When I was younger and hadn't yet secured a full time agency role, a Creative Director at an agency I was applying to gave me advice. He said, "Even if your portfolio isn't where you want it to be, you can design conceptual designs for brands you love to show your capabilities."

I thought this advice and concept was game-changing. Since then, I've loved designing mockups like this to show my interpretation of a brand. This one is no different, though because it was only going on social (and not my portfolio, trying to land myself a job), I only spent about 2 hours on this. However, for what it's worth, I still think it represents Rihanna well.

Since I started posting these conceptual reels to Instagram, I realized that there's so much more I want to share about each brand than I have room or time to say in a short reel. Therefore, I'll use these blogs as a space to dive deeper.

With that said - I'm going to break the whole process down for you. Keep in mind, all in all it was only about 3 hours of work, whereas when we work with a client, by the time we get to the Homepage design of their website, we've already spent countless hours on branding, strategy, design foundations and thinking around their brand. However, the whole idea with the Conceptual Homepage series is that they're my quick attempt at designing the homepage for a personal brand we all know and love.

‍

Step 1. Plan and Get Inspired

‍

‍

Before jumping in the design, I always start by researching the person. I pulled images I felt represent Rihanna well. They show her personality, style, energy, and carry some elements I felt would be important to use. This research brought me to create a really simple yet bold color palette consisting of a black, red (inspired by her lip in the photo above), and a light tan. I also started playing with font exploration, finding fonts that felt both confident and commanding but also sleek and feminine. While her current site is rather boring with a confusing user experience and navigation, I liked the slants they created with some of the tiles and brought this over to the new design. It felt original and unexpected, which is just the right note we wanted to hit with her site.

‍

Step 2. Consider the Layout and Sections

‍

‍

Before designing any conceptual homepage, I spend some time thinking about what sections are needed to tell their story. I think of a homepage as a cliff notes to their entire brand, or in this case, their businesses and entire ecosystem. Therefore, I wanted to make sure all of RIhanna's businesses, news, ventures and press is accounted for on the homepage.

The way I thought about Rihanna's homepage is: 

1. Top banner that presents Rihanna (doesn't need much other than image/video and a bold name because, well... it's Rihanna!)
2. Section for latest press - her most recent collabs, features, news, etc
3. Because music is such a big part of her brand, this was the next section. A bold section header with a background video would be ideal, and then her top 3 selling albums (with the ability to see more)
4. An About section that would include a button leading to her about page
5. An opt-in to drive email signups and grow her list (to later market to)
6. Her apparel (showing top 3)
7. A Rihanna quote and her 3 businesses

‍

Step 3. Design it out - thinking about balance and flow

‍

‍

Once I knew the sections I wanted to include, it was time to get into design. When I'm designing any Homepage, I think about 3 things the most: 

1. Color usage
2. Layout - keeping things interesting as you scroll through the page, so it feels fluid and engaging
3. Overall balance. Less is more most times!

While we want a strong and ownable design, the key is not overdoing it. We want to create a page (and typically an entire website) that feels cohesive and brand aligned with every section. The colors should be used in a way strike the right balance and tone that you want to create (depending on what the brand is). For instance, if the brand is for a sleep consulting company, think about the tired moms visiting the website and choose colors and styles that they would feel calmed by.

To see the original post, click here

‍

Full Homepage Mockup:

Ready to take your brand and website to the next level? 

We'd love to work with you. Contact us today to get started.  

‍