
Designing a website for a new tattoo shop in Amsterdam
A case study part of my UI Designer portfolio.

Getting into the tattoo business
When we started this project, Antiek Tattoo was a new tattoo shop in the city. We needed to increase the visibility of the business and at the same time, tell its story to the world. That’s why we created a one page easy-to-navigate-trough and mobile-friendly website.

A tattoo shop with soul
Antiek Tattoo is a new place in Amsterdam, a very touristic city full of tattoo shops. But it’s not just a regular tattoo shop. Antiek is a big art studio and gallery where many artists, with different styles, work together. It’s also located in the last residency of Rembrandt! Crazy place.
Antiek is a big art studio and gallery where many artists, with different styles, work together. It’s also located in the last residency of Rembrandt!

Antiek is a wide space where artists, clients and visitors feel comfortable. Our aim was to create a website with the same vibe. For that reason we avoided flashy fonts or bright colours.

Who does want a tattoo?
Tattoo Collectors, tourists looking for a different “souvenir” and rookies in the tattoo world were our target.
When someone is getting a first tattoo it starts to look (on the street or Internet) for a place that gives confidence. Antiek Tattoo is an extremely clean and welcoming place (something very important when you are getting a new tattoo) so we had to create a web featuring that.

The crew
Javi Negre, front end developer, worked with me on this project. He wanted to work on some CSS vector animations for a while and this looked like a good opportunity, so we joined forces. The artists of the shop helped us too, with their illustrations, photos and savoir faire.

Time, time, time…
We were working on our full time jobs at the same time and the shop was already open and needed of a site, so the time was definitely a constraint. Because of this lack of time we had to build a static site, instead of a CMS based one, but our client still needed to update some info from time to time, (I’ll explain later how we solved this).
Let’s start with sketching
I had a couple of talks with the guys at the shop to show them mood boards and sketches about how I thought the site could look. Aníbal gave me his sketch book and I could just literally pick up my favourite illustrations to use them in the site. They also provided me with a photo selection of their lasts tattoos. It’s very cool to work with artists, specially if the let you play around with their work. I recommend it to all the designers out there.

After getting the sketches, taking photos of the shop and the tattoos and discussing different point of view I opened Photoshop and I started to design. At the same time Javi started to work on the basics.

Many tattoo shop sites (and tattoo shop oriented wordpress themes) have flashy fonts and colourful backgrounds. To me it wasn’t an option, in this case. In one hand the shop is really clean and spacious so why the site shouldn’t show that? And in the other hand, the site is going to showcase the living art works of a group of artists with very distinguished and different styles, so let the users focus on that. (the photos of the tattoos contain all the colours needed)

I created a basic template on stylish grey tones, with lot of white space and a full view photo on top of the page. After that I picked up a readable sans serif google font. Once those two elements (rythim and typography) I started to work on the design of this top part of the site, balancing the logo, the menu and the background photo.
Once the psd started to look like a website should look I started to make vector illustrations based on Aníbal’s designs. Meanwhile Javi was working on how to animate and synch the illustrations with the scroll of the page.
I’ve created a vector map of the shop too, to keep the same style.

It was important to curate the very best photos. I tried to pick up just the best photos of the shop and the best tattoos. I had some friendly and smiley photos of the artists too (these are nice guys I hang out with, no sketchy dudes who learned tattooing at jail.)
You know… we try to show the soul of the shop with the photos too.
By the way, have you already visited antiektattoo.com ?
Retrospective
We created a clean and easy to navigate trough site but if you google “tattoo Amsterdam”, or similar keywords, Antiek Tattoo doesn’t appear anywhere, yet. It would be interesting to work with a SEO expert in the next revision of the project to see how we can improve our web visibility.
Another improvement would be to add a CMS system to the site. Aníbal and other artists from the shop could upload new content often what, I guess, will improve our results, and more important, it would be relevant for our users.

Aníbal and the rest of the crew is happy with the website, Javi created a light site that works good in every device, with short loading times and it was made in a reasonable time frame, we could say the results are positive, right?
Also you can see how nicely Anibal’s illustrations get animated when you scroll down, thanks to Javi front end ninja skills.
Have you noticed the tiger at the end?

Originally published at chusmargallo.com/antiektattoo