Crítica de Diseño Web # 62 Influencias de la Red

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 Influentials Network, un agregador y filtro de noticias políticas.

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 la red de influyentes

? IN monitorea y recopila continuamente las historias de noticias políticas más virales e importantes en todos los medios. IN filtra automáticamente las 10 personalidades y / o asuntos políticos más relevantes en una página única, dinámica y fácil de escanear.

Aquí hay una captura de pantalla de la página de inicio:

Primera impresión

Para ser honesto, no hay mucho sobre el diseño de este sitio que realmente parece funcionar bien. El diseño general de tres columnas es decente, pero el tema visual y la estética en general podrían usar una actualización bastante drástica.

Muchas personas que quieren una crítica realmente solo quieren una palmadita en la espalda, pero he hablado con el diseñador y desarrollador detrás de IN y expresó un deseo genuino de escuchar comentarios abiertos y honestos con respecto al sitio. Él sabe que hay margen de mejora y está buscando consejos claros sobre cómo hacerlo. Con eso en mente, ¡comencemos!

Reflexiones sobre el diseño de agregadores de noticias.

Los agregadores de noticias son bestias muy extrañas para un diseñador web y confieso completamente que las reglas que rigen su éxito parecen estar relacionadas con cualquier cosa que no sea la belleza estética.

Por ejemplo, un agregador que visito con frecuencia es Hacker News. Echa un vistazo a su diseño:

Como puede ver, esta no es exactamente una imagen de diseño web moderno. Ni siquiera es un buen ejemplo de minimalismo moderno, ¡es solo una lista de enlaces con un relleno de fondo! A pesar de esto, todavía me encanta detenerme y ver lo último del mundo nerd. Otros agregadores populares como Reddit no son simples, sino que son francamente feos.

Todo lo que puedo decir es que mi primer instinto es enfocar el diseño de IN como cualquier otro sitio, pero en realidad puede que no sea la mejor manera de hacerlo.

La mirada de en

Incluso teniendo en cuenta el estado actual del diseño del agregador, sigo pensando que IN podría utilizar algunos trabajos en el departamento visual. Para empezar, no soy un fan de los fondos utilizados en cada sección. Siento que el sitio es muy pesado. Siempre tenga cuidado de encontrar un truco de diseño y abusar de él mediante el uso excesivo.

Además, el contenido principal tiene un fondo gris medio y está flanqueado por una tira de luz en cada lado. Esto se siente un poco incómodo por alguna razón. Los dos colores son probablemente demasiado similares. No hay ningún contraste de color real para que el contenido principal se destaque, solo un cambio de color leve y confuso. Sinceramente, creo que solo está agregando una complicación visual innecesaria y recomiendo inundar todo el fondo con el gris que actualmente ocupa el fondo del área principal en el centro. Uno de nuestros objetivos de correo para este sitio será simplificar el diseño bastante ocupado.

Otra cosa que creo que instantáneamente reduce el atractivo visual de la página es el horrible tamaño de las miniaturas. Las fotos se estiran y se comprimen para ajustarse a los tamaños de caja preestablecidos. Este resultado es un diseño de apariencia realmente torpe que sugiere de inmediato "lo suficientemente bueno". Mentalidad del diseñador.

Probablemente hay muchos complementos de JavaScript para solucionar este problema, incluso algunos CSS inteligentes podrían mejorar la situación.

Encabezamiento

El principal problema que tengo con el encabezado es el flujo de comunicación. Actualmente, creo que contiene toda la información que necesita, pero tal vez no en el orden correcto.

Así es como lo rediseñaría. En la parte superior izquierda, donde actualmente hay un cuadro que contiene una descripción del sitio, ubicaría el nombre y el logotipo del sitio de forma agradable para que la gente sepa inmediatamente dónde están. Luego, movería la descripción al cuadro bajo la navegación.

Además, el? In fluenced? la linea no esta funcionando Está en un lugar extraño que está desechando el diseño del sitio y está redactado de tal manera que se siente apagado. Lo convertiría en una etiqueta secundaria para el logotipo del sitio y eliminaría los espacios. Red de influyentes: influenciado, informado, inspirado.

En cuanto a la navegación, esta es una de mis partes favoritas de la página, simplemente porque el negro aporta un contraste muy necesario a la página. Consideraría buscar otros lugares para repetir este tema.

Widgets

Flanqueando el contenido principal de cada lado hay barras laterales que contienen varios widgets y secciones de contenido como las siguientes:

En general, cada uno de estos podría usar un poco más de ajustes y delicadeza. Por ejemplo, el? ¿Qué la colina? La sección anterior podría usar un breve descriptor que explique lo que contiene la sección. El texto también se siente bastante aplastado aquí, un poco de altura de línea adicional puede recorrer un largo camino.

Además, cada uno de los widgets contiene las pequeñas flechas hacia arriba y hacia abajo en la parte superior, lo que le permite hacer clic para explorar el contenido. Esto podría parecer más mínimo, pero un simple desplazamiento funcionaría mucho mejor.

Otro widget que necesita mucho trabajo es la sección de fotos. Esto es solo un gran espacio vacío que no parece funcionar correctamente.

Columna EN 10

La última sección que podemos revisar es lo que consideraría el contenido principal de la página. Ya hemos mencionado el problema del tamaño de la foto y, aparte de eso, esta área parece bastante decente.

Una cosa que podrías considerar cambiar aquí es el efecto de desplazamiento. Actualmente cambia todo a la derecha unos pocos píxeles, pero el movimiento es tan leve que casi se siente como un error.Aumente la cantidad de desplazamiento del contenido o cambie a otra cosa, como un cambio de color.

Además, los botones de compartir parecen demasiado inconsistentes. Intenta hacer de cada uno el mismo tamaño y forma.

Conclusión

Creo que este sitio necesita mucho trabajo, pero también creo que es perfectamente factible. Mi recomendación es tomarlo en trozos. Concéntrese en el encabezado durante una semana y realmente pase un tiempo haciendo lo mejor posible. Luego pase a otra sección y pase otra semana refinando eso hasta que sea perfecto. En este momento, el principal problema del sitio es que se siente apresurado, como si no estuviera listo para iniciarse, pero se lanzó de todos modos.

Como objetivo a largo plazo, piense en cómo puede simplificar el contenido. Deja de agregar funciones y comienza a eliminar funciones. Resalte mejor el contenido primario y elimine todo menos el contenido secundario más esencial. ¡Cada vez que tenga dudas sobre cortar algo, mire Hacker News nuevamente y piense en lo sencillo que es!

¡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.