Reach me at:
andrewshpachuk@gmail.com
↗
@lingvo838
↗
↗
Contact
About
SKYRON – Premium class B2B website
A premium digital identity for a Ukrainian custom-glazing company working with architects and developers across Ukraine and beyond.
Role
Product Designer · Art Direction
Client
Skyron — custom architectural glazing
Year
2021
Timeline
~3 month
Scope
10 pages · Desktop + mobile · 5 homepage concepts
Build
WordPress, in collaboration with a development partner
Live
Tools
Figma, After Effects
Overview
Skyron makes custom architectural glazing — facades, partitions, full-glass walls, premium constructions for private villas, restaurants, residential developments, and high-rises. Not the kind of company that sells windows from a catalog. Every project is bespoke, and their clients are mostly architects, contractors, and developers — people who care about how things look, fit, and resolve at the millimeter level.
I was brought in by referral to design the company's website from the ground up. They had a logo. Nothing else — no existing site, no brand guidelines, no design system to inherit. The brief was simple in form and demanding in practice: build a site that lives up to the work.
The result is a 10-page site with desktop and mobile versions, five distinct homepage concepts in the early phase, full prototyping in Figma, and live development I supervised end-to-end with a development partner. The site is now live at skyron.ua.
The starting point
The challenge of this project wasn't a complex feature set or a difficult flow. It was a single, harder question:
How does a website convey premium without saying the word?
Skyron's market is sensitive to it. Architects don't want to be sold to — they want to recognize quality on sight. The site needed to do three things at once:
— Look like an architectural object itself, not a product brochure
— Communicate scale and craft without leaning on stock-image clichés
— Earn the trust of professionals who'd be sending real projects with real budgets
There was no legacy site to lean on, no template to start from. Everything — the visual language, the typography, the layout system, the motion vocabulary — had to be invented for this brand specifically.
Understanding the company
Before sketching anything, I spent time on Skyron's production floor and in conversations with the team. I wanted to understand the work physically — how the constructions are made, what makes a project complex, what the team is actually proud of.
You can't design a site about craft from a brief alone.
A few things shaped the design once I'd seen the work in person:
The product is light, not glass. Talking to the team, the recurring word wasn't "glass" — it was "transparency," "light," "openness."
The constructions are framing devices for views and daylight. That reframed the visual approach: the site shouldn't feel like a product page, it should feel like being inside one of their projects.
Scale matters. Their projects range from a private villa to a 100-meter high-rise facade. Showing scale honestly meant generous whitespace, full-bleed photography, and refusing to crop hero images down to comfortable web proportions.
The buyer is sophisticated. Architects and contractors don't need to be persuaded with marketing copy. They need clean information: technical specs, materials, project breakdowns, geographic coverage. The site had to feel curated, not promotional.
Five concepts
Rather than committing to a direction in week one, I designed five distinct homepage concepts — genuinely different visual languages, not variations on a theme. The point was to give the client real choices and use the conversation around them to surface what the brand actually wanted to be.
The five directions ranged from a strict editorial-grid concept (think architectural magazine), through a more cinematic, full-bleed video-driven version, to a stricter typographic concept where the wordmark and broken letterforms carried most of the visual weight. Each one was prototyped to a level where the client could see how it would behave in motion and at scroll.
The conversation that followed was the most useful part of the process. We didn't pick a concept — we picked the parts of concepts that resonated, and I composed the final direction from those. The broken "SKY" typographic treatment, the cinematic full-bleed openings, the editorial grid for project listings — all of it came from those early concept conversations.
The design system in practice
With a direction settled, I built out the system across the full site.
Typography as the load-bearing element. The site doesn't rely on illustration or decoration — typography does most of the visual work. Large serif-meets-sans display type, broken letterforms ("SKY" as a recurring motif), aggressive scale shifts between hero typography and body copy. Type sets the tone before any image loads.
A two-mode visual system. Light mode for content-heavy pages (Materials, About, Delivery), dark mode for hero and project surfaces where the photography needs to dominate. Switching between them as you scroll became part of the rhythm of the site.
Photography as architecture, not decoration. Every photo is full-bleed, uncropped, and given room to breathe. No carousels, no lightboxes, no framed thumbnails competing with the work. When a project deserves a full screen, it gets one.
Motion as material. The site loads with a percentage counter, scrolls with subtle parallax, and has small typographic animations at section transitions — not for show, but to give the site the same physical, deliberate feeling as the constructions it sells. I designed all of this in Figma prototypes and in After Effects timing references for the developer.
The pages
The final site is ten pages, each with a distinct role:
— Homepage — the editorial opener; sets tone and routes to projects — What we do / How we work — process, methodology, what makes Skyron different — Materials — the technical layer; specs and components for professional buyers — Projects + individual project pages — the portfolio, full-bleed photography, project context — About — company story, team, geography (10 years, projects across multiple countries) — Delivery & payment — logistics, coverage map, pickup points — Montage — installation process, what's included — Service & warranty — post-installation, contracts — Contacts — locations in Kyiv and Kharkiv, contact form — Menu, success, privacy — supporting pages
Every page was designed for desktop and mobile from the start. Mobile wasn't an afterthought — for a site like this, where 40-50% of inbound traffic comes from architects browsing on the move, the mobile experience had to feel just as composed as the desktop one.
From design to live site
The site is built in WordPress, which was the right call given the client's needs around content updates (new projects added regularly, three language versions to maintain). I worked closely with my development partner — someone I've shipped real projects with for years — through the entire build phase.
My role during development:
— Quality control — reviewing every page in browser against the Figma source, catching spacing, typography, and interaction drift before launch
— Resolving compromises — for any layout or animation that couldn't be implemented exactly as designed, finding the version that preserved the intent
— Animation supervision — the loading sequence, scroll behaviors, the "SKY" letter animations were specced from my side and refined together during build
— Cross-language adjustments — Russian, Ukrainian, and English versions all needed to hold the same visual rhythm despite different copy lengths
This is one of the parts of the job I genuinely enjoy. Most designers hand off and walk away. I think the design only really exists once it's running in a browser at real device sizes with real content — and getting it there well is part of the work, not separate from it.
Outcome
The site has been live since 2021 and continues to be Skyron's primary digital presence. It's been the public face of their work through more than 100+ projects across Ukraine and abroad — including high-profile projects like Hooks restaurant, private villas, residential developments, and high-rise facade work.
For me, this project was a turning point in two ways. It was the first time I worked end-to-end with a development partner I could trust, which opened the door to a model I now use regularly: design plus production-ready development as a paired offering. And it was the first project where I felt fully comfortable acting as art director — making strong directional calls and defending them through the back-and-forth of a real client process.
Reflections
Looking back, the strongest decision I made was investing the time in five concepts at the start instead of one. It felt risky in week one — five fully-prototyped homepages is a lot of work before you've narrowed anything down. But the conversation those concepts unlocked was worth the entire project. The client and I ended up co-authoring the final direction, which meant they were invested in the result in a way they wouldn't have been if I'd just presented a single "right answer."
If I were doing it again, I'd push harder on documenting the motion system in a more reusable form. As it stands, the animations live in the live site and in our shared memory; they aren't a deliverable a future designer could pick up and extend. For a brand this distinct, that motion vocabulary is a real asset — it deserved its own document.
© 2026. Made by Andrew Sh