Die besten Website-Designs von 2019 bisher

Machen Sie es mit Adobe Stock> Entdecken Sie kostenlose Vorlagen

WordPress-Websites und unsere Auswahl der Besten minimalistische Site-Designs .

01. Phil Coffman

Blog in Handschrift gesetzt

Coffman hat seinen Blog so umgestaltet, dass er eher wie ein traditionelles Tagebuch aussieht

Wenn wir jedes Mal ein Pfund hätten, wenn wir einen Webdesigner sagen hören: 'Ich muss mich wirklich um die Neugestaltung meines Blogs kümmern', wären wir Millionäre. Also Hut ab vor Phil Coffman , ein Designer, der in Austin, Texas, lebt. Aber als Bonus hat er auch einen spektakulär erfinderischen und originellen Job gemacht.

Dies ist eines der besten Blog-Designs, die wir seit Jahren gesehen haben. Es kombiniert Handschrift und Zeitungsausschnitt mit einem erdigen Hintergrund, der alterndem, physischem Papier ähnelt. Und das ist zum Teil ein Beweis für die Menge an Arbeit, die Coffman investiert hat.

Verwendung von Imac als Monitor für MacBook Pro

'Dieses Design folgt vielen früheren fehlgeschlagenen Versuchen', gibt er zu. „Für mich selbst zu entwerfen ist möglicherweise meine am wenigsten bevorzugte Aufgabe. Während ich massiv gegen Unentschlossenheit und unrealistische Erwartungen kämpfe, setze ich mich selbst ein. Am Ende hat sich dieses Konzept durchgesetzt, weil ich mich wieder mit Texturen, handgezeichneten Elementen und einer allgemeinen Kunstrichtung befassen wollte, die eher ein persönliches Tagebuch als eine polierte Publikation ist. '

Blogpost in den Schriften Neue Haas Grotesk und Miller

'Als ich erfuhr, dass Neue Haas Grotesk bei Adobe erhältlich ist, kam Miller schnell, da die beiden Schriftarten sehr gut zusammenpassen', sagt Coffman

Die Umsetzung des Konzepts sei auch mit einigen technischen Herausforderungen verbunden, fügt er hinzu. 'Es dauerte ein wenig Versuch und Irrtum, bis der strukturierte Effekt auf den Post-Titeln und schwarzen Linien so aussah, wie ich es wollte', erklärt Coffman. 'Ich wusste, dass CSS Text als Schnittmaske verwenden kann, aber ich hatte nicht viel Zeit damit verbracht, herauszufinden, wie man ihn richtig abzieht.'

Nachdem er die Schritte zum Anwenden der richtigen Kombination von CSS-Deklarationen durchgearbeitet hatte, stand er vor der Herausforderung, die richtige Mischung von Texturen zu beschaffen und vorzubereiten. „Dies erforderte das Finden von Texturen mit der richtigen Abnutzung und Persönlichkeit, ohne Probleme mit der Lesbarkeit des Textes zu verursachen“, stellt er fest.

Die Bildsperren waren auch für Coffman eine „lustige Herausforderung“. 'Ich habe CSS Grid verwendet, um das Grundgerüst für das Markup zu erstellen. Ich habe an der Rastervorlage herumgespielt, um genügend Flexibilität bei der Positionierung der Figur und der Bildunterschrift zu erhalten, während das Seitenverhältnis vom mobilen Layout zum Desktop beibehalten wurde.'

Blogbeitrag in Mischung aus Professor- und Miller-Schriftarten

Coffman wählte Professor als Handschrift. 'Es ist lesbar, hat aber auch gute Ligaturen und sieht so aus, als hätte man es mit einem blauen Stift in ein Tagebuch schreiben können', erklärt er.

Für die Typografie entschied er sich für Neue Haas Grotesk für die Titel und kleinere serifenlose Elemente, Miller für den Körpertext und Professor für das handgeschriebene Drehbuch.

„Der Schlüssel zu diesem Konzept ist das Zusammenspiel zwischen handgeschriebener Schrift und Sans- und Serif-Schrift“, erklärt er. 'Ich hatte das Gefühl, dass ich, damit die handgeschriebene Schrift funktioniert, eine Sans und Serif brauchte, die einfacher oder vertrauter waren, als solche, die eine eigene Persönlichkeit hatten.'

02. Das Boolesche Spiel

Boolesche Spielhomepage

In diesem unterhaltsamen Spiel lernen Sie, wie Sie boolesche Operationen in Adobe Illustrator und anderen Vektorwerkzeugen verwenden

Das Boolesche Spiel ist ein unterhaltsames Browsergame, in dem Sie lernen, wie Sie boolesche Operationen in Adobe Illustrator, Sketch, Figma und anderen Vektoreditoren verwenden. Schöpfer Mark MacKay erklärt, wie es dazu kam.

„Ich baue seit einigen Jahren Designspiele und sammle unbewusst Dinge, die ich als schwierig empfinde, um sie in Lernspiele umzuwandeln“, sagt er. „Diese Idee war schon seit einiger Zeit im Umlauf, und dann sah ich, dass paper.js eine Bibliothek hatte, um sie auszuführen: Mathematisch ist es weit über meine Fähigkeiten hinaus. Also habe ich einen kurzen Test gemacht und gesehen, dass es Spaß machen kann. “

Während paper.js die Vektorarbeit für die Site stark anhebt, verwendete MacKay auch anime.js für die Animationen, growler.js für den Sound und d3-color, um das Farbschema zu verwalten.

Boolesche Spielhomepage

MacKay verwendete paper.js, anime.js, growler.js und d3-color, um die Site zu erstellen

Die größte technische Herausforderung bestand darin, dass es auf allen Geräten funktioniert, vom Telefon bis zum Desktop. „Dies erwies sich als äußerst schwierig, da die Größe der Vektoren geändert und das Layout je nach Ausrichtung geändert werden muss. Wenn ich eine feste Größe gewählt hätte, hätte ich wahrscheinlich einen Monat statt drei gebraucht, um das Projekt aus der Tür zu bekommen. “

Interessanterweise haben ihm diese drei Monate einige wichtige Lektionen über die Verwendung von Entwicklungswerkzeugen beigebracht.

Boolesche Spielhomepage

Die größte Herausforderung bestand darin, das Spiel auf allen Geräten zum Laufen zu bringen

„Das Entwicklungs-Ökosystem ist für ganz andere Dinge optimiert, als es ein kreativer Designer und Entwickler benötigt“, erklärt er. „Es ist, als ob Sie die Aufgabe hätten, eine Brücke zu bauen, und es wird nur davon ausgegangen, dass Sie Kranführer, vorgefertigte Betonkonstruktionen, Dampfwalzen usw. haben. Aber wenn Sie einfach Leute brauchen, die einen Bach überqueren, reicht eine einfache Holzkonstruktion von Hand.

„Ich sage das, weil ich mich früher unzulänglich fühlte, weil ich React, NPM, Tests, Best Practices usw. nicht kannte. Jetzt verstehe ich, dass ich für meinen eigenen Fluss und meine Freude optimieren muss. Entwicklungswerkzeuge und -praktiken sind in der Regel auf Zuverlässigkeit, Zusammenarbeit und Modularität ausgerichtet, die sehr unterschiedliche Einschränkungen darstellen. “

03. Das Gyllenhaal-Experiment

Datenvisualisierung von Britney-Rechtschreibfehlern

Diese Seite verwendet Reddit-Daten, um zu visualisieren, wie schlecht wir Prominente buchstabieren können

Eines der besten Beispiele für Datenvisualisierung, die wir seit einiger Zeit gesehen haben: Das Gyllenhaal-Experiment ist die Idee von Russell Goldenberg und Matt Daniels von Digital Publication Der Pudding .

'Wir hatten gesehen diese Geschichte über Colin Morris 'Analyse der selbst identifizierten Reddit-Rechtschreibfehler “, erklärt Goldenberg. 'Und dachte, es könnte mehr getan werden, um den Fluss der Rechtschreibung von Menschen zu visualisieren.'

„Wir haben uns darauf konzentriert, Prominente wie Jake Gyllenhaal zu verwenden, da diese ziemlich prominent waren und nicht etwas in Ihrer typischen Rechtschreibbiene. Wir wussten auch, dass wir etwas Interaktives machen wollten, um Echtzeit-Feedback zu den Rechtschreibabläufen zu erhalten, und haben diese Gedanken zusammengeführt, um eine bienenähnliche interaktive Visualisierung zu erstellen. '

Textfeld, das Sie zum Buchstabieren einlädt

Die Ersteller möchten etwas Interaktives erstellen, das Echtzeit-Feedback zu Rechtschreibabläufen zeigt

Das Paar stützte sich für den größten Teil der Visualisierung auf JavaScript und hauptsächlich auf die D3.js-Bibliothek sowie auf Firebase zur Speicherung der Benutzerergebnisse.

„Die mit Abstand größte Herausforderung bestand darin, die Flussdiagramme zu rendern“, sagt Goldenberg. 'Obwohl es sich technisch gesehen um ein Sankey-Diagramm handelt, mussten wir viele benutzerdefinierte Aufgaben ausführen, damit die Pfade ordnungsgemäß gerendert werden und sich nicht überlappen.'

Datenvisualisierung von Matthew McConaughey-Rechtschreibfehlern

Es gab viele Benutzerströme zu berücksichtigen, von verschiedenen Arten der Beantwortung einer Frage bis hin zur Behandlung verschiedener Zustände

Während des Aufbaus der Website war die größte Überraschung, zu erfahren, auf wie viele verschiedene Arten Namen geschrieben werden. „Es gab über 800 Möglichkeiten, wie Menschen zum Beispiel Matthew Mcconaughey buchstabieren wollten.

'Vom Standpunkt der Entwicklung aus waren viele Benutzerströme zu berücksichtigen, von allen möglichen Variationen über die Beantwortung einer Frage bis hin zur Behandlung verschiedener Zustände (z. B. sind sie auf die Website zurückgekehrt, nachdem sie bereits geantwortet haben?). Es war entscheidend, dass alle möglichen Zustände im Voraus bekannt waren, damit Entwicklung und Design reibungslos verliefen. “

04. JSConf 2019

JSConf 2019 Homepage

Diese Konferenzseite konzentriert sich auf die Grundlagen und macht sie brillant

Es ist ein echtes Problem für Organisatoren von Webkonferenzen. Sie möchten nicht die ganze Zeit an Ihrer Website arbeiten, wenn Sie Ihre Energie darauf konzentrieren könnten, Ihre Veranstaltung zu planen und sie so gut wie möglich zu machen. Aber halten Sie sich an eine einfache Website zum Ausstechen von Keksen, und die Leute werden sich fragen, wie viel Sie über das Thema wissen, über das Ihre Konferenz spricht.

Irgendwie scheinen die Organisatoren von JSConf EU diesen Kreis geschlossen zu haben. Denn nicht nur ihre Konferenz wird allgemein gelobt und bewundert, sondern auch ihre Website, die auf dem Winterschmied des statischen Site-Generators basiert, ist ziemlich erstaunlich. Nicht weil es voller cleverer Tricks ist - es ist nicht so -, sondern weil es sich auf die Grundlagen konzentriert und in jeder Hinsicht liefert, von der Benutzerfreundlichkeit bis zur Relevanz des Inhalts.

Foto der Teilnehmer der JSConf 2019

Malte Ubi hat alles daran gesetzt, diese 'schnellste Konferenzwebsite der Welt' zu machen.

Außerdem ist es schnell - superschnell. Wie Malte ubl erklärt in dieser Blog-Beitrag : 'Ich habe eine völlig unangemessene Zeit damit verbracht, es zur schnellsten Konferenzwebsite der Welt zu machen.' (Er ist sich nicht sicher, ob es ihm gelungen ist, aber bisher hat niemand seine Behauptung für ungültig erklärt).

Es hilft, dass Ubi der Schöpfer von AMP ist, einer Webkomponentenbibliothek zum Erstellen zuverlässig schneller Websites. Er hat die jSConf-Website als Spielplatz genutzt, um neue Techniken auszuprobieren. und sie scheinen sicherlich funktioniert zu haben; Die Seite funktioniert wunderbar auf jedem Gerät, auf dem wir sie ausprobiert haben.

Sie können tief in die cleveren Möglichkeiten eintauchen, mit denen Ubi dies erreicht hat, von der Optimierung der Schriftleistung bis zur Beseitigung toten Codes. Hier .

05. Designtitel

Design-Titel-Homepage

Diese urkomische Site parodierte mit müheloser Präzision unsinnige Berufsbezeichnungen

Wer sagt, dass Webdesign keinen Spaß machen kann? Nicht Xtian Miller und Boris Crowther , die diesen urkomischen Jobtitelgenerator erstellt haben, Designtitel , das einige der alberneren Moniker parodiert, unter die einige Webdesigner heutzutage zu fallen scheinen.

In Bezug auf das Design ist es keine komplexe Website: Es macht eine Sache und macht es sehr gut, und dafür gibt es eine Menge zu sagen.

'Es begann wirklich als Insider-Witz', erklärt Miller. „Ob gut oder schlecht, Titel in der Kreativbranche haben einen quecksilbernen Charakter entwickelt, der zu Inkonsistenzen in ihrer Definition führt, da sie sich ständig weiterentwickeln.

Design-Titel-Homepage

Die Site wurde auf der Grundlage von statischem HTML, CSS, JS, Gulp und Sass erstellt

'Infolgedessen sind viele Designer mit ihren Titeln kreativ geworden, um relevanter zu klingen oder um nicht in eine Schublade gesteckt zu werden. Die offiziellen Titel schneiden nicht ab, daher werden sie Pseudo-Titel für ihre Portfolios und sozialen Biografien entwickeln. Das eigentliche Ziel der Website war es, eine visuelle und unterhaltsame Möglichkeit zu schaffen, diesen langjährigen Witz aus unserem System herauszuholen. “

Die Site wurde mit statischem HTML, CSS und JS erstellt, mit Gulp für die Automatisierung des Entwicklungsworkflows und Sass für die CSS-Vorverarbeitung. Die Generatorfunktion und der Algorithmus wurden in Vanilla JavaScript komplett neu erstellt.

Die größte technische Herausforderung bestand darin, den Algorithmus der Shuffle-Funktion genau richtig zu machen, fügt Miller hinzu. „Wir mussten es kontinuierlich bis zu einem Punkt optimieren, an dem es sich nicht zu oft wiederholte, und Sie hatten genauso gute Chancen, einen ganz normalen Titel zu erhalten wie einen absurden. Je öfter Sie es benutzen, desto lächerlicher (oder ernster) wird es. Es mag einfach aussehen, aber es waren viele Tests erforderlich, um den Algorithmus zu verfeinern. “

Design-Titel-Homepage

Die größte technische Herausforderung bestand darin, den Algorithmus der Shuffle-Funktion genau richtig zu machen

Das Duo hat uns vom internationalen typografischen Stil inspiriert, genauer gesagt vom NYC-U-Bahn-Design-System von Vignelli für Layout und Typografie.

„Wenn Sie sich auf diesen Stil einlassen, sind Sie sich des Einflusses, der Autorität und der Objektivität dahinter bewusst, die wir für dieses ganze Konzept als ironisch empfanden“, sagt Miller.

„Wir wollten, dass der Titel so unangenehm groß wie möglich ist - passend zum Ansichtsfenster -, um seine Bedeutung hervorzuheben, und haben moderne Farbpaarungen für Wirkung und Vielfalt verwendet. Die Farb-Randomisierung war eine einfache Lösung, um die Monotonie des Mischens zu beseitigen, und sie passt gut dazu, wie jeder Titel seine eigene Persönlichkeit trägt. “

06. Captain Marvel

Captain Marvel Homepage

Wir haben nie bemerkt, wie sehr wir Neonfarben und kitschige Schriftarten vermisst haben

Der neueste Marvel-Film, Captain Marvel , findet in den 1990er Jahren statt, und so gibt diese urkomische Werbeseite das Erscheinungsbild des Webs in diesem Jahrzehnt perfekt wieder.

Jüngere Menschen mögen schockiert sein, wie einfach und klobig es aussieht, aber diejenigen ab einem bestimmten Alter werden einen nostalgischen Ansturm bekommen, wenn sie die Neon-Schriftarten, kitschigen Animationen, schlechten Fotokulturen, das Gästebuch und den Hit-Counter sehen, die früher allesamt ein wesentlicher Bestandteil waren des frühen Website-Designs.

Es gibt sogar ein authentisches 'Spot the Skrull' -Spiel, in dem Sie entscheiden müssen, ob jemand ein Mensch oder heimlich ein veränderter Außerirdischer ist. Ja, Kinder, darum ging es in der neuesten Filmwerbung im späten 20. Jahrhundert.

Wir lieben das dort

Wir lieben es, dass es eine Theke und ein Gästebuch gibt!

Unter der Haube ist die Seite natürlich nicht ganz authentisch. Während Marvels Direktorin für Softwareentwicklung, Lori Lombert, scherzte: 'Wir haben dies in FrontPage erstellt und es Angelfire gehostet', wurde es tatsächlich mit modernem CSS und JavaScript erstellt, sodass ein 1995er Browser wie Netscape Navigator nicht gewusst hätte, was er damit anfangen soll. Ganz zu schweigen davon, dass das Herunterladen der 10-MB-Größe bei Einwahl über ein kreischendes AOL-Modem ewig gedauert hätte.

Für alle, die sich an den Nervenkitzel erinnern, den ersten Download ihrer Webseite in den 90er Jahren zu sehen, ist dies ein wahrer Genuss. Parodie mag einfach aussehen, ist aber unglaublich schwer richtig zu machen. Für Lombert und ihr Team ist es eine großartige Leistung, die kleinen Details auf diese Weise absolut festzunageln, und erinnert uns in diesen Tagen des seelenlosen digitalen Nutzens daran, dass das Web immer noch ein lustiger und anarchischer Ort sein kann.

Weiterlesen: