Comment ils l'ont fait la poignée de main secrète

The Secret Handshake est une ressource en ligne pour les designers étudiants et les jeunes créateurs à la recherche de réponses honnêtes. Je fais partie de l'équipe qui l'a mise ensemble - voici comment nous l'avons fait.



Origines

J'ai personnellement obtenu mon diplôme en 2000/2001. D'après ce qui se passait dans le monde, il s'agissait d'un marché du travail extrêmement brutal. Je suis entré sur le marché du travail à un moment où il était presque impossible de trouver un emploi. J'ai passé toute l'année à essayer tout ce à quoi je pouvais penser, en augmentant le facteur de réponse de mon curriculum vitae et de mon portfolio de 1/20 répondant à environ 1/3 ayant répondu. J'ai tellement appris au cours de cette période que je me suis senti obligé de partager cette expérience avec de jeunes étudiants, en les aidant à faire la transition de l'école au monde du design..


Papeterie jeux d'esprit

La poignée de main secrète a débuté en 2007, sous la forme d'une série de conférences qui ont parcouru le pays à la demande. Chaque conférence était une pièce éducative écrite sur mesure basée sur les commentaires des étudiants et le sujet de l'événement. Après quelques événements, je remarquais qu'il y avait des problèmes pour les gens qui participaient aux événements. Par exemple, si un événement a eu lieu dans une université, il était parfois réservé exclusivement aux étudiants de cette université, excluant les étudiants des universités proches ou des organisations..

Buts initiaux

Au début de 2012, je savais que je voulais créer un outil basé sur le Web fournissant aux sites les conseils des meilleures créations du monde. Je voulais que ce soit librement disponible pour tous les étudiants qui souhaitaient y avoir accès. Je savais que ce serait formidable non seulement d’apporter des conseils, mais également d’apporter des points de vue et des opinions divergentes sur le site afin que chaque utilisateur puisse se forger une opinion sur la philosophie à laquelle il est le plus étroitement lié.

L’objectif principal était d’atteindre et de recueillir des conseils extraordinaires de la part des personnes que nous avons admirées. Nous savions que la barre serait haute. Nous voulions également permettre à tout le monde de contribuer afin de pouvoir retirer des bijoux de gens qui faisaient de grandes choses, mais qui ne se regardaient pas..


L'espace de travail BBG

Au moment de la création du site, deux personnes à l'extrémité de BBG ont géré la population du site. La technologie est entièrement mise à profit dans Wordpress, par contributeur, il a fallu du temps pour fournir les 100 à 150 premiers conseils. Actuellement, je dirige le rassemblement des nouveaux contributeurs et des médias sociaux, tandis que l'une de nos directeurs artistiques, Jen Hansen, s'occupe de la population et des bases de données..


Couleur et typographie

Depuis le premier pixel placé en 2007, The Secret Handshake a toujours été conçu pour être jaune, noir et blanc avec Helvetica. Même si j’ai personnellement le sentiment que Helvetica est généralement un énorme flic, à moins qu’elle ne soit utilisée comme copie corporelle sur le Web, sa personnalité simple (mais nette) a parfaitement fonctionné pour cette marque..


Une mise en page antérieure basée sur une palette jaune (2011)
Se rapprocher du lancement; jaune et noir déjà gravés dans la pierre

Sur notre site, nous parlons beaucoup de la façon dont un portefeuille devrait être conçu mais ne devrait pas nuire à son contenu. Même va ici; nous voulions que les gens se concentrent sur les bons conseils, sans pour autant que nous utilisions une belle famille de Typekit qui apportait beaucoup de personnalité. Helvetica et une simple grille réactive ont bien fonctionné pour cela.


Travailler dans les limites

En termes de contraintes, le budget était le plus important. En tant que petite agence créative, nous n’avons pas beaucoup de budget pour travailler sur des projets internes, nous devons donc les garder aussi ciblés que possible. En fait, nous n’avons pas de budget pour les affaires personnelles; nous comblons généralement les écarts entre les plus gros projets avec des projets personnels tels que celui-ci.

L’autre grande contrainte (au début du projet, c’était moins) était que nous devions montrer quelques grands noms sur le site pour que d’autres grands noms puissent contribuer..


Notre premier groupe de contributeurs était strictement basé à Chicago, ce qui n’a pas permis de faire passer le message à New York et à San Francisco comme prévu. Nous devions approcher à l'avance les personnes qui n'étaient pas connues de notre État pour intégrer leur contenu sur le site et démontrer le nombre élevé de contributeurs que nous recherchions..


Rôles d'équipe

Avant le début des conférences, la première équipe de Secret Handshake était composée de trois leaders de la marque à Chicago, dont deux étaient partis avant la première conférence. J'ai choisi de faire avancer la marque et j'ai personnellement géré The Secret Handshake de 2007 à 2012. J'ai créé tout le matériel pédagogique et les conférences car la marque elle-même était gérée de bouche à oreille, la plupart des événements étant publiés sur le site Web de BBG et tweetés à travers les médias sociaux de notre agence..


Nous.

En 2012, Bright Bright Great a entièrement repris la marque et j'ai maintenu la responsabilité de la direction artistique avec un autre membre du personnel du directeur artistique de BBG, @theonlygoodalex. Une fois la conception verrouillée, nous nous sommes dirigés vers le code, ce qui a pris environ trois semaines..

Une fois postés, les seules responsabilités quotidiennes et actives sont liées à la base de données et à la collecte de nouveaux conseils..


Flux de travail

Nous avons mené un brainstorm pendant la phase de prototypage. Bien sûr, nous avons esquissé, mais la majorité de la création de ce que vous voyez en direct s'est produite dans des prototypes haute résolution et la Direction artistique.

Voici, de manière aussi linéaire que possible, notre processus de création:

  • Réfléchissez à des idées sur les fonctionnalités du site
  • Direction artistique / prototypage d'interaction
  • Développement front-end et développement de bases de données
  • Population et contenu de la base de données
  • Round 2 contributeurs en vedette
  • Population

Plancher de la salle de coupe

Tout au cours du processus de conception ne parvient pas aux étapes finales. À l'origine, la nouvelle version du site Web n'était qu'un site informatif expliquant comment réserver des conférences Secret Handshake..


Un concept début 2010
Cette expérience de 2010 a différencié les cours en utilisant la couleur

Cela a été abandonné au début de 2012 lorsque nous avons voulu créer un outil de conseil. Nous avons fait un tas de versions où les bascules et tous les éléments de navigation ont été fixés à gauche avec une grille de contenu droite et évolutive.


Plan de navigation fixe à partir de 2012

Nous avons également expérimenté avec Art Direction où le jaune a été échangé contre le bleu, qui a été conçu et mis au rebut le même jour..


Accommoder la rétine

C'était un projet assez simple pour nous. Cependant, la rétine est encore "nouvelle" dans le monde de la conception et du développement, nous devions donc comprendre comment permettre une grille flexible d'images de la rétine en fonction du nombre d'entrées par ligne. Nous avons conclu que sur MacBook Pro / Airs Retina, nous pouvions nous en sortir avec des images d'environ 650 pixels..

Nous utilisons un plugin WordPress (WP Retina 2x) qui permute les images pour la rétine, le cas échéant. Les périphériques non rétiniens ne tirent qu'une image 325 pixels au lieu de 650 pixels. Tous les appareils mobiles ne sont pas de la rétine et tous les appareils de bureau ne sont pas des rétines. Il était donc important de garder les deux à l'esprit à toutes les résolutions. Toutes les images (que j'ai téléchargées, au moins) ont été optimisées en exécutant des fichiers jpeg via jpegmini.com et des fichiers pngs via tinypng.org..

Les niveaux de gris étaient une décision esthétique, mais intelligente, car moins de couleurs dans une image permettaient de réduire la taille des fichiers. L’autre atout du site, en ce qui concerne les performances, est que chaque personne ayant plusieurs contributions, 30 messages n’équivalent pas à 30 images différentes. Cela aide à réduire le temps de chargement beaucoup.

Requête multimédia en pixels

Voici la requête multimédia que nous utilisons pour @ 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-ratio-pixel: 1.5 / 1), (min-device-pixel-ratio: 1.5), (résolution minimale: 144 dpi), (résolution minimale: 1.5dppx) 

Il vise un rapport de pixels de 1,5 et des résolutions supérieures à 1,5dppx (points par pixel) ou 144 ppp (1,5 * 96 ppp, ce qui correspond à un écran normal), de sorte que les périphériques semi-rétine tels que les périphériques Android obtiennent également les images 2x. Différents appareils et navigateurs nous donnent des informations différentes sur leur rapport résolution / pixel, nous n'utilisons donc que toutes ces requêtes ensemble pour couvrir toutes les bases..


Travailler avec un CMS

La poignée de main secrète est entièrement mise à profit dans Wordpress, en utilisant une base de données de contributeurs intégrée à notre backend. Les seuls plug-ins "spéciaux" utilisés qui ne seraient pas tout à fait originaux sont la possibilité de réorganiser et de contrôler les publications. Les conseils individuels de chaque contributeur (certains en ont plusieurs) sont traités comme une donnée unique..

Google Drive est utilisé en collaboration pour gérer le contenu soumis. Environ 500 contributeurs ont été envoyés à partir du site. Il est donc important de garder une trace de tout ce qui se passe en interne à la fin de BBG. Nous ne voulons pas de bons conseils de gens formidables pour être enterrés.


Carte routière

Qu'est-ce qui nous attend pour The Secret Handshake? Nous ajouterons probablement une fonctionnalité "Nouveau conseil" dans le mois à venir. Par conséquent, les conseils récemment publiés sont dissociés des conseils précédents. Nous pouvons également déployer le site par année, bien que je ne sois pas sûr pour le moment. Récemment, nous avons commencé à publier des conseils supplémentaires sur notre page Facebook, qui complète le site en direct..

J'ai aussi entendu des rumeurs sur un événement TEDx. Doigts croisés.

L’avenir réel de ce site se rafraîchit chaque année avec de nouveaux étudiants et jeunes créatifs ayant besoin de conseils. La meilleure façon d’assurer l’avenir de ce site consiste à aider à passer le mot. Si vous êtes étudiant et que vous avez des collègues en design, partagez la page Facebook avec vos amis. Tweet à ce sujet. Faire passer le mot!