Hvordan de gjorde det The Secret Handshake

The Secret Handshake er en online ressurs for studentdesignere og unge reklamer som leter etter ærlige svar. Jeg er en del av teamet som setter det sammen - her er hvordan vi gjorde det.



Origins

Personlig ble jeg uteksaminert i 2000/2001. Basert på hva som skjedde i verden, var det et ekstremt brutalt arbeidsmarked. Jeg gikk inn i arbeidsstyrken på et tidspunkt da det var nesten umulig å få jobb. Jeg tok hele året med å prøve alt jeg muligens kunne tenke på, opping responsfaktoren på CV og portefølje fra 1/20 svar på om lag 1/3 svare. Jeg lærte så mye i den perioden at jeg følte meg tvunget til å dele den erfaringen med yngre studenter, og hjelpe dem med å gjøre overgangen fra skole til designfellesskapet.


Brevpapir tankespill

The Secret Handshake startet i 2007, strengt som en forelesningsserie som reiste rundt i landet som ønsket. Hvert foredrag var et tilpasset skriftlig utdannelsesstykke basert på student tilbakemelding og temaet for arrangementet. Etter noen få hendelser merket jeg at det var problemer for folk å komme seg inn i hendelser. For eksempel, hvis en begivenhet fant sted på et universitet, ble det av og til holdt utelukkende for studenter ved dette universitetet, avsluttet studenter fra nærliggende universiteter eller organisasjoner.

Innledende mål

I begynnelsen av 2012 visste jeg at jeg ønsket å skape et nettbasert verktøy som gir råd fra de beste annonsene rundt om i verden til nettstedet. Jeg ville ha det fritt tilgjengelig for alle studenter som ønsket tilgang. Jeg visste at det ville være fantastisk å ikke bare gi råd, men bringe varierende synspunkter og meninger til nettstedet slik at alle seere kunne gi en mening om filosofien de nært knyttet til.

Hovedmålet var å nå ut og samle fantastiske råd fra de menneskene vi så opp til. Vi visste at baren ville være høy. Vi ønsket også å tillate alle å bidra, så vi kunne trekke edelstener fra folk som gjorde gode ting der ute, men var ikke på vår radar.


BBG-arbeidsområdet

Da nettstedet ble laget, ble to personer på BBGs sluttbehandlet befolkning på nettstedet. Teknologien er helt utnyttet i Wordpress, av bidragsyter, det tok bare tid å fylle de første 100-150 stykkene. For tiden leder jeg innsamling av nyskapede bidragsytere og sosiale medier, mens en av våre kunstdirektører Jen Hansen håndterer befolkningen og databasene.


Farge og typografi

Fra den første pikselplassen i 2007 ble The Secret Handshake alltid bestemt til å være gul, svart og hvit med Helvetica. Selv om jeg personlig kjenner Helvetica, er det typisk en stor politimann, hvis den bare (men ren) personlighet jobbet perfekt for dette merket, med mindre det brukes som kroppskopi på nettet..


Et tidligere layout basert på en gul palett (2011)
Kom nærmere lanseringen; gul og svart allerede satt i stein

På vårt nettsted snakker vi mye om hvordan en portefølje skal utformes, men bør ikke forringe innholdet i den. Det samme gjelder her; Vi ønsket at folk skulle fokusere på gode råd, ikke at vi brukte en fin familie fra Typekit som la til mye personlighet. Helvetica og et enkelt responsivt rutenett fungerte pent for dette.


Arbeider innenfor begrensninger

Når det gjelder begrensninger, var budsjettet det største. Å være et lite kreativt byrå, har ikke mye budsjett til å jobbe med interne prosjekter, så vi må holde dem så fokuserte som mulig. Egentlig har vi ikke noe budsjett for personlige ting; Vi fyller typisk gapet mellom større prosjekter med personlige prosjekter som denne.

Den andre store begrensningen (ved oppstart av prosjektet, ikke så mye lenger) var at vi måtte vise noen store navn på nettstedet for å få andre store navn å bidra.


Vår første gruppe bidragsytere var strengt Chicago-baserte, som egentlig ikke spredte ordet til NYC og San Fran som det var ment å. Vi trengte å strategisk tilnærme folk ut av staten som vi visste, på forhånd, for å få innholdet sitt på nettstedet og demonstrere det høye nivået av bidragsytere vi skutt for.


Teamroller

Ved oppstarten, før noen forelesninger fant sted, var det opprinnelige Secret Handshake-teamet bestående av tre merkevareledere i Chicago, hvorav to dro til før første foredrag fant sted. Jeg valgte å holde merkevaren fremover og personlig håndtert The Secret Handshake av meg selv fra 2007-2012. Jeg opprettet alle pedagogiske materialer og forelesninger som merkevaren selv ble behandlet muntlig, de fleste hendelser ble lagt ut på BBGs nettside og tweeted gjennom vårt byrås sosiale medier.


Oss.

I 2012 overtok Bright Bright Great fullt merke og jeg opprettholdt Art Direction-ansvaret med en annen av BBGs kunstdirektør @theonlygoodalex. Når vi hadde designet låst, dro vi til kode som tok omtrent tre uker.

Når de er lagt ut, er den eneste dagen i dag og aktive ansvar knyttet til databasepopulasjonen og samle nye råd.


arbeidsflyt

Vi gjennomførte en brainstorm under prototypefasen. Tydeligvis skisserte vi, men et flertall av opprettelsen av det du ser levende, skjedde i prototyper med høy resning og Art Direction.

Her, så lineært som mulig, er vår kreative prosess:

  • Brainstorm ideer for nettsted funksjonalitet
  • Kunstretning / samspill prototyping
  • Front-end utvikling og database utvikling
  • Database og innholdspopulasjon
  • Round 2 utvalgt bidragsytere
  • Befolkning

Skjære rom etasje

Ikke alt under designprosessen gjør det til sluttfasen. Opprinnelig var den nye versjonen av nettstedet bare et informativt nettsted som forklarer hvordan man kan bestille Secret Handshake forelesninger.


Et tidlig 2010 konsept
Dette 2010-eksperimentet differensierte forelesninger ved hjelp av farge

Det ble skrapt tidlig i 2012 da vi ønsket å lage et rådverktøy. Vi gjorde en rekke versjoner hvor skifter og alle navigasjonselementer ble løst igjen med et skalerbart rett grid av innhold.


Fast navigasjonsoppsett fra 2012

Vi eksperimenterte også med Art Direction hvor den gule ble byttet for blå, som ble designet og skrapt samme dag.


Plassering av retina

Dette var et ganske enkelt prosjekt for oss. Imidlertid er netthinnen fortsatt "new-ish" i design- og dev-verdenen, så vi trengte å finne ut hvordan å tillate et fleksibelt rutenett av retinabilder basert på antall oppføringer per rad. Vi konkluderte med at på Retina MacBook Pro / Airs kunne vi komme unna med omtrent 650px bilder.

Vi bruker et WordPress-plugin (WP Retina 2x) som skifter ut bilder for retina når det passer. Ikke-retina-enheter trekker bare et 325px bilde i stedet for 650px. Ikke alle mobile enheter er netthinnen, og ikke alle stasjonære enheter er ikke-retina, så det var viktig å huske på alle resolusjoner. Alle bildene (som jeg lastet opp i det minste) har blitt optimalisert ved å kjøre jpegs gjennom jpegmini.com og pngs gjennom tinypng.org.

Gråskalaen var en estetisk beslutning, men en smart, siden færre farger i et bilde gir mindre filstørrelse. Den andre flotte tingen om nettstedet, så langt som resultatene er, er at siden hver person har flere bidrag, svarer 30 innlegg ikke til 30 forskjellige bilder. Dette bidrar til å holde belastningstiden nede mye.

Forespørsel om pikselforhold

Dette er medieforespørsmålet vi bruker for @ 2x:

 @media (-webkit-min-enhet-pixel-forhold: 1,5), (min-moz-enhet-pixel-forhold: 1,5), (-moz-min-enhet-pixel-forhold: 1,5), -min-enhet-pixel-forhold: 1,5 / 1), (min-enhet-piksel-forhold: 1,5), (min oppløsning: 144dpi), (min oppløsning: 1,5dppx)

Den målrettes mot et pikselforhold på 1,5, og oppløsninger på mer enn 1,5 dppx (dots per pixel) eller 144 dpi (1,5 * 96dpi, noe som er en vanlig skjerm) slik at halvhøydenheter som Android-enheter også får 2x-bildene. Ulike enheter og nettlesere gir oss forskjellig informasjon om deres oppløsning / pixel-forhold, så vi bruker bare alle disse spørringene sammen for å dekke alle basene.


Arbeide med et CMS

Den hemmelige håndtrykk er fullstendig utnyttet i Wordpress, ved hjelp av en database med bidragsytere bygget inn i vår backend. Den eneste "spesielle" plugin-modulen som ikke ville være helt ute av boksen, er evnen til å ombestille og ha kontroll over innlegg. Hver bidragsyters individuelle råd (noen har flere) håndteres som et unikt stykke data.

Google Disk brukes sammen for å håndtere innlevert innhold. Vi har hatt om lag 500 bidragsytere fra nettstedet, så det er viktig å holde oversikt over alt internt på BBGs slutt. Vi vil ikke ha gode råd fra fantastiske mennesker for å bli begravet.


Veikart

Hva ligger foran The Secret Handshake? Vi vil mest sannsynlig legge til en "New Advice" -funksjon i den kommende måneden, så nylig publiserte råd er brutt ut fra tidligere råd. Vi kan også rulle nettstedet ut hvert år, selv om jeg ikke er sikker på dette punktet. Fra og med har vi begynt å legge ut flere råd på vår Facebook-side, som er et gratis stykke til live-nettstedet.

Jeg hørte også grumblings av en TEDx-hendelse. Fingrene krysset.

Den faktiske fremtiden for dette nettstedet oppdaterer seg hvert år med nye studenter og unge reklamer som trenger råd. Den beste måten å sikre fremtiden for dette nettstedet på er å bidra til å spre ordet. Hvis du er student og har jevnaldrende i design, kan du dele Facebook-siden med vennene dine. Tweet om det. Få ordet ut!