How we designed the new Usarion website

We drew the new Usarion website once, at 1920 wide, and spent the rest of the project deciding how it should hold together.

The structure came first. Our seven services use the same names everywhere they appear, in the nav, the footer, the cards and the related links, so a visitor never has to work out whether two labels mean the same thing. Every colour, spacing step, radius and type size is a named token from the Figma file. If it isn't in the file, it isn't on the site, which keeps the build from drifting away from the design.

The type is Almarena Neue for headlines and DM Sans for reading, on a dark base, and we kept it to those two so the type does its job without competing with the work. When you scroll, the next section rises over the one that's leaving, so the page feels like one continuous thing rather than a stack of blocks.

Then came the screens. On laptops the design scales instead of reflowing, so a 1440 screen shows the same composition at 75%. Stepwise breakpoints are wrong at the widths in between, and page zoom blurs text and breaks sticky positioning, so neither made the cut. The harder problem was that a landscape screen at 1024 wide and an iPad Pro held upright at 1032 wide are almost the same width but need different layouts.

Landscape fits the headline and slider side by side, while upright needs the headline full width with the slider underneath. No width breakpoint can tell those apart, so the site also reads the screen's orientation. A Surface Pro held upright is 960 wide, which is why the blog gets its own tablet layout at that size, with the contents on one side and the article beside them.

There were no separate mobile designs. Each page was built for phone and desktop together, then reviewed at both widths before we called it done.

The new Usarion website is live. Come and have a look.