LeapEd Sdn. Bhd. reached out to us for Branding & Web Design services. We offered consultancy to build their brand & website.
This is the Phase 2 of SAM Education project. Please view the Phase 1 SAM Education Brand Identity Design if you missed it.
Phase 2: Wireframing the web layout
This is the overall look for layout & copywriting. The reason a wireframes doesn't have color & images is so that the client can focus on the layout & typography. In my expericence if I skip wireframing, the process will not be as smooth.
If I showcases the ready UI Design, there will be changes on the layout. And to change a ready UI layout will be more time consuming than to finalize on wireframes which focuses only on layout & copywriting.
After I've finalized the Wireframes Layout with client, I will start the UI Design Process in Figma.
Phase 3: UI Design
Since the Branding Guideline I already design it using Figma, this make my process much more efficient. At this point, I have prepared:
1. Wireframes (Layout & Copywriting)
1. Wireframes (Layout & Copywriting)
2. Styleguide (Color, Typography & Components)
The styleguide is seemlessly input into the Design System coming from the Branding Guideline I've done on Phase 1
Therefore on this Phase, I just need to make the final touch on the Wireframes using the Styleguide coming from Brand Guideline.
Finalized UI Design
Wireframes
Wireframes & UI Side by Side
Final Phase: Design / Develop in Framer & publish to live Domain (sam-education.com)
The Dark Mode Version
Adding second Language (Malay - Malaysia) to the site
Responsive Sizing (Desktop, Tablet & Mobile)
And to spice it up, I also put in some Animation while ensuring the site is still lightweight & Load Fast
I achieve this by adding the Lottie file. Lottie is the new format for GIF which uses Vector Graphics to create a motion. This new format is 99% smaller in its size compared to GIF. If a GIF file is 321kb, the Lottie file will compress it down to 6kb!!
Read more about Lottie
Read more about Lottie
The Final Website: sam-education.com
SAM Education - About Page
SAM Education - SAMPEDIA page
THANK YOU
I've been enjoying working on this project. Going forward in the future, I believe minimal design is the way to go. It can help your busine ss be simple, fast & cost effective while still maintaining a professional & premium look & feel. To ensure I always enjoy the work I do & achieve more while being efficient with my work, I only do Minimal Design Concept.
Feel free to Contact me for a Branding & Web Design Services
___
Email senigrafic@gmail.com
More Info senigrafik.com
