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 Idea Arts.
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 por un consultor para que visite su sitio! Puedes encontrar mas aqui.
Acerca de Idea Arts
Idea Arts es el portafolio personal Goran Ilic, un diseñador gráfico con una pasión por la tecnología de por vida. 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 que ponen el diseño a un comienzo realmente sólido. El contenido se divide en secciones claramente definidas y sigue una progresión lógica. También hay algunos elementos gráficos atractivos que atraen de manera efectiva la atención del usuario.
Sin embargo, hay muchas oportunidades para el refinamiento. El diseño es lo suficientemente sólido como para que no recomiendo volver a empezar, pero varios aspectos podrían requerir un poco más de atención para ponerlos a la par. A continuación echaremos un vistazo a 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 es casi siempre una característica negativa. Es una buena regla general para mantener sus tipos de letra en aproximadamente dos o tres variaciones por diseño.
Decida los tipos de letra que puede usar en los encabezados, sub-encabezados y copia del cuerpo. Luego haga que esto sea consistente 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 pasar algún tiempo construyendo el tipo para lucir atractivo. Esto implica opciones de planificación cuidadosas como la altura de la línea, el color e incluso los saltos de línea. Todos estos son bastante toscos en el siguiente ejemplo.
Para empezar, el azul claro no contrasta bien con el fondo. Esto puede solucionarse fácilmente oscureciendo ese color hasta que realmente se separa del color claro detrás de él. Además, la copia más pequeña podría necesitar 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, suba esto un poco aquí y la legibilidad aumentará considerablemente.
Sin embargo, tenga cuidado porque en otras áreas del sitio la altura de la línea parece torpemente alta. Recomiendo utilizar una herramienta en línea gratuita como Typograph - Scale & Rhythm (que se muestra a continuación) para ayudar con el flujo de sus párrafos.
Por último, observa tus saltos de línea. Curiosamente, no solo tiene que estar atento a las interrupciones incómodas en la redacción, sino que también debe prestar atención a la forma del párrafo. El de arriba parece un poco extraño y podría fácilmente volver a fluir a algo como la versión de abajo.
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 es 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 visualmente los objetos y luego espaciarlos de manera uniforme. Por ejemplo, en el ejemplo a continuación, la versión original tiene un espacio de separación entre los iconos y el texto, y los elementos que deben ser distintos se encuentran un poco entre sí. 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 en todo el diseño que podrían usar una dosis similar de análisis espacial. Por ejemplo, el texto a continuación casi se estrella contra el final de su dispositivo de contención. Siempre asegúrese de dar suficiente espacio a elementos como este.
Como vimos en los números 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 apariencia, el diablo está en los detalles. Nunca corras a través de las cosas pequeñas como la tipografía y el espaciado. De hecho, ¡es posible que tenga que dedicar más tiempo a hacer esto bien que a elaborar su concepto visual inicial!
Definitivamente vale la pena invertir el tiempo para terminar su sitio correctamente. Consistentemente en este hábito hará que sus diseños se sientan mucho más refinados y les dé mayor resistencia al escrutinio.
¡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 claros y constructivos sin ningún insulto.