Cada semana echamos un vistazo a un nuevo sitio web y analizamos el diseño. Señalaremos las áreas que se realizan bien además de las que podrían ser útiles. Finalmente, terminaremos pidiéndole que proporcione sus propios comentarios.
El sitio de hoy es Snowden Industries.
Si desea enviar su sitio web para que aparezca en una futura crítica de diseño, solo le llevará unos minutos. Cobramos $ 49 por criticar su diseño, ¡mucho menos de lo que pagaría por un consultor para que visite su sitio! Puedes encontrar mas aqui.
Acerca de Snowden Industries
? Somos un equipo de profesionales, cada uno con un conjunto único de habilidades especializadas. Nos encanta lo que hacemos y disfrutamos ayudando a nuestros clientes a maniobrar a través del proceso creativo de traducir las iniciativas de negocios fuera de línea existentes en experiencias en línea inmersivas. Planificamos, diseñamos, codificamos, construimos y criticamos nuestros proyectos durante todo el día. Gestionamos proyectos con BaseCamp, facturamos con FreshBooks y nos comunicamos a través de varios mensajeros en línea como Skype, AIM y Yahoo Chat. También estamos siempre disponibles por teléfono y correo electrónico para ayudarlo en su proyecto.
Aquí hay una captura de pantalla de la página de inicio:
Impresión inicial
Mi primera reacción a este sitio es simple: es impresionante. Es atractivo, colorido, dinámico, atractivo, bien organizado; Podría seguir y seguir. Un serio aplauso para la gente de Snowden, han hecho un trabajo estelar.
Criticar un sitio como este siempre es difícil porque está muy bien hecho. En lugar de separar todas las cosas que salieron mal, discutamos lo que salió bien. En el camino, veremos si podemos encontrar áreas que podrían mejorar.
CRAP: El acrónimo de juzgar diseños por
El autor de diseño Robin Williams (que no es el actor) estableció hace cuatro principios básicos de diseño que no solo uso como una guía para mis propios diseños, sino también como un estándar para juzgar otros diseños. Estos principios son el Contraste, la Repetición, la Alineación y la Proximidad, a los que se hace referencia con mucho cariño en la comunidad de diseño como CRAP.
Para ver por qué este diseño funciona tan bien, veamos cómo se sostiene en cada una de estas áreas. Como lector, esto le dará una idea muy importante de cómo puede utilizar estos principios en su propio trabajo.
Contraste
Yo diría que el contraste es una de las cosas más fuertes que impulsan este diseño. Es la razón por la que la página realmente llama tu atención y la mantiene mientras la recorres. Aquí están algunos ejemplos:
Note lo simple que es la paleta de colores aquí. Esto es una gran cosa sobre el diseño que creo que mucha gente se pierde. Uno de los mejores consejos que te puedo dar: si no eres muy bueno con las combinaciones de colores, ¡manténlo simple y estúpido! Hay una estrategia clásica en funcionamiento aquí que vemos en innumerables sitios. Primero, se eligieron dos colores agradablemente contrastantes, en este caso, blanco y negro. Simplemente no se vuelve más básico y contrastante.
Después de eso, se trae un tercer color, generalmente un pop brillante en forma de naranja, rojo o verde y se usa repetidamente a lo largo de la página para guiar su atención a puntos específicos. Ese tercer color se usa con mucha moderación y realmente te atrapa cada vez que lo ves. Snowden usó una bonita naranja para lograr esto.
Como una tangente completamente ajena, observe que el sitio no hace parece un diseño de halloween. Muy a menudo escucho a diseñadores que dan consejos irreflexivos para evitar combinaciones de días festivos como rojo y verde (Navidad) o naranja y negro (Halloween) porque los espectadores asociarán de inmediato su diseño con esos días festivos. Hay una cierta cantidad de verdad en la advertencia, pero si usa uno de los colores con moderación como lo hizo Snowden con la naranja, puede evitarlo fácilmente. Si eres un diseñador experto, deberías poder hacer que los espectadores piensen en la Navidad solo cuando lo desees.
Repetición
Mientras estamos en el tema del color, ese toque de naranja también sirve como un punto fuerte de repetición en toda la página. Como mencioné anteriormente, en cualquier lugar que vea naranja, el diseñador está tratando de dirigir su atención a algo importante.
Otro punto intencional de repetición es mediante el uso de círculos y esquinas muy redondeadas. A lo largo de la página vemos círculos usados como una declaración de diseño. Una y otra vez utilizan el mismo elemento básico para crear una sensación estética fuerte y consistente.
Retomando ese tema redondeado, la organización en el sitio está dirigida por estas grandes secciones arqueadas. Si eliminamos el contenido, es fácil ver la repetición aquí.
Alineación
La alineación es un aspecto muy básico pero extremadamente importante de su diseño. Este sitio tiene un diseño bastante complejo, pero los arcos hacen que se vea un poco más complicado de lo que realmente es. La naturaleza redondeada de las secciones proporciona al diseño una ilusión casi orgánica, pero si elimina el diseño visual, puede ver que la estructura de alambre debajo es una cuadrícula sólida.
Este ejemplo realmente ayuda a disipar el mito de que las tramas de alambre lo encierran en estructuras de diseño que son tan rígidas que matan la libertad creativa. ¡Este sitio tiene un máximo de atractivo visual y, sin embargo, la estructura subyacente es bastante simple y aburrida!
Proximidad
El principio de proximidad es tal que, si se hace bien, nunca deberías notarlo. Dicho de otra manera, nunca prestará atención al hecho de que las cosas que pertenecen juntas están juntas, solo prestará atención a los problemas, cuando algo esté fuera de lugar o sea difícil de encontrar.
Por esta razón, la proximidad parece obvia y simple, pero en verdad es un obstáculo para muchos diseñadores. Como ya hemos mencionado varias veces, la estructura de este sitio es proporcionada por los arcos blanco y negro. Esto creó pequeños rincones agradables donde el diseñador podría presentar grupos de información visuales claros.
No cometa el error de pensar que el diseño debe ser completamente independiente del diseño estético. Esta página muestra claramente a los dos trabajando estrechamente y brindando una herramienta poderosa para implementar la proximidad.
Conclusión
No hay una fórmula mágica que puedas seguir cada vez para lograr un diseño exitoso, pero seguir los principios anteriores te acercará. Los diseñadores detrás de Snowden claramente tienen un fuerte conocimiento de la teoría del diseño básico y de cómo diseñar una página que sea exitosa, funcional y atractiva.
Es posible que haya notado que todavía no he dado ningún comentario constructivo y, para ser sincero, no estoy seguro de qué decir. Es un diseño sólido que yo mismo estaría extremadamente orgulloso de producir. Lo único que me molesta es el uso de la sustitución de fuentes Cufon. El tipo de letra utilizado es un sans-serif bastante simple y no estoy seguro de que Cufon valga la pena. Un aspecto similar podría lograrse con Helvetica Neue y algunas alternativas más seguras. Además, @ font-face ofrece una alternativa más amigable, aunque algunos prefieren la representación visual de Cufon. De cualquier manera, es un asunto pequeño con este sitio y está completamente abierto para el debate.
Mira alrededor
Antes de ir, pase por el sitio y eche un vistazo. Observe cómo tomaron estos mismos principios sólidos y los combinaron con nuevos diseños e ideas en otras páginas en todo el sitio.
¡Tu turno!
Ahora que ha leído mis comentarios, contribuya y ayude, dando al diseñador algunos consejos adicionales. Háganos saber lo que cree que es genial sobre el diseño y lo que cree que podría ser más fuerte. Como siempre, le pedimos que también sea respetuoso con el diseñador del sitio y que ofrezca consejos constructivos claros y sin insultos severos.