16 erstaunliche HTML-Beispiele
Seite 1 von 2: Seite 1- Seite 1
- Seite 2
Einige dieser Websites verwenden die neuesten Technologien, um die Grenzen der Möglichkeiten im Web zu erweitern. andere verwenden traditionelle Gestaltungsprinzipien, um schöne, nutzbare Websites zu erstellen. Egal, ob Sie einfaches HTML verwenden oder in WebGL und 3D CSS eintauchen, hier finden Sie etwas, das Sie inspiriert.
Wir haben auch eine brillante Auswahl an inspirierenden Beispiele für CSS für Sie zu erkunden.
01. Appy Fizz
Appy Fizz ist ein prickelndes Getränk, das sich selbst als 'Champagner der Fruchtgetränke' bezeichnet. Die neue Appy Fizz-Website war Teil eines umfassenderen Rebranding-Projekts der in NYC ansässigen Designfirma Sagmeister & Walsh . Wie die Autoren in ihrer Fallstudie erklären, visualisiert die Identität 'kohlensäurehaltige Blasen durch eine dynamische grafische Sprache aus 3D-Kugeln und Kreisen'.
Das Design ist eine interessante Mischung aus superflachen und implizierten dreidimensionalen Elementen. Die kreisförmige Sprache in kräftigem Rot, Weiß und Schwarz erinnert mich an die Arbeit von Yayoi Kusama, dem weltberühmten Künstler, der mit Pop Art, Minimalismus und Tupfen in Verbindung gebracht wird.
Kunst und ihr Raum in der kommerziellen Industrie ist ein Thema, mit dem Sagmeister & Walsh während ihrer gesamten Arbeit spielen, und es ist interessant zu sehen, wie sich diese Kombination auf das Web überträgt. Hier gibt es viele Animationen und interaktive Canvas-Elemente, die dieselbe visuelle Sprache sprechen - eine Karbonisierungssimulation folgt sogar der Maus des Benutzers, wenn diese über die Website bewegt wird.
02. Von wenigen gemacht
Made by Few ist eine jährliche Webkonferenz von Wenige , eine Design- und Entwicklungsagentur in Arkansas. Sally Nixon Die detaillierten, hellen Illustrationen sind im Impressum und in den Sprecherbeschreibungen enthalten. Es dauert einen Moment, bis klar wird, dass sich die Menge wiederholt, weil sie so subtil ist.
Während Sie die Website erkunden, gibt es weitere Überraschungen. 'Bei Few lieben wir angenehme Unfälle und fördern die Erkundung', sagt Arlton Lowry, Mitbegründer von Few und Organisator der Konferenz. In Anlehnung an ihre Erkundungsphilosophie gibt es überall auf der Website versteckte Juwelen (wir werden sie nicht alle verraten, aber versuchen Sie, den Konami-Code zu treffen!).
Diese lustigen Elemente verleihen der Site eine Menge Persönlichkeit, die Arlton direkt der Agenturkultur zuschreibt. 'Wir glauben, wenn Sie den Menschen eine offene und unterhaltsame Umgebung bieten, ist nicht abzusehen, was daraus werden wird.'
03. Allbirds
Allbirds ist eine Sportschuhmarke aus dem Land der 29.221.344 Schafe. Es begann, als Mitbegründer Tim Brown die erstaunlichen Eigenschaften von Merinowolle beobachtete und sich fragte, warum sie noch nie zuvor in Schuhen verwendet worden war.
Die mit Shopify erstellte Website kombiniert Lifestyle-Fotografie mit Illustrationen. Das Ergebnis ist eine wunderbare Erfahrung, die nicht nur die Geschichte hinter den Allbirds erzählt, sondern Ihnen auch ein Gefühl für das Produkt selbst vermittelt.
'Es wurde entwickelt, um die unglaubliche Liebe zum Detail und die Gedanken hinter unserem Produktdesign zu demonstrieren', erklärt Brown die Gründe für die Website. 'Wir haben viel in die Fotografie investiert - und in den in NYC ansässigen Kiwi-Fotografen Henry Hargreaves -, um die Website zum Leben zu erwecken und unsere Mission zu artikulieren, bessere Schuhe besser herzustellen.'
Sowohl Brown als auch der Rotes Geweih Das Team spricht über ihr extremes Engagement für die UX der Website und darüber, wie sie sich auf die Details stützen, die so oft übersehen werden. Der weltliche FAQ-Bereich wird mit animierten GIFs zum Leben erweckt, und Illustrationen werden auf der gesamten Website als unerwartetes Motiv für das Erzählen von Geschichten verwendet.
04. Karim Rashid
Designer Karim Rashid ist so produktiv wie er gefeiert wird. Bei über 3.000 Entwürfen in Produktion und Arbeit in 20 permanenten Kollektionen weltweit ist es vielleicht keine Überraschung, dass seine eigene Website in den letzten 10 Jahren in den Hintergrund getreten ist. Bis er in Auftrag gab Anton & Irene , das ist.
Mit seiner markanten Umarmung aus ansprechenden Interaktionen, emotionaler Typografie und wirklich geräteunabhängigen Layouts hat das Duo eine Website geliefert, die zu intensiven Erkundungen einlädt. Das war natürlich der Punkt: 'Unser Hauptziel war es, die Fülle von Produkten und Projekten auf visuell verlockende Weise zu präsentieren', sagen die beiden in ihrem Blog.
Diese Fülle von Produkten war auch eine Herausforderung. Wie liefert man in einer reaktionsschnellen Umgebung mehr als 5.000 Bilder in verschiedenen Formen und Größen? Die Lösung: eine Überarbeitung herkömmlicher Layouts und ein Lo-Fi-Ansatz zur Strukturierung, um ein präzises, flexibles Raster zu erhalten, kombiniert mit kühner (aber unauffälliger) Typografie.
Das vielleicht beeindruckendste an Rashids neuer Website sind die nahtlosen Übergänge zwischen Ansichtsfenstern. 'Wir entwerfen immer alle Bildschirme gleichzeitig ... Sobald wir eine Idee für eine Komponente oder ein Layout haben, versuchen wir es auf allen Bildschirmen und prüfen, ob es auf der ganzen Linie Sinn macht.'
05. Histographie
Histographie - israelischer Designer und Entwickler Töte Stauber Das Projekt des letzten Jahres an der Bezalel Akademie für Kunst und Design ist eine interaktive Zeitleiste, die nicht weniger als 14 Milliarden Jahre vom Urknall bis zur Gegenwart umfasst. Es erstreckt sich buchstäblich über die gesamte Geschichte des bekannten Universums und ist eine immense, interaktive Infografik, die unsere Vorurteile in Bezug auf die Kommunikation komplexer Themen in Frage stellt.
Die Zeitleiste von Histography deckt Themen ab, die von Literatur und Musik bis hin zu Attentaten, Erfindungen und Religion reichen. Sie lädt uns ein, Ereignisse aus unserer reichen Vergangenheit zu erkunden, die jeweils dynamisch aus Wikipedia stammen und auf dem Bildschirm als kleiner schwarzer Punkt dargestellt werden. Es gibt zwei Modi: die horizontale Ansicht von links nach rechts, mit der der Benutzer in einem bestimmten Zeitraum zu Hause sein kann; oder die helixartige Zeitmaschine, die eine kuratierte Liste von Schlüsselereignissen präsentiert.
Stauber sagt, er war schon immer fasziniert von der Idee, die Geschichte im Laufe der Zeit zu zeigen: „Zeitleisten sind die beliebteste Art, Geschichte zu visualisieren, und dennoch hatte ich das Gefühl, dass sie immer sehr begrenzt waren. Von Beginn dieses Projekts an wusste ich, dass ich eine Zeitleiste erstellen wollte, die nicht auf ein Jahr, ein Jahrzehnt oder einen Zeitraum beschränkt ist. Ich wollte eine Zeitleiste, die die gesamte Geschichte enthalten kann. '
06. Auf dem Gitter
Obwohl für viele stressig, kann ein Umzug auch eine großartige Inspirationsquelle sein. Wann Hyperakt Nach Gowanus, Brooklyn, verlegt, führte die Begeisterung des Teams, die verborgenen Schätze seiner neuen Umgebung zu entdecken, zur Inkarnation von On the Grid: einem internationalen Nachbarschaftsführer, der von Designern kuratiert wurde.
Die Seite ist minimalistisch und dennoch beeindruckbar. Entworfen, um hoch strukturiert, aber spielerisch und dynamisch zu sein, genau wie der Inhalt auf der Website '. Die No-Nonsense-Ästhetik meidet die typische Heldenbildfalle und nutzt das Ansichtsfenster auch bei extremen Größen optimal aus.
Und dann ist da noch die Liebe zum Detail. Vom animierten Logo bis zu den 100 (und zählenden) einzigartigen Stadtillustrationen und einfachen Animationen ist On the Grid eindeutig nicht nur ein weiterer Lifestyle-Blog.
In seinem Blog erklärt Hyperakt, wie es 'eine zuverlässige Ressource schaffen wollte, die die wahre Essenz der Orte, die wir lieben, durch wunderschöne Fotografie, ehrliche Beschreibungen und designorientierte Kuration einfängt'. Da jeden Monat mehr Kuratoren hinzukommen, könnte On the Grid bald in eine Nachbarschaft in Ihrer Nähe kommen.
07. LS Productions
LS Productions hat kürzlich seinen Horizont von der Beschaffung großartiger Standorte (unter dem Namen Location Scotland) zu der heute größten Produktionsfirma für Standbilder und Bewegungsdienstleistungen in Großbritannien erweitert. Das Branding und die Website wurden von der Agentur Edinburgh produziert Leerzeichen .
Der leitende Designer Mike Bryant sagte, die Priorität bestehe darin, die Arbeit des Unternehmens sprechen zu lassen: 'Sie haben ein so unglaubliches Portfolio, das von Standbildern bis hin zu Bewegungen reicht, dass unsere Hauptaufgabe darin bestand, eine Struktur zu schaffen, die den minimalen Typ mit dem Bild ergänzt.' Dieser Ansatz wird sofort auf der Homepage deutlich, die das breite Angebot des Unternehmens mit einer passenden Mischung aus animierter Typografie und Video zusammenfasst.
Die wichtigsten technischen Herausforderungen - die Ladezeiten auf ein Minimum zu beschränken und verschiedene Ausschnitte für qualitativ hochwertige Bilder zu verwalten - wurden überwunden, indem bei Bedarf Bilder mit höherer Auflösung ersetzt und mithilfe von JavaScript die Höhe und das Seitenverhältnis von Bildern bei verschiedenen Bildschirmgrößen dynamisch verwaltet wurden .
Das Endergebnis, sagt Bryant, ist eine 'abgespeckte Site, die modulare Paneele, saubere Schrift und eine minimale Farbpalette verwendet, um als subtile Kulisse für die schöne Arbeit zu dienen'.
08. Herr
'Spiel ist älter als Kultur, denn Kultur ... setzt immer die menschliche Gesellschaft voraus, und Tiere haben nicht darauf gewartet, dass der Mensch ihnen ihr Spiel beibringt.' So beginnt Johan Huizingas Homo Ludens, in dem der Autor die Auswirkungen des Spiels auf die Gesellschaft diskutiert.
Das Element des Spiels nimmt Lordz, eine in der Schweiz ansässige Tanzakademie, ernst. Für Lordz geht es beim Tanz nicht nur um Bewegung; es ist eine Kunstform, ein spielerisches Mittel des kulturellen Ausdrucks. Mit der Gestaltung eines Standorts für die Akademie beauftragt, Eidenbenz / Zürcher benutzte dieses Ethos, um seine künstlerische Richtung zu leiten.
'Wir wollten etwas schaffen, das das digitale Erlebnis mit dem Herzen von Homo Ludens konfrontiert', erklärt Art Director und Partner Daniel Zürcher. 'Eine spielerische Art, einen Einblick in die tägliche Tanzpraxis zu bekommen; die Bewegung, die Gefühle und so weiter. Um dies zu erreichen, haben wir die neueste Technologie in den Bereichen Filmen, Postproduktion und natürlich Programmieren eingesetzt. '
Das Ergebnis ist ziemlich beeindruckend; Eine einzigartig erkennbare und inspirierende Website, die mithilfe von Videos das Herz der Organisation wirklich einfängt - eine seltene Leistung heutzutage.
Nächste Seite: 8 weitere beeindruckende Beispiele für HTML
- 1
- zwei
Aktuelle Seite: Seite 1
Nächste Seite Seite 2
