Maldam - Web Design and Rebrand Identity
The Challenge
“Quality tells a story, Authenticity brings people.” - Mika Wilhelms (Designer)
The Brief
REDESIGN A LOGO
Redo Maldam Logo in Adobe Illustrator. Create a variety of Logos.
VISUAL IDENTITY
Create an Identity through Tone, Colours, Logo and Typography
HAVE A SCALEABLE WEBSITE
Have a Responsive Website by having a design system in place with a consistent setting.
The Approach
Previous Brand Colours:
Green and purple are contrasting colours (opposite colours) and therefore is a good basis of brand colours. Although, these colours are too light and a darker palette will suit better.
AEA3FF
C6BDFD
D6FEBF
CCFFC4
Visual Identity: OLD LOGO
*Malgam had trademark problems in the UK, therefore it was later changed to Maldam in 2024*
The pillars and the pantheon represents each artists to compile as a collective.
Logo Variations
The following Logo has been trademarked by MALDAM™ in 2024 for legal right to use.
Primary Logo: with details and serves as the main representation across all platforms
Secondary Logo: Simplified version ideal for small spaces, in print or digital format. For compact spaces.
Submark: a simplified version, ideal for smaller spaces in print or digital format, ensuring brand presence even in compact areas.
Favicon: A tiny browser icon. it enhances brand recognition and facilitates brand identification. Serving as both a reminder and a brand booster.
Visual Identity: New Brand Colours
#1b1b1b
#fefefe
2E3A28
321F37
Visual Identity: Typography
Tone:
Be aware of your language use
Talk about your product or service in a way that aligns with the brand's / company's values
Perception comes from every angle not one angle
Minimal, contemporary, sustainable, functional
Mockup:
I approached the contents of the website in Figma with a column styled layout, and divided them into rows, making it 5 square elements in each row.
Lottie Animation:
With a rebranded and newly trademarked logo. I took advantage of it and decided to make a Lottie Animation with the Logo revolving with scrolling view.
The Lottie Animation was made through Blender and was rendered individually by frames
Responsiveness:
Viewport Height for desktop and Mobile:
Having to make sure each component respects the rule of the viewport (Especially the Div Boxes) , means that it will always adapt to what screen size a user is opening the website for.
Design System: Accessibility
I took inspiration from the pg-lang.com website from their menu (left image below). I included a similar approach where I used shapes as a universal language of understanding and that anyone with any background can recognize the shapes. (right image below)
I also included a live updating date with the time and calendar at the bottom of the website and is respective to any users clocks.
