Hjemmeside » UI / UX » Facebook Redesigned An In-Depth Analyse Of Independent Designs

    Facebook Redesigned An In-Depth Analyse Of Independent Designs

    Der er meget at lære ved at studere andre designers arbejde. Dette gælder både professionelle projekter og spec designs for eksisterende hjemmesider. Store steder som Facebook giver en meget særlig brugeroplevelse med nogle gode elementer og andre ikke så gode elementer. I dette indlæg vil jeg gerne undersøge forskellige Facebook redesigns at analysere grænseflade koncepter der kunne forbedre den nuværende brugeroplevelse.

    Jeg har trukket en håndfuld custom FB redesigns fra Dribbble brugere, hver med specifikke forbedringer og opdaterede brugergrænseelementer. Tage disse ideer i betragtning for hvordan de ser ud, hvordan de kan fungere, og hvordan de kunne påvirke anvendelighed hvis implementeret bor på Facebook.

    Strømlinet profilside

    Denne profilside redesign kommer fra Haris Jusovic, en designer fra Balkanregionen i Europa.

    I dette design placerer han mere fokus på enkelhed ved at fremhæve sidens ejer med en mere fremtrædende header foto og profil billede.

    Tidslinjeposter kan sorteres efter “nylig” eller “populær” baseret på din præference. Dette er stort for brugervenlighed, især i kølvandet på kvidreens tilbageslag mod den nyligt mandatiserede algoritmeændring.

    Også mange af knapperne vises større med ekstra polstring og større typografi. Da Facebook er meningen at være interaktiv, giver det kun mening at øge synligheden af ​​varer som knapper og hyperlinks.

    Alt i alt føles dette koncept kompakt og lettere i bloat. Det ville være rart at se Facebook placere mere fokus på interaktive elementer og måske også øge deres skriftstørrelser.

    Multi-kolonne tidslinje

    At vende mod et vertikalt columnal layout er Alejandro Osorios redesign. Dette layout repræsenterer profilens tidslinjevisning, som Facebook-brugere ser, når de besøger en brugers profilside.

    Designet er slående, men kan være off-putting til nogle brugere. Det er afhængig af flere sidekolonner at organisere brugerens profil links sammen med en tidslinje visning af de seneste indlæg. Alle farver og elementer forbliver tro mod Facebooks design stilarter. Det føles sikkert som en Facebook-tidslinjeside.

    Men nogle af sidebjælkeelementerne kommer ud som lidt forvirrende. For eksempel, en grøn knap med et enkelt plus tegn lige ved siden af ​​a “følge efter” knap. Man bruger kun et symbol, den anden lige tekst. Dette føles uoverensstemmende med design stil og anden profil info.

    Det jeg kan lide mest her er klar struktur af data i tidslinjen. Alt er organiseret tydeligt, og der er endda sidebar links til at skifte mellem de seneste indlæg og populære indlæg.

    Indhold-Tæt Redesign

    Større websites som Facebook beskæftiger sig med meget flere data og en brugerbase, der ønsker nem adgang til disse data. På hjemmesiden redesignet af MagicVoltage finder du en sammenhængende funktion: masser af indhold i et side layout.

    Facebooks hjemmeside er den oprindelige tidslinjevisning, som brugerne ser, når de først besøger hjemmesiden. Den omfatter nylige indlæg fra venner, en chatliste, spil, annoncer og andre relevante oplysninger som kommende fødselsdage.

    Det travle indhold af dette layout er, hvad der gør det både stort og potentielt kontroversielt. At have alt dette indhold på en side gør det super let at navigere - når du faktisk lærer, hvor alt er placeret. Og links til venstre ikon er bare vage nok til at afholde nogen fra at interagere med dem.

    Men til forsvar for dette design håndterer det tæt pakket indhold meget godt. Der er masser af mellemrum mellem elementer og det løber en fire-kolonne design glimrende.

    Voluminous Navigation

    Dette såkaldte Facebook 2.0 redesign skabt af Marcelo Silva er virkelig et syn at se. Hans demo layout viser en opdateret hjemmeside med en tidslinje og delvist skjulte chat kontakter.

    Et stort stykke til dette design er tiered navigationssystem. Jeg kan godt lide, hvordan der er en primær nav med ikonforbindelser, der viser sekundære links. I ovenstående skærmbillede vælger brugeren profilikonet, som har links til browsing nyere historie og redigering af profilen.

    I modsætning til Facebook's traditionelle firkantede fotos, Marcelos redesign vælter mod det cirkulære billede. Denne stil er allestedsnærværende i både tidslinjen og chatlisten.

    M Assistant & Seneste Aktivitetsliste

    Der er meget at sige om Steven McCabe's FB-redesign. Faktisk er mange områder som spil og nylige aktiviteter blevet fuldstændig omdesignet med en imponerende ansigtsløftning.

    Stevens design er meget mørkere end Facebooks nuværende farveskema. Jeg kan godt lide dette, fordi det skaber mere kontrast mellem sidebjælker og primært sideindhold. Facebooks nuværende hjemmeside har det meste af dette indhold, men med tiden kan det blandes i baggrunden.

    Overskriften bruger stadig røde bobler til at betegne underretninger. Der er også trending indlæg og en newsfeed med evnen til at sortere gennem ny aktivitet fra venner i højre sidepanel.

    I bunden ses der en lille boks til Facebook's M, the svarende til Siri til Facebook brugere.

    Denne funktion får ikke meget opmærksomhed i redesign, men Steven gik virkelig all-out for at få sit koncept til at repræsentere moderne Facebook-teknologi.

    Four-Column Timeline Layout

    Her er en anden 4-col hjemmeside redesign lavet af japansk designer Sho Kameya. Alle disse kolonner spænd hele siden, både bredde og højde.

    Sidste venstre sidebjælke lægger stor vægt på traditionelle Facebook-links til spil, apps, sider, dev-ressourcer og andre lignende genstande. Næste er indholdskolonnen, som er den mest forskelligartede blandt alle redesigns. Dette beholder ikke de traditionelle links for opdateringsstatus / tilføj billede, men bruger i stedet a minimalistisk tilgang med skjulte muligheder.

    De to højre sidebjælker indeholder alt andet med flere billeder som bruger avatarer og spil ikoner. Dette design holder stadig alle opdateringer som fødselsdage, chat og venlige anbefalinger.

    Dette design er meget forskelligartet, men forbliver tro mod kernen i Facebooks funktioner. Det kan ikke være det perfekte redesign, men det viser mulighederne for en fire-kolonne layout.

    Forenklet brugergrænseflade med Dark Chat List

    Målet med Ben Hartleys redesign er enkelhed og subtilitet. Layoutet bruger en kombination af flade designkoncepter med et par dropskygger på større sideelementer.

    Mange mærkevarer forbliver de samme, og han stoler på Facebooks traditionelle blå / grå farveskema. Men du vil bemærke, at nogle af ikonerne er blevet omdesignet enten mindre eller enklere (eller begge).

    Dette layout er også afhængigt af cirkulære avatarer og giver rigeligt plads til delte billeder med indlæg. Jeg nyder virkelig hans opdateret chat liste med det mørkere farveskema og mindre statusikoner.

    Mens Ben's redesign stadig føles lidt ringet, føles det meget enklere. Dette ville være et hårdt design til at måle brugeroplevelse uden UX-undersøgelser i en browser. Men på et øjeblik synes det nemmere at gennemse og giver mere plads til at forbruge tidslinjens indhold.

    Wrap-Up

    Selv om disse eksempler primært fokuserer på Facebook, kan de lærte erfaringer anvendes på ethvert websted. Et stort brugeroplevelsesdesign overskrider alle sprogbarrierer, og det er et vigtigt stykke af den digitale kreative proces.

    Du er velkommen til at låne ideer fra denne analyse og endda implementere lignende ideer i dit eget projektarbejde. Også hvis du finder nogen relatable Facebook redesigns, er du velkommen til at dele i kommentarerne med din egen analyse.