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.
