New Tictales website

Tictales website 2018
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.

Design

As usual, some Sketch templates desktop + mobile, prototyped through Invision, then a handy image export phase, generating the needed@2x sizes.

Setup

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.

Pagepiling

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..).

Contact Form

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.

Deployment

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.

Conclusion

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.
Home