6 heiße neue Websites, von denen Sie sich inspirieren lassen können
Das Entwerfen für das Web ist eine sich ständig weiterentwickelnde Kunst, was bedeutet, dass großartige Entwicklungen immer vor der Tür stehen. Und mit Innovationen, die auf Barrierefreiheit ausgerichtet sind, können sensationelle Designs mehr als nur optisch ansprechend sein.
Um Ihnen einen Vorgeschmack auf einige der neuesten zu geben Inspiration für Webdesign Um unseren Weg zu finden, werfen wir einen Blick auf sechs atemberaubende Orte, die die Grenzen überschritten haben. Lesen Sie weiter, um herauszufinden, warum sie funktionieren.
01. Smashing Magazine
Nach 18 Monaten Neugestaltung startete das Smashing Magazine seine Website in großem Stil. Indem es sich nicht von Rot fernhielt, einer Farbe, die mit Autorität und Stärke verbunden ist, entschied es sich, sich von typischen redaktionellen Websites abzuheben, die überwiegend Weiß als Hintergrund verwenden.
Menschen verbinden Benutzererfahrung oft mit Design, aber es ist auch relativ zur Architektur der Plattform. Besucher treffen sofort unbewusste Entscheidungen, die ihre Meinung über den Wert und das Vertrauen einer Website bestimmen, wobei ein grundlegender Einfluss die Ladegeschwindigkeit ist. Aus diesem Grund entschied sich das Smashing Magazine für eine Kombination aus WordPress, Kirby, Rails und Shopify. Durch die Umstellung auf JAMstack: eine Methode für die Front-End-Webentwicklung, die auf JavaScript, wiederverwendbaren APIs und optimiertem Markup basiert, konnten Probleme mit Benutzerfreundlichkeit, Skalierung und Caching behoben werden.
Das Unternehmen sammelt mithilfe von Hotjar anonyme Daten zum Benutzerverhalten, um Schwachstellen zu bewerten, die über die technischen Rahmenbedingungen hinausgehen. Mit der Zeit soll die gesamte Werbung von der Website entfernt und auf die Leser konzentriert werden.
02. Locker
Slack, die am schnellsten wachsende Geschäftsanwendung in der Geschichte, hat seine Website 2017 aktualisiert, um die Grundwerte und die Unternehmenskultur besser widerzuspiegeln. Obwohl die Website einfach aufgebaut ist, sind die lebendigen, stilisierten Illustrationen der Designerin Alice Lee eines der ersten Elemente, die Sie bemerken.
'Ich habe versucht, den spielerischen und kollaborativen Aspekt der Kultur einzufangen, und angesichts des warmen und freundlichen Tons dieser Kultur wollte ich ihn über die üblichen Bilder von' Menschen, die an einem Schreibtisch arbeiten 'hinausgehen', erklärt sie. Dies ist eine interessante Richtung, da sie ein wenig im Widerspruch zum eigentlichen Anwendungsdesign steht, aber die Persönlichkeit des Unternehmens besser verkörpert. Es stellt sich die Frage: Müssen die Marketing-Website und die Anwendung wirklich Schriftarten und Designelemente gemeinsam nutzen, oder können beide dieselbe Idee unterschiedlich darstellen?
Das Slack-Team hat wichtige Verbesserungen wie die Barrierefreiheit und die Entkopplung von Asset-Abhängigkeiten zwischen dem webbasierten Slack-Client und der Marketing-Website mit einer Code-Überarbeitung hinter den Kulissen in Angriff genommen. Zu diesem Zweck wurde ein neues UI-Framework (Raumanzug) erstellt. Das Raumanzug-Framework von Slack ist klassenbasiert und verwendet wiederverwendbare Komponenten und Dienstprogrammklassen, wodurch die CSS-Last um 70% reduziert wird. Es ist von der BEM-Namenskonvention inspiriert, bei der sich Klassen in einer von drei Gruppen befinden - Block, Element und Modifikator - und einzelne Buchstaben-Namespaces verwendet.
03. Ubersignlanguage.com
Ein auffallend vereinfachter Ansatz, um Ubers Integration der Barrierefreiheit in die Unternehmenskultur nach Hause zu bringen; Diese Website ist ein herausragendes Beispiel für zurückhaltendes Design. Ein üblicher Ansatz für Design ist es, den Wert zu erklären, aber es ist ein anderer, sich auf Interaktion zu verlassen, um zu erziehen. Uber hat den Gehörlosen seit 2015 die Möglichkeit gegeben, Fahrer zu werden, indem er zugängliche Technologie direkt in seine App integriert hat, z. B. blinkende Benachrichtigungen über Reiseanfragen anstelle einer Audioaufforderung, Nur-Text-Kommunikationsoptionen, Vorabbenachrichtigungen, um den Fahrer darüber zu informieren, dass sein Fahrer taub ist oder Schwerhörig und eine zusätzliche Aufforderung an den Fahrer, sein Ziel im Voraus einzugeben.
Mit ubersignlanguage.com hat es nun einen weiteren Schritt nach vorne gebracht. Sie werden aufgefordert, Ihren Namen einzugeben, und werden mit gängigen Sätzen wie 'Ja', 'Nein', 'Links abbiegen' und sogar Ihrem Namen begrüßt. Was diese Erfahrung auszeichnet, ist das visuelle Feedback oder Kurzvideos, in denen Sie erfahren, wie Sie die einzelnen Sätze unterschreiben. Es zeigt, dass Sie keine lange, clevere Kopie benötigen, um eine starke Botschaft für Ihr Unternehmen zu vermitteln. Sie müssen nur das Ziel des Endbenutzers verstehen und geschickt Lösungen bereitstellen.
04. Der versierte Backpacker
Der Savvy Backpacker, ein preisorientierter Reiseblog, folgt dem Ehepaar James und Susan auf ihrem Weg nach Europa.
Sie verpacken Online-Stadtführer als ihren wichtigsten Wertpunkt und leisten hervorragende Arbeit, indem sie diesen Benutzerpfad aus der Hauptnavigation herausziehen und neben ihrem Logo als primären Berührungspunkt platzieren. Jeder Reiseführer dient als Archiv vergangener Besuche, in denen Themen wie die besten Hotels, Reisekosten und das Packen Ihres Gepäcks detailliert beschrieben werden.
Ben Bush, Mitbegründer von FHOKE, erläutert: „Es war wirklich so, dass ein Fokus auf die Stadtführer sie auf der Startseite in den Vordergrund stellte, eine spezielle Zielseite für sie und klare und separate Navigationslinks, die schnell zu erreichen waren auch stöbern '.
Reiseblogging ist ein Wettbewerbsraum. Um sich weiter als legitime Ressource zu etablieren, mussten sie mehr tun, als nur schöne Fotos zu machen und eine unglaubliche Menge an Inhalten zu generieren. Sie mussten die Besucher intuitiv zu den richtigen Inhalten führen.
Ben fügt hinzu: 'Der Schlüssel ist nicht zu alternativ und platziert diese in Bereichen, mit denen Benutzer vertraut sind. Wenn sie nach etwas suchen müssen, haben Sie sie bereits verloren. '
05. POM Wunderbar
Für POM wäre es einfach gewesen, sich auf das polarisierende Flaschendesign oder bestehende Marketingkampagnen zu verlassen, um das digitale Erlebnis voranzutreiben und mit der Website auf Nummer sicher zu gehen.
In einem inspirierenden Schritt entschied man sich, ein museales Erlebnis zu schaffen, das sich auf die Geschichte und Kunst des Granatapfels konzentriert, sobald man sich über die Homepage hinaus wagt. Im Abschnitt 'Verlauf' finden Sie vollständig stimmhafte Geschichten für 68 eindeutige Einträge.
Andrès Conde, Gruppenleiter von Digital POM Wonderful, erklärt auf seiner Website: „Das Verständnis unseres Ziels und seiner besonderen Interessen hat einen großen Teil der UX vorangetrieben, zumal die Website das Produkt auch zum ersten Mal online verkauft. Wir mussten in der Lage sein, die inhaltsorientierte Markenseite mit einem funktionalen Einkaufserlebnis zu verbinden. ' Die Website ist fett, farbenfroh und scheint immer in Bewegung zu sein. Die Site wurde als einseitige App erstellt, die Assets im Hintergrund lädt, um reibungslose Übergänge zwischen Abschnitten der Site zu erzielen.
06. Packwire
Die Marketing-Website von Packwire, packwire.com, zeigt wenig Zurückhaltung bei dem Versuch, einen starken ersten Eindruck zu hinterlassen. Durch die Verwendung lebendiger Farben und Bewegungen mit Bildlauf können Benutzer kindliche Erkundungen erleben. Abgerundete Tasten und spielerische Hover-Interaktionen unterstützen dies, wenn Sie tiefer graben. Das wahre Juwel dieser Website ist der Service selbst: die Einrichtung Ihrer eigenen, maßgeschneiderten Box. Wer hätte gedacht, dass das Anpassen einer Box so intuitiv ist?
Aber was genau macht das intuitiv? Die Trennung von Fertigungsinformationen und Design für den Anfang. Auf der linken Seite finden Sie Erfüllungsdetails wie Kartontyp, Größe, Menge und Preis. Die rechte Seite konzentriert sich ausschließlich auf die kreative Implementierung Ihrer benutzerdefinierten Erstellung. Dies spiegelt auch die Hemisphären unseres Gehirns wider: linke Gehirnhälfte für Logik und rechte für Kreativität.
Darüber hinaus versucht das Unternehmen, den Endbenutzer und seine Bedürfnisse zu verstehen, indem es zwei voll funktionsfähige Nicht-Checkout-Optionen anbietet: Link abrufen und Speichern. Mit Get Link können Sie eine bit.ly-URL generieren, um Ihre benutzerdefinierten Arbeiten zu teilen, eine JPG-Datei zu generieren oder in sozialen Medien zu teilen. Mit Speichern können Sie Ihre Arbeit speichern, um sie später fortzusetzen.
Wie hilft das? Dies bedeutet, dass Kreative Modelle erstellen können, die leicht mit dem Kunden oder Stakeholder zur Genehmigung geteilt werden können, wodurch sich die Wahrscheinlichkeit eines Kaufs über den Service erhöht. Es ist wirklich gut als Service für den Benutzer durchdacht.
Besuchen Sie eine Muster-Netzmagazinbox, die wir mit Spaß erstellt haben Hier .
Dieser Artikel wurde ursprünglich in Ausgabe 303 von net veröffentlicht, dem weltweit meistverkauften Magazin für Webdesigner und Entwickler. Ausgabe 303 kaufen oder net abonnieren .
Zum Thema passende Artikel:
