Facebook rediseñó un análisis en profundidad de diseños independientes

Hay mucho que aprender estudiando el trabajo de otros diseñadores. Esto es cierto tanto para proyectos profesionales como para diseños de especificaciones para sitios web existentes. Los sitios grandes como Facebook ofrecen una experiencia de usuario muy particular con algunos elementos buenos y otros no tan buenos. En este post, me gustaría Examina diferentes rediseños de Facebook para analizar conceptos de interfaz. Eso podría mejorar la experiencia de usuario actual..

He extraído un puñado de rediseños FB personalizados de los usuarios de Dribbble, cada uno con mejoras específicas y elementos de interfaz de usuario actualizados. Tenga en cuenta estas ideas por su aspecto, cómo podrían funcionar y ¿Cómo podrían impactar la usabilidad? si implementado en vivo en Facebook.

Página de perfil simplificado

El rediseño de esta página de perfil proviene de Haris Jusovic, un diseñador de la región balcánica de Europa..

En este diseño, pone más énfasis en la simplicidad al resaltar al propietario de la página con un Foto de encabezado prominente y foto de perfil.

Las publicaciones de la línea de tiempo se pueden ordenar por “reciente” o “popular” basado en su preferencia. Esto es importante para la facilidad de uso, especialmente a raíz de la reacción violenta de Twitter contra el cambio de algoritmo recientemente establecido..

También muchos de los botones se muestran más grandes con Relleno extra y tipografía más grande.. Dado que Facebook está destinado a ser interactivo, solo tiene sentido aumentar la visibilidad de elementos como botones e hipervínculos.

En general, este concepto se siente Compacto y ligero en la hinchazón. Sería bueno ver que Facebook se enfoca más en elementos interactivos y quizás aumente el tamaño de sus fuentes también..

Línea de tiempo de varias columnas

El rediseño de Alejandro Osorio se dirige hacia un diseño verticalmente columnar. Este diseño representa la vista de la línea de tiempo del perfil que los usuarios de Facebook ven cuando visitan la página de perfil de un usuario.

El diseño es sorprendente pero puede ser desagradable para algunos usuarios. Se basa en columnas de varias páginas para organizar los enlaces del perfil del usuario, junto con una vista de la línea de tiempo de las publicaciones recientes. Todos los colores y elementos se mantienen fieles a los estilos de diseño de Facebook. Ciertamente se siente como una página de línea de tiempo de Facebook.

Pero algunos de los elementos de la barra lateral se muestran ligeramente confusos. Por ejemplo, un botón verde con un único signo más justo al lado de un “seguir” botón. Uno usa solo un símbolo, el otro solo texto. Esto se siente incongruente con el estilo de diseño y otra información de perfil.

Lo que más me gusta aquí es el clara estructura de datos en la línea de tiempo. Todo está organizado de forma clara e incluso hay enlaces de barra lateral para cambiar entre publicaciones recientes y publicaciones populares..

Rediseño de contenido denso

Los sitios web más grandes, como Facebook, manejan mucha más información y una base de usuarios que quiere acceder fácilmente a esa información. En el rediseño de la página de inicio de MagicVoltage encontrará una característica consistente: gran cantidad de contenido agrupado en un diseño de página.

La página de inicio de Facebook es la vista de línea de tiempo inicial que los usuarios ven cuando visitan el sitio por primera vez. Incluye publicaciones recientes de amigos, una lista de chat, juegos, anuncios y otra información relevante como los próximos cumpleaños..

El ajetreo de este diseño es lo que lo hace grande y potencialmente controvertido. Tener todo este contenido en una página lo hace super facil de navegar - Una vez que realmente aprendes donde se encuentra todo. Y los enlaces de los íconos de arriba a la izquierda son lo suficientemente vagos para disuadir a cualquiera de interactuar con ellos..

Pero en defensa de este diseño, maneja muy bien el contenido densamente empaquetado. Hay Un montón de espacios en blanco entre los elementos. y ejecuta un diseño de cuatro columnas de manera brillante.

Navegación voluminosa

Este llamado rediseño de Facebook 2.0 creado por Marcelo Silva es realmente un espectáculo para la vista. Su diseño de demostración muestra una página de inicio actualizada con una línea de tiempo y contactos de chat parcialmente ocultos.

Una gran pieza para este diseño es la sistema de navegación por niveles. Me gusta cómo hay una navegación principal con enlaces de iconos que muestran enlaces secundarios. En la captura de pantalla anterior, el usuario está seleccionando el ícono de perfil que tiene enlaces para Navegando por la historia reciente y editando el perfil..

A diferencia de las tradicionales fotos cuadradas de Facebook, el rediseño de Marcelo. opta por la foto circular. Este estilo es ubicuo tanto en la línea de tiempo como en la lista de chat.

Asistente M y lista de actividades recientes

Hay mucho que decir sobre el rediseño de FB de Steven McCabe. De hecho, muchas áreas, como los juegos y las actividades recientes, se han rediseñado por completo con una impresionante renovación..

El diseño de Steven es mucho más oscuro que el esquema de color actual de Facebook. Me gusta esto porque genera más contraste entre las barras laterales y el contenido de la página principal. La página de inicio actual de Facebook tiene la mayor parte de este contenido, pero con el tiempo se puede combinar con el fondo..

El encabezado todavía utiliza burbujas rojas para indicar las notificaciones. También hay publicaciones de tendencias y un suministro de noticias con la capacidad de clasificar la actividad reciente de amigos en la barra lateral derecha.

En la parte inferior notará una pequeña caja para la M de Facebook, la equivalente de Siri para los usuarios de Facebook.

Esta función no recibe mucha atención en los rediseños, pero Steven realmente hizo todo lo posible para que su concepto representara la tecnología moderna de Facebook..

Diseño de línea de tiempo de cuatro columnas

Aquí hay otro rediseño de la página de inicio de 4 cols hecho por el diseñador japonés Sho Kameya. Todas estas columnas abarcar la totalidad de la página, ancho y alto.

La barra lateral de la izquierda pone mucho énfasis en los enlaces tradicionales de Facebook para juegos, aplicaciones, páginas, recursos de desarrollo y otros elementos similares. La siguiente es la columna de contenido que es la más diversa entre todos los rediseños. Esto no mantiene los enlaces tradicionales para el estado de actualización / agregar foto, sino que utiliza un Enfoque minimalista con opciones ocultas..

Las dos barras laterales de la derecha incluyen todo lo demás con más fotos, como avatares de usuario e iconos de juegos. Este diseño aún mantiene todas las actualizaciones como cumpleaños, chats y recomendaciones de amigos.

Este diseño es muy diverso pero se mantiene fiel al núcleo de las funciones de Facebook. Puede que no sea el rediseño perfecto pero Muestra las posibilidades de un diseño de cuatro columnas..

Interfaz de usuario simplificada con la lista de chat oscuro

El objetivo del rediseño de Ben Hartley es la simplicidad y la sutileza. El diseño utiliza una combinación de conceptos de diseño plano con algunas sombras en elementos de página más grandes.

Muchos artículos de marca siguen siendo los mismos y se basa en el esquema de color azul / gris tradicional de Facebook. Pero notarás que algunos de los iconos han sido rediseñados. ya sea más pequeño o más simple (o ambos).

Este diseño también se basa en avatares circulares y Da mucho espacio para imágenes compartidas. con mensajes. Realmente disfruto de su lista de chat actualizada con el esquema de color más oscuro y los íconos de estado más pequeños.

Si bien el rediseño de Ben todavía se siente un poco desordenado, se siente mucho más simple. Este sería un diseño difícil de medir la experiencia del usuario sin estudios de UX en un navegador. Pero a simple vista parece más fácil de navegar y Da más espacio para consumir el contenido de la línea de tiempo..

Envolver

Aunque estos ejemplos se centran principalmente en Facebook, las lecciones aprendidas pueden aplicarse a cualquier sitio web. El excelente diseño de la experiencia del usuario trasciende todas las barreras del idioma y es una pieza vital del proceso creativo digital..

Siéntase libre de tomar prestadas ideas de este análisis e incluso implementar ideas similares en su propio trabajo de proyecto. Además, si encuentra algún nuevo diseño de Facebook relacionado, siéntase libre de compartir los comentarios con su propio análisis..