Surf Language

As new firm, I had to design the brand and the website form scratch. The cofounders asked me for something simple, very minimalistic, in line with the mindfulness concept, but distinctive and outstanding at the same time, in order to catch the attention of the user across a very competitive market. 

BRAND

After talking to the client and doing some research into the surf world, it was clear that the brand needed to be characterised by vintage look, aesthetic that appeal your people, mostly students. We wanted to create a symbol that represented the company and its ideals of surfing and studying combined together.

I sketched out a some ideas for the logo symbol, concentrating on a central symbol surrounded by text. I wanted to make it very vintage, including a hipster taste. I started using three main elements combined in different ways: surf board, waves and books. At the same time I tried to keep the logo design as minimal as possible and paired the symbol with two different typography: a clean sans serif and a handwriting.

WEBSITE

Due to the particular nature of the service provided it was not possible to conduct a competitors benchmark with similar websites.

Sector Benchmark

I started looking to surf school websites that provided training courses in order to get into the world of surf, understanding what kind of experience young people are looking for, the kind of imagery used, typography and other elements that could help me giving a start.

I studied and benchmarked six different surf school websites and identified some recurrent elements and patterns across all of them such as large use of full width images, cheerful colours, simple and flat information architectures.

Due to a very limited budget it was not possible to run any focus group or interviews with the targeted audience.

Nontheless, it was clear that we basically needed a simple brochure website that outlined the main and only product offered, giving to the potential customers an easy way to understand the offer, choosing it and getting in touch.

Information Architecture

We decided to go with a simple Information Architecture, based on a home page broken up into six sections, listing all the services. Links in each sections lead to a specific subpage showing the related service.

Sketches and Wireframes

I opted for a two-column fluid layout for each section, which stacked into a single-column layout on mobile. According to the sector benchmark, full width images were used as backgrounds and text wrapped in small paragraphs.

I sketched out wireframes for each section of the website to print out the basic elements, having a baseline to work from.

From the sketches to the wireframes the contact form in the Contact Us section at the bottom of the page has been removed, according to the client request of keeping the page as clean as possible.

Final Design

Because we based the user engagement on a very impacting imagery, I wanted to ensure a better user experience by responsive images, serving an appropriate-sized image to the user based on their device.

I asked the developer to implement the picture element (a standard W3C HTML), allowing to deliver an appropriate image to users depending on their device screen size and resolution.

A small set of icons has been designed in order to help navigation and provide a visual support to specific information.

I played the double role of UX/UI designer and Graphic designer. As UX designer I talked a lot with the cofounders in order to understand the business, the products and the goals. I took some time to put in place a quite extensive research of the competitors in the area to study their brands, understand the market, identifying any kind of brand and web standard within the sector.