I’ve been recently working on a single-page static site redesign that changed a bit of the usual corporate landing pages that I’m used to. It’s the site of the Tictales video game company (tictales.com
), which I often work with, mostly on game’s logotypes.
This time, they wanted something based on the tumblr template style. It’s all about piled full-screen sections with scrolling handled.
As usual, some Sketch templates desktop + mobile, prototyped through Invision, then a handy image export phase, generating the needed@2x sizes.
I’ve made it the way I usually go with any landing pages : a ‘src’ folder containing a static html page, assets.. that aim to be processed with Gulp on a ‘dist’ folder. This time I also setup the needed theming structure for my CS framework of choice (Semantic UI
), so that I can generate optimised versions of semantic.css, and avoid a lot of overwrite. But I found it very tedious having to deal with an overly complicated tree structure. I’ll definitly give a try to another UI toolkit for future projects. I also switch my beloved IDE (Atom) with the rising VsCode
, and don’t regret it, as I found it less buggy and is packed with a lot of convenients plugin + a very handy vertical navbar.
The js lib I found to build the piling sections is called pagepiling.js
. It comes with all the handy options someone would need to get this layout style (adjustable smooth transitions, vertical navigation, scrolling parameters, convenient callbacks..).
I used the Sendgrid
API to deal with emails, it’s an easy setup and they also have a full featured dashboard to track every stuffs we would need. The only drawback is we need to be careful not pushing our own API key on Github, so I momentarily disabled the feature when I had to push my work during the preprod phase.
I’ve often heard about the Netlify
as a Github-based deployment solution, and decided to give it a try. The setup is simple as hell, and the site goes live and updated via a simple github push. You get an auto-generated domain + a fully hosted site that you can communicate to your client. However, it doesn’t work with server-side language so all has to be static served. That’s why I plan to learn static site generator for the next project.
This project was an opportunity to test a more dynamic kind of design and to improve parts of my usual workflow (web-p image generation, Netlify, pagepiling, Prettier, Es-lint, VsCode).
But I think the time has come to use a js framework to generate the next project I’ll be working on, as I’m actively learning Vue.js
. It seems we can plug all sort of libs/tools so that it can perfectly fit with any kind of projects.