Isometric Technologies
Process
Define the site IA and key user flows
I start with defining what and how many pages we are going to include in the website. Lay them out in a clear IA diagram so whoever picks it up will understand the scope of the project. Next I illustrated some example persona user flows to examplify how a user interacts with the page.
Create wireframes and planning roll out
Once the scope is set, I create accurate wireframes and a prototype with sticky nav bars and working dropdown manuals to give the client a hands on feel for how the site functions. The design gets feedback and refined and is ready to evolve into a higher fidelity.
Creating an Atomic Design System
Taking cues from a very popular approach, I've used the atomic design system for the design of this website. Starting from the smallest ‘atoms’ like a button or a text field, we create ‘molecules’ which are essentially components which will then make up ‘organisms’ which are different content sections that can be interchanged on any page. Various combinations of ‘organisms’ then makes up ‘templates’ which are chosen to host contents of the website.
Custom illustrations and animation to boost brand and messaging
The personality of the website and the brand really gets communicated in the extensive illustrations and animations that myself and a fellow designer has created for this website. Bringing their philosophy into detail, fun and thought provoking illustrations which not only adds visual interest to the site but also powerfully communicates of the main selling points of the business's offerings.
Result
A very satisfied client with their website launched successfully. Supercharging their business with:
- Instant web presence with unique branding and personality.
- Ready-to-roll-out branding assets, setting foundation for all promotional materials to be generated.
- Boost in Lead-Gen and exposure in the industry for potential customers.
