In 2020, we started building the Pickdevs website with a simple goal: introduce our services and help companies find the right tech people. It was a small company website, but we put a lot of thought into its personality and how visitors would experience it.
This was before AI tools became part of our everyday design and development workflow. Going from an idea to something that worked in the browser involved plenty of experimenting, manual work, and small adjustments. This project took us from UX wireframes to making physical characters, photographing them ourselves, and bringing them to life with CSS and JavaScript.
Starting with the visitor’s journey
Before working on the visuals, we started with wireframes. We wanted visitors to understand what Pickdevs offered, how the process worked, and what to do next.
The page structure introduced our services, explained the steps involved in building a team, and guided visitors towards getting in touch. That gave us a clear foundation for the design.
Interactivity was also an important part of our concept. We wanted movement and transitions to give the website personality as people explored it.
Turning our network into characters
We decided to create characters inspired by the people behind Pickdevs and the tech community around us.
The main character was based on me, including the long hair I had at the time. For the others, I picked a few people from my network as inspiration. It was a playful way to bring familiar faces into the website.
These were physical, handmade figures. We spent days building the characters and their little surroundings, from laptops and headphones to furniture, plants, and food. Each detail became part of the world we were creating for the site.
Our own little photo studio
Once the characters were ready, we photographed them and the individual elements ourselves.
There was no professional photographer involved. We set up a small lightbox and a ring light, arranged the figures, and worked through the shots we needed. It was a very hands-on process, and a slightly unusual part of building a company website.
Seeing something we had made on a table become an asset on a web page was one of my favourite parts of the project.
Bringing the elements to life
I implemented the movement using CSS transitions, with JavaScript triggering the animations when a component became visible on screen.
The approach was straightforward, but getting it to feel right took time. I remember spending days adjusting the timing and movement of animations that looked quite simple in the finished website.
That was the challenge: translating a visual idea into browser behaviour, then refining it until the elements moved together in a way that felt natural.
A project I still remember fondly
What stays with me most is the whole journey. We planned the experience, developed a concept, built the characters, photographed them, and turned those assets into an interactive website.
Today, I have tools that make parts of that process much faster. Looking back, though, I really enjoyed the time we spent figuring things out ourselves. Even a small website gave us room to experiment and make something personal.
A big shout-out to my talented friend Mohamed Boucha, the most talented UI designer I’ve worked with. His creativity was a huge part of what made this project so enjoyable.
