Crítica de diseño web # 40: FanExtra
¡Bienvenido a nuestra 40a crítica de diseño! Cada semana echamos un vistazo a un nuevo sitio web y analizamos el diseño. Señalaremos ambas áreas que están bien hechas, además de aquellas que podrían necesitar algo de trabajo. Finalmente, terminaremos pidiéndole que proporcione sus propios comentarios.
El sitio de hoy es FanExtra, un sitio de recursos fantástico para diseñadores.
Explore los elementos de Envato
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 si un consultor visitara su sitio! Puedes encontrar mas aqui.
Sobre FanExtra
“Todo esto comenzó con un largo verano hace más de dos años y una pasión por el diseño. Después de disfrutar de algunos de los tutoriales de Photoshop publicados en ese momento, decidí escribir algunos propios. 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 evolucionar PSDFAN a algo más grande. ¡La idea de 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 realmente ampliar su aprendizaje a través de nuestro programa de membresía 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 hasta ahora. La razón de esto es que en realidad es una página realmente atractiva, pero que recomendaría que se repensara casi por completo.
Cada sección de la página, desde el logotipo hasta las miniaturas, se ve muy bien. Sin embargo, cuando considera la página como un todo, hay algunos problemas genuinos con el flujo de cada sección además del problema más importante, 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. Aquí el diseñador probablemente esté cerca del proyecto y, por lo tanto, naturalmente tiene problemas para ver que un visitante no entienda lo que está sucediendo. Se supone que un visitante que encuentre esta página sabrá qué es "FanExtra", lo que definitivamente no es algo que deba asumirse aquí.
La comunicación
Cuando aterrizas en una página web, analizas instintivamente el área del encabezado de la misma manera que analizarías 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 esa ú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 gran campo para algún tipo de registro. ¿Significará esto que me he registrado en la red? Entonces, ¿es este un servicio gratuito? A la derecha vemos algo que sugiere "tutoriales", que nos lleva por el camino correcto, seguido de palabras como "texturas" y "vectores", que representan una jerga bastante específica.
Si soy diseñador, en este punto probablemente haya descubierto lo que está pasando hasta cierto punto, pero ¿es ese realmente el objetivo aquí? ¿Debería el visitante encontrar pistas y utilizarlas para interpretar el sitio?
El misterio se revela
Cuando llegamos a la mitad del sitio web, se revela el misterio:
Ahora podemos ver que FanExtra es "una red de sitios de tutoriales increíbles" que ofrece membresías por $ 9 por mes. Esta es la pieza de comunicación más importante de la página y, sin embargo, está oculta a 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 tutoriales increíbles" sigue siendo bastante vaga si lo piensas desde la perspectiva de un extraño. Algo así como “sitios de tutoriales increíbles para profesionales creativos” realmente llevaría esta afirmación mucho más lejos. Inmediatamente has vinculado a tu público objetivo de inmediato para que cuando encuentre esta página, vea un saludo cordial que me informa que este sitio es específicamente para personas como yo.
Contraste visual versus 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 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 el contraste en el diseño, pero lo que se reduce a esto se dice mejor en un consejo del autor de diseño Robin Williams, "no seas un debilucho". Con esto quiere decir que para usar el contraste de manera efectiva, los elementos realmente tienen que estar separados uno del otro en gran medida, de lo contrario el resultado es simplemente un desorden visual.
Vea cómo otro popular programa de membresía de diseño, Think Vitamin, estructura el mensaje principal en su página.
Aquí vemos un enorme contraste enormemente exagerado entre el título y el subtítulo. El resultado es una comunicación hermosa y clara que se lee perfectamente. Las personas que navegan por la página leen el titular casi por accidente, y si les interesa más, pueden tomarse el tiempo de leer el subtítulo.
Las características
La página termina con un conjunto masivo de viñetas en 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 las viñetas en dos pilas separadas:
Sin embargo, esto es en última instancia una tirita y creo que la página podría usar una cirugía mayor. Abordaremos brevemente esto en la siguiente sección.
Mis recomendaciones de "panorama general"
Honestamente, no creo que la configuración ininterrumpida de doble columna esté funcionando 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 por completo. Primero, deshaga la estructura rígida de doble columna. Luego, mueva la comunicación principal a la parte superior de la página. Haga un cuadro grande "destacado" que abarque todo el ancho de la página y resalte parte del contenido que luego desglosa más tarde (más de 140 archivos, 40 vectores, etc.). Asegúrese de que el titular utilice un fuerte contraste, una redacción y una orientación cristalinas, y como máximo dos colores que se vean bien juntos.
Finalmente, después de haber creado esta increíble área de encabezado que identifica perfectamente el sitio, para quién es y los conceptos básicos de lo que incluye, puede concentrarse en organizar su otra información debajo, posiblemente en un formato de dos o tres columnas.
¡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 un consejo constructivo claro y libre de cualquier insulto.
