Crítica de diseño web # 11: Scott Block
Cada semana echamos un vistazo a un nuevo sitio web y analizamos el diseño. Señalaremos tanto las áreas que están bien hechas como las que podrían necesitar algo de trabajo. Finalmente, terminaremos pidiéndole que proporcione sus propios comentarios.
El sitio de hoy es el portafolio personal de Scott Block, un diseñador web de Maryland.
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 Scott
“Vivo en Columbia Maryland, a poca distancia de Baltimore y de la capital del país. Cuando tenía doce años, combiné mi pasión por los Cuervos de Baltimore con mi creciente interés en la tecnología, y comencé a crear sitios sobre los Cuervos. Desde entonces, he perfeccionado diligentemente mis habilidades y ahora creo sitios web para varias personas y organizaciones. Ahora soy capaz de combinar html con css, javascript, php y ajax, para crear sitios web hermosos y funcionales. "
Aquí está la página de inicio del sitio:
Aunque definitivamente hay algún potencial aquí, hay muchas cosas que arreglaría en esta página. Echemos un vistazo a ellos uno por uno.
Esquema de colores
Los colores utilizados en el sitio de Scott crean una paleta bastante agradable cuando se eliminan individualmente como se ve a continuación.
Sin embargo, no estoy loco por la distribución de los colores. Parecen implementados aleatoriamente en puntos de la página simplemente por variación, en lugar de aplicarse con un propósito y lógica. Piensa en cada elección de color que hagas y cómo se vincula con el resto del contenido de la página.
Logo
Su posición en la parte superior izquierda del sitio hace que este logotipo sea lo primero que los usuarios ven cuando visitan el escenario. Desea aprovechar esta oportunidad para causar una buena primera impresión. Desafortunadamente, siento que este logo se está quedando corto.
Puedo ver cómo se trabajan las formas de bloque en las letras, presumiblemente para vincularlas con el apellido del diseñador, pero simplemente no funciona. El SB tiene una legibilidad bastante pobre y se siente un poco anticuado.
Navegación y encabezado en su conjunto
El área de navegación es bastante simple, solo un poco de texto con divisores horizontales y un subrayado para indicar la página actual. Estoy a favor de mantener la navegación simple, así que creo que esta área está bien hecha.
Cuando pasa el mouse sobre un enlace en la navegación, aparece un ícono debajo del logotipo de Scott Block. Este es un efecto ordenado que nunca he visto ejecutado de esta manera (con el efecto de desplazamiento tan lejos del enlace).
Cuando observa el área del encabezado como un todo, hay algunos problemas notables que podrían utilizar el direccionamiento. Como dije anteriormente, el efecto de desplazamiento del ícono es ordenado, pero está causando algunos problemas. Cuando no pasa el mouse sobre un enlace en la navegación, hay un gran espacio vacío al lado de la copia del encabezado que le hace preguntarse por qué no está alineado con nada.
Una posible forma de ayudarlo es aplicar un ícono al estado predeterminado que cambia a otro ícono cuando coloca el cursor sobre un enlace y vuelve al ícono original cuando finaliza el desplazamiento. Desafortunadamente, cuando el efecto de desplazamiento del icono está presente, el logotipo y el icono crean una pila vertical incómoda.
En general, el espacio negativo en esta área podría usar una reestructuración completa. Más allá del problema con el icono que falta, el logotipo principal solo ocupa demasiado espacio vertical y está creando brechas extrañas.
Área destacada
Me gusta la repetición en un diseño, y puedo ver cómo los ángulos en esta sección reflejan el del logotipo, pero como realmente no funciona en el logotipo, lo mismo se aplica aquí. La naturaleza inclinada de los encabezados se siente un poco extraña, así como el patrón entrecruzado creado por los colores aquí.
Inconscientemente, su cerebro quiere conectar los dos elementos que son del mismo color, pero aquí las dos áreas no están relacionadas.
Además, hay una serie de efectos de desplazamiento en esta área que no sirven para nada. Cuando pasa el cursor sobre una sección, se crea una sombra paralela. La web nos ha enseñado a reconocer dicha actividad como una indicación de que lo que estamos pasando es un área en la que se puede hacer clic. Sin embargo, no se puede hacer clic en estas áreas y hacer que se sientan como si fueran solo crea confusión para el usuario.
Pie de página
El pie de página es bastante simple, pero nuevamente vemos que podría necesitar un poco de refinamiento.
En primer lugar, el botón está en un lugar incómodo. Cuando diseñe, siempre tenga cuidado de simplemente meter cosas en los agujeros solo porque tiene espacio. Aquí se establece una fuerte alineación a la izquierda por el texto, pero luego se arruina por la ubicación del botón.
Además, la animación de desplazamiento del botón es demasiado. Aquí se usa un sprite de imagen y hay una animación entre los dos estados de botón donde puedes ver una parte de la imagen deslizarse hacia afuera mientras la otra se desliza hacia adentro. No es fácil decir lo que sucede al principio y, por lo tanto, es un poco desconcertante.
Recomendaciones generales
Presente bastantes críticas severas arriba y creo que sería mejor tratar de unirlo todo. Aquí están mis sugerencias:
Para comenzar, rediseñe el logotipo a algo más moderno y horizontal. Luego, establezca una alineación a la izquierda en toda la página. Alinee el área de navegación y el bloque de copia debajo del lado izquierdo de la página y quizás mueva el nuevo logotipo a la derecha.
Varíe el tamaño del texto en la página para crear titulares claros y copias de respaldo. Actualmente todo es muy grande. Recuerda: cuando haces todo especial, nada es especial.
Deseche las formas actuales en la sección destacada y la lista con viñetas gigantes (incorpore sus servicios en otro lugar). Cree una sola vista previa de proyecto destacado grande que se extienda por todo el área de contenido.
Finalmente, vuelva a trabajar el pie de página para que se respete la alineación izquierda de arriba. En otras palabras, saque ese botón de la esquina derecha.
¡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.
¿Interesado en tener su propio sitio criticado? Puedes encontrar mas aqui.
