Aquí en Design Shack ofrecemos un servicio simple pero útil llamado crítica de diseño web. Es básicamente un servicio de consultoría que puede aprovechar por un precio barato a cambio de permitirnos publicarlo en el sitio como una herramienta educativa.
Personalmente escribí un total de ochenta y cinco de estas cosas hasta ahora (el número 85 se publicará más adelante esta semana). Eso es un montón de consejos de diseño! Siga leyendo para ver lo que he aprendido sobre el diseño web en el proceso, tanto de los buenos ejemplos como de los malos.
Críticas de diseño web
Cuando alguien envía una página para una crítica, la coloco, tomo notas sobre lo que funciona bien, lo que podría ser mejor y lo que debe solucionarse de inmediato. Luego lo escribo todo como una publicación crítica de diseño web.
"En realidad estoy aprendiendo de ustedes tanto como ustedes de mí!"Es obvio que estoy usando estas críticas como una herramienta de enseñanza, pero lo que puede haber pasado por alto es que no estoy enseñando estrictamente, ¡en realidad estoy aprendiendo de ustedes tanto como ustedes de mí! Es frecuente que tengamos un sitio web para criticar que sea realmente fantástico, mientras analizo y explico por qué es tan bueno, estoy absorbiendo técnicas, ideas, patrones de IU y más.
Después de una veintena de estas cosas, noté que surgían algunos patrones y tendencias, consejos que estaba dando una y otra vez, lugares donde los diseñadores solían ser fuertes y débiles, errores que a menudo se cometen. Sesenta críticas más tarde y tengo mucho que decir sobre las áreas donde la mayoría de los diseñadores deben centrarse en mejorar.
1. La regla de los tres segundos
Si ha leído algunas de las críticas que he escrito, es probable que haya notado que siempre comienzo con lo que mi primera impresión me dice sobre el sitio. Cuando carga esa página en el navegador, ¿qué puedo decirle sobre la página en los primeros tres segundos?
¿Qué puedo decir sobre la página en los primeros tres segundos?¿Tres segundos que dices? ¿De qué sirve eso? La respuesta es que, como navegador web, solo me toma unos segundos decidir qué sitio busco. Después de eso, tomé una decisión sobre si seguiré adelante o exploraré más.
Para algunos diseñadores, esto plantea un desafío para captar la atención del usuario con algo llamativo para atraerlos. Esta es una buena técnica, pero puede no ser apropiada para todas las situaciones de diseño. La verdad universal aquí es que siempre debería, como mínimo, saber quién es usted y por qué su sitio existe en estos primeros segundos.
Vimos esto bien hecho en Design Critique # 66 con el encabezado del sitio para IdentyMe.
Tanto los gráficos como los mensajes aquí se unen para crear un mensaje claro como el cristal que se puede leer en un instante: este sitio le permite crear tarjetas de visita virtuales.
Cuando vemos que esto se hace bien, es difícil imaginar cómo alguien podría arruinarlo, pero en realidad es mucho más frecuente que los sitios que critico pierdan la marca en esta área con mensajes vagos. Olvidamos que cuando estamos cerca de un proyecto, a menudo podemos perder de vista el hecho de que no todos saben de qué se trata todo esto como lo hacemos nosotros.
Después de algunas reuniones, sabe todo sobre el negocio de su cliente y se le pasa por la mente que todavía tiene que explicar a los demás qué diablos? ¿La logística de Smith? hace y lo que su sitio web está tratando de lograr.
2. Diseño orientado a objetivos
La segunda cosa importante que aprendí sobre el diseño web es que los proyectos son mucho más exitosos cuando se los aborda con un conjunto muy específico de objetivos en mente. La lección anterior fue solo una extensión de esto: uno de los objetivos principales de cualquier sitio es comunicar su propio propósito.
"Es muy parecido a ser un conductor de taxi que se salta y le pregunta al tipo que está en el asiento trasero a dónde va y en lugar de eso, simplemente conduce a un lugar aleatorio, esperando que lo haga bien".Con demasiada frecuencia, los diseñadores simplemente abren Photoshop y comienzan a dibujar ideas al azar. Este es un gran ejercicio creativo, pero como método principal de creación de sitios de clientes, apesta. Es muy parecido a ser un taxista que se salta y le pregunta al tipo que está en el asiento trasero a dónde va y, en lugar de eso, simplemente se dirige a un lugar aleatorio, esperando que lo haga bien.
En su lugar, lo que debe suceder es que usted y su cliente deben establecer un conjunto de objetivos muy intencionales con respecto a lo que espera lograr con el diseño. Esto debería suceder antes de escribir una sola línea de código o crear una sola PSD.
Vimos esta idea puesta en práctica de manera muy efectiva en la Crítica de Diseño Web # 61: Undead Kit. Dado que el sitio vendía un kit destinado a ayudarlo a sobrevivir un apocalipsis zombi, había dos subobjetivos obvios que el sitio necesitaba alcanzar.
La primera fue mostrar lo que era exactamente en el caso para que los compradores potenciales supieran en qué se estaban metiendo:
El segundo subobjetivo fue explicar cómo los compradores utilizarían su kit para sobrevivir. Enumerar los elementos no es suficiente, la gente necesita ver el beneficio de estos elementos en la práctica.
Como puede ver, ambos objetivos se lograron a través de impresionantes ilustraciones y descripciones de texto simples. El diseñador todavía era capaz de distraerse y flexionar sus músculos creativos, pero lo hizo de una manera que llevó al sitio en una dirección exitosa.
3. Las tendencias de diseño son como fondo de pantalla
Imagina la casa de tu abuela. Imagínese todas las cosas allí que indican que la casa es propiedad de alguien que creció en una época diferente a la suya: las chucherías de porcelana que adornan cada estante, los colores llamativos y por supuesto, el papel tapiz. Capa sobre capa de papel tapiz, un elemento de diseño primario (aunque ahora bastante anticuado) en la sala que cambiaba cada pocos años para adaptarse a las últimas tendencias.
"Si fueras a quitar estas capas una a la vez, viajarías a través del tiempo".Las casas que son propiedad de varios miembros de mi familia seguramente han sacrificado el 5% de sus pies cuadrados a capas de locura de papel tapiz. Si tuviera que quitar estas capas una a la vez, viajaría a través del tiempo y sería testigo de varios patrones y colores que antes se consideraban adecuados para cubrir una habitación, pero que años después se despreciaron como un error espantoso y se reemplazaron con algo que solo se eliminaría. Sirven para continuar este ciclo incesante.
En comparación con el fondo de pantalla, el diseño web todavía está en su infancia, pero ya hemos avanzado lo suficiente como para ver que las tendencias de diseño aquí operan según los mismos principios. Coge cualquier tendencia de diseño que parecía tan impresionante hace cinco años y probablemente ahora sirve como algo que fecha un sitio.
Vimos esto en la práctica con los patrones, texturas y efectos de bisel utilizados en el sitio de Web Design Critique # 74:
Aquí vemos lo que una vez pudo haber sido un diseño de vanguardia, pero ahora simplemente se siente como algo pasado el tiempo. Los diseñadores web son bestias inconstantes y cuando la mafia avanza, o te mueves o te quedas atrás.
Incluso si se tiene en cuenta el hecho de que el sitio anterior tiene una sensación intencionalmente retro, el diseño todavía no funciona porque la forma en que lo llevamos a cabo retro también evoluciona con el paso de los años.
"Moda, televisión, Hollywood, comida, nada escapa al alcance de lo moderno".Puede pensar que mantenerse al día con las tendencias de diseño moderno (o establecer nuevas) es una tontería, pero ese no es el caso en absoluto. Las tendencias de diseño web evolucionan como parte de su cultura en general. Moda, televisión, hollywood, comida, nada escapa al alcance de lo moderno. Al igual que los trabajadores de todas esas industrias deben mantenerse al día o arriesgarse a volverse irrelevantes, usted también debe hacerlo como diseñador web.
No me crees Encuentre a alguien que no haya creado un sitio web desde 1999 y déjelos diseñar su nuevo portafolio. Lo más probable es que te cierres ante el pensamiento.
4. Muchos diseñadores web todavía luchan con la tipografía
En los últimos dos o tres años, los diseñadores web han abrazado completamente la tipografía. Esta área particular del diseño ha ido mucho más allá de una tendencia para muchos diseñadores y se ha convertido en una obsesión. Ejecutar una búsqueda de? Tipografía? en Pinterest o Dribbble y verás innumerables ejemplos de arte tipográfico increíble.
Combine esto con servicios como Typekit y Google Web Fonts, que traen bellas fuentes personalizadas a la web, y verá una industria que ha crecido a pasos agigantados en esta área en muy poco tiempo.
Dicho esto, uno de los problemas con los que me encuentro más a menudo en el diseño web es la tipografía deficiente. Esto toma muchas formas: poco conocimiento de cómo combinar de manera efectiva los tipos de letra, la mala elección de las fuentes, el kerning feo de Photoshop, el tamaño impar, la altura de la línea aplastada, etc. Aquí hay un ejemplo de la Crítica # 73:
Podemos centrar nuestra atención en una pieza de arte tipográfico durante horas y horas, pero cuando estamos trabajando en un proyecto en vivo, el tipo se apresura y se presiona en vivo sin la preparación o el examen adecuado. Los buenos diseñadores de impresión se estremecen ante los ejemplos de kerning como el anterior porque saben que en su industria no hay vuelta atrás. Una vez que está impreso, ya está.
? Los buenos diseñadores de impresión se estremecen ante los ejemplos de kerning como el anterior porque saben en su industria, no hay vuelta atrás. Una vez que está impreso, ya está.Con los diseñadores web, el conocimiento de que todo puede actualizarse fácilmente en cualquier momento puede hacer que el trabajo sea descuidado y apresurado. Tómese el tiempo para corregir su tipo la primera vez.
5. Menos es más
Al mirar en estos 85 sitios web y sugerir cambios que se deben hacer, honestamente es un caso muy raro en el que tengo la impresión de que la página es muy escasa.
En cambio, siempre estoy luchando para que los diseñadores entiendan que en realidad están tratando de llenar la página. Esto se traduce en diseños abarrotados y pesados de texto que nadie se toma el tiempo de analizar.
"Siempre estoy luchando para que los diseñadores entiendan que en realidad están tratando de llenar la página".La web es un lugar de ritmo rápido. Hay una razón por la cual el término está redactado? ¿Navegando por la web? En lugar de leer la web. Saltamos rápidamente de un lugar a otro buscando cualquier cosa que salte y capte nuestra atención.
Las cosas que lo hacen son típicamente simples y atractivas con algunas declaraciones audaces y / o imágenes que se destacan de su entorno. Las páginas llenas de desorden presentan un caso de sobrecarga de información y rápidamente avanzamos.
Considere el siguiente ejemplo de la Crítica # 68:
Este cuadro no es feo de ninguna manera, pero se puede hacer más efectivo al eliminar la mayor parte del texto y agregar un poco de contraste tipográfico:
Sin embargo, el tipo no es la única área donde las cosas deben simplificarse. Considere este ejemplo de la Crítica # 77:
Este es un ejemplo clásico de simplemente tratar de exprimir demasiadas cosas en un espacio pequeño. No pensamos de manera crítica acerca de la organización de contenido, sino que llegamos a un punto en el que aún tenemos muchas cosas que deben incluirse y no hay un lugar para ponerlas, por lo que simplemente nos abarrotamos y el resultado es un desorden desagradable y feo.
¿Que has aprendido?
Así que ahí lo tienen, cinco lecciones que aprendí sobre diseño web al escribir ochenta y cinco críticas. Ahora es tu turno.
¿Lees nuestras críticas de diseño web? ¿Qué has aprendido de ellos? ¿Cómo podemos hacer que sean aún mejores? Deja un comentario y déjanos saber.