Awesome Design in the Wild: Sevenly.org

Nå og da kommer jeg over et nettsted som har en eller to virkelig inspirerende designbiter og brukergrensesnitt som er gode nok til at jeg kan skrive om dem. I enda sjeldnere tilfeller finner jeg et helt nettsted som er så overfylt av unike fantastiske designideer at jeg må dele det med deg. Denne artikkelen handler om et slikt nettsted.

Sevenly.org er et nettsted dedikert til å hjelpe veldedige organisasjoner gjennom salg av tilpassede t-skjorter med begrenset opplag. Utover det at jeg elsker organisasjonen og det de står for, blir jeg blåst bort av det de har gjort med nettstedet, og tror det fungerer som et læringsverktøy for nettdesignere. La oss ta en titt!

Utforsk designressurser

Møt Sevenly

Sevenlys oppdrag er enkelt: "Å utnytte kraften til kunst og samfunn for å bygge bærekraftig bevissthet og finansiere bevegelser som støtter veldedighetsorganisasjoner i deres forsøk på å forandre verden."

I praksis, hvordan dette ser ut, er at de selger super fantastiske produkter (t-skjorter, sweatshirts, vannflasker, etc.) og donerer $ 7 fra hvert kjøp til veldedighetsorganisasjonen de har valgt å støtte den uken. Til dags dato har de samlet inn nesten $ 600 000 for forskjellige veldedighetsorganisasjoner.

Flott design

Nok en gang tjente årsaken og strategien et klikk fra meg på Twitter, men det er designet som rullet meg inn og holdt meg interessert. Som du kan se på skjermdumpen over, er hjemmesiden ganske attraktiv.

Det viser frem produktene nydelig med fine, store bilder av flinke, smilende mennesker i veldig attraktivt designet klær. Muroppsettet gir siden et organisk preg, og det minimale design / fargevalg skyver virkelig oppmerksomheten mot de store bildene.

Området ser flott ut på et øyeblikk, men når du begynner å bruke det, er det bare så mange hyggelige overraskelser og flotte små triks som jeg fant meg tapt, og spilte med hver side i flere minutter. La oss se på noen av de interessante detaljene.

Hover Effects Galore

Jeg er en stor fan av sveveeffekter, jeg vet at de ikke alltid oversetter til berøringsskjermer veldig bra, men du kan gjøre rede for det. På et skrivebord er de en av de viktigste måtene vi samhandler med brukere på et grunnleggende nivå.

Sevenly er ganske enkelt overfylt med kule sveveeffekter. Små små animasjoner venter deg på hver tur. Det starter med forhåndsvisning av startsiden til klær:

Som standard er produktnavnet og prisen skjult, men så snart du svever over et bilde, glir det ned for å avsløre denne informasjonen. Når du hopper over til siden av siden, er det tre knapper her, som hver utvides til en lang horisontal stolpe på svevet.

Etter det samme temaet med å endre elementets størrelse på svevet, har de små delingslinjene også knapper som blir bredere når du svever over dem, og oppmuntrer til at alle viktige klikk.

Ren rullende Voodoo

Min absolutte favoritt ting med denne siden er rullemagien som skjer på hjemmesiden. Det er faktisk en veldig enkel effekt, men den er så gjennomtenkt at jeg ikke kunne la være å bli imponert.

Som standard, når du laster inn siden, er det dette du ser:

Oddsen er at din første reaksjon vil være å bla nedover på siden. Når du gjør dette, blir den mørke delen som beskriver nettstedet kortere og kortere til den bare er en liten navigasjonslinje som blir med deg når du blar.

Den store delen er at den ikke stopper der. Selv om du kanskje ikke tenker å gjøre det, kan du faktisk bla opp forbi den opprinnelige startposisjonen. Dette gjør det motsatte av det vi så før, og utvider den mørklagte delen for å gi deg mer informasjon om nettstedets nåværende veldedighet.

Det er en så elegant måte å lagre massevis av informasjon på et lite sted og gradvis avsløre den for brukerne. Den er bare skjult nok til at den ikke overvelde deg når du laster inn siden, men bare åpenbar nok til at du ikke kan gå glipp av den når du blar tilbake til toppen av siden etter den første undersøkelsen.

Tall og deling

Gitt at dette nettstedet er så fokusert på veldedighet, er det to mål som ble lagt opp for designet. Du kan si det fordi de driver hele oppsettet. Den første er et nivå av åpenhet og fremdrift, kommunisert via statistikk. Her er hvor mye vi har skaffet oss så langt, her er hva målbeløpene er osv.

Det andre målet er å oppmuntre til deling så mye som menneskelig mulig gjennom utnyttelse av sosiale medier. Det er en stor Facebook-kommentarseksjon innebygd rett på hjemmesiden og mange andre sosiale knapper og barer rundt på nettstedet.

Et personlig preg

Når du går forbi hjemmesiden, stopper ikke den fantastiske designen. Neste opp er "Team" -siden, hvor du kan møte forskjellige medlemmer involvert i prosjektet.

Som før ser vi noen morsomme sveveeffekter implementeres her. Hvert teammedlem vises i en sirkel med bare hodet på toppen. Når du bare hover over sirkelen, spretter de ut til synet med et tullete ansikt.

Da jeg så på denne siden innså jeg at det var en annen overraskelse: bakgrunnen er faktisk en video! Det er veldig subtilt, og du vil kanskje ikke en gang legge merke til det med det første, og det er derfor det er så fint. Videoen er uskarp og mørk, så den er ikke for distraherende.

Storygraphic

Det siste jeg ønsker å vise frem er siden "Vår historie", som forteller deg litt om hvorfor Sevenly ble startet. Ikke fornøyd med å gjøre noe på den måten du kunne forvente, her bestemte Sevenly-teamet å gi deg en fantastisk infografisk i stedet for en lang, kjedelig historie.

Legg merke til måten denne infografien er strukturert på: problem kontra løsning. Du ser dette formatet som brukes andre steder på nettstedet for å formidle historien bak hver veldedighet. Først oppgir de et problem i veldig enkle ord, for så å formidle hvordan de hjelper til med å løse det. Det er forfriskende enkelt og greit.

Hva tror du?

Jeg vil gjøre det klart at jeg aldri har snakket med de syvende menneskene, de henvendte meg ikke til å skrive denne artikkelen eller nå ut til meg på noen måte. Jeg setter ganske enkelt veldig pris på hva de gjør, både som menneske og som designer.

Husk å turnere Sevenly.org neste gang du trenger litt solid inspirasjon. Ikke bare se, samhandle med nettstedet og få en følelse av alle de fine, små designene som gjør at det føles så raffinert. Hvis du er i markedet for noen t-skjorter som passer til designerstatusen din, kan du ikke slå de fantastiske Sevenly-designene.

© Copyright 2024 | computer06.com