Climbing Community Website Redesign
A website redesign and branding update for a climbing community–
We wanted: a streamlined and functional website re-design with a simple, modern look; that loads quickly and is easy and quick to update.
The homepage overall is designed to be skimmed, focusing on an introduction, mission, purpose, updates and events, and then a ‘donate’ call to action.
The navigation and header take a similar approach as the original site but with stronger branding. A dark gradient overlay ensures that the white text will be legible even on a lighter photo – it also gives the photo a little bit of natural depth.
We lead with a light tan section featuring the logo, a strong bold headline, and a short introduction, highlighting the history. The font is simple, modern and geometric, with a few distinctions like the letters J, K, and R still giving it personality.
Next, we show a climbing photo and state the mission, with buttons to About and Donate. The photo is easily swap-able along with the text, simply by editing the page as an administrator.
The purpose section (as seen below) highlights the three pillars of work, shaping the viewer’s thoughts about the organization and expanding them. It stays true to the goal of the homepage as an introduction, leading the visitor to the programs page, instead of listing the programs (and remembering to update them in two places as they change).
The latest events and updates display automatically on the homepage. Shortening the date, removing the photo and byline gives this a clean and calm feel, getting the eye straight to information.
The blue section with photos acts as a graphical element, similar to the original website, that can show a variety of small photos at once without slowing down page load times.
The ‘donate’ section brings in a contrasting orange/sunset as a call to action. Followed by a clear invitation to subscribe! The footer features a bigger logotype and a dark sky. Navigation links are served by multiple menus that don’t necessarily need to match the top of the page, allowing for links to deeper content or organizing links by info/action, etc.
After
Before
