Crítica del diseño web # 27: Artes idea
Cada semana echamos un vistazo a un nuevo sitio web y analizamos el diseño. Señalaremos ambas áreas que están bien hechas, además de aquellas que podrían necesitar algo de trabajo. Finalmente, terminaremos pidiéndole que proporcione sus propios comentarios.
El sitio de hoy es Idea Arts.
Explore los recursos de diseño
Si desea enviar su sitio web para que aparezca en una futura Crítica de diseño, solo le llevará unos minutos. Cobramos $ 24 por criticar su diseño, ¡mucho menos de lo que pagaría si un consultor visitara su sitio! Puedes encontrar mas aqui.
Sobre Idea Arts
Idea Arts es el portafolio personal de Goran Ilic, un diseñador gráfico con una pasión de por vida por la tecnología. Su sitio muestra su trabajo reciente y los servicios ofrecidos por su compañía.
Aquí hay una captura de pantalla de la página de inicio:
Primera impresión
Idea Arts es, en su mayor parte, un sitio atractivo. Aquí hay algunas buenas ideas en el trabajo que hacen que el diseño tenga un comienzo realmente fuerte. El contenido se divide en secciones claramente definidas y sigue una progresión lógica. También hay algunos elementos gráficos atractivos que captan efectivamente la atención del usuario.
Sin embargo, hay muchas oportunidades para el refinamiento. El diseño es lo suficientemente sólido que no recomiendo comenzar de nuevo, pero varios aspectos podrían necesitar un poco más de atención para ponerlos a la par. A continuación, veremos algunos de estos.
Tipografía
El mayor problema que veo con este sitio es la tipografía. Para empezar, solo en la página de inicio vemos alrededor de diez variaciones diferentes de tamaño de fuente, ancho, estilo, etc. Esto casi siempre es una característica negativa. Es una buena regla general mantener sus tipos de letra en alrededor de dos o tres variaciones por diseño.
Decida los tipos de letra que puede usar en los encabezados, subtítulos y copia del cuerpo. Luego, haga que sean consistentes en todo su diseño en lugar de tratar cada sección como un área independiente que puede tener sus propias características únicas.
Además, realmente dedique algún tiempo a construir el tipo para que se vea atractivo. Esto implica planificar cuidadosamente las opciones, como altura de línea, color e incluso los saltos de línea. Todos estos son bastante difíciles en el siguiente ejemplo.
Para empezar, el azul claro no contrasta bien con el fondo. Esto se puede solucionar fácilmente oscureciendo ese color hasta que realmente se separe del color claro detrás de él. Además, la copia más pequeña podría usar un poco más de espacio para respirar. La altura de la línea es simplemente demasiado baja y hace que sea difícil de leer, aumente esto un poco aquí y la legibilidad aumentará enormemente.
Sin embargo, tenga cuidado porque en otras áreas del sitio la altura de la línea parece torpemente alta. Recomiendo utilizar una herramienta gratuita en línea como Typograph - Scale & Rhythm (que se muestra a continuación) para ayudar con el flujo de sus párrafos.
Finalmente, mira tus saltos de línea. Curiosamente, no solo tiene que estar atento a las pausas incómodas en la redacción, sino que también debe prestar atención a la forma del párrafo. El anterior se ve un poco extraño y podría volver a fluir fácilmente a algo como la versión a continuación.
Espacio en blanco
Otra área del diseño que podría usar algunos ajustes es el uso de espacios en blanco. Al igual que con la tipografía, esto puede ser complicado y en gran medida subjetivo. Sin embargo, hay algunos principios básicos que pueden guiarlo en el camino.
Por ejemplo, cada vez que tenga una colección distribuida de elementos, ya sea vertical u horizontal, intente primero agrupar los objetos visualmente y luego espaciarlos de manera uniforme. Por ejemplo, en el ejemplo a continuación, la versión original tiene un espaciado dispar entre los íconos y el texto, y los elementos que deberían ser distintos se encuentran un poco. Con un poco de ajuste, creamos una declaración gráfica mucho más clara.
La diferencia es sutil pero muy importante. Observe lo fácil que es saber qué línea de texto va con qué icono. Hay algunas otras áreas a lo largo del diseño que podrían usar una dosis similar de análisis espacial. Por ejemplo, el siguiente texto casi se estrella en el extremo de su dispositivo de contención. Siempre asegúrese de dar suficiente espacio a elementos como este.
Como vimos con los problemas anteriores, esto va en ambos sentidos. El logotipo, por ejemplo, parece que tiene demasiado espacio en blanco integrado en la brecha entre las palabras.
Tweak, Tweak, Tweak
La moraleja de la historia aquí es que incluso si decides que has creado una página de gran aspecto, el diablo está en los detalles. Nunca apresure las pequeñas cosas como la tipografía y el espacio. De hecho, ¡es posible que tenga que pasar más tiempo haciendo esto correctamente que forjando su concepto visual inicial!
Definitivamente vale la pena la inversión de tiempo para terminar bien su sitio. Entrar constantemente en este hábito hará que sus diseños se sientan mucho más refinados y les dará una mayor resistencia al escrutinio.
¡Tu turno!
Ahora que ha leído mis comentarios, participe y ayude dando al diseñador algunos consejos adicionales. Háganos saber lo que piensa 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 libres de cualquier insulto.
