Posthuman Sound
Client: Hafeed Jrayebee
Overview
I love video games and sci-fi, and I love building fun, interactive user interfaces. Getting to combine all of these on a portfolio site for sound designer Hafeed Jraybee was an ideal project for me.
Hafeed designs sound for TV, film, and video games. The concept for his site was that it should feel like a HUD (Heads-Up Display), something straight out of Halo or Destiny.
We had a tight timeline and lots of creative, high-effort ideas to include.
Hafeed came with a solid design and a clear vision, but he was also flexible as long as we stayed true to the spirit of his concept.
Challenge
The main challenge was balancing quality, time, and budget while still delivering something that looked and felt great.
If we couldn’t balance a high enough quality bar and budget on certain aspects then we simplified. This left us time to concentrate on the little details that really mattered to nail the vibe he wanted.
The best example for this was the work slider / carousel on the home page. We had designs that had a much more involved and finessed carousel… but it was minor things that would have eaten a lot of time and budget without giving us that much value. By using an off the shelf carousel (swiper js) and it’s card effects layout we were able to get something really close that was robust and saved us loads of time.
With this time we put in fun stuff like the typewriter effects on titles that triggered on scroll. SWUP js is used so the site can animated between pages seamlessly which helps keep the immersion of the UI / HUD.
“Working with Tom was not only a professional experience but also far more enjoyable than we anticipated. He is, at his core, a deeply creative mind who leverages his technical/programming skills to make beautiful art come to life. That’s the part that made me connect with Tom the most and helped us turn our website into a full, cohesive experience. His attention to detail, sense of design, and ultimately, taste, is remarkable. Beyond happy to have him on. He will always be our first line of contact when it comes to our web.”
— Hafeed Jraybee, Posthuman Sound
Accessibility and Animation
Now, I love this sort of stuff, but I know it’s not for everyone. The biggest criticism of this sort of animated site is usually accessiblity (or complete lack there of!). I always try and bake a decent base level of accessibility into all my work, and at least try to be pragmatic and get any low hanging fruit.
There are some unavoidable things like the need / want for a carousel (not loved by accessibility experts I know) but that aside, I made sure the basic fundamentals were in there – keyboard navigation, aria roles and respecting prefers-reduced-motion. This means the site works without any animation should you have those preferences turned on.
Working with Hafeed to find that sweet spot of effort, time and money vs the results was a collaborative process and ended up being super fun. It was clear that both of us were striving for that high quality bar, hitting that attention to detail and that we both share a love of the sci-fi aesthetic!