Sich in das Web verlieben: Inspirierende Websites und Tools

Inspiration kann von unerwarteten Orten kommen – die Gespräche, die wir geführt haben, die Punkte, die wir in unseren Gedanken verbunden haben, und die kleinen Dinge, die wir irgendwo entdeckt haben. Und während wir manchmal eine gute Idee für ein bestimmtes Problem brauchen, gibt es manchmal nichts Wertvolleres, als einen Schritt von der Aufgabe, an der wir arbeiten, einen Schritt zurückzutreten, um unsere Gedanken frei schweifen zu lassen.

In diesem Beitrag haben wir Ressourcen zusammengestellt, die Ihnen dabei helfen. Sie finden Augenschmaus zum Genießen, Ideen, die Sie aus Ihrer Komfortzone herausholen und sich selbst herausfordern , sowie Tools und Ressourcen, die Ihnen helfen, wenn Sie bei einem Projekt feststecken. Nur Dinge, die wir inspirierend und nützlich fanden und die auch Ihre Kreativität anregen können. Genießen!

Eine Welt voller Miniaturwunder

Haben Sie jemals daran gedacht, dass der Brokkoli, den Sie zum Abendessen zubereiten, wie ein Wald aus Bäumen aussieht? Oder dass die Blätter, die auf der Oberfläche des Ententeichs Ihres örtlichen Parks schwimmen, kleinen Booten ähneln? Wenn Sie die Dinge aus einer anderen Perspektive sehen, beginnt sich eine völlig neue Welt zu öffnen. Eine Welt der Wunder.

Tatsuya Tanaka hat ein ganz besonderes Auge für die kleinen Wunder, die direkt vor uns liegen. Seit 2011 kreiert er Miniaturszenen im Diorama-Stil aus einfachen Alltagsdingen und winzigen 3D-gedruckten und handbemalten Figuren. In Tatsuyas Miniaturuniversum entdecken Sie Grillszenen, in denen sich Büroklammern in Picknickstühle und -tische und Metallklammern in den Grill verwandeln, Sie finden eine offene Packung Kartoffelchips, die einen Skatepark bilden, eine Lidschattenpalette und einen Lippenstift, die sich in verwandeln ein winziges Büro oder ein Burger in ein Karussell. Fantasie ist die einzige Grenze. Tatsuya veröffentlicht jeden Tag ein neues Miniatur-Diorama in seinem Miniaturen-Kalender. Nun, wenn das nicht der perfekte Weg ist, um einen neuen Tag zu beginnen und über den Tellerrand hinauszublicken, was sonst?

Blumen des Feuers

Drehende Sachsen, fliegende Tauben, Polka-Batterien, aztekische Fontänen, bengalische Lichter – die Vielfalt der Feuerwerke ist so reich wie die Namen, die sie beschreiben. Wenn Sie jedoch jemals versucht haben, Fotos von einer Feuerwerksshow zu machen, wissen Sie, dass es ziemlich schwierig sein kann, diesen Reichtum einzufangen. Genau das macht die Faszination einer Katalogwerbeserie für japanische Feuerwerke aus dem 19. Jahrhundert aus: Ohne jeden Anspruch auf Fotorealismus rufen die Illustrationen in den Katalogen ein einzigartiges Staunen hervor.

Die von der Yokohama City Library digitalisierten Kataloge stammen aus den 1880er Jahren und zeigen nicht nur Feuerwerke, wie wir sie heute kennen, sondern auch sogenannte „ Tagfeuerwerke “. Tageslichtfeuerwerk hatte seinen Ursprung in Japan und verwendete keine pyrotechnischen Effekte, sondern ein Projektil, das einen Ballon in Form eines Tieres, einer Person oder einer anderen Form enthielt, der sich öffnete und aufblähte, als er auf den Boden zurückkehrte. Blickfang!

Stadtansichten nach antiken Büchern

Antiquarische Bücher sind dafür bekannt, lange Titel und eher bescheidene Titelseiten zu haben, trotz der Fülle an Wissen, die sie in ihren Einbänden bergen. Um das einzigartige Wissen zu veranschaulichen, das Leser darin finden würden, startete Nicholas Rougeux ein ganz besonderes Projekt: Titelstädte.

Title Cities stellt die Titelseiten antiker wissenschaftlicher Bücher als farbenfrohe Stadtlandschaften neu dar, die ausschließlich auf den Worten auf der Titelseite basieren. Ob Charles Darwins On the Origin of Species oder Isaac Newtons Opticks , für jedes Buch zeichnete Nicholas Kästchen um die Wörter auf der Titelseite und codierte sie nach ihrem Anfangsbuchstaben farblich. Unter Beibehaltung ihrer ursprünglichen Größe relativ zueinander ordnete er die Kisten dann zu abstrakten Stadtlandschaften an. Ein schönes Beispiel dafür, dass Inspiration überall zu finden ist.

Mineralogie-Illustrationen nach Farbe sortiert

Ist Ihnen schon einmal eine Idee durch den Kopf gegangen, die Sie nicht losgelassen haben? Als Nicholas Rougeux auf die riesige Sammlung von Mineralienillustrationen stieß, die der britische Naturforscher und Illustrator James Sowerby Anfang des 19. Jahrhunderts geschaffen hatte, fragte er sich, wie sie aussehen würden, wenn sie in einer großen Collage nach Farben angeordnet wären. Und, nun ja, er verbrachte die nächsten vier Monate damit, genau das zu tun: alle Illustrationen von Sowerby aus den 718 Tafeln starken Serien British Mineralogy and Exotic Mineralogy zu arrangieren.

Das Ergebnis ist das atemberaubende Projekt British & Exotic Mineralogy . Ein faszinierendes Kunstwerk, das eine Brücke schlägt zwischen der akribischen Arbeit zweier Menschen, die zwei Jahrhunderte voneinander entfernt lebten, und den Techniken, die sie verwendeten – vom Malkasten bis zu modernen Webtechnologien. Wenn Sie mehr über Nicholas' Herangehensweise und die Herausforderungen erfahren möchten, denen er dabei begegnete, gibt es einen begleitenden Blogbeitrag, in dem er einen Blick hinter die Kulissen gewährt.

Eine kuratierte Mustergalerie

Wenn kräftige Farben auf subtile Paletten treffen, organische Kurven neben scharfkantigen geometrischen Formen erscheinen und minimalistische Designs auf verspielte Kunstwerke treffen, ist die Inspiration nicht weit. Wenn Sie Lust auf eine Überraschungstüte voller Augenweiden haben, ist Pattern Collect genau das Richtige für Sie. Die Website kuratiert wunderschön illustrierte Muster, die von Designern aus der ganzen Welt erstellt wurden.

Sie können die Vitrine nach Tag durchsuchen und wenn Ihnen ein Kunstwerk gefällt, führt Sie ein Link zum Original auf Dribbble oder Behance, wo Sie mehr über den Illustrator und seine Arbeit erfahren können. Wer weiß, vielleicht erweist sich dies sogar als Gelegenheit, kreative Talente für ein bevorstehendes Projekt zu finden?

Der visuelle Glanz leerer Bänder

Erinnern Sie sich an leere VHS-Kassetten? Antony Terence widmete ihnen einen Artikel, in dem er hervorhebt, warum sie auch heute noch eine Meisterklasse im visuellen Design sind, mit ihrer „komplizierten Beziehung zwischen Typografie und Farbe “, die sie „umso faszinierender macht“, wie er schreibt.

Wenn Sie Lust auf mehr Inspiration aus der Vergangenheit haben, wie wäre es mit leeren Musikkassetten ? Der japanische Blog Tapefan widmet sich ganz der Schönheit der alten Sonys, TDKs, Fujis, Maxells und ihrer Artgenossen, die einst die Lieblingsmusik der Menschen schätzten, bevor moderne Technologien ihren Platz einnahmen. Eine inspirierende Reise in die Vergangenheit.

Neuer Tab, neues Artwork

Warum nicht eine der alltäglichsten Handlungen, die wir jeden Tag unzählige Male ausführen, aufpeppen und sie ein bisschen, naja, aufregender, sogar inspirierender machen? Wir sprechen über das Öffnen neuer Browser-Tabs . Wenn Sie es leid sind, jedes Mal, wenn Sie einen neuen Tab öffnen, denselben einfachen Hintergrund zu sehen, ist die Google Arts & Cultures-Erweiterung für Chrome möglicherweise das Richtige für Sie.

Jedes Mal, wenn Sie einen neuen Tab öffnen (oder mindestens einmal am Tag), präsentiert Ihnen die Erweiterung wunderschöne neue Kunstwerke. Die Kunstwerke reichen von Van Gogh und Monet bis hin zu zeitgenössischen Werken von Straßenkünstlern aus aller Welt. Wenn eines der Meisterwerke Ihre Neugier weckt, können Sie auf die Bildbeschreibung klicken, um mehr zu entdecken. Eine tolle Möglichkeit, Ihrem Tag ein wenig Kultur einzuhauchen.

Aerial Bildschirmschoner für Mac

Sind Sie es leid, dass der gleiche alte Bildschirmschoner Sie begrüßt, wenn Sie nach einer Kaffeepause an Ihren Schreibtisch zurückkehren? Aerial ist hier, um das zu ändern. Mit dem Open-Source-Projekt können Sie Videos von Apples tvOS-Bildschirmschoner auf Ihrem Mac abspielen.

Unter den Bildschirmschonern finden Sie hochwertige Luftbildvideos, die über verschiedenen Städten und Orten wie New York, San Francisco und China aufgenommen wurden, Erdvideos von der ISS, Unterwasservideos sowie eine Auswahl von Videos, die speziell für Aerial erstellt wurden. Alle sind in 4k gedreht, was Ihnen das Gefühl gibt, dass Sie den Ort wirklich als Vogel erleben, der über der Szene schwebt. Bildschirmschoner- Overlays zeigen Ihnen Beschreibungen der wichtigsten geografischen Merkmale, die in den Videos angezeigt werden, und geben Ihnen auf Wunsch auch Informationen zu Uhrzeit und Wetter sowie dazu, was gerade auf Apple Music oder Spotify läuft.

Generative Kreiskunst

Erinnern Sie sich an Spirographen? Die kleinen Plastikräder und -ringe, mit denen Sie alle möglichen blumigen Formen zeichnen können? Nadieh Bremers generative Kunstsammlung Rotae ist die erwachsene Schwester der guten alten Faszination Spirograph. „Rotae“ bedeutet auf Lateinisch „Räder“ und ist eine Ode an die große Vielfalt an Formen , die durch den scheinbar einfachen Prozess entstehen können, Kreise auf Kreisen rotieren zu lassen.

Die Rotae-Galerie besteht aus 529 Ausgaben, die alle animiert sind, um die Feinheiten des zugrunde liegenden Pfads zu enthüllen. Wie funktioniert es? Jeder der Rotaes verwendet einen Hash als Seed, ein Pseudo-Zufallszahlen-Generator wählt die Anzahl der Räder und die zu erzeugende m-fache Symmetrie aus. Den Rädern werden dann zufällig Radien und Frequenzen gegeben, die die angestrebte Symmetrie erzeugen. In ihrer Zusammenfassung des Projekts gibt Nadieh weitere Einblicke in die Technologie hinter den visuellen Meisterwerken sowie in die Art und Weise, wie sie sie animiert hat.

Tipps und Inspiration für generative Kunst

Ein beeindruckendes Projekt, das die Lücke zwischen einer jahrhundertealten Tradition und modernster Codierung schließt, ist {Shan, Shui} . Erstellt von Lingdong Huan und inspiriert von traditionellen chinesischen Landschaftsrollen, erstellt es prozedural generierte, unendlich scrollende chinesische Landschaften im SVG-Format . Die Berge und Bäume in der Landschaft werden mithilfe von Rauschen und mathematischen Funktionen von Grund auf neu modelliert. Faszinierend!

Wenn Sie sich jetzt fragen, wie etwas so Komplexes funktionieren könnte, sind Sie nicht allein. Victor Shepelev wollte hinter das Geheimnis von {Shan, Shui}* kommen und machte es zu seinem Adventsprojekt, um zu verstehen, wie es funktioniert. Und tatsächlich brauchte er 24 Tage, um sich vollständig mit dem Code zu beschäftigen. Seine Erkenntnisse fasste er in einer Artikelserie zusammen.

Wenn Sie bereit sind, sich an einem kleinen generativen Kunstprojekt die Hände schmutzig zu machen, sind die Artikel von George Francis mit Tipps und Tricks zum Erstellen generativer Kunst genau das Richtige für Sie. Für weitere Inspiration sollten Sie auch auf der Website von Andrey Andronov stöbern. Es führt einige fantastische Experimente mit berühmten und neuen Kunststilen durch – von Mondrian und Bauhaus bis hin zu Suprematismus und geometrischer Kunst.

Kunst mit CSS

Haben Sie jemals versucht, ein CSS-Kunstwerk von Grund auf neu zu erstellen? Wenn nicht, hat Yosra Emad ein leicht verständliches Tutorial geschrieben, das Sie vielleicht zum Einstieg inspirieren könnte. Darin führt Sie Yosra Schritt für Schritt durch den Prozess, einen freundlichen Geist nur mit CSS zu erstellen. Sie zeigt alles, von der Aufteilung einer ersten Skizze in Ebenen und der Planung des Markups bis hin zur Codierung jedes einzelnen Details des Kunstwerks. Es ist nicht nur eine unterhaltsame kleine Programmierherausforderung, sondern hilft Ihnen auch dabei, Ihre CSS-Positionierungsfähigkeiten auf die nächste Stufe zu heben.

Wenn Sie nach Inspiration für CSS-Kunst suchen, ist das Codepen-Konto von Chuan Yuan eine Schatzkiste voller atemberaubender CSS-Hintergrundmuster sowie statischer und animierter CSS-Kunstwerke . Verpassen Sie auf keinen Fall den Codepen, wo Chuan die berühmten Grafiken des japanischen Designers Ikko Tanaka nur mit CSS nachgebildet hat.

Inspirierende Houdini Paint Worklets

Houdini ist eine Reihe von Low-Level-Browser-APIs, die Ihnen direkten Zugriff auf das CSS-Objektmodell geben und es Ihnen ermöglichen, Code zu schreiben, den der Browser als CSS analysieren kann. Wenn Sie mit dem Konzept bereits etwas vertrauter sind, haben Sie vielleicht schon von Paint Worklets gehört. Sie bieten eine Möglichkeit, Bilder zu zeichnen, die dynamisch auf Änderungen im CSS reagieren.

Um tiefer in die Funktionsweise von Worklets einzutauchen, bietet Houdini.how einige schöne Paint Worklets zum Experimentieren: glitzernde Hintergründe , Konfetti, pulverförmige Farbverläufe, Unterstreichungen, QuickInfos und mehr. Ein Tutorial hilft Ihnen, alles zum Laufen zu bringen, und ein Polyfill bügelt fehlende Unterstützung in Firefox und Safari aus.

Ein Twitter-Bot, der Farbpaletten erstellt

Farbinspiration liegt überall. Manchmal sogar in einem Bild, das jemand in einen Tweet aufgenommen hat. Für diese Gelegenheiten ist Color Parrot Ihr neuer bester Freund. Erwähnen Sie einfach den Twitter-Bot in einer Antwort, und er antwortet Ihnen mit einer Farbpalette für das Bild.

Wenn Sie Color Parrot um Hilfe bitten, können Sie die Anzahl der Farben angeben, die Sie vom Bot erhalten möchten. Fügen Sie einfach die Nummer in Ihren Tweet ein. „@color_parrot was sind das für Farben? Ich brauche 6 davon.“ zum Beispiel. Die Geschichte hinter dem Bot ist übrigens auch interessant: David Aerne, sein Schöpfer, pflegt eine Open-Source-Liste mit Farbnamen , die von vielen Apps und Websites verwendet wird. Um zu messen, welche Namen besser sind als andere, sammelt er die Vorlieben und Reaktionen zu jeder Farbe. Durch die Verwendung des Bots tragen Sie also aktiv zum Open-Source-Projekt bei. Gewinnen.

Handkuratierte Mesh-Verläufe

Schöne Farbverläufe? Ja bitte! Wenn Sie nicht die Zeit haben, sie selbst zu erstellen, oder auf der Suche nach frischer Inspiration sind, ist Gene Maryushenkos handkuratierte Sammlung von Maschenverläufen sicher das Richtige für Sie.

Unzufrieden mit dem, was er online gefunden hat, hat Gene 100 Farbverläufe erstellt, die Ihre Website hervorheben, ohne laut zu sein. Die Farbverläufe können kostenlos als JPEGs heruntergeladen werden. CSS und SVG werden später hinzugefügt. Genießen!

Ein Generator für freundliche Mikroskopie

Die richtigen Worte zu finden, kann eine Herausforderung sein. Speak Human könnte der perfekte Ort sein, wenn Sie Inspiration für das Verfassen von Texten benötigen. Zum Beispiel für Bestätigungsnachrichten, respektvolle Unterbrechungen und sanfte Erinnerungen.

Um sich inspirieren zu lassen, wählen Sie einfach einen Zweck aus einem Dropdown-Menü aus, und der Generator präsentiert Ihnen eine clevere, auf den Menschen ausgerichtete Mikrokopie – eine freundliche Möglichkeit, Benutzer beispielsweise nach ihrer E-Mail-Adresse oder einer kleinen E-Commerce-Kopie zu fragen das sich von der Masse abhebt. Schnell und einfach.

Verwendete Schriftarten

Müssen Sie sich für eine Schriftart für ein Projekt entscheiden, aber Ihnen fehlt etwas Inspiration? Oder haben Sie vielleicht eine Vorliebe für alles, was mit Typografie zu tun hat? In jedem Fall könnte Fonts In Use genau das sein, wonach Sie gesucht haben.

Fonts In Use ist ein Typografie-Archiv, das nach Schriftart, Format, Branche und Epoche indiziert ist. Von alten Rechnungen und Zeitungsanzeigen vom Beginn des 20. Jahrhunderts bis hin zu Bonbonverpackungen und Filmtitelsequenzen von heute ist die Website eine Schatzkiste mit typografischen Mustern aller Herkunft. Eine großartige Möglichkeit, neue Schriftarten zu entdecken.

Generative Doodle-Muster

Was kann man aus geometrischen Grundformen erschaffen? Laut Sy Hong und Ye Joo Park sind ganze Welten! Die Designer haben sich zusammengetan, um Tabbied zu entwickeln, ein kleines Tool, das farbenfrohe geometrische Kritzeleien aus bereits vorgefertigten Voreinstellungen generiert. Wählen Sie einfach eine der Voreinstellungen aus, passen Sie die Farben an und wählen Sie Einstellungen wie die Häufigkeit eines Musters und das tatsächliche Raster und – ta-daa! — Sie können das PNG mit Ihrem Doodle sofort herunterladen.

Wenn Sie etwas Fortgeschritteneres suchen, stehen Ihnen auch Repper und MagicPattern zur Seite. Und da es bei Mustern nicht genug Abwechslung geben kann, sollten Sie sich vielleicht auch Patternify ansehen, einen CSS-Mustergenerator , mit dem Sie ein Muster in einem 10 × 10-Raster definieren, eine Vorschau des Ergebnisses anzeigen und herunterladen können PNG oder CSS. Für noch mehr Inspiration bietet Ihnen Hero Patterns eine Sammlung wiederholbarer SVG-Hintergrundmuster und MagicPattern enthält reine CSS-Hintergrundmuster wie Zickzack- oder Diagonalmuster.

Inspirierende Websites auf der ganzen Welt

Wie oft stolpern Sie über kyrillische Websites? Was ist mit japanischen Seiten? Oder Websites aus bestimmten, aber obskuren Branchen? Wenn wir ungewöhnliche Designmuster erkunden möchten, ist es möglicherweise eine gute Idee, an ungewöhnlichen Orten zu suchen . Zum Beispiel präsentiert Cyrillic.Design kyrillische Websites, die oft nicht in beliebten Galerien erscheinen. Alle Einträge können mit Tags gefiltert werden und regelmäßig kommen neue Websites hinzu.

SiteInspire organisiert Websites nach Branche und Kategorie, sodass nach Websites mit Bezug zur Gesundheitsbranche oder nach Projekten mit Architekturbezug gesucht werden kann. Design Made in Germany zeigt die Arbeit deutscher Designer und Responsive-JP stellt brillante Arbeiten japanischer Designer ins Rampenlicht. Schließlich finden Sie viele Zielseiten auf Land-Book und One Page Love, während Personalsit.es kleine und schöne persönliche Websites sammelt. Nun, das sollte Sie eine Weile beschäftigen!

Inspiration für die mobile Benutzeroberfläche

Wie haben andere Designer ein bestimmtes UI-Problem gelöst? Stephanie Walter hat einige nützliche Ressourcen zusammengestellt, die Ihnen beim Designen für Mobilgeräte sicherlich einen kleinen Inspirationsschub geben werden.

In Stephanies Liste finden Sie mehr als 15 Ressourcen zur Inspiration für mobile UIs, übersichtlich in verschiedenen Kategorien angeordnet: Ressourcen, die nach UI-Mustern, Ansichtstyp, Komponenten, spezifischen Abläufen sowie App-Kategorie und Inspiration für mobile Symbole sortiert sind. Und obwohl der Inhalt bereits zwei Jahre alt ist, ist er immer noch eine Schatztruhe für alle, die an einer mobilen Oberfläche arbeiten.

Podcasts zum Abonnieren

Welche Podcasts hörst du? Was inspiriert Sie und was hilft Ihnen, Dinge zu entdecken, die Sie nie gekannt haben? Das sind die Fragen, die wir auf Twitter gestellt haben, mit vielen tollen Vorschlägen aus der Community. Work-Life ist ein schöner Podcast mit Ratschlägen, wie Sie Ihre Arbeit verbessern können , während Darknet Diaries ein faszinierendes Hörbuch zu Hackern, Sicherheitsverletzungen, Cyberkriminalität und all den Dingen ist, die sich in den verborgenen Teilen des Internets aufhalten.

In A Bit Of Optimism finden Sie immer eine bessere Sicht auf die Dinge und lernen, wie Sie Ihren Design-Workflow mit dem Design Better Podcast verbessern können. In Design Matters und 99 % Invisible gibt es noch viel mehr über alle Seiten des Designs zu erfahren. Alle großartigen Podcasts, die Sie in Ihrer Bibliothek aufbewahren können, um im Park spazieren zu gehen, zu laufen oder einfach nur ein bisschen abends zu kochen. Ah, und natürlich gibt es auch unseren eigenen Smashing Podcast. Ich sag bloß'!

Entwirren Sie Ihr Lesezeichen-Chaos

Haben Sie ein spezielles System zum Speichern all dieser nützlichen Tools und Artikel, die sich eines Tages als nützlich erweisen könnten, der Bücher, die Sie lesen möchten, der Rezepte, die Sie ausprobieren möchten, und all der anderen kleinen Inspirationen , auf die Sie beim Stöbern stoßen? das Netz? Wenn Ihre Lesezeichen mit wertvollen Leckereien überquellen, Sie aber den Überblick verloren haben, wartet ein kleines Tool nur darauf, Ihnen zu helfen, dieses Lesezeichen-Chaos zu entwirren: Raindrop.io.

Mit Raindrop.io können Sie Ihre Lesezeichen in Sammlungen sortieren und ihnen Tags zuweisen, mit denen Sie schneller finden, wonach Sie suchen, und wenn Sie möchten, können Sie diese Sammlungen sogar mit Teammitgliedern und Freunden teilen. Das Tool funktioniert nahtlos auf allen Geräten und ist auch in einer Premium-Version verfügbar, die zusätzliche Funktionen wie einen Sucher für doppelte und defekte Links, eine Volltextsuche für die von Ihnen gespeicherten Websites, ein Cloud-Backup und mehr bietet.

Einpacken

Sind Sie kürzlich auf eine Website gestoßen, die Sie inspiriert hat? Oder vielleicht ein praktisches kleines Tool, das Ihnen geholfen hat, ein kreatives Tief zu überwinden? Wir würden uns freuen , davon in den Kommentaren unten zu hören !