7 unikke designafgørelser
Jeg er altid på udkig efter inspiration til godt design, der udfordrer konventionen. Dette indlæg handler om unikke layoutløsninger; det betyder, at jeg vil tale om otte forskellige hjemmesider, der præsenterer noget typisk, på en unik måde. Vi overgår unikke layoutløsninger fra at vise produkter, til at inkorporere personlige og menneskelige elementer på en hjemmeside.
1. Harvard genvinder den berygtede karrusel
Harvards Designskole Webstedet har en unik måde at nærme sig til navigation. Når du først lander på hjemmesiden, er der en visuel visning af navigationen. Selvfølgelig er hvert enkelt link ikke repræsenteret her, blot et par vigtige. Mange hjemmesider har omfavnet link til de mere vigtige sider i overskriften på hjemmesiden; det er det, der fx gav os karruseller. Men jeg har endnu ikke set en anden hjemmeside præsentere den på denne måde. Navigationen kan være lille, men den er foran og midt. Endnu vigtigere, det ser ud som om det hører til der. Det udføres undtagelsesvis.
Billederne til venstre overlapper hinanden, men du kan stadig se, hvor mange der er. Der er et klart forhold mellem billedet og titlerne på venstre side. Billederne roterer i forhold til emnerne til venstre. Men på et hvilket som helst tidspunkt ved du, hvilke oplysninger der er tilgængelige for dig. Det er ligesom Harvards Designskole skabt en forbedret version af, hvad karrusellen burde have været i første omgang. Ikke kun er brugervenlighed taget alvorligt i denne designløsning, layoutet er også unikt. Begge disse faktorer kombineret giver et fantastisk visuelt design.
2. Tra går ud af gitteret
Det er helt klart, at Tra S hjemmeside bruger et ikke-traditionelt layout. Webstedet er generelt minimal. De bruger også et omvendt farveskema, hvor baggrunden er sort og tekst er hvid. Farveskemaet giver det helt sikkert en wow-faktor. Men det drejer sig om layoutet af Tra's hjemmeside. Lad os starte med hjemmesiden: Der er et par stykker tekst på hjemmesiden, hvor det meste overlapper baggrundsbilledet i det mindste lidt, med undtagelse af stykkeeksemplaret under afsnittet "Vi kender folk". Kopien er justeret specifikt for at være uden for billedet. Det er anderledes, det er unikt, det er mærkbart.
På den omkringliggende side er der lidt mere ordre og brug af et gitter. Men nettet er stadig uregelmæssigt. Det ser ud som om hver sektion på den omkringliggende side har sit eget net. Det, der fascinerede mig mest om denne side, er det afskårne billede fra øverste venstre side af websiden. Det passer bare ikke ind i noget. Det gør mig naturligvis nysgerrig. Det viser sig, at billedet er et galleri - du skal klikke på det for at gøre billederne åbne. Det er en smuk smart måde at udnytte et layout på; Folk, der plejer at undersøge, belønnes med en flok billeder. De mennesker, der ikke bryr sig om, må ikke tabe så meget. Det er en sjov påskeæg.
3. Scrollable sko billeder på en fast side
Dette eksempel på en unik layoutløsning drejer sig om en online skoforhandler. Feit S produktside er bare strålende. Først og fremmest udnytter designet hele skærmens fulde bredde og højde. Det betyder, at hvert område af skærmen er blevet udpeget med et bestemt formål. For det andet er hjemmesiden enkel, minimal og ren. Det betyder, at selvom designet bruger fuldskærmen, er det ikke rodet. Det er en meget god ting, da masser af design er afhængige af whitespace for at skabe et rent og let udseende websted.
Det, der imponerede mig mest om denne specifikke produktside, er, hvordan layoutet er opdelt. Siden er specielt opdelt i tre forskellige sektioner. Først er der navigationen på venstre side. Det er ret standard og intet for specielt. Så er der højre side med produktdetaljerne. Både den venstre side navigation og detaljer sektionen er fastgjort til skærmen. Men den sidste sektion, den midterste fotosektion, er fyldt med rullerbare fotos. Jeg synes, det er en glimrende løsning, fordi det ikke er den mest almindelige løsning.
Ofte, hvis der er en stor liste over produktfotografier, forbliver oplysningerne om det bagved. Her, når jeg ruller ned, ser jeg stadig produktets beskrivelse og navn, jeg ser stadig de forskellige farver, den kommer ind i, og kan få adgang til flere oplysninger, såsom detaljer om materialet, som jeg behøver uden at skulle rulle op og ned. Samlet set er dette en problemfri oplevelse for en potentiel kunde.
4. Viser ud af flere sider af et produkt ved et enkelt blik
Her har vi en anden produktside og en anden måde at vise et produkt på. Okay, vi har også et andet skoeksempel også! Afura S hjemmeside har også en unik visningsmetode. Denne gang vises skoene i flere forskellige skud på toppen af siden. Det er faktisk en del af et karrusel UI-element. Men anvendeligheden her er ikke et stort problem. Til at begynde med vises der tre billeder som standard på en stationær eller bærbar skærmstørrelse. Standardbillederne har alle samme baggrund, hvilket gør et flot og problemfrit display. Hvis en bruger ikke er klar over, at billederne er en del af en karrusel, vil de i det mindste se tre forskellige billeder af produktet på deres computere. For mindre skærmstørrelser som tabletter er standarden at vise to billeder ad gangen; det er stadig ret godt. Alt i alt er displayet af skoprodukterne her en unik designløsning.
5. Opendoor viser deres mennesker
Jeg tror for det første, at internettet er et upersonligt sted, hvor vi normalt ikke ser mennesket; de rigtige mennesker bag apps, produkter, virksomheder og så videre. Jeg har altid bestræbt mig på at inkludere et menneskeligt element inden for mine designs. Jeg kan se, at Åben dør ønsker at gøre nøjagtig samme ting. På deres hjemmeside omkring halvvejs ned er en sektion kaldet "Vi har din ryg." Det skal forklare, at der er ægte mennesker bag Opendoor-firmaet, der er der for at hjælpe deres kunder med hvert eneste skridt. Nu kunne Opendoor lige have forladt det der, men i stedet lagde de et stort billede af en af deres medarbejdere.
Dette afsnit har meget lille tekst. I stedet er billedet og ansigtet størstedelen af sektionen. Jeg vil endda sige, at billedet overstyrer sektionen på 100% positiv måde. Hvis billedet havde været en miniature eller en avatar, ville effekten ikke engang eksistere. Hvis billedet havde været en mellemstor firkant (sige mindst 300px ved 300px) lige ved siden af kopien, ville effekten ikke være den samme. Valget til at bruge et så stort billede af Marks venlige ansigt var et godt kald; Dette designbeslutning giver ikke kun et menneskeligt og personlig designelement, det er også en kreativ idé. Uden dette billede ville der ikke være nogen personlig indflydelse på brugeren. Uden dette specifikke layout ville dette afsnit have en helt anden følelsesmæssig effekt.
6. UX Flow viser en lille animation kan gå langt
Dette næste eksempel på en unik layoutløsning har at gøre med animation. Hvis du kigger på hjemmesiden til UX Flow og rul ned lidt, kan du bemærke, at en af sektionens baggrunde animerer ind. Det er ærligt intet lyst, men det er unikt. Baggrunde lader ikke ind, mens du rulle på en webside. Hvis der er noget, har vi i løbet af de sidste par år set forskellige elementer fra en sektion flyve ind eller ud, mens du ruller. Men jeg har ikke syntes at mange baggrunds animationer udover parallax. Årsagen til dette er vigtigt, at en baggrund definerer et afsnit. Og selvom dette ikke er noget skøre animation, er det stadig imponerende.
Ikke alt skal være dristigt, højt og ubehageligt at være imponerende. Nogle gange er de subtile ting som en lille og hurtig lethed animation lige nok til at producere en unik oplevelse for en bruger. Dette er absolut en af disse tider. En anden ting, der er vigtigt at bemærke, er, at de sektioner mellem hvilke animationen sker, har ikke selv enestående layout. Det er okay; Overgangen er mærkbar, mens du går fra et afsnit til det næste, det er stadig en del af layoutet, selvom det ikke er slutplaceringen lavet af animationen.
7. Ted Todd integreret kort
Det visuelle design og den samlede brugeroplevelse af Ted Todd S hjemmeside er godt designet. Af hensyn til denne artikel vil jeg gerne snakke om, hvordan Ted Todd bruger placerings- og kortafsnittet på deres hjemmeside. Mod bunden af deres hjemmeside er der et afsnit udpeget til de forskellige kontorlokaler, som virksomheden har i hele Florida. Der er flere grunde til, at dette afsnit er fantastisk. For det første bruger afsnittet layoutet på en unik måde for at give en stjerneløs designløsning. Den mest mærkbare ting om dette afsnit er den lette form for Florida til højre. Den visuelle af Florida med sine mange prikker er en fantastisk måde at vise virksomhedens rækkevidde. De siger ikke bare, at de er i Florida, designet viser dig præcis, hvor. Det er et let visuelt at fordøje og det udføres også på en fantastisk måde.
Den næste vigtige ting ved dette afsnit er prikkerne. De er faktisk interaktive. Når du svæver over dem, får du navnet på den by eller by, Ted Todd Insurance Office ligger i. Men hvis du klikker på det, skifter hele sektionen til venstre for at give plads til detaljer om det specifikke kontor. Du får kontorets telefonnummer, adresse, åbningstider og en liste over medarbejdere. Jeg kan godt lide denne designløsning, fordi den giver en bruger mulighed for hurtigt at navigere til et sted tæt på dem. Det er visuelt meget mere interessant og enestående repræsentation end hvis oplysningerne blev stablet oven på hinanden på en sidetitel "Our Florida Offices", tror du ikke?
