Overview
This website was meant to reflect StarQuantix’s innovation and creativity, they wanted to reach out to future investors and partners. I was responsible for the end-to-end development of the website, from the conceptual design to front-end implementation using Next.js as a framework.
Project Phases
1. Research & Conceptualization
- Understanding the brand’s identity and target audience: By Creating a Mood board in Miro that helped us to have the whole brand into perspective, what we were looking for, basic brand colors, the scene of innovation, space, starry night, wow factor, minimalism for illustrations and re-use or brand’s typography.
- Researching competitors and industry standards: The team wanted a look that was similar to the top companies in Artificial intelligence in the market, I checked each website they shared with me, adding notes on what they use, what I like, and that really help us decide what we wanted to keep for StarQuantix.
- Defining project goals and key features: Here is a list of features or specs that we love and wanted to be part of the website, selecting those was really easy after inspecting my notes on each website.
4. Wireframing & UI Design (Figma)
- Creating low-fidelity wireframes to define structure: I created a basic layout for the main parts of the landing page: Video hero, full image, full text with a message, why StarQuantix, and footer and contact form.
- Designing high-fidelity UI in Figma, focusing on usability and aesthetics: Based on the mood board, selected fonts, style and color palette, I created these high-fidelity versions for different devices.
5. Front-End Development (Next.js)
- Setting up the project with Next.js and TypeScript.
- Implementing the UI with React components.
- Ensuring a responsive and accessible design.
6. Performance Optimization & SEO
(In progress)
- Optimizing images and assets for fast loading times (already part of the framework and we also use .web images).
- Implementing lazy loading and code splitting.
- Ensuring SEO best practices for better visibility.
7. Deployment & Testing
(In progress)
- Testing for cross-browser compatibility and responsiveness.
- Fixing bugs and optimizing performance.
- Fixing some details to ensure we comply with the Minimalism principle (Nielsen’s)
8. Wish list
- Using a video for the landing page.
- Adding animations/interactions for a polished user experience.
Challenges & Solutions
- Footer image: Footers can be sometimes boring, we wanted to add some flavor to the mix, but it took some interactions to get what we wanted.
- Maintaining design consistency in code: Developed a reusable component system like the full size image
Key Takeaways & Learnings
- Gained experience in Next.js.
- Improved skills in Figma.
The team absolutely loved the final version of the website because it perfectly captured the spirit of the StarQuantix brand. The design felt modern, sleek, and forward-thinking, aligning with the company’s vision of innovation. From the carefully chosen color palette to the clean typography and intuitive layout, every element worked together to create a polished and professional look. In the end, the website didn’t just look great—it felt like StarQuantix. 🚀
