Shorebreak: Designing a new online surf community

Kyle
Kyle
Sep 21 · 6 min read
Logo and wordmark (typeface: Aktiv grotesk)

Shorebreak is an idea I’ve had for a while, and I wanted to get some early initial designs and the concept out. This short article aims to give you a brief overview of the project goals and an insight into the design decisions made.

The sites premise is to connect surfers around the world, whilst providing accurate surf forecasts. Unlike most sites and online communities, it is designed to make you spend as little time on the platform as possbile, with a focus on communicating the necessary information — surf forecast and who is available to surf — as quickly as possible so you can grab your board, head to the water and meet other surfers.


Web Design

Short prototype video showing core search functionality of site.

The web design is very simple and based on a 12-column grid, I want to get the user to their surf forecast as quickly as possibly, something which meant this site would have no surfing articles or news on the site to distract from it’s main purpose.

The homepage has three main components, the Swell search box, the results box on the right hand side and your favourite spots. As you type in the swell search, the results box on the right auto-fills suggestions as you type, allowing you to see your spot faster. The results like the ‘locations’ nav search (shown in the video above) are organised under headings, in this case Regions. Selecting a spot here turn the text bold to confirm selection and redirects you to the spot page.

The favourite spots components work in two ways, if you have an account you can save your top three favourite spots to show here for quick forecast readings and access or it is based on your three most popular / recent searches (using cookies if the user enables them).

Landing page on the left and page showing result suggestions during search

In keeping with its minimal theme, the site primarily uses typography to display data. The only graphics shown are a swell forecast map displayed on the spot page (below), the map would be interactive to correspond to the date which you choose from the data box.

The Spot page consists of only essential data, a small blurb describing the spot (useful for those searching new spots or visiting for the first time), the data box, swell chart and the surfer list on the right hand side. The data box expands to show three days of swell data (potential to add more) and aims to communicate the necessary information at a glance without the need for charts.

The surfer list is the main feature of the community, users can register and set up a profile, attribute their local spots and choose whether they would like to appear on the list for their spots. The list is then scrollable and offers a chat button for you to message a surfer and see if they would like to join for a surf.
Like all messaging services this is in good faith, any users misusing this feature could be reported and necessary action taken where needed.

Spot location page

There are a couple of issues with the current design which will need resolved if the site is to go into production. At the moment only primary swell data is being displayed, secondary swells would need to be added as they can drastically change how a forecast plays out. The tide data is displayed as Low / Mid / High, is a bit ambiguous, whilst I would like to keep a general abstraction and cleanness, it would be useful to have a way of showing tidal times.

The display of data without a rating metrics or charts also requires a surfer to know how to read swell data in order to gauge how a spot is looking. I think it’s important for all surfers to know how to read swell charts primarily for safety but it can be daunting at first to be hit with a torrent of data, this is something I am looking at easing.

Finally, to further engage the community there should be a group feature or forum on spot pages, allowing multiple users to communicate and organise at once. I’m still trying to figure out ways I could implement this effectively without just generating a standard surfing forum. Also there is no indication for users to show if they are readily available, I think this would be useful especially for those planning surfs on the day.

However, overall I am happy with the direction the design is going whilst being conscious of some caveats needing addressed and I think it stands apart offering something a bit different from other surf forecasting site designs at time of writing.

Designing the logo

Shorebreak logo, a wave over two wavey lines representing sandbars
Shorebreak logo, a wave over two wavey lines representing sandbars

The logo aims to emulate a classic surfing lifestyle brand to stand alongside all the major players in the industry. It has to be recognisable and iconic in it’s own right even when used without the wordmark.

The construction of the logo originates from two criteria:

  1. The definiton of the word “shorebreak” (from wikipedia;

A shore break is a wave that breaks directly on, or very close to the shore. This happens when the beach is very steep at the shoreline. These waves are really just a form of beach or reef break, but breaking very close to the shore.

2. The physics of how waves are generated and travel in sets through the ocean.

I have represented both ideas by using two wavey lines (no pun intended but how else would I describe them…) under the main breaking wave in the logo. These wavey lines represent sandbars close to shore allowing a wave to break whilst also showing waves travelling in sets, with a wave set at minimum being considered to consist of three waves.

I wanted to make sure I wasn’t bogged down in trying to communicate these ideas too explicitly and run the risk of making a logo more complicated than it needed to be. The logo had to be simple, communicate the main theme (it’s a surfing website / brand) and ensure it is scalable across applications and sizes.
Personally, I arrived at an outcome and balance of all these things I like, and as always I’ll allow everyone else to interpret the logo however they choose and feel.

Typeface selection

Aktiv Grotesk Bold, Medium, Regular and Light

The wordmark and all other text on the site is set in ‘Aktiv Grotesk’, created by Dalton Maag .

There were a few considerations which led to this choice; as a global online community I needed a typeface which supports a wide range of languages, and with a goal of communicating information as easily and quickly as possible, it had to be authoritative to communicate clearly, and look / feel contemporary whilst not be distracting.

The choice of a grotesque typeface is also heavily inspired by the industry in which Shorebreak would occupy. Many sports and other surfing brands often opt for a grotesque font due to their visual character and versatility. Grotesques offer many font weights and styles allowing you to communicate a message in multiple ways whether you need to evoke power, immediacy, movement or authority (and many many more!)

Choosing only one typeface was a conscious decision to further remove as much visual distraction from the design as possible, whilst communicating clearly and quickly.


If you have any queries or even ideas where this concept can go, please leave a comment or get in touch. I’d be more than happy to dicsuss further. You can check out more of my work on my .

Thanks, and have a good surf!

Kyle

Written by

Kyle

Graphic Designer and Illustrator from Glasgow Scotland

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade