Phantom  DESIGN STUDIO

PORTFOLIO

Phantom is a visual communication design studio based in Thessaloniki, Greece that provides solutions with unique character for branding, packaging and digital.
Phantom portfolio Lab21 web development
CLIENT
Phantom
DELIVERABLES
RELEASE DATE
2020
AWARDS
This project has been awarded with:
CREDITS
Design: Phantom

The portfolio website for Phantom, a Greek design studio that works in the fields of branding, packaging and web interfaces.

THE REQUEST

A website to showcase the studio’s projects, while having a more “fun” character that challenges the visitor to interact. This is possible by the copy text itself but also from the design elements and general animations.

Phantom also handcrafted custom SVG illustrations that blend in with the content. Another request was to create animations by using those custom SVG files as frames.

OUR SOLUTION

We built a robust CMS based on WordPress, customized to meet the project’s needs. The client and his team can manage blog posts, projects and every little aspect on the site, even the map.

The challenge was to create the SVG animations.  Some animations had 7 frames while other had more or less, and each one had to be animated in different timings.
Moreover each “frame” was actually a different SVG file.

So we had to build a functional code that automatically reads all SVG files and turns them into animations. So with just a few lines of code we managed to keep the JavaScript code minimal and optimized in order to achieve the best speed possible.

PHANTOM
The Phantom website homepage
The top section of the homepage changes randomly every time the page loads. There is a specified list of images & colors, set through the CMS admin console. The admin can select an image, background color & text color for each screen.
website home page random image
website home page random image skoutari
website home page random image peanut
Lab21 web development-Phantom
A set of custom, handcrafted SVGs was made by Phantom that were turned into SVG animations in various parts of the site, adding more character to the site.
All SVGs are animated and handled by the same piece of code in order to achieve optimized performance.
SVG animations for the "Services" section
Lab21 web development-Phantom
Lab21 web development-Phantom
Next is the projects main page that lists all projects. There is a predefined pattern set in the page for the "boxes" where the images load. The user can also filter the projects by choosing a category.
Lab21 web development-Phantom
Each project has its own page & colors! The admin can set the colors that match the featured image best for both background and foreground thus creating more interesting content.
Phantom website project colors
Phantom website project colors
Inside each project, the admin can add all types of content: text, images in various sizes & videos and also has the ability to alter their order of appearance.
Lab21 web development-Phantom
The Services main page was another puzzle to solve!
Each service has its own SVG animation that plays when the mouse hovers over it. When the mouse leaves it pauses.
But we needed it to be more user friendly. The animations play once, repeatedly, one after the other. When the user puts his mouse over a service, then the loop stops and the corresponding animation starts playing.
Phantom website services page with custom svg animations

HAVE A PROJECT IN MIND?

Looking for a serious web developer to collaborate?
Want to create your website?

No matter how big or small
we have a solution for you