Typography E-commerce Website Development
Dennis Grauel
Dennis Grauel is a type and graphic designer based in Melbourne, Australia. He has worked on a number of print publications and bespoke typefaces, of which he often showcases through Instagram. We collaborated on building a portfolio website so that he had a professional platform to start selling his typefaces.
Sector
Creative Services
Services
- Front-end web development (HTML5/CSS3/Javascript ES6)
- Back-end web development (PHP/MySQL)
- Wordpress template creation
Getting started
I kicked off the project by breaking down the tasks into three core stages and creating a shared Trello board with Dennis, as a place for us to monitor progress and also add comments and ask questions directly on the cards. Next, I set up a personal board using Asana, to manage my own progress at a more granular level where I could also plot out the tasks on a calendar.
Project Requirements
Dennis requested some interesting functionality for his site. He wanted the user to be able to cycle through a database of sample text which was dynamically applied to specific typefaces, ranging from a couple of words to full paragraphs. He also wanted the user to be able to edit the sample text themselves to try a typeface out, plus a day and night mode and a shopping cart.
The homepage in day mode, displaying one of Dennis's beautiful serif typefaces — Frisky Freadman, in Regular weight.
Cycling through the typefaces
As shown in the video below, the user can click anywhere on the type sample to cycle through different typefaces and change the sample text. Alternatively they can scroll down to the footer for more information, if they wish to read more about a particular typeface.
As shown in the video above, they can also edit the text here if they want to see a personalised version of the typeface in action...
Day and Night Mode
Next, I built the functionality for a day and night mode which was triggered dynamically, based on sunrise and sunset times in the AEST time zone. To do this I had to calculate the UTC offset for Australia (Brisbane). This is +10:00 between April - Oct and +11:00 Oct - April. During the winter months, I set the night mode to switch on at 6pm and switch off at 6am, then on at 8pm and off at 5am during the summer months.
