Resources
Desirable Futures Branding Part 2 Website Design
10 June 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.
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.
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.
Takeaways
Streamlining the Process
The latest platforms, such as Spline 3D, Framer, Midjourney, and Notion, were utilized to streamline and augment the quality of the outcomes.
Handover Process
The handover process involved exporting the original file and migrating the design file into the client's account. The client then tweaked the content, changed photos, and copy. When layout issues arose, support was provided to fix them, as the designer could not remain in the client's account indefinitely.
Conclusion
Overall, working on this project, including the logo creation and website design, was a great experience, leveraging cutting-edge tools and techniques to deliver a brand-consistent, accessible, and visually appealing website for Desirable Futures.