Cómo lo hicieron El apretón de manos secreto

The Secret Handshake es un recurso en línea para estudiantes diseñadores y jóvenes creativos que buscan respuestas honestas. Soy parte del equipo que lo armó, así es como lo hicimos..



Orígenes

Personalmente me gradué en 2000/2001. Basado en lo que estaba sucediendo en el mundo, era un mercado laboral extremadamente brutal. Ingresé a la fuerza laboral en un momento en el que era casi imposible obtener un trabajo. Tomé todo el año intentando todo lo que pudiera pensar, aumentando el factor de respuesta de mi currículum y mi cartera de 1/20 en respuesta a aproximadamente 1/3 de respuesta. Aprendí tanto durante ese período que me sentí obligado a compartir esa experiencia con estudiantes más jóvenes, ayudándolos a hacer la transición de la escuela a la comunidad de diseño..


Papelería juegos mentales

The Secret Handshake comenzó en 2007, estrictamente como una serie de conferencias que viajaron por todo el país según lo solicitado. Cada conferencia fue una pieza educativa escrita personalizada basada en los comentarios de los estudiantes y el tema del evento. Después de algunos eventos, noté que había problemas para que las personas participaran en los eventos. Por ejemplo, si un evento tuvo lugar en una universidad, en ocasiones se llevó a cabo exclusivamente para estudiantes de esa universidad, excluyendo a estudiantes de universidades cercanas u organizaciones.

Objetivos iniciales

A principios de 2012, supe que quería crear una herramienta basada en la web que trajera consejos de los mejores creativos del mundo al sitio. Quería que estuviera disponible para todos los estudiantes que querían acceder. Sabía que sería increíble no solo brindar consejos, sino también aportar diferentes puntos de vista y opiniones al sitio, de modo que cada espectador pueda esencialmente formarse una opinión sobre la filosofía con la que se relacionan más estrechamente..

El objetivo principal era llegar y reunir consejos asombrosos de las personas que admiramos. Sabíamos que el bar sería alto. También queríamos permitir que todos contribuyeran, así podríamos extraer gemas de personas que estaban haciendo grandes cosas por ahí, pero que no estaban en nuestro radar.


El espacio de trabajo de BBG

A medida que se realizaba el sitio, dos personas en el extremo de BBG manejaban la población del sitio. La tecnología es totalmente aprovechada en Wordpress, por contribuyente, solo tomó tiempo para llenar los primeros 100-150 consejos. Actualmente dirijo la reunión de nuevos colaboradores destacados y las redes sociales, mientras que uno de nuestros directores de arte, Jen Hansen, se encarga de la población y las bases de datos..


Color y tipografía

Desde el primer píxel colocado en 2007, The Secret Handshake siempre estuvo destinado a ser amarillo, blanco y negro con Helvetica. A pesar de que personalmente creo que Helvetica suele ser una gran salida, a menos que se use como copia del cuerpo en la web, su personalidad simple (pero limpia) funcionó perfectamente para esta marca..


Un diseño anterior basado en una paleta amarilla (2011)
Acercándose al lanzamiento; Amarillo y negro ya engastados en piedra.

En nuestro sitio, hablamos mucho sobre cómo debe diseñarse una cartera, pero no debe restar valor al contenido que contiene. Lo mismo ocurre aquí; queríamos que la gente se enfocara en un buen consejo, no que estuviéramos usando una buena familia de Typekit que añadiera mucha personalidad. Helvetica y una simple rejilla de respuesta funcionaron muy bien para esto.


Trabajando dentro de restricciones

En términos de restricciones, el presupuesto fue el más grande. Al ser una pequeña agencia creativa, no tenemos mucho presupuesto para trabajar en proyectos internos, por lo que debemos mantenerlos lo más enfocados posible. En realidad, no tenemos presupuesto para cosas personales; Por lo general, llenamos los vacíos entre proyectos más grandes con proyectos personales como este..

La otra gran restricción (al inicio del proyecto, ya no tanto) era que teníamos que mostrar algunos nombres importantes en el sitio para que otros nombres importantes contribuyeran..


Nuestro primer grupo de colaboradores se basó estrictamente en Chicago, lo que realmente no corrió la voz a NYC y San Fran como estaba previsto. Necesitábamos acercarnos estratégicamente a las personas fuera del estado que conocíamos, antes de tiempo, para obtener su contenido en el sitio y demostrar el alto nivel de colaboradores que buscábamos..


Roles de Equipo

Al comienzo, antes de que tuvieran lugar las conferencias, el equipo original de Secret Handshake estaba compuesto por tres líderes de marca en la ciudad de Chicago, dos de los cuales se fueron antes de que se llevara a cabo la primera conferencia. Opté por hacer que la marca siguiera avanzando y manejé personalmente The Secret Handshake desde 2007-2012. Creé todos los materiales educativos y las conferencias, ya que la marca se manejó de manera oral, la mayoría de los eventos se publicaron en el sitio web de BBG y se publicaron en Twitter a través de las redes sociales de nuestra agencia..


Nosotros.

En 2012, Bright Bright Great se hizo cargo de la marca y yo mantuve la responsabilidad de Dirección de Arte con otra del Director de Arte de BBG, @theonlygoodalex. Una vez que tuvimos el diseño bloqueado, nos dirigimos a un código que tomó aproximadamente tres semanas.

Una vez publicado, el único día a día y las responsabilidades activas están relacionadas con la población de la base de datos y la recopilación de nuevos consejos..


Flujo de trabajo

Llevamos a cabo una lluvia de ideas durante la fase de prototipado. Obviamente lo bosquejamos, pero la mayoría de la creación de lo que se ve en vivo sucedió en prototipos de alta resolución y en la Dirección de Arte..

Aquí, tan linealmente como sea posible, está nuestro proceso creativo:

  • Ideas de lluvia de ideas para la funcionalidad del sitio
  • Dirección de arte / interacción de prototipos.
  • Desarrollo de front-end y desarrollo de base de datos
  • Base de datos y población de contenido
  • Ronda 2 destacados colaboradores
  • Población

Piso de la sala de corte

No todo durante el proceso de diseño llega a las etapas finales. Originalmente, la nueva versión del sitio web era solo un sitio informativo que explicaba cómo reservar las conferencias de Secret Handshake.


Un concepto de principios de 2010.
Este experimento 2010 diferenció las conferencias utilizando el color.

Eso fue desechado a principios de 2012 cuando queríamos hacer una herramienta de asesoramiento. Hicimos un montón de versiones donde los conmutadores y todos los elementos de navegación se arreglaron a la izquierda con una cuadrícula derecha de contenido escalable.


Diseño de navegación fijo desde 2012

También experimentamos con Art Direction, donde el amarillo se cambió por azul, que fue diseñado y desechado el mismo día..


Alojamiento de retina

Este fue un proyecto bastante sencillo para nosotros. Sin embargo, la retina sigue siendo "nueva" en el mundo del diseño y del desarrollo, por lo que necesitamos descubrir cómo permitir una cuadrícula flexible de imágenes de retina según el número de entradas por fila. Llegamos a la conclusión de que en Retina MacBook Pro / Airs podríamos salir con cerca de 650px imágenes.

Estamos utilizando un complemento de WordPress (WP Retina 2x) que cambia las imágenes para la retina cuando sea apropiado. Los dispositivos que no son de retina solo extraen una imagen de 325 píxeles en lugar de los 650 píxeles. No todos los dispositivos móviles son retina, y no todos los dispositivos de escritorio no son retina, por lo que fue importante tener ambos en mente en todas las resoluciones. Todas las imágenes (que subí, al menos) se han optimizado ejecutando jpegs a través de jpegmini.com y pngs a través de tinypng.org.

La escala de grises fue una decisión estética, pero inteligente, ya que menos colores en una imagen ofrecen un tamaño de archivo más pequeño. La otra gran cosa sobre el sitio, en lo que se refiere al rendimiento, es que dado que cada persona tiene múltiples contribuciones, 30 publicaciones no equivalen a 30 imágenes diferentes. Esto ayuda a mantener el tiempo de carga mucho.

Consulta de medios de relación de píxeles

Esta es la consulta de medios que estamos usando para @ 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-dispositivo-pixel-ratio: 1.5 / 1), (min-dispositivo-pixel-ratio: 1.5), (min-resolución: 144dpi), (min-resolution: 1.5dppx) 

Se enfoca en una proporción de píxeles de 1.5, y resoluciones de más de 1.5dppx (puntos por píxel) o 144dpi (1.5 * 96dpi, que es lo que es una pantalla normal) para que los dispositivos semi-retina como los dispositivos Android también obtengan imágenes 2x. Los diferentes dispositivos y navegadores nos brindan información diferente sobre su resolución / relación de píxeles, por lo que solo estamos usando todas estas consultas juntas para cubrir todas las bases.


Trabajando con un CMS

El Secret Handshake se aprovecha completamente en Wordpress, utilizando una base de datos de colaboradores integrada en nuestro backend. Los únicos complementos "especiales" utilizados que no estarían completamente listos para usar son la capacidad de reordenar y tener control sobre las publicaciones. El consejo individual de cada contribuyente (algunos tienen varios) se trata como un dato único.

Google Drive se usa en colaboración para manejar el contenido enviado. Hemos recibido alrededor de 500 colaboradores que enviaron desde el sitio, por lo que es importante hacer un seguimiento de todo lo interno al final de BBG. No queremos grandes consejos de personas increíbles para ser enterrados.


Mapa vial

¿Qué hay por delante para el apretón de manos secreto? Lo más probable es que estemos agregando una función de "Nuevo asesoramiento" en el próximo mes, por lo que los consejos publicados recientemente se separan de los consejos anteriores. También podremos extender el sitio por año, aunque no estoy seguro en este momento. Recientemente, hemos comenzado a publicar consejos adicionales en nuestra página de Facebook, que es una pieza complementaria para el sitio en vivo..

También escuché quejas de un evento TEDx. Dedos cruzados.

El futuro real de este sitio se actualiza cada año con nuevos estudiantes y jóvenes creativos que necesitan asesoramiento. La mejor manera de asegurar el futuro de este sitio es ayudar a difundir el mensaje. Si eres estudiante y tienes compañeros en diseño, comparte la página de Facebook con tus amigos. Tweet sobre esto. Correr la voz!