Wynn Innovations
Nov 10, 2024
Complete redesign of the organization’s website, enhancing user experience and functionality.
Visit Site
Project Highlights
Timeline
September - November 2023
Tasks
UI/UX Design | Web Design | Prototyping | Development and Deployment
Technologies
Figma | React | Vercel
Background
This project centers on enhancing and redesigning the Wynn Innovations website to deliver a seamless, fully responsive experience across all devices. Key objectives include prominently showcasing Wynn Innovations' services and products, guiding users to explore the capability statement and divisions like Wynn Depot for shopping, and streamlining the site by removing redundant pages.
Process
Initial Design & Prototyping
After reviewing the original Wynn Innovations site and collaborating closely with stakeholders, we opted for a clean, modern design that reinforces brand colors and clearly highlights services. Using Figma, we planned, designed, and tested color palettes and interactive elements like buttons, accordions, and various page layouts, delivering stakeholders a comprehensive, interactive prototype before moving on to the development phase.
Styles
Leveraging Libraries and Packages for Efficient Development
When building this site, leveraging well-established libraries and packages has proven invaluable. Not only does it streamline the development process, but it also results in a lighter, more optimized project than if I were to build these tools from scratch. Here are a few libraries I’ve incorporated to boost productivity and enhance functionality in my projects:
Tailwind CSS
Tailwind CSS has transformed how I approach styling. This utility-first CSS framework allows me to build responsive, custom designs without writing a single line of traditional CSS. The flexibility to apply styles directly to HTML elements has not only sped up the styling process but has also kept my codebase lean and organized. With Tailwind, I can achieve a cohesive, visually appealing design in less time and with more control.
React Fast Marquee
To add dynamic, eye-catching visuals, I utilized React Fast Marquee, a lightweight, customizable marquee component for React. This package allows me to create smooth, performant scrolling text or image animations with minimal setup. Perfect for highlighting logos, announcements, or featured content, React Fast Marquee provides a polished, professional touch to my projects without adding unnecessary bloat.
Key Takeaways
Leveraging Figma proved instrumental in creating high-fidelity prototypes, allowing stakeholders to visualize concepts with clarity and precision.
Tailwind CSS offered exceptional flexibility, outpacing traditional CSS in terms of speed and adaptability.
Gained deep insights into the strategic use of flexbox and grid layouts, appreciating their unique strengths and adaptability across responsive breakpoints.