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 la página de inicio de Ray Cheung, que se describe a sí mismo simplemente como un Emprendedor en línea.
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 Ray Cheung
? En lugar de hacer sitios web para clientes, me encanta trabajar en mis propios proyectos; Partiendo de una idea, diseñar desde cero con algo de inspiración en el camino, codificar y luego difundirla por todo el mundo me da una gran sensación de logro. Actualmente gestiono sitios web de inicio automático con aproximadamente dos millones de visitantes por mes, todo con el objetivo de compartir recursos útiles para las personas.
Aquí hay una captura de pantalla de la página de inicio:
Impresiones iniciales
Ray Cheung es un hombre que necesita muy poca instrucción de diseño. No tiene una, sino varias empresas web muy exitosas, todas las cuales se ven muy bien y su página de inicio no es una excepción.
El tema general es bastante interesante: un fondo de madera con una pila de papeles para contener el contenido. Sin embargo, en lugar de utilizar una textura de papel, Ray fue con un fondo de campo de estrellas. ¡Suena loco pero el efecto general es bastante agradable! Me encanta cuando los diseñadores hacen algo inesperado en lugar de simplemente correr con una tendencia.
El efecto de la página apilada recuerda a un popular tema Tumblr, pero las similitudes realmente se detienen allí, ya que el diseño general es bastante diferente.
De un vistazo me gusta mucho lo que Ray ha hecho aquí. Vamos a profundizar y echar un vistazo más de cerca a algunas de las secciones.
Textura y color
Como mencioné anteriormente, las texturas de espacio y madera son una combinación poco probable, pero ambas están muy bien diseñadas y parecen funcionar perfectamente juntas. Me gusta la paleta de colores oscuros que resulta de los dos:
Fuentes
Cuando tienes un tema visual bastante atrevido, puede ser abrumador combinarlo con alguna tipografía loca. La idea general es que no quieres que muchos objetos compitan por la atención.
A la luz de esto, Ray tomó una decisión sólida al ser conservador con sus fuentes. Toda la tipografía se compone de tipos de letra sans-serif de fácil lectura. El encabezado principal del sitio es negrita, seguido de una variante ultraligera (quizás demasiado ligera). Estos y los encabezados de la sección condensada en negrita son imágenes con la copia de cuerpo real en Arial. Sería genial ver algo de integración de @ font-face para poner en vivo algo de este tipo, pero las imágenes son bastante pequeñas, así que realmente no creo que sea un gran problema (aunque un sprite o dos no duelen) .
Navegación
Entre estas críticas y nuestra galería de diseño, he echado un vistazo de cerca a un tonelada de diseños de sitios web a lo largo de los años. No es frecuente que vea un truco con el que nunca me haya topado. La navegación de Ray aunque realmente me sorprendió. No creo haber visto nunca este efecto particular.
El diseño de esta sección es simple y funciona a la perfección con la página general. Me encanta el contraste de los botones ligeramente extruidos y la sección de inserción debajo de ellos.
Cuando hace clic en uno de los dos últimos botones, la página se desplaza automáticamente para ir a esa sección, una idea bastante típica. Sin embargo, los otros dos botones se vinculan con dos secciones que ya están en la parte superior de la página, de modo que al hacer clic en ellas, sus respectivas secciones se sacuden de un lado a otro en una animación suave. Es un efecto bastante simple que hace que el sitio parezca más dinámico, casi vivo y amigable.
Secciones
La página se divide en dos columnas verticales. En los diversos proyectos en los que Ray ha trabajado y, a la izquierda, varias secciones pequeñas de contenido: Acerca de mí, Mis habilidades, Lectura y Reconocimientos.
Cada sección está coronada por un encabezado y un pequeño ícono, otra pequeña característica que me hace pensar en Tumblr.
Estas secciones son claramente distintas y fáciles de perfeccionar individualmente. Cada uno tiene un diseño único pero se unen bien. Una pequeña cosa que consideraría en "Mis habilidades". sección es colorear las barras horizontales para que coincidan con sus porciones respectivas del gráfico circular. Esto ayudaría a la consistencia de los dos gráficos y comunicaría inmediatamente cómo están conectados.
Desplazamiento inteligente
Otra cosa que realmente me gusta de este sitio es cómo Ray pensó en la funcionalidad de desplazamiento. La columna izquierda termina en el formulario de contacto y la columna derecha es significativamente más larga. A medida que se desplaza hacia abajo en la página, la página completa se desplaza de manera uniforme como lo esperaría hasta que llegue al formulario de contacto. En este punto, la columna izquierda detiene el desplazamiento y la columna derecha continúa.
Tocarlos como estos solo muestran cuánto tiempo se pasó pensando cómo hacer que el sitio sea más fácil de usar.
¡Luces apagadas!
Una de las pocas cosas de las que no estaba seguro en el sitio era el interruptor cerca de la parte superior para apagar las luces. Esperaba que una vez que presionara este interruptor, el tema cambiaría de alguna manera. Tal vez el fondo de madera se desvanezca en negro revelando más estrellas o algo más interesante.
Sin embargo, cuando presionas el interruptor, esto es lo que obtienes:
Entiendo el mensaje aquí: ahorrar energía apagando las luces. Sin embargo, la implementación es un poco incómoda. Esta página no le da ninguna manera de volver al sitio en el caso de que solo presionara el botón para ver lo que hizo, ni lo dirige a ningún otro lugar, como uno de los otros proyectos de Ray o algunos recursos para ahorrar energía.Otro elemento confuso es la batería se está agotando? mensaje en el pie de página del sitio. Esto puede estar conectado al mensaje en el encabezado, pero no está claro.
Creo que las intenciones son buenas aquí, pero el resultado está reduciendo la calidad percibida del sitio y creo que, si se van a mantener, es necesario que se reconsideren.
Conclusión
Para concluir, creo que Ray ha creado una gran página web para presentarte a ti mismo. La página indica claramente quién es y qué hace y se ve muy bien al hacerlo. El diseño es lógico y fácil de seguir, el diseño es único e interesante y el contenido es, en su mayor parte, relevante.
¡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.