PartyDuet.pl - Landing Page for Party DJ's
UI Case Study
Design of a landing page for a party DJ, showcasing the usage of colours, typography, components, atomic design, and more.
What
Responsive Website
Where
Poland, Environs Tri-City
Why
Commercial Project
When
10.2023 - 11.2023
Category
Event Management
Role
Designer
Main assumptions during the creation
The landing page was created for Party Duet - two friends who want to give their good energy to others. Main tasks during creating a website were simple - as little as possible of text, and tons of video and photos. They want a website that screams with professionals, but also you can find some extravaganze in there.
However, I have to abandon the project due to communication problems with the client. I decided to describe my thought process anyway.
Proto-persona
To help me visualize the direction I’d like to take in terms of the UI design, I decided to create a persona, to understand whats the most important.
Moodboard
To get a better idea of what PartyDuet's style is perceived as, I looked through their entire social media and asked them themselves how they see themselves. I created a simple Moodboard to illustrate all the colors they use most often.
Colors
When designing, I focused on a dark color scheme to emphasize the nature of the site. The basic color was chosen by the client beforehand, and I created a color palette based on it.
By defining a colour system, I ensured I have a controlled and consolidated palette of colors, so everything is maintainable;
I went with the HSL colour model to get the exact tints and shades of the main colours. For time-saving purposes, I used a Figma plugin called “Color scale generator” to generate them;
I scaled colour names between 0 and 900 based on HSL’s lightness;
To reduce the cognitive load, enhance decision-making speed, and make it easier to maintain the colour system, I limited tint and shade quantity from 10 to a maximum 5.
Primary colours
Design of a landing page for a party DJ, showcasing the usage of colours, typography, components, atomic design, and more.
400
#FFD865
500
#FFCE3A
600
#FFC30F
700
#D6A100
800
#AD8200
900
#856300
Neutrals
I decided to use only 3 shades of neutrals - 1 for background, and 2 more for texts. By that, I keep everything very simple. Allthought, there is some special cases where I used a Primary Color, as a text color to to keep the user's attention.
White
#FFFFFF
Headings Color
#F2F2F2
Body Color
#D1D1D1
Background
#1D1D1D
Black
#000000
Typography
To maintain consistency and visual hierarchy, I created a scalable type scale, using “Type Scale - A Visual Calculator” by Jeremy Church.
I went with a medium-scale, 1.333 — Perfect Fourth, as it has a clear hierarchy and helps organize sections with subheadings. I rounded up the numbers. It's a good idea to stick with whole, even numbers;
I also added some custom, tailored to my needs, sizes, as I wanted to have some more control. So, e.g., besides having only one basic size for a paragraph (16), I also added 14 and 18;
There are also sizes for the mobile version to maintain responsivity. Thus, H2 for desktop is 48, but for mobile, it’s 36;
Line-heights differ, as, e.g., headings don’t need as much line-height as, e.g., a paragraph. It all comes down to readability.
Headings for desktop
Headings have only one font - Bold;
Line-height for headings was calculated simply by multiplying the size by 1.2 (which, as previously stated, was chosen as the type scale). Therefore, if H1 is 68, I multiply it by 1.2 and the result is 81,6. I round it to a full and even number, and we’ve got 82. The only exception is H4, which I multiply by 1.4.
For better readability, headings have a smaller value for letter-spacing.
Paragraphs
Main body text have size of 18px, but I decided to create an additional type of Paragraphs:
P1 - Used before each H, to give a context of the section;
P2 - Used as a short headline description;
P3 - The smallest text, used as text in the footer.
Typeface
I chose Manrope, which is Manrope is an open-source modern sans-serif font family.
I decided to use this font, because it's really clear and simple, but it's not that popular, so it give that unique fellings of the website.
Manrope laso provide every important style, but I focused on using Bold, Semibold and Medium.
Icons
For the icons, I chose Phosphor, a collection of open-source icons.
Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility;
The size and type of icons are both. customizable.
I used a Framer library to find and use them.
Alignment and grid
Design of a landing page for a party DJ, showcasing the usage of colours, typography, components, atomic design, and more.
Atomic Design
During the development of the landing page, I followed the Atomic Design Methodology. This methodology, authored by Brad Frost, comprises five interconnected stages that collaborate to construct interface design systems in a structured, hierarchical way. Frost describes it as a deliberate approach to design. In this case study, I'll detail how I applied this methodology specifically to create a header component.
Header
The header on my page consists of a logo, set of links, and a CTA button.
Logo
I have to use a figma plugin "Logoipsum", because I didn't receive a logo from the client;
The vector in the logo is one atom, and the text is another one.
Both create a molecule.
Set of links
One link is an atom, a set of them a molecule. Later on, when I create a component out of the set, I can put it in the header and, e.g., change the spacing between the links at any time, and that will be reflected in anywhere I’m going to use the header.
CTA button
Later on, we've got a button with an icon. It's a molecule, as it consists of more than one element, text and an icon.
Components and variants
Creating components and variants speeds up the work and lets us keep everything in one place and make the design cohesive and coherent. What’s more, if we have to create multiple screens, it’s always good to create components out of bigger elements, as, e.g., if we want to change something in the header, we can do that only by adjusting it in the master component and the changes will be visible on every screen. It’s also great for reusable elements, like buttons or cards. For the sake of this case study, let’s see how I approached this while creating a primary CTA button.
Primary CTA Button
There are variants for types (such as Primary, Secondary, and Tertiary), states (Default, Hover, Focussed), and whether the button has a icon at all. Everything I made directly in Framer, to save a little bit of time.
Full page
You can take a look at full page down below, or just open the link. I recommend to open website directly from the link, because I also provided very gentle transitions of each section, to keep the user intrested.
In the section "O nas" should be a short video, where Bartłomiej & Kuba talked about their business, but I didn't receive anything. So I decided to just paste a photo of them (by now).
Check website
See more of my work
I'm proud of the work I've done in my career, and I'm excited to share it with you. Check out my other projects to see examples of my skills and experience.
