7 unike designbeslutninger
Jeg er alltid på jakt etter inspirasjon, for god design som utfordrer konvensjonen. Dette innlegget handler om unike layoutløsninger; Det betyr at jeg skal snakke om åtte forskjellige nettsteder som presenterer noe typisk, på en unik måte. Vi vil gå over unike layoutløsninger fra å vise produkter, til å inkorporere personlige og menneskelige elementer på et nettsted.
1. Harvard gjenoppliver den beryktede karusellen
Harvard School of Design Nettstedet har en unik måte å nærme seg navigering på. Når du først lander på hjemmesiden, er det en visuell visning av navigasjonen. Selvfølgelig er hver eneste kobling ikke representert her, bare noen få nøkkelord. Mange nettsteder har omfavnet å knytte til de viktigste sidene i overskriften til hjemmesiden; det er det som førte oss til karuseller for eksempel. Men jeg har ennå ikke sett en annen nettside presentere den på denne måten. Navigasjonen kan være liten, men den er foran og midt. Enda viktigere, det ser ut som det tilhører det. Den utføres eksepsjonelt.
Bildene til venstre overlapper hverandre, men du kan fortsatt se hvor mange er der. Det er et klart forhold mellom bildet og titlene på venstre side. Bildene roterer i forhold til elementene til venstre. Men når som helst, vet du hvilken informasjon som er tilgjengelig for deg. Det er som Harvards School of Design skapt en forbedret versjon av hva karusellen burde ha vært i utgangspunktet. Ikke bare er brukervennlighet tatt alvorlig i denne designløsningen, men også utformingen er unik. Begge disse faktorene kombinerer gir en fantastisk visuell design.
2. Tra går av rutenettet
Det er ganske åpenbart at Tra S nettsted bruker et ikke-tradisjonelt layout. Nettstedet er generelt minimal. De bruker også et omvendt fargeskema der bakgrunnen er svart og tekst er hvit. Fargevalget gir det absolutt en wow-faktor. Dette handler imidlertid om utformingen av Tras nettsted. La oss starte med hjemmesiden: det er noen stykker tekst på hjemmesiden, det meste overlapper bakgrunnsbildet minst, bortsett fra avsnittet kopi fra under "Vi kjenner folk" -delen. Kopien er justert spesielt for å være utenfor bildet. Det er annerledes, det er unikt, det er merkbart.
På siden er det litt mer ordre og bruk av et rutenett. Men rutenettet er fortsatt uregelmessig. Det virker som om hver del av siden har sitt eget rutenett. Det som fascinerte meg mest om denne siden, er kuttet av bildet øverst til venstre på nettsiden. Det passer bare ikke inn i noe. Naturligvis gjør det meg nysgjerrig. Det viser seg at bildet er et galleri - du må klikke på det for å gjøre bildene åpne. Det er en ganske smart måte å utnytte et layout på; folk som bryr seg å undersøke, belønnes med en haug med bilder. Folk som ikke bryr seg om, ikke miste så mye. Det er et morsomt påskeegg.
3. Rulleskofotografier på en fast side
Dette eksemplet på en unik layoutløsning dreier seg om en online skoforhandler. Feit Produktsiden er bare strålende. Først av alt bruker designet full bredde og høyde på skjermen. Det betyr at hvert område på skjermen er utpekt med et bestemt formål. For det andre er nettsiden enkel, minimal og ren. Det betyr at selv om designen bruker full skjerm, er det ikke rotete. Det er veldig bra, så mye design er avhengig av hvitt plass for å skape et rent og lett utseende nettsted.
Ting som imponerte meg mest om denne spesifikke produktsiden er måten layoutet er delt på. Siden er spesifikt delt inn i tre forskjellige seksjoner. Først er det navigasjonen på venstre side. Det er ganske standard og ikke så spesielt. Deretter er det høyre side med produktdetaljer. Både, venstre side navigasjon og detaljer delen er festet til skjermen. Men den siste delen, den midterste bildeseksjonen, er fylt med rullerbare bilder. Jeg synes det er en glimrende løsning fordi det ikke er den vanligste løsningen.
Ofte, hvis det er en stor liste over produktfotografier, forblir informasjonen om det igjen. Her, mens jeg ruller ned, ser jeg fremdeles beskrivelsen og navnet på produktet, jeg ser fortsatt de forskjellige farger det kommer inn i og kan få tilgang til mer informasjon, for eksempel detaljer om materialet som jeg ønsker uten å måtte bla opp og ned. Samlet sett er dette en sømløs opplevelse for en potensiell kunde.
4. Viser ut flere sider av et produkt med et enkelt blikk
Her har vi en annen produktside og en annen måte å vise et produkt på. OK, vi har også et annet skoeksempel også! Afura Nettsiden har også en unik visningsmetode. Denne gangen vises skoene i flere forskjellige skudd på toppen av siden. Det er faktisk en del av et karusellgrensesnitt. Men brukervennligheten her er ikke et stort problem. For det første er det tre bilder som vises som standard på stasjonære eller bærbare skjermstørrelser. Standardbildene har alle samme bakgrunn som gjør en fin og sømløs skjerm. Hvis en bruker ikke skjønner at bildene er en del av en karusell, vil de minst se tre forskjellige bilder av produktet på sine datamaskiner. For mindre skjermstørrelser som tabletter, er standarden å vise to bilder av gangen; det er fortsatt ganske bra. Alt i alt er skjermen av skoproduktene her en unik designløsning.
5. Opendoor viser sine mennesker
Jeg tror at nettet er et upersonlig sted hvor vi vanligvis ikke ser mennesket; det virkelige folk bak apps, produkter, selskaper og så videre. Jeg har alltid forsøkt å inkludere et menneskelig element i designene mine. jeg kan se det Åpen dør ønsker å gjøre nøyaktig samme ting. På deres hjemmeside, omtrent halvveis ned, er en seksjon som heter "Vi har ryggen din." Det skal forklare at det er ekte mennesker bak Opendoor-selskapet som er der for å hjelpe kundene deres hvert skritt. Nå kunne Opendoor nettopp ha forlatt det der, men i stedet la de et stort bilde av en av sine ansatte.
Denne delen har svært liten tekst. I stedet er bildet og ansiktet den største delen av seksjonen. Jeg vil til og med si at bildet overstyrer delen på 100% positiv måte. Hvis bildet hadde vært et miniatyrbilde eller en avatar, ville effekten ikke engang eksistere. Hvis bildet hadde vært et mellomstort firkant (si minst 300px ved 300px) rett ved siden av kopien, ville effekten ikke være den samme. Valget å bruke et så stort bilde av Marks vennlige ansikt var et godt kall; Ikke bare gir denne designavgjørelsen et menneskelig og personlig designelement, det er også en kreativ. Uten dette bildet ville det ikke være noen personlig innvirkning på brukeren. Uten denne spesifikke utformingen vil denne delen ha en helt annen følelsesmessig effekt.
6. UX Flow viser en liten animasjon kan gå langt
Dette neste eksempelet på en unik layoutløsning har å gjøre med animasjon. Hvis du ser på hjemmesiden til UX Flow og rull ned litt kan du legge merke til at en av seksjonens bakgrunner animerer inn. Det er ærlig ingenting fancy, men det er unikt. Bakgrunnene gjør det ikke lett når du ruller på en nettside. Om noe, har vi i de siste årene sett forskjellige elementer fra en seksjon fly inn eller ut mens du ruller. Men jeg har ikke så mange bakgrunns animasjoner i tillegg til parallax. Årsaken til at dette er viktig er at en bakgrunn definerer en seksjon. Og selv om dette ikke er noe gal animasjon, er det fortsatt imponerende.
Ikke alt må være dristig, høyt og ubehagelig for å være imponerende. Noen ganger er de subtile tingene som en liten og rask, enkel animasjon bare nok til å produsere en unik opplevelse for en bruker. Dette er absolutt en av disse tider. En annen ting som er viktig å legge merke til er at de seksjonene som animasjonen skjer med, ikke har unike oppsett selv. Det er ok; Overgangen er merkbar når du går fra en seksjon til den neste, det er fortsatt en del av oppsettet selv om det ikke er sluttoppsettet laget av animasjonen.
7. Ted Todd integrert kart
Den visuelle utformingen og den generelle brukeropplevelsen av Ted Todd Nettside er godt utformet. For denne artikkelen skyldes jeg å snakke om hvordan Ted Todd bruker posisjonen og kartdelen på deres nettside. Mot bunnen av deres hjemmeside er det en seksjon som er utpekt for de forskjellige kontorstedene selskapet har over hele Florida. Det er flere grunner til at denne delen er fantastisk. For det første bruker delen oppsettet på en unik måte for å gi en fantastisk designløsning. Den mest merkbare tingen om denne delen er den lette form av Florida til høyre. Den visuelle av Florida med sine mange prikker er en fantastisk måte å vise frem til selskapets rekkevidde. De sier ikke bare at de er i Florida, designet viser deg nøyaktig hvor. Det er et lett visuelt å fordøye og det utføres også på en fantastisk måte.
Det neste viktige ved denne delen er prikkene. De er faktisk interaktive. Når du svinger over dem, får du navnet på byen eller byen som Ted Todd Insurance-kontoret ligger i. Men hvis du klikker på det, går hele delen til venstre for å få plass til detaljer om det bestemte kontoret. Du får kontorets telefonnummer, adresse, åpningstider i tillegg til en liste over ansatte. Jeg liker denne designløsningen fordi den lar en bruker raskt navigere til et sted nær dem. Det er visuelt mye mer interessant og unik representasjon enn hvis informasjonen ble stablet på toppen av hverandre på en side tittel "Our Florida Offices," tror du ikke?
