Cómo lo hicieron StarWars.com

Los íconos son otra vez otra característica creada para hablar directamente con los fanáticos de Star Wars. Por ejemplo, para el ícono "Películas", en lugar de elegir una cámara o un rollo de cinta, el diseñador eligió un ícono que representa el texto de desplazamiento que se muestra al principio de cada película de Star Wars. Para el icono de la comunidad, en lugar de mostrar un esquema de dos personas, eligieron mostrar un casco Storm Trooper. El significado de cada elemento de navegación se ve mejorado por estas decisiones para los fanáticos de Star Wars, y la experiencia no se diluye para los recién llegados..

Otro icono importante para señalar es el botón "Buscar". Si bien puede parecer una lupa (un icono de búsqueda común), también es una versión simplificada de una Estrella de la Muerte, uno de los elementos más importantes de todas las películas.. 

Esto muestra un punto muy importante acerca de todos los íconos en todo el sitio: como regla general, el diseñador optó por conservar las señales familiares y las formas básicas, como una lupa o el contorno de una persona, pero agregando elementos a esas formas básicas. Eso tiene importancia para quienes los entienden. Esto proporciona una sensación de juego y un verdadero sentido de integridad temática en todo el sitio..

Icono de menú del sable de luz

Vamos a profundizar un poco más en lo que se ha convertido en una de las partes más comentadas de este sitio: la navegación con sables de luz..

En los puntos de interrupción inferiores, se puede acceder a la navegación a través de un botón que se encuentra en la parte superior izquierda de la ventana del navegador. Al principio, puede parecer un botón de menú normal, pero una vez que haces clic en él, las líneas cambian a una forma de X y se parecen a dos sables de luz.

Todo esto se hace usando técnicas CSS simples y un poquito de JavaScript. Aquí está el marcado del menú:

Los vanos con el bar La clase se convierte en los sables de luz. Aquí está una recreación del CSS utilizado para lograr los efectos:

# nav-drawer-toggle border-right: 1px solid # 333333; ancho: 60px; altura: 60px; cursor: puntero; posición: fijo arriba: 0; izquierda: 50%; margen izquierdo: -30px;  .toggle-icon display: block; posición: relativa; superior: 50%; ancho: 100%; margen: -22px auto 0 2px; -webkit-transición: margen 600ms; -moz-transición: margen 600ms; transición: margen 600ms;  .bar display: block; ancho: 38px; altura: 2px; margen: 9px; borde derecho: 28px sólido #fff; borde izquierdo: 6px sólido # d6d6d6; -webkit-box-dimensionamiento: cuadro de borde; -mano-caja de tamaño: cuadro de borde; tamaño de caja: caja de borde; -webkit-transition-property: -webkit-transform, margin, border-right-color, box-shadow; -moz-transition-property: -moz-transform, margin, border-right-color, box-shadow; propiedad de transición: transformar, margen, borde-derecho-color, cuadro-sombra; -webkit-transición-duración: 600ms; Duración de transición: 600ms; duración de la transición: 600ms;  .bar: nth-of-type (2n) -webkit-transform: rotate (-180deg); -moz-transform: rotate (-180deg); -ms-transform: rotar (-180deg); -o-transformar: rotar (-180deg); transformar: rotar (-180deg);  / * Estados conmutados * / .toggled .toggle-icon margen: -32px 0 0 7px;  .toggled .toggle-icon .bar: nth-of-type (3) margin-left: 5px; -webkit-transform: rotate (-42deg); -moz-transform: rotar (-42deg); -ms-transform: rotar (-42deg); -o-transformar: rotar (-42deg); transformar: rotar (-42deg);  .toggled .toggle-icon .bar: nth-of-type (2) margin-left: 14px; -webkit-transform: rotate (-137deg) translateY (-15px); -moz-transform: rotate (-137deg) translateY (-15px); -ms-transform: rotate (-137deg) translateY (-15px); -o-transform: rotate (-137deg) translateY (-15px); transformar: rotar (-137deg) translateY (-15px);  .toggled .toggle-icon .bar: nth-of-type (1) opacity: 0;  / * Lightsaber glow * / # nav-drawer-toggle.toggled: hover .bar: nth-of-type (3) border-right-color: # ddf1da; caja de sombra: 4px 0 6px 1px rgba (83,228,68,0.65);  # nav-drawer-toggle.toggled: hover .bar: nth-of-type (2) border-right-color: # e9b8b9; caja de sombra: 4px 0 6px 1px rgba (205,40,44,0.75); 

Finalmente, un poco de JavaScript que cambia el estado de navegación:

(function () $ ("# nav-drawer-toggle"). on ("click", function () $ (this) .toggleClass ("toggled");); ());

Nota: parte del código anterior se tomó directamente de StarWars.com, mientras que otras piezas se recrearon para lograr el mismo efecto.

Echa un vistazo a la demo final..

Si bien esta es una técnica aparentemente simple, habla a la audiencia de una manera mucho más matizada y rica que una simple "X" o hamburguesa..

La página 404

Los diseñadores de StarWars.com han pensado en muchos detalles aparentemente menores en su proceso de diseño. Uno que me gustaría señalar en este artículo es la página 404.

Las páginas 404 a menudo son olvidadas por nosotros como desarrolladores web o diseñadores, porque podemos considerarlas fácilmente como un "caso extremo". Parece que nos olvidamos de ellos porque no son lo que es. se supone que sucede, Así que no diseñamos mucho para ellos. Sin embargo, las 404 páginas merecen mucha más atención de la que podríamos pensar. Los usuarios alcanzan las 404 páginas cuando intentan acceder a contenido que ya no está disponible, o tal vez está vinculado o escrito incorrectamente. Este momento en la experiencia del usuario debe ser explorado mucho más intencionalmente.

Cuando un usuario no llega a una página a la que intenta acceder, puede ser muy frustrante y hacer que el usuario se vaya inmediatamente. Sin embargo, si el diseño de la página 404 es tal que ayuda al usuario y lo deleita en cierta medida, se puede retener su atención. En el caso de StarWars.com, cuando un usuario visita una dirección incorrecta (como http://www.starwars.com/nowhere), se le presenta un "404" gráfico, con una Estrella de la Muerte incompleta en lugar de el cero y el mensaje "Esta página no está completamente armada y operativa. ¿Intenta algo más?"

Esta página es efectiva por dos razones. Primero, habla una vez más a los fanáticos de Star Wars directamente; Para gran parte de la serie de películas, la Estrella de la Muerte se parece a la de la página 404 y está en proceso de ser construida. Cuando finalmente está completo en la final de las seis películas, The Emperor le dice a Luke: 

Ahora es testigo de la potencia de fuego de esta plena armado y Operacional Estación Dé Batalla!

Este es un punto fundamental en la serie de películas. Los diseñadores de StarWars.com sabían que cualquier fan que ingrese al sitio y llegue a la página 404 probablemente recordará este momento de la película y, en lugar de centrarse en la frustración de no haber alcanzado lo que buscaba, podría estar encantado o distraído. Por el recuerdo de la película..

Si bien parece que fue una oportunidad perdida el uso de la infame cita "estos no son los droides que estás buscando", la omnipresencia de Star Wars ha dado lugar a muchas páginas 404 que ya usan este tema, incluidos sitios populares como GitHub.

Conclusión

Eso envuelve nuestra investigación del nuevo StarWars.com. ¿Hay alguna pieza interesante del sitio que hayas descubierto? ¿Quizás estás interesado en leer un post de "Cómo lo hicieron" sobre otro sitio? Dinos en los comentarios!