Header Avatar Site icon
Hedgefield
Veteran designer turning complex ideas into engaging visuals and experiences.
Send me an email

UX design

Yoast SEO

I started here as an illustrator, but pretty soon saw opportunities to improve the user experience of the products. There was no dedicated designer working on that, so over the years I built a UX department with several employees.

Together we set up and maintained a design system in Sketch to keep track of all the components we use and make sure they stay consistent. This allowed us to draft mockups much faster.

I worked on several big projects like the customer portal, online academy, Gutenberg integration, configuration wizard, settings redesign, and also did work for the underlying platform, WordPress, as you can read about elsewhere on this site.

Gallipoli UI icons

Blackmill Games asked me to help them design a wide number of UI elements for their new game WW1 Gallipoli.

Chief among them were the achievement icons, 40 small illustrations that had to be consistent, topical to the action that was required to get them, and readable at small sizes.

I also created many ingame UI icons, from the map markers to the class icons, and HUD elements designed to help you recognize various important battlefield elements quickly.

And, in a somewhat random turn of events, I also created the Steam Sale page background and animated banners.

Eloquence UI

Eloquence is an indie game about learning a foreign language, so the UI is very important to be able to have conversations, keep track of words you've learned, and forming new sentences. On top of that, you play as a far future time traveller going back to a tribal setting, so the UI had to feel futuristic as well, while still being usable.

I was asked to contribute concepts for this UI. I used a combination of UI design principles to make the functionality feel familiar, and layered on decorative elements, colors, and blur to give it that scifi look. The icons are based on universal concepts in language in order to help the player make sense of the stems of this unknown language.

Bounden UI

For Bounden I designed a wide variety of themes for each of the game worlds, adapting all the UI elements to fit with that theme and color scheme. The game world is always a sphere, so it was interesting to see what kinds of different contexts I could come up with to evoke a certain feeling in the player.

project really spoke to the minimalist in me; I enjoy simple colorful shapes and calm pleasing compositions with strong color contrasts. Many of these ended up in the final game, translated into 3D assets.

24Letters

One morning a former colleague asked me to update his website. We sketched wireframes over lunch, I built the mockups in Figma in the afternoon, and he had a basic live version ready the next day.

Designed as a one-pager, it highlights all his relevant experience and other information in a fresh modern design that you don't often see on the portfolio of a developer, but Anton wanted to stand out and communicate his creative approach to software development, so it felt fitting to present him this way.

The Figma file is built using Auto Layout and thus reacts well to responsive widths. I also built a tablet-sized version that doubles as a PDF export which Anton can use to send out as his resume.

This website!

The website you're currently looking at was built from the ground up by me, using HTML, CSS, and a little bit of PHP. Over the years it has gone through several iterations where I continuously applied new techniques I had learned.

The site is fully responsive with several breakpoints that restructure the content for tablet and mobile. I use PHP includes to load common components such as navigation from a central file in a modular way, I used a CDN to offer images in the most suitable format and resolution, and cache elements that change infrequently to speed up loading. As a result, the site has a score of 98% in Google PageSpeed Insights, which looks at speed, accessibility, SEO, and more.

On top of that, the site has a dark mode that responds to the user's system setting, and the content is available in two languages.

Back to top