1. Brief

Task: make a new site

Team: 2

Difficulty: 6/5

I got a wireframe from my supervisor and I had to make it into a WordPress site. And it was the bulkiest design I got in 2021 with the longest extra CSS sheet that year.

2. Challenge

The problem was that the design was build for large screens. Yes. The large one. Like iMac 27”. And when I was checking it for MacBook Pro 13.3” it was a bit interesting.

3. Process

As I usually do, build the header and footer and then everything in between. Even though the menus I added later, this structure always helps me to see how the page will look in the end.

WordPress is a great tool that helps to solve a lot of problems fast and easy. But positioning like this (screenshot below) really grinds my gears.
First row with 3 elements: text and 2 image. Images centred and overlapped.
Second row with video and minus margins to overlap with the first row.
And now make it responsive, so it looks nice on laptops, desktops, mobiles of different sizes. Yeah. It was fun.

4. Results

The site has complex styling solution and functionality to make it work. It has a “sister-site” for internal use among Verji customers, which is connected to the main app with OpenID.

Would I do something differently, if I was responsible for the wireframe? Yes. I would not focus only on the large screens. See for yourself https://verji.no