Nu och då stöter jag på en webbplats som har en eller två riktigt inspirerande bitar av design och användargränssnitt som är tillräckligt bra för att jag ska skriva om dem. På ännu sällsynta fall hittar jag en hel sida som bara överflödar med unika bra designidéer som jag måste dela med dig. Denna artikel handlar om en sådan webbplats.
Sevenly.org är en webbplats dedikerad till att hjälpa välgörenhetsorganisationer genom försäljning av specialutgåva anpassade t-shirts. Utöver det faktum att jag älskar organisationen och vad de står för, blåses jag bort med vad de har gjort med webbplatsen och tycker att det fungerar som ett lärande verktyg för webbdesigners. Låt oss ta en titt!
Möt sjukt
Sevenlys uppdrag är enkelt: • Att utnyttja kunskapens och samhällets kraft för att skapa hållbar medvetenhet och finansieringsrörelser som stöder välgörenhetsorganisationer i deras ansträngningar att förändra världen.
I praktiken, hur det här ser ut, säljer de superhäftiga produkter (t-shirts, tröjor, vattenflaskor etc.) och donerar $ 7 från varje köp till välgörenhet som de har valt att stödja den veckan. Hittills har de höjt nästan 600 000 dollar för olika välgörenhetsorganisationer.
Stor design
Återigen fick orsaken och strategin ett klick från mig på Twitter, men det är den design som reeled mig in och hållit mig intresserad. Som du kan se på skärmdumpen ovan är hemsidan ganska attraktiv.
Det visar på produkterna vackert med snygga, stora bilder av snygga, leende människor som har väldigt snyggt designade kläder. Masonry-layouten ger sidan en organisk känsla och det minsta design / färgschemat driver verkligen din uppmärksamhet mot de stora bilderna.
Webbplatsen ser bra ut på ett ögonkast, men när du börjar använda det finns det bara så många trevliga överraskningar och bra lilla knep som jag befann mig förlorade och spelade med varje sida i flera minuter. Låt oss ta en titt på några intressanta detaljer.
Hover Effects Galore
Jag är ett enormt fan av svävareffekter, jag vet att de inte alltid översätter till pekskärmar mycket bra, men du kan ta reda på det. På ett skrivbord är de ett av de främsta sätten att vi interagerar med användare på en grundläggande nivå.
Sevenly överflödas helt enkelt med svalt svävareffekter. Smarta lilla animationer väntar på dig vid varje tur. Det börjar med förhandsvisningarna på hemsidan kläder:
Produktnamnet och priset är som standard dolda, men så fort du svävar över en bild glider den ner för att avslöja denna information. Hoppa över till sidan av sidan, det finns tre knappar här, som alla expanderar till en lång, horisontell stapel på svävaren.
Efter samma tema för att ändra elementets storlek på svävar har de små delningsfälten också knappar som blir bredare när du svävar över dem och uppmuntrar till att allt viktigt klickar.
Ren Scrolling Voodoo
Min absoluta favorit sak om den här sidan är den rullande magiken som händer på hemsidan. Det är faktiskt en riktigt enkel effekt men det är så väl genomtänkt att jag inte kunde hjälpa men vara imponerad.
Som standard, när du laddar sidan är det här vad du ser:
Odds är, din första reaktion kommer att vara att rulla ner på sidan. När du gör det, blir det mörka avsnittet som beskriver webbplatsen kortare och kortare tills det bara är en liten navigationsfält som stannar med dig när du bläddrar.
Den stora delen är att den inte slutar där. Även om du kanske inte tror att du gör det, kan du faktiskt rulla upp förbi den ursprungliga startpositionen. Detta gör motsatsen till vad vi såg före och utökar den mörka delen för att ge dig mer information om webbplatsens nuvarande välgörenhet.
Det är ett elegant sätt att lagra massor av information i ett litet utrymme och så småningom avslöja det för användarna. Det är bara dolt nog att det inte överväldigar dig när du laddar sidan men bara uppenbart att du inte kan missa det när du bläddra tillbaka till toppen av sidan efter din första undersökning.
Nummer och delning
Med tanke på att denna webbplats är så inriktad på välgörenhet, finns det två mål som lagts fram för designen. Du kan berätta för att de kör hela layouten. Den första är en nivå av öppenhet och framsteg, kommuniceras via statistik. Här är hur mycket vi har höjt hittills, här är vad våra målbelopp är etc.
Det andra målet är att uppmuntra dela så mycket som mänskligt möjligt genom utnyttjande av sociala medier. Det finns en stor Facebook-kommentar sektion byggd direkt in i hemsidan och massor av andra sociala knappar och barer runt webbplatsen.
En personlig touch
Att gå vidare över hemsidan stoppar den fantastiska designen inte. Nästa upp är laget? sida där du kan träffa olika medlemmar som är involverade i projektet.
Som tidigare ser vi några roliga hover effekter som implementeras här. Varje lagmedlem visas i en cirkel med bara hans / hennes huvud som toppar sig. När du väl svävar över cirkeln ser de ut med ett dumt ansikte.
När jag tittade på den här sidan insåg jag att det höll en annan överraskning: bakgrunden är faktiskt en video! Det är väldigt subtilt och du kanske inte ens märker först, vilket varför det är så dangt trevligt. Videon är suddig ut och mörk så det är inte alltför distraherande.
Storygraphic
Det sista jag skulle vilja visa upp är den? Vår historia? sida, som berättar lite om varför Sevenly startades. Inte nöjd med att göra någonting på det sätt du kan förvänta dig, här beslutade Sevenly-laget att ge dig en fantastisk infografisk plats istället för en lång, tråkig historia.
Observera hur denna infografiska struktur är: problem vs lösning. Du ser detta format som används någon annanstans på hela webbplatsen för att förmedla historien bakom varje välgörenhet. Först anger de ett problem i mycket enkla termer och sedan förmedla hur de hjälper till att lösa det. Det är uppfriskande enkelt och enkelt.
Vad tror du?
Jag skulle vilja klargöra att jag aldrig har pratat med de sjude människorna, de kontaktade mig inte för att skriva den här artikeln eller nå ut till mig på något sätt. Jag uppskattar verkligen vad de gör, både som en människa och som en designer.
Var säker på att turnera Sevenly.org nästa gång du behöver lite solid inspiration. Titta inte bara, interagera med webbplatsen och få en känsla för alla de fina små designen som gör att den känns så raffinerad. Också, om du är på marknaden för några t-shirts som passar din designerstatus, kan du inte slå de fantastiska Sevenly-mönster.