Vancouver’s Next Top Agent

TV show website

All development, and most design

  • web
  • front-end
  • devops
  • design
  • React
  • Gatsby
  • JSX
  • ES6
  • Styled Components
  • AWS
  • static
  • freelance

https://vancouversnexttopagent.ca/

This was a rush job completed over a single week, with no designs or design-related direction. All I had were the teaser, the show’s first episode, and some photos.

I’m no designer but did my best. I found the colours and fonts used in the TV show hard to work with. After some wrestling and some brief input from a designer friend I abandoned the TV show’s fonts, and darkened the colours, and this helped a lot. Adding gradients and some texture helped a lot in my eyes too.

There are definitely some aspects that I’m not totally happy with, but a rush job is a rush job. Perhaps in future there will be time and budget to hire a real designer to make improvements.

My new little graphics tablet came in useful here, and this is the first time I’ve used one as a tool for image manipulation. I close-cropped all of the cast images myself – something I haven’t done to this level of polish before. I’m very proud of how they came out, and how much improvement I made during the process. The last ones were so much better than the first that I ended up redoing a number of the ones I’d already completed! I think I really got the hang of dealing with hair and other fine semitransparent detail: lots of mask and levels manipulation, lots of clone and airbrush and heal tools. This is where the tablet really shined, giving variable opacity based on pressure.

In terms of code, I went pretty all-out on CSS grid in this site, and what a help that was in terms of development time! There was no requirement to strongly support IE11, so for that browser I simply made sure that the content was readable and nothing was unusably broken.

The site is served statically, and is built with Gatsby and React.

There’s an Easter egg somewhere on the site… Let me know if you find it.