Cada semana echamos un vistazo a un nuevo sitio web y analizamos el diseño. Señalaremos tanto las áreas que se realizan bien como las que podrían ser útiles. 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 por un consultor para que visite su sitio! Puedes encontrar mas aqui.
Acerca de scott
? Vivo en Columbia, Maryland, a poca distancia en automóvil de Baltimore y de la capital de la nación. Cuando tenía doce años, combiné mi pasión por los Baltimore Ravens con mi creciente interés por la tecnología, y comencé a hacer sitios sobre los Ravens. Desde entonces, he perfeccionado mis habilidades con diligencia, y ahora hago sitios web para varias personas y organizaciones. Ahora soy experto en combinar html con css, javascript, php y ajax para crear sitios web hermosos y funcionales. ?
Aquí está la página principal del sitio:
Aunque definitivamente hay algo de potencial aquí, hay muchas cosas que arreglaría en esta página. Vamos a verlos 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 ser aplicados con propósito y lógica. Piense en cada elección de color que haga y cómo se relaciona 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. Quieres aprovechar esta oportunidad para hacer una primera impresión fuerte. Desafortunadamente, siento que este logo se está quedando corto.
Puedo ver cómo se están trabajando las formas de bloques en las letras, probablemente para vincularlas al apellido del diseñador, pero simplemente no funciona. La SB tiene una lectura bastante pobre y se siente un poco anticuada.
Navegación y encabezado en su conjunto
El área de navegación es bastante simple, solo un texto con divisiones 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 se desplaza sobre un enlace en la navegación, aparece un icono debajo del logotipo de Scott Block. Este es un efecto limpio que nunca he visto ejecutado de esta manera (con el efecto de desplazamiento tan lejos del enlace).
Cuando se toma el área del encabezado como un todo, hay algunos problemas notables que podrían usar el direccionamiento. Como dije anteriormente, el efecto de desplazamiento del icono es limpio, pero está causando algunos problemas. Cuando no se está desplazando sobre un enlace en la navegación, hay un gran espacio vacío junto a la copia del encabezado que hace que se pregunte por qué no está alineado con nada.
Una posible forma de ayudar a esto es aplicar un icono al estado predeterminado que cambia a otro icono cuando se desplaza sobre un enlace y vuelve al icono original cuando finaliza el desplazamiento. Desafortunadamente, cuando el efecto de desplazamiento del icono está presente, el logotipo y el icono crean una pila vertical torpe.
En general, el espacio negativo en esta área podría utilizar una reestructuración completa. Más allá del problema con el icono faltante, el logotipo principal solo ocupa demasiado espacio vertical y crea 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 logotipo, pero como no está funcionando realmente 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í.
Subconscientemente, 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 se desplaza 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 estamos recorriendo un área en la que se puede hacer clic. Sin embargo, estas áreas no se pueden hacer clic y hacen que se sientan como si solo crearan confusión para el usuario.
Pie de página
El pie de página es bastante simple, pero una vez más vemos que podría necesitar bastante refinamiento.
En primer lugar, el botón está en un lugar incómodo. Al diseñar, siempre tenga cuidado de simplemente meter cosas en los agujeros solo porque tiene espacio. El texto establece aquí una alineación izquierda fuerte, pero luego se arruina al colocar el botón.
Además, la animación de desplazamiento del botón es un poco demasiado. Aquí se usa un sprite de imagen y hay una animación entre los dos estados de los botones donde se puede ver cómo se desliza una parte de la imagen cuando entran las otras diapositivas. No es fácil saber qué sucede al principio y, por lo tanto, es un poco desconcertante.
Recomendaciones generales
He presentado algunas críticas duras arriba y creo que sería mejor tratar de unirlo todo. Aquí están mis sugerencias:
Para empezar, rediseña el logo a algo más moderno y horizontal. Luego establezca una alineación dura hacia la izquierda hasta el final de la página. Alinee el área de navegación y el bloque de copia debajo del lado izquierdo de la página y tal vez 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. Todo es actualmente muy grande. Recuerda: cuando haces que todo sea 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 vista previa del proyecto con una gran característica 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 anterior.En otras palabras, saca ese botón de la esquina derecha.
¡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.
¿Interesado en tener tu propio sitio criticado? Puedes encontrar mas aqui.