Case Study | FREAKOUT SHOP

Web Design

Fall 2023

About

Freakout Shop is a tattoo & barbershop that just opened their doors in September 2023. They're are group of talented artist searching to put their shop on the map and be a staple location in their area.

Their main style of tattoos are REALISM, HORROR, BIO-MECHANIC and more. They do a mix of traditional and modern tattoos which match the aesthetic of their shop.

Objective

Since being a new business, they needed a website so people can know who they are and a place to put all their information and works.

Though being a new business, they needed direction for their brand identity and logo. So I was challenged to create their website from the ground up and help them figure out their identity as a shop.

  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe Indesign
  • HTML
  • CSS
  • JS
  • LOGO REDESIGN

    One of the artist already made a logo for the shop. I was asked to clean it up how ever I wanted, though they really wanted to keep emblem within the design. So I teaked it but also gave them other few suggestion if they are willing to change.

    THEIR ORIGINAL LOGO

    The outter circle makes it look like it's a pizzeria place...

    REDESIGNING PROCESS

    Trying out different ideas.

    WE'RE GETTING THERE...

    I fell it ...

    FINAL RESULT

    Back full circle.. while keeping it minimal.

    WEB DESIGN

    The challenge was to encapsulate the shop's identity within the website.

    FONTS

    We used the font that was present within the logo. I added "BOKOR" font, which mimic the same styling as their emblem to keep the styling consistent. I made them big and bold to represent FREAKOUT energy.

    MONTSERATT

    BOKOR

    Prototyping

    Made various sketches and protypes to figure out which one fitted best the brand identity.

    SKETCHING ON XD

    Looking at different layouts. I like the fade because it reflects the shading element in tattooing.

    TRIED A HTML PROTOTYPE...

    Obvious design issues such as lack of text visibilty, inconsistent background and generic layout. Though the idea was there...

    SOLUTION?

    I decided to combine the 2 prototypes and taking the elements I liked that would work well together.

    TOOK THE LOGO ANIMATION

    This adds movement and energy in the site which is what you see in most tattoos

    FADE & SHADING

    I added these animations and elements into the site to create a more dynamic experience and feeling.

    THE RESULT

    Once I knew the vibe we were directed towards, it was easy to find the visual identity of the site.

    View More