Wie sie es getan haben Der geheime Händedruck

The Secret Handshake ist eine Online-Ressource für studentische Designer und junge Kreative, die ehrliche Antworten suchen. Ich bin Teil des Teams, das es zusammengestellt hat - so haben wir es gemacht.



Ursprünge

Ich habe meinen Abschluss 2000/2001 gemacht. Aufgrund des Geschehens auf der Welt war dies ein äußerst brutaler Arbeitsmarkt. Ich kam zu einer Zeit in die Belegschaft, als es fast unmöglich war, einen Job zu bekommen. Ich habe das ganze Jahr alles ausprobiert, was ich mir vorstellen konnte, und den Antwortfaktor meines Lebenslaufs und meines Portfolios von 1/20 bis etwa 1/3 erhöht. Ich habe in dieser Zeit so viel gelernt, dass ich mich gezwungen fühlte, diese Erfahrung mit jüngeren Schülern zu teilen und ihnen dabei zu helfen, den Übergang von der Schule zur Design-Community zu gestalten.


Schreibwaren-Gedankenspiele

Der geheime Händedruck begann 2007, ausschließlich als Vortragsreihe, die wie gewünscht im ganzen Land reiste. Bei jeder Vorlesung handelte es sich um ein individuell geschriebenes Unterrichtsmaterial, das sich auf das Feedback der Schüler und das Thema der Veranstaltung stützte. Nach einigen Ereignissen bemerkte ich, dass es Probleme gab, dass die Leute an Veranstaltungen teilnahmen. Wenn beispielsweise eine Veranstaltung an einer Universität stattfand, wurde sie gelegentlich ausschließlich für Studenten dieser Universität abgehalten, wobei Studenten aus benachbarten Universitäten oder Organisationen ausgeschlossen wurden.

Anfangsziele

Anfang 2012 wusste ich, dass ich ein webbasiertes Tool erstellen wollte, das Ratschläge von den besten Kreativen auf der ganzen Welt auf die Website bringt. Ich wollte, dass es für jeden Studenten, der Zugang wünscht, frei verfügbar ist. Ich wusste, dass es erstaunlich sein würde, nicht nur Ratschläge zu geben, sondern unterschiedliche Ansichten und Meinungen auf die Website zu bringen, damit sich jeder Zuschauer im Wesentlichen eine Meinung über die Philosophie bilden kann, mit der er am engsten verbunden ist.

Das Hauptziel war es, erstaunliche Ratschläge von den Leuten einzuholen, zu denen wir aufschauten. Wir wussten, dass die Messlatte hoch sein würde. Wir wollten auch, dass jeder etwas beitragen kann, damit wir Juwelen von Leuten holen können, die großartige Dinge dort draußen gemacht haben, aber nicht auf unserem Radar waren.


Der BBG-Arbeitsbereich

Bei der Erstellung des Standortes handelten zwei Mitarbeiter von BBG mit der Bevölkerung des Standortes. Die Technologie wird in Wordpress vollständig genutzt, durch einen Beitrag, es dauerte nur einige Zeit, um die ersten 100-150 Ratschläge aufzufüllen. Zur Zeit leite ich das Sammeln neuer Beitragszahler und der sozialen Medien, während einer unserer Art Directors Jen Hansen die Bevölkerung und Datenbanken verwaltet.


Farbe und Typografie

Seit dem ersten Pixel, das 2007 platziert wurde, war The Secret Handshake für Helvetica immer gelb, schwarz und weiß. Obwohl ich persönlich der Meinung bin, dass Helvetica in der Regel ein riesiger Polizist ist, ist seine schlichte (aber saubere) Persönlichkeit für diese Marke perfekt, wenn sie nicht als Textkopie im Internet verwendet wird.


Ein früheres Layout basierend auf einer gelben Palette (2011)
Annäherung an den Start Gelb und Schwarz bereits in Stein gemeißelt

Auf unserer Website sprechen wir viel darüber, wie ein Portfolio gestaltet werden sollte, aber den Inhalt nicht beeinträchtigen sollte. Gleiches gilt hier; Wir wollten, dass sich die Leute auf gute Ratschläge konzentrieren, nicht dass wir eine nette Familie von Typekit verwenden, die viel Persönlichkeit hinzufügt. Helvetica und ein einfaches ansprechendes Raster funktionierten gut.


Arbeiten innerhalb von Einschränkungen

Das Budget war das größte Budget. Als kleine Kreativagentur haben wir nicht viel Budget, um an internen Projekten zu arbeiten, deshalb müssen wir sie so konzentriert wie möglich halten. Eigentlich haben wir kein Budget für persönliche Dinge; Die Lücken zwischen größeren Projekten schließen wir normalerweise mit persönlichen Projekten wie diesem.

Die andere große Einschränkung (zu Beginn des Projekts nicht mehr so ​​sehr) bestand darin, dass wir einige große Namen auf der Website zeigen mussten, damit andere große Namen dazu beitragen konnten.


Unsere erste Gruppe von Mitwirkenden war ausschließlich in Chicago ansässig, was die Bekanntgabe an NYC und San Fran nicht so, wie es beabsichtigt war, brachte. Wir mussten strategisch auf Leute außerhalb des Staates zugehen, von denen wir im Voraus wussten, dass sie ihre Inhalte auf die Website bringen und die hohe Anzahl von Mitwirkenden demonstrieren, für die wir einen Beitrag leisten.


Teamrollen

Zu Beginn, bevor irgendwelche Vorträge stattfanden, bestand das ursprüngliche Secret Handshake-Team aus drei Markenführern in der Stadt Chicago, von denen zwei vor dem ersten Vortrag abreisten. Ich habe mich dafür entschieden, die Marke weiter voranzutreiben und The Secret Handshake von 2007-2012 persönlich zu behandeln. Ich erstellte das gesamte Unterrichtsmaterial und die Vorträge, da die Marke selbst Mundpropaganda war. Die meisten Veranstaltungen wurden auf der BBG-Website veröffentlicht und über die Social Media unserer Agentur getwittert.


Uns.

2012 übernahm Bright Bright Great die Marke vollständig, und ich behielt die Art Direction-Verantwortung bei einem weiteren Art Director der BBG, @theonlygoodalex. Nachdem wir das Design gesperrt hatten, gingen wir zum Code, der ungefähr drei Wochen dauerte.

Einmal gepostet, beziehen sich die einzigen täglichen und aktiven Verantwortlichkeiten auf die Datenbankbevölkerung und das Sammeln neuer Ratschläge.


Arbeitsablauf

Wir haben während der Prototyping-Phase ein Brainstorming durchgeführt. Offensichtlich haben wir skizziert, aber ein Großteil der Erstellung dessen, was Sie live sehen, geschah in Prototypen mit hoher Auflösung und in der Art Direction.

Hier ist so linear wie möglich unser kreativer Prozess:

  • Brainstorming-Ideen für Website-Funktionalität
  • Art Direction / Interaktion Prototyping
  • Front-End-Entwicklung und Datenbankentwicklung
  • Datenbank- und Inhaltspopulation
  • In Runde 2 wurden Mitwirkende vorgestellt
  • Population

Schnittraumboden

Nicht alles während des Designprozesses schafft es bis zum Schluss. Ursprünglich war die neue Version der Website lediglich eine informative Website, in der erklärt wird, wie Sie Vorlesungen für Secret Handshake buchen.


Ein Konzept von Anfang 2010
Dieses 2010-Experiment differenzierte die Vorträge anhand von Farben

Das wurde Anfang 2012 verschrottet, als wir ein Beratungstool erstellen wollten. Wir haben eine Reihe von Versionen erstellt, bei denen die Umschaltfunktionen und alle Navigationselemente mit einem skalierbaren rechten Raster von Inhalten fixiert wurden.


Navigationslayout ab 2012 korrigiert

Wir haben auch mit Art Direction experimentiert, wo das Gelb gegen Blau ausgetauscht wurde, das am selben Tag entworfen und verworfen wurde.


Retina unterbringen

Dies war ein ziemlich einfaches Projekt für uns. Die Netzhaut ist jedoch immer noch "neu" in der Design- und Entwicklungswelt. Daher mussten wir herausfinden, wie ein flexibles Raster von Netzhautbildern basierend auf der Anzahl der Einträge pro Zeile möglich ist. Wir sind zu dem Schluss gekommen, dass wir mit Retina MacBook Pro / Airs etwa 650 Bilder aufnehmen können.

Wir verwenden ein WordPress-Plugin (WP Retina 2x), das bei Bedarf Bilder für die Retina ausschaltet. Geräte ohne Retina ziehen statt des 650px nur ein 325px-Bild. Nicht alle mobilen Geräte sind Retina, und nicht alle Desktop-Geräte sind nicht Retina. Daher ist es wichtig, beide Aspekte bei allen Auflösungen zu berücksichtigen. Alle Bilder (die ich zumindest hochgeladen habe) wurden durch Ausführen von jpegs über jpegmini.com und pngs über tinypng.org optimiert.

Die Graustufen waren eine ästhetische Entscheidung, aber eine kluge Entscheidung, da weniger Farben in einem Bild eine kleinere Dateigröße ergeben. Das andere großartige an der Website ist, was die Leistung angeht, dass 30 Beiträge nicht zu 30 verschiedenen Bildern gehören, da jede Person mehrere Beiträge hat. Dies trägt dazu bei, die Ladezeit sehr gering zu halten.

Abfrage für das Pixelverhältnis-Medium

Dies ist die Medienanfrage, die wir für @ 2x verwenden:

 @media (-webkit-min-Gerät-Pixelverhältnis: 1,5), (min-moz-Gerät-Pixelverhältnis: 1,5), (-moz-min-Gerät-Pixelverhältnis: 1,5), (-o -min-Geräte-Pixelverhältnis: 1,5 / 1), (min-Geräte-Pixelverhältnis: 1,5), (min-Auflösung: 144 dpi), (min-Auflösung: 1,5 dppx) 

Es zielt auf ein Pixelverhältnis von 1,5 und Auflösungen von mehr als 1,5 dBx (Punkte pro Pixel) oder 144 dpi (1,5 * 96 dpi, was ein normaler Bildschirm ist), so dass Halb-Retina-Geräte wie Android-Geräte auch die 2x-Bilder erhalten. Verschiedene Geräte und Browser geben uns unterschiedliche Informationen über das Verhältnis von Auflösung und Pixel. Daher verwenden wir alle diese Abfragen zusammen, um alle Grundlagen abzudecken.


Mit einem CMS arbeiten

Der geheime Handshake wird in Wordpress vollständig genutzt und verwendet eine Datenbank von Teilnehmern, die in unser Backend integriert sind. Die einzigen "speziellen" Plug-Ins, die verwendet werden, sind nicht die Möglichkeit, Posteingaben neu zu ordnen und zu kontrollieren. Die Ratschläge jedes einzelnen Teilnehmers (einige haben mehrere) werden als eindeutige Daten behandelt.

Google Drive wird kollaborativ verwendet, um übermittelte Inhalte zu bearbeiten. Wir haben ungefähr 500 Beitragende von der Website eingereicht. Daher ist es wichtig, intern alles über BBG zu verfolgen. Wir möchten keinen großartigen Ratschlag von großartigen Menschen, um begraben zu werden.


Straßenkarte

Was liegt vor The Secret Handshake? Wir werden höchstwahrscheinlich im kommenden Monat eine "Neue Beratung" -Funktion hinzufügen, so dass kürzlich veröffentlichte Ratschläge aus früheren Ratschlägen herausgebrochen wurden. Wir können die Seite auch nach Jahr ausrollen, obwohl ich zu diesem Zeitpunkt nicht sicher bin. Seit kurzem haben wir zusätzliche Ratschläge auf unserer Facebook-Seite veröffentlicht, die eine kostenlose Ergänzung zur Live-Site ist.

Ich hörte auch ein Murren eines TEDx-Events. Daumen drücken.

Die tatsächliche Zukunft dieser Website erfrischt sich jedes Jahr mit neuen Studenten und jungen, die Beratung benötigen. Der beste Weg, um die Zukunft dieser Website sicherzustellen, ist die Verbreitung der Informationen. Wenn Sie ein Student sind und Gleichgestellte im Design haben, teilen Sie die Facebook-Seite mit Ihren Freunden. Tweete darüber. Bring das Wort raus!