What started as updating my design at Epiphyt regarding certain accessibility issues (mainly proper accessible names for some navigations as well as contrast issue fixes) ended up with a rather complex design update.
Colors
By accident, the primary colors for all of the projects, Epiphyt, Impressum Plus and Form Block Pro, have a low contrast on light backgrounds. Thus, I switched to the secondary color for buttons and links to ensure readability all the time.
Next up: content on gradients. I use them as design element, and they usually are a gradient from the primary color to the secondary color. Since the primary color has its problems, I now use an additional layer, either a transparent black or transparent white, to improve the contrast from the text to its background.
I also streamlined all the buttons, which I didn’t quite liked (the previous version was rather a quick fix for improved accessibility some time ago). They now have an identical design language across all three websites.
Header
I always had an update for the header in mind, since I thought the current version was boring. There was just centered text in a gradient container.
Also from a usability standpoint, it was not ideal. Thus, I was working on a new header structure, especially with some buttons for easier calls to action – or at least having a call to action in the header in the first place.
To improve text readability, the header (as well as the footer) now contains a darker version of the gradient used before (except for Form Block Pro), adding also some nice visual contrast and giving the content more focus. The headline is also a little bit thicker to support that.
I also updated the texts in the header after thinking about what the user probably actually tries to search for on these pages.
Before and after
Epiphyt
Impressum Plus
Form Block Pro
More feature descriptions
Additionally, not really a design update but rather a feature update is a new section for feature descriptions for Impressum Plus. It’s now part of the start page and the features page itself is now also updated to reflect all available features.
Leave a Reply