Case Study: Moving a static Corporate Identity design document to the Web

You have received some styling guidelines and some content —now what?!

Starting Point

When asked to create the static site https://grootdillionsholding.com/ the main challenge was to create a coherent feeling from the very good design tests provided.

This case study will show some of those design decisions.

Starting Point

1) Design Input

A professional designer had provided a corporate identity design draft and a powerpoint template, with a flat, colourful design, expressing some playfulness and quirkiness.

CI (Palette, logo, typography, design tests):

Powerpoint template:

2) Copy, page map and assets

A number of standard pages were requested from the company. Nothing terribly important to mention, apart from that the portrait shots were lacking coherency, as the people had not been able to gather due to COVID-19.

It was also noted that many of the smaller consultancy pages are quite boring. Not to point any company out, but you can Google “consultancy”... The standard page types were not really what the designer had aimed for with the company identity.

Box “Models”

From the powerpoint the first box model was created, trying to connect one or more vertically stacked sections. This was heavily reliant on CSS pseudo-elements.

Another box model that is heavily used is having a “frame” and background that is slightly offset to give a stacked, yet flat feeling. Not really taken from the design materials directly, but generally in line with the feeling.

SVG Animations (“Headers”)

The original design had some really good header materials that I wanted to keep, but instead of only having static image or SVG background, some animation to guide the user down through the page was introduced.

Original:

Low framerate GIF of this page:

Team profile photo coherency

The material provided by the company was a bit incoherent in terms of the backgrounds:

The idea was to make use of the corporate identity palette to improve this.

Step 1:
Remove the backgrounds and export as PNG

Step 2:
Introduce backgrounds, animate on hover, and make sure the colour carries over to a modal on click (static and gif below)

Browser compatibility

Browser compatibility is clearly not as major an issue as it used to be (I remember the IE 8 days…).

IE 11 was not in scope so the most needed part was to work on the weirdest of small bugs in Safari/WebKit (on iPhone any browser used will have the behaviour as they all have to use WebKit).

One of a few CSS fixes targeting only Safari: This animation had to be disabled for Safari as I couldn’t find a way to solve it (it is not SVG path stroke-linecap being rounded).

If anyone have any suggestions of what the issue could be — I’m all ears 😅

Aside — How created

No needing anything fancy, just making sure there was a way to reduce duplication, and not a lot of build steps.

Markup: Pug
Styling: SASS/SCSS
Javascript: Plain vanilla JS
Build: Parcel, pre-update to version 2
Deploy: AWS (S3 [storage], API gateway [lambda connected restful API], Lambda [email sending functionality], SES [email service], Cloudfront [CDN and HTTPS certificate management], Route 53 [DNS after moving over from. Namecheap])
+ Lots and lots of SVGs

At the time of writing some things that could be improved a bit:
Some awkward spacing on mobile and some font size changes needed, some text/spelling updates, one or two slightly warped SVGs on mobile screens.

--

--

--

Data analyst and javascripter. Dabbles in other things as well.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

UI in Flames? 24 Easy Design Tips for Software Engineers.

A Better User Experience Doesn’t Translate Necessarily to a Better Business Process

Creating a Pipeline to True Workplace Diversity

Deciphering the icons in my room

Fake door — The MVP before the MVP

UX Day 30: Collaboration can be a dirty word until it isn’t.

UX Design: Edtech to aid children in better learning

Home Decor Frame with CrafTreat Decoupage Papers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jonas Tillman

Jonas Tillman

Data analyst and javascripter. Dabbles in other things as well.

More from Medium

What is the difference between REM and EM on CSS3

Breadcrumbs… Not just for the birds!

Guessing Game

SASS — Syntactically Awesome StyleSheets