Tuesday, August 20, 2013

Webdesigntuts+

Webdesigntuts+


How They Did it: The Secret Handshake

Posted: 20 Aug 2013 03:57 AM PDT

The Secret Handshake is an online resource for student designers and young creatives who are looking for honest answers. I’m part of the team who put it together – here’s how we did it.

new-shs-home

Origins

I personally graduated in 2000/2001. Based on what was happening in the world, it was an extremely brutal job market. I entered the work force at a time when it was next to impossible to get a job. I took the entire year trying everything I could possibly think of, upping the response factor of my resume and portfolio from 1/20 responding to about 1/3 responding. I learned so much during that period that I felt compelled to share that experience with younger students, helping them make the transition from school to the design community.

Mind games with stationery
Stationery mind games

The Secret Handshake started in 2007, strictly as a lecture series that travelled around the country as requested. Each lecture was a custom written educational piece based on student feedback and the topic of the event. After a few events, I was noticing that there were issues for people getting into events. For example, if an event took place at a university, occasionally it was held exclusively for students of that university, shutting out students from nearby universities, or organizations.

Initial Aims

In early 2012, I knew that I wanted to create a web-based tool bringing advice from the best creatives around the world to the site. I wanted it to be freely available for every student who wanted access. I knew that it would be amazing to not only bring advice, but bring varying views and opinions to the site so every viewer could essentially form an opinion on the philosophy they most closely relate to.

The main goal was to reach out to and gather amazing advice from the people we looked up to. We knew the bar would be high. We also wanted to allow everyone to contribute, so we could pull gems from people who were doing great things out there, but weren’t on our radar.

The BBG workspace
The BBG workspace

As the site was being made, two people on BBG’s end handled population of the site. The technology is entirely leveraged in WordPress, by contributor, it just took time to populate the first 100-150 pieces of advice. Currently I lead the gathering of new featured contributors and the social media, while one of our Art Directors Jen Hansen handles the population and databases.


Color and Typography

From the first pixel placed in 2007, The Secret Handshake was always destined to be yellow, black and white with Helvetica. Even though I personally feel Helvetica is typically a huge cop out, unless used as body copy on the web, its plain (but clean) personality worked perfectly for this brand.

An earlier layout based on a yellow palette (2011)
An earlier layout based on a yellow palette (2011)
Getting closer to launch; yellow and black already set in stone
Getting closer to launch; yellow and black already set in stone

On our site, we talk a lot about how a portfolio should be designed but shouldn’t detract from the content inside it. Same goes here; we wanted people to focus on good advice, not that we were using a nice family from Typekit that added lots of personality. Helvetica and a simple responsive grid worked nicely for this.


Working Within Constraints

In terms of constraints, budget was the biggest. Being a small creative agency, we don’t have a lot of budget to work on internal projects, so we have to keep them as focused as possible. Actually, we have no budget for personal stuff; we typically fill the gaps between bigger projects with personal projects such as this one.

The other large constraint (at the project inception, not so much anymore) was that we needed to show a few big names on the site to get other big names to contribute.

new-shs-quote

Our first batch of contributors were strictly Chicago-based, which didn’t really spread the word to NYC and San Fran as it was intended to. We needed to strategically approach people out of state who we knew, ahead of time, to get their content into the site and demonstrate the high level of contributors we were shooting for.


Team Roles

At the inception, before any lectures took place, the original Secret Handshake team was comprised of three brand leaders in the city of Chicago, two of whom left before the first lecture took place. I opted to keep the brand moving forward and personally handled The Secret Handshake by myself from 2007-2012. I created all of the educational materials and lectures as the brand itself was handled word of mouth, most events being posted inside BBG’s website and tweeted about through our agency’s social media.

Us.
Us.

In 2012, Bright Bright Great fully took over the brand and I maintained the Art Direction responsibility with another one of BBG’s Art Director’s @theonlygoodalex. Once we had the design locked, we headed to code which took about three weeks.

Once posted, the only day to day and active responsibilities are related to database population and gathering new advice.


Workflow

We carried out a brainstorm during the prototyping phase. Obviously we sketched, but a majority of the creation of what you see live happened in high-res prototypes and the Art Direction.

Here, as linearly as possible, is our creative process:

  • Brainstorm ideas for site functionality
  • Art direction/interaction prototyping
  • Front-end development and database development
  • Database and content population
  • Round 2 featured contributors
  • Population

Cutting Room Floor

Not everything during the design process makes it to the final stages. Originally, the new version of the website was just an informative site explaining how to book Secret Handshake lectures.

An early 2010 concept
An early 2010 concept
This 2010 experiment differentiated lectures using color
This 2010 experiment differentiated lectures using color

That was scrapped in early 2012 when we wanted to make an advice tool. We did a bunch of versions where the toggles and all navigational items were fixed left with a scalable right grid of content.

A layout proposition from 2012
Fixed navigation layout from 2012

We also experimented with Art Direction where the yellow was swapped for blue, which was designed and scrapped the same day.


Accommodating Retina

This was a pretty straightforward project for us. However, retina is still “new-ish” in the design and dev world, so we needed to figure out how to allow for a flexible grid of retina images based on number of entries per row. We concluded that on Retina MacBook Pro/Airs we could get away with about 650px images.

We’re using a WordPress plugin (WP Retina 2x) which switches out images for retina when appropriate. Non-retina devices only pull a 325px image instead of the 650px. Not all mobile devices are retina, and not all desktop devices are non-retina, so it was important to keep both in mind at all resolutions. All the images (that I uploaded, at least) have been optimized by running jpegs through jpegmini.com and pngs through tinypng.org.

The grayscale was an aesthetic decision, but a smart one since fewer colors in an image delivers smaller file size. The other great thing about the site, as far as performance is concerned, is that since each person has multiple contributions, 30 posts does not equal 30 different images. This helps keep load time down a lot.

Pixel Ratio Media Query

This is the media query we’re using for @2x:

  @media (-webkit-min-device-pixel-ratio: 1.5),  		 ( min--moz-device-pixel-ratio: 1.5),  		 ( -moz-min-device-pixel-ratio: 1.5),  		 ( -o-min-device-pixel-ratio: 1.5/1),  		 ( min-device-pixel-ratio: 1.5),  		 ( min-resolution: 144dpi),  		 ( min-resolution: 1.5dppx) {  		 }  

It targets a pixel ratio of 1.5, and resolutions of greater than 1.5dppx (dots per pixel) or 144dpi (1.5 * 96dpi, which is what a regular screen is) so that semi-retina devices like Android devices also get the 2x images. Different devices and browsers give us different information about their resolution/pixel ratio, so we’re just using all of these queries together to cover all the bases.


Working With a CMS

The Secret Handshake is entirely leveraged in WordPress, utilizing a database of contributors built into our backend. The only “special” plug-ins used that wouldn’t be entirely out of the box is the ability to reorder and have control over posts. Each contributor’s individual piece of advice (some have multiple) is handled as a unique piece of data.

Google Drive is used collaboratively to handle submitted content. We’ve had about 500 contributors submit from the site, so it’s important to keep track of everything internally on BBG’s end. We don’t want great advice from amazing people to get buried.


Road Map

What lies ahead for The Secret Handshake? We will most likely be adding a “New Advice” feature in the upcoming month, so recently posted advice is broken out from past advice. We may also roll the site out by year, though I’m not sure at this point. As of recently we have started posting additional advice on our Facebook Page, which is a complimentary piece to the live site.

I heard grumblings of a TEDx event as well. Fingers crossed.

The actual future of this site refreshes itself every year with new students and young creatives in need of advice. The best way to ensure the future of this site is to help spread the word. If you are a student and have peers in design, share the Facebook Page with your friends. Tweet about it. Get the word out!

No comments:

Post a Comment

//SEO SCRIPT POWERED BY www.alltechbuzz.in