Winstri Website Design and Development

The goal of this project was to design and develop a high-performance, modern website for Winstri, a professional server hosting provider. The client required a site that takes inspiration from industry competitors like Vultr and DataPacket, emphasizing a clean tech aesthetic, intuitive user experience, and seamless navigation.

As the solo Web Designer and Developer, I was responsible for the end-to-end delivery of the website. My responsibilities included:

UI/UX Design: Creating a visual language based on the Winstri logo and existing website, including handling a custom Light/Dark theme system.

Front-End Development: Building the entire site within Webstudio, ensuring high-performance, clean code.

Custom Functionality: Developing interactive elements such as a custom global locations map, light/dark theme toggle, testimonial sliders, and animated SVG hero sections.

Accessibility & UX Optimization: Implementing advanced keyboard navigation (tabbing), focus states, and scroll management.

SEO & Technical Setup: Configuring on-page SEO settings and optimizing the site for speed and mobile responsiveness.

Started by analyzing the client’s brand assets and reference sites (Vultr, DataPacket). Established a design direction that focused on a clean and minimal aesthetic.

I built the site in phases, starting with the Homepage to set the design standard. I then moved to the "About Us" and "Service Template" pages, providing the client with video demos at each milestone.

During the process, we shifted the "Contact" page to a "Locations" focused layout to better serve users looking for specific data center information.

Challenge: The interactive map and service tables were difficult to use on mobile. Solution: I implemented a static card-based layout for mobile users while maintaining the interactive experience for desktop, ensuring 100% responsiveness.

Conducted deep-dive testing on tab navigation, "back-to-top" resets, and cross-page link behavior to ensure a polished, "app-like" feel.

Delivered a cloneable Webstudio link.

Fully Responsive Website: A multi-page site including Home, About Us, Locations (Data Centers), and specialized Service Pages.

Service Template System: A reusable template for Dedicated, Game, and VPS server pages for easy scaling.

Custom Interactive Map: A global server location map with optimized mobile fallbacks.

Accessibility Suite: Improved tab-navigation "halos," keyboard shortcuts (Arrows/Enter), and automatic scroll-to-top functionality.

SEO & Performance Package: Fully configured metadata and optimized assets for fast loading.