¡Bienvenido a nuestra 40ª crítica de diseño! 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 FanExtra, un sitio de recursos fantástico para diseñadores.
Si desea enviar su sitio web para que aparezca en una futura crítica de diseño, solo le llevará unos minutos. Cobramos $ 34 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 FanExtra
? Todo comenzó con un largo verano hace más de dos años y una pasión por el diseño. Después de disfrutar algunos de los tutoriales de Photoshop publicados en el momento, decidí escribir algunos de los míos. Configuré un blog para este propósito (PSDFAN.com) y comencé a usarlo como mi salida creativa. Quería ofrecer más para nuestra creciente comunidad y poder desarrollar PSDFAN a algo más grande. La idea para FanExtra nació pronto! La red FanExtra es un lugar para que diseñadores de todo el mundo se reúnan y exploren sus ideas y creatividad. Puede unirse a las discusiones en nuestros foros o ampliar su aprendizaje a través de nuestro programa de membresía de FanExtra.
Aquí hay una captura de pantalla de la página de inicio:
Impresión inicial
FanExtra es uno de los casos más interesantes para una crítica de diseño que hemos tenido todavía. La razón de esto es que en realidad es una página realmente atractiva, pero que recomendaría que se reconsidere casi por completo.
Cada sección de la página, desde el logotipo hasta las miniaturas, se ve muy bien. Sin embargo, cuando toma la página como un todo, hay algunos problemas genuinos con el flujo de cada sección además del problema más grande, que es la claridad de la comunicación del mensaje principal.
Este problema es bastante común y surge debido a una palabra muy sucia en el diseño web: suposición. En este caso, es probable que el diseñador esté cerca del proyecto y, por lo tanto, naturalmente tenga problemas para ver que un visitante podría no entender lo que está pasando. El supuesto es que un visitante que encuentre esta página sabrá qué? FanExtra? Es decir, que definitivamente no es algo que se deba asumir aquí.
La comunicación
Cuando aterriza en una página web, analiza instintivamente el área del encabezado de la misma manera que analizaría el tablero del menú en un restaurante de comida rápida. Las posibles preguntas incluyen: ¿Dónde estoy? ¿Cuanto cuesta? ¿Qué me darán por mi dinero? ¿Sirven productos de Coca Cola o Pepsi? Ok, tal vez la última pregunta no se aplica aquí.
Mi punto es que cuando miras el encabezado de este sitio, no está abordando adecuadamente todas estas preguntas cruciales:
Vemos cómo se llama el sitio (FanExtra) junto con un campo grande para algún tipo de registro. ¿Significará esto que estoy inscrito en la red? Entonces, ¿es este un servicio gratuito? A la derecha vemos algo que apunta a "tutoriales", que nos lleva por el camino correcto, seguido de palabras como "texturas". y? vectores ?, que representan una jerga bastante especifica.
Si soy un diseñador, en este punto probablemente he descubierto hasta cierto punto lo que está pasando, pero ¿es ese el objetivo realmente aquí? ¿Debería el visitante encontrar pistas y usarlas para interpretar el sitio?
El misterio es revelado
Cuando llegamos al medio del sitio web, el misterio se revela:
Ahora podemos ver que FanExtra es una red de sitios de tutoriales increíbles. ofreciendo membresías por $ 9 por mes. Esta es la pieza de comunicación más importante de la página y, sin embargo, está escondida en la mitad de la página. Esto debería ser lo primero que ve el usuario.
De hecho, creo que este mensaje podría ser aún más claro. ¿La frase? ¿Sitios de tutoriales impresionantes? sigue siendo bastante vago si lo piensas desde la perspectiva de un extraño. Algo como ¿Sitios de tutoriales impresionantes para profesionales creativos? Realmente tomaría esta declaración mucho más lejos. Inmediatamente, ha localizado a su público objetivo en la nariz, de modo que cuando encuentro esta página, veo un cordial saludo que me informa que este sitio es específicamente para gente como yo.
Contraste visual contra el desorden visual
Otro problema que veo con la mensajería es cómo está estructurado desde un punto de vista visual. Echemos un vistazo a la comunicación principal tal como está actualmente:
Aquí vemos una pila de tres líneas, cada una con un texto de color diferente y ligeras variaciones de la misma fuente en términos de negrita y tamaño. Puedo y he escrito artículos completos sobre contraste en el diseño, pero a lo que se reduce esto se dice mejor en un consejo del autor del diseño Robin Williams: "No seas un enclenque" Con esto quiere decir, que para usar el contraste de manera efectiva, los elementos realmente tienen que estar separados entre sí de una manera grande, de lo contrario el resultado es simplemente un desorden visual.
Echa un vistazo a cómo otro popular programa de membresía de diseño, Think Vitamin, estructura el mensaje principal en su página.
Aquí vemos un contraste enorme y enormemente exagerado entre el titular y el subtítulo. El resultado es una comunicación bella y clara que se lee perfectamente. Las personas que navegan por la página leen el titular casi por accidente, y si están interesados, pueden tomarse el tiempo para leer el subtítulo.
Las características
La página termina con un conjunto masivo de puntos de bala corriendo por el lado izquierdo. Este es un uso bastante incómodo del espacio y crea un espacio incómodo en el lado derecho.
La solución rápida para esto es simplemente dividir los puntos de bala en dos pilas separadas:
Sin embargo, esto es en última instancia una curita y creo que la página podría usar alguna cirugía mayor. Trataremos brevemente esto en la siguiente sección.
Mi? Big Picture? Recomendaciones
Honestamente, no creo que la configuración ininterrumpida de doble columna funcione para este sitio. Es demasiado rígido y en realidad interrumpe el flujo natural de comunicación en lugar de facilitarlo, que es el objetivo de un diseño estructurado.
Mi recomendación es tirar este diseño completamente. En primer lugar, deshacerse de la rígida estructura de doble columna. A continuación, mueva la comunicación principal a la parte superior de la página. Hacer un gran? Aparece? cuadro que abarca todo el ancho de la página y resalta parte del contenido que luego desglosa (más de 140 archivos, 40 vectores, etc.). Asegúrese de que el titular utilice un contraste fuerte, frases claras y objetivos, y como máximo dos colores que se vean bien juntos.
Finalmente, una vez que haya creado este impresionante área de encabezado que determina perfectamente lo que es el sitio, para quién es y los conceptos básicos de lo que incluye, entonces puede concentrarse en organizar la otra información debajo, posiblemente en un formato de dos o tres columnas.
¡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.