Resources
Desirable Futures Branding Part 2 Website Design
Jun 10, 2024
Ken Tai
Overview
Desirable Futures is a cutting-edge consulting firm based in Australia, founded by three seasoned agile consultants with extensive experience in organizational development. After creating their logo, Mokujiro worked on the website design and development to kickstart their business activities.
Visit Site
The Requirements
The objective was to design and publish a website consistent with the brand identity established through the logo creation process.
This article walks through the website design, which was the second part of the branding work for Desirable Futures.
The Mission
The mission was to manage the end-to-end process efficiently and deliver a best-in-class website that enhances the brand identity, showcases their services to the target audience, and streamlines the process using the latest design trends while maintaining a balance between content, visuals, and accessibility.
The Key Challenges
3D Animation:
Enhance the brand identity through 3D animation.
Content Creation:
Utilize Midjourney to support visuals in the mock-up process.
Accessibility:
Leverage Framer's accessibility features to align with WCAG 2.1 guidelines.
Define the User Experience
Defined the target audience, user journey, information architecture and mock-up including the global navigation design.
Key Personas
Persona 1
A person who doesn't know anything about Desirable Futures.
Persona 2
A person who has heard about Desirable Futures through a community.
Persona 3
A person who knows about Desirable Futures and wants to learn more about its services.
Connected the Dots
The entry points, Desirable Futures' goals, and the personas' goals were connected to create a cohesive user experience.
Information Architecture
Desirable Futures provided the copy, and we defined the information hierarchy and connected the pages in the process.
Leveraging Framer Features
Framer is a powerful tool that streamlined the design process, allowing us to design and iterate directly within the Framer canvas.
The Framer Features Used Most
Layout - Stack:
Similar to Figma's auto-layout (Flexbox in Webflow), this feature enabled easy creation of columns and alignment of items.
Assets Tab:
Like Figma, this feature allowed for storing components, text styles, colors, links, CMS items, and custom codes.
Accessibility:
Framer's accessibility features enabled setting accessibility components, tag, tab index, alt text, and ARIA labels.
3D Animation
As part of the brand identity, a 3D animation was built in the hero section using Spline 3D, which can import and edit 2D and 3D files in various formats, such as .fbx.
The animation was exported from Spline and imported into the embedded section of Framer, with consideration for site performance.
