Spruce interactive

Works

Humanthology

Branding and UI design for Humanthology, a platform devoted to sharing authentic human stories and experiences.

Project Type: Branding, Web Design, UI, Style Guides

{ Visit Website }

 Details

Designed by KJ Parish : kjparish.com

Humanthology is a brand new website devoted to capturing real-life experiences from those who wish to share their personal stories and accounts in a respectful and authentic environment. Subjects are represented on the site, where users can then contribute their own personal experience as part of a larger group, with options to comment, share, and expand their understanding of a subject. In short, this is a project meant to capture meaningful stories and conversations.

At Spruce HQ, we were delighted to be introduced to the Humanthology team and invited to create both the brand and UI design for such an inspired platform. The project was on a shorter timeline than usual, so we buckled down and focused nearly all of our design resources to this projects for about 6-7 weeks.

Building a Brand

We ran through our typical process of moodboarding to further narrow down a concept for the “Humanthology Brand,” which needed to be clean, trustworthy, and authentic. The goal was to identify a mark which would stand the test of time. In the end, we chose a classic serif typeface with top and bottom lines implying communication and connection. In addition, we created an icon for use in bookmarking, shortcuts, and app badges for Windows and Mac. We put all of this into the brand guide spec document so the team can share rules for using the brand, colors, fonts, and icon internally. Some samples of the brand guide are included below.

Humanthology Logo

Humanthology Brand Guide_Page_3 Humanthology Brand Guide_Page_5

Building a Coherent UI

Next, we threw our efforts at developing the concept for the UI, which (much like the brand itself) needed to feel clean, respectful, and authentic only this time the focus was on creating a coherent system with a light touch stylistically. We wanted the focus to be centered on the content and functionality without distraction or clutter. As a result, we developed a product that hangs on a strong functional foundation that is represented with minimalist text and action styles, and one that values whitespace.

Landing-Page

Topic-Page Story-Page

Visual UI Toolkit

Once we completed several design layouts, we then translated these styles into a “Visual Toolkit” which serves as an internal bible of sorts for setting styles and further developing areas of the site and layouts without the need for formalized design mockups. In a sense, aspects of the design become modular and easy to apply for developers. This allowed us to wrap the project in a timely fashion, offering support as needed but essentially placing the keys into the client’s very able hands.

04_Colors 01_Headings, body copy, supportive styles

All said, this was a terrific project with a very thoughtful team of collaborators on the client side. We wish Humanthology all the best with the launch and are looking forward to watching the site’s usership grow in the coming months.

 

Talk to Us

Wise men have said, "All good things must come to an end", and so it was with Spruce. We began our first project in 2006, and completed our last in Fall 2013. It's been a wonderful experience, but now it's time to begin the next adventure.

Though...we wouldn't want to leave you hanging, now would we? Here are our top recommendations for world-class branding, design, and web development:

  • Kristina (KJ) Parish and Beam Collective:
    KJ provided the artistic vision that allowed Spruce to succeed, and we still think she's the greatest designer in the entire world. She's started a new collective with some talented developers, and is covering much the same territory as Spruce--design and development all under one roof, with a caliber of service and professionalism seldom seen in this business or any other. If you like what you see on the Spruce site, then definitely get in touch with KJ at kj@beamcollective.com
  • Permanent Art & Design
    Permanent is a nationally recognized design & branding firm out of Minneapolis, MN. They've been a long term collaborator and strategic partner over the past couple years, and we'd recommend them for medium to large sized businesses/organizations who are serious about putting their best foot forward. In addition to design, Permanent offers strategy and marketing services, plus in-house and networked developers. For more information contact Joseph Belk joseph@permanentadg.com
  • Nate Thompson
    A freelancer, Nate reminds us of ourselves back in the day. Smart, communicative, and skilled, Nate is our recommendation for small to medium sized businesses/organizations who have sites built on Wordpress or other open source content management solutions. With a background in both design and development, he's a one-stop shop for most web-related tasks. You can get in touch at nate.a.thompson@gmail.com
  • Kevin DeBernardi
    Designer turned developer, Kevin is embarking on a freelance web career after working as the in-house designer at the Museum of the City of New York. He's adept at translating his design ideas into custom PHP code, and is constantly expanding his technical palette. Kevin's a good choice for projects that don't quite fit into the Wordpress mold, and that would benefit from a consistency of presence and vision from design through execution. Kevin can be reached at kevin@analoglifestyle.com