Hin und wieder stoße ich auf eine Site, die ein oder zwei wirklich inspirierende Teile des Designs und der Benutzeroberfläche hat, die gut genug sind, um darüber zu schreiben. In noch selteneren Fällen finde ich eine ganze Website, die so unglaublich beeindruckende Designideen enthält, dass ich sie mit Ihnen teilen muss. Dieser Artikel handelt von einer solchen Site.
Sevenly.org ist eine Website, die Wohltätigkeitsorganisationen durch den Verkauf von T-Shirts in limitierter Auflage unterstützt. Abgesehen von der Tatsache, dass ich die Organisation liebe und wofür sie stehen, bin ich begeistert von dem, was sie mit der Website gemacht haben, und denke, dass sie als Lernwerkzeug für Webdesigner dient. Lass uns einen Blick darauf werfen!
Meet Sevenly
Sevenlys Mission ist einfach: „Die Kraft von Kunst und Gemeinschaft nutzen, um nachhaltige Bewusstseins- und Finanzierungsbewegungen aufzubauen, die Wohltätigkeitsorganisationen bei ihren Bemühungen unterstützen, die Welt zu verändern.“
Wie das aussieht, verkaufen sie in der Praxis super tolle Produkte (T-Shirts, Sweatshirts, Wasserflaschen usw.) und spenden $ 7 für jeden Einkauf an die Wohltätigkeitsorganisation, die sie diese Woche unterstützt haben. Bis heute haben sie fast 600.000 USD für verschiedene Wohltätigkeitsorganisationen gesammelt.
Großartiges Design
Die Sache und die Strategie haben mir erneut einen Klick auf Twitter gebracht, aber das Design hat mich reingelegt und das Interesse geweckt. Wie Sie in der Abbildung oben sehen können, ist die Homepage recht attraktiv.
Es zeigt die Produkte wunderschön mit schönen, großen Fotos von gut aussehenden, lächelnden Menschen, die sehr attraktiv gestaltete Kleidung tragen. Das Mauerwerk-Layout verleiht der Seite ein organisches Gefühl und das minimale Design / Farbschema lenkt Ihre Aufmerksamkeit wirklich auf die großen Fotos.
Die Seite sieht auf einen Blick großartig aus, aber wenn Sie anfangen, sie zu benutzen, gibt es so viele angenehme Überraschungen und großartige kleine Tricks, dass ich mich verirrt habe und mit jeder Seite für einige Minuten gespielt habe. Schauen wir uns einige interessante Aspekte an.
Hover-Effekte in Hülle und Fülle
Ich bin ein großer Fan von Hover-Effekten. Ich weiß, dass sie nicht immer sehr gut auf Touchscreens übertragen werden, aber Sie können dies berücksichtigen. Auf einem Desktop ist dies eine der wichtigsten Möglichkeiten, wie wir mit Benutzern auf einer grundlegenden Ebene interagieren.
Sevenly ist einfach überfüllt mit coolen Hover-Effekten. Kleine, lebhafte Animationen erwarten Sie auf Schritt und Tritt. Es beginnt mit der Vorschau der Startseite von Bekleidung:
Standardmäßig sind der Produktname und der Preis ausgeblendet. Sobald Sie den Mauszeiger über ein Bild bewegen, wird es nach unten verschoben, um diese Informationen anzuzeigen. Wenn Sie zur Seite der Seite springen, befinden sich hier drei Schaltflächen, die sich beim Schweben in eine lange horizontale Leiste erstrecken.
Nach dem gleichen Thema zum Ändern der Elementgröße im Schwebeflug haben die kleinen Freigabebalken auch Schaltflächen, die breiter werden, wenn Sie den Mauszeiger darüber bewegen, sodass alle wichtigen Mausklicks aktiviert werden.
Reines Scrollen Voodoo
Mein absoluter Favorit an dieser Seite ist der Scroll-Zauber der Homepage. Es ist eigentlich ein wirklich einfacher Effekt, aber es ist so gut durchdacht, dass ich nicht anders konnte als beeindruckt zu sein.
Wenn Sie die Seite standardmäßig laden, sehen Sie Folgendes:
Die Chancen stehen gut, Ihre erste Reaktion besteht darin, auf der Seite nach unten zu scrollen. Wenn Sie dies tun, wird der dunkle Abschnitt, der die Website beschreibt, immer kürzer, bis nur eine kleine Navigationsleiste angezeigt wird, die beim Scrollen angezeigt wird.
Der große Teil ist, dass es dort nicht aufhört. Obwohl Sie vielleicht nicht daran denken, es zu tun, können Sie tatsächlich über die ursprüngliche Startposition hinaus scrollen. Dies tut das Gegenteil von dem, was wir zuvor gesehen haben, und erweitert den abgedunkelten Bereich, um mehr Informationen über die aktuelle Wohltätigkeitsorganisation der Website zu erhalten.
Es ist eine elegante Art, eine Menge von Informationen auf kleinem Raum zu speichern und sie den Benutzern nach und nach zugänglich zu machen. Es ist nur so versteckt, dass es Sie nicht überfordert, wenn Sie die Seite laden, aber es ist offensichtlich genug, dass Sie es nicht übersehen können, wenn Sie nach dem ersten Durchblättern zum Anfang der Seite zurückblättern.
Zahlen und Teilen
Da sich diese Site auf Wohltätigkeit konzentriert, gibt es zwei Ziele, die für das Design festgelegt wurden. Sie können es erkennen, weil sie das gesamte Layout steuern. Das erste ist ein Maß an Transparenz und Fortschritt, das über Statistiken kommuniziert wird. Hier ist, wie viel wir bisher erhöht haben, wie hoch unsere Zielbeträge sind usw.
Das zweite Ziel besteht darin, durch die Nutzung sozialer Medien so viel wie möglich zu teilen. Es gibt einen großen Facebook-Kommentarbereich, der direkt in die Homepage integriert ist, und jede Menge anderer sozialer Schaltflächen und Bars auf der Website.
Eine persönliche Note
Das fantastische Design hört nicht auf, sich an der Homepage vorbei zu bewegen. Als nächstes ist das? Team? Seite, auf der Sie verschiedene Mitglieder des Projekts treffen können.
Nach wie vor sehen wir hier einige lustige Hover-Effekte. Jedes Teammitglied wird in einem Kreis dargestellt, wobei nur der Kopf herausragt. Wenn Sie jedoch über dem Kreis schweben, erscheinen sie mit einem dummen Gesicht.
Als ich auf diese Seite schaute, wurde mir klar, dass sie eine weitere Überraschung enthielt: Der Hintergrund ist eigentlich ein Video! Es ist sehr subtil und man merkt es vielleicht gar nicht erst, weshalb es so schön ist. Das Video ist unscharf und dunkel, sodass es nicht zu störend ist.
Storygrafik
Das Letzte, was ich gerne zeigen möchte, ist das? Our Story? Seite, auf der Sie ein wenig darüber erfahren, warum Sevenly gestartet wurde. Das Sevenly-Team ist nicht damit zufrieden, etwas so zu tun, wie Sie es erwarten würden. Stattdessen hat sich das Sevenly-Team entschieden, Ihnen statt einer langen, langweiligen Geschichte eine großartige Infografik zu geben.
Beachten Sie, wie diese Infografik strukturiert ist: Problem versus Lösung. Dieses Format wird an anderer Stelle auf der Website verwendet, um die Geschichte hinter jeder Wohltätigkeitsorganisation zu vermitteln. Zunächst geben sie ein Problem in sehr einfachen Worten an und vermitteln dann, wie sie helfen, dieses Problem zu lösen. Es ist erfrischend einfach und unkompliziert.
Was denkst du?
Ich möchte klarstellen, dass ich noch nie mit den Sevenly-Leuten gesprochen habe. Sie haben mich nicht angesprochen, um diesen Artikel zu schreiben oder sich in irgendeiner Weise an mich zu wenden. Ich schätze es wirklich sehr, was sie tun, sowohl als Mensch als auch als Designer.
Stellen Sie sicher, dass Sie Sevenly.org besuchen, wenn Sie das nächste Mal solide Inspiration benötigen. Schauen Sie nicht nur hin, interagieren Sie mit der Website und erhalten Sie ein Gefühl für all die schönen kleinen Designelemente, die das Gefühl haben, dass sie sich so verfeinert fühlen. Wenn Sie auf dem Markt für einige T-Shirts sind, die Ihrem Designer-Status entsprechen, können Sie die fantastischen Sevenly-Designs nicht schlagen.