WordPress-Websites: 14 großartige Beispiele
Diese erstaunlichen WordPress-Websites zeigen das Beste dieses beliebten CMS. Als WordPress 2003 zum ersten Mal veröffentlicht wurde, galt es als grundlegendes Blogging-Tool für Amateure. Sehr schnell nahm es Fahrt auf und wurde zu einem vollwertigen CMS, das jetzt Millionen von Standorten auf der ganzen Welt versorgt. Seitdem haben Kreative die Grenzen des CMS erweitert, um komplexe und schöne WordPress-Websites zu erstellen.
Um Ihnen genau zu zeigen, was dieses unglaubliche CMS leisten kann, haben wir einige der besten WordPress-Websites ausgewählt. Wenn dieser Artikel Sie dazu inspiriert, Ihre eigene WordPress-Website zu erstellen, diese Wordpress-Tutorials hilft Ihnen beim Einstieg, oder wenn Sie ein fantastisch aussehendes Portfolio erstellen möchten, lesen Sie unseren Leitfaden zu den Besten WordPress-Portfolio-Themen .
01. Rafal Bojar
Designer Zhenya Rynzhuk benutzte WordPress als semi-kopfloses CMS mit Vue.js für das Frontend, um diese ansprechende Fotografie-Portfolio-Site für zu erstellen Rafal Bojar . Es verfügt über eine Homepage, auf der eine Vorschau ausgewählter Geschichten angezeigt wird, ein übersichtliches Raster, in dem alle Arbeiten von Bojar vorgestellt werden, und eine 'Essenz' -Seite, auf der die Philosophie und der Ansatz des Fotografen erläutert werden.
'Das Ziel war es, den Besuchern ein einzigartiges Erlebnis zu bieten und Rafals erstaunliche Werke zu präsentieren', sagt Rynzhuk. Das Paar diskutierte einige verschiedene Backend-Optionen, entschied sich jedoch für WordPress, damit die Site einfach zu verwalten und regelmäßig mit neuen Projekten aktualisiert werden kann.
Neben WordPress und Vue.js verwendet die Site einen S3-Bucket zum Speichern von Daten, die über Cloudfront bereitgestellt werden, um schnelle Ladezeiten zu gewährleisten. Rynzhuk machte auch Gebrauch Grundgestein und Hendrik-Jan de Harders Skelettansicht sowie GSAP für die Animationen.
02. Adel Vakula
Adel Vakula ist ein international bekanntes Model aus der Ukraine, und diese Werbeseite für sie kommt von Landsleuten Yabloko Ideenstudio , der es nicht nur entworfen und codiert hat, sondern alle Illustrationsarbeiten erstellt hat. Das Ergebnis ist ein wunderbares visuelles Fest, das eine Reihe malerischer Vignetten mit unserer glamourösen Heldin umfasst.
Aus der sich öffnenden Zuckerwatte-Wolkenlandschaft, die buchstäblich mit subtilen Animationen sprudelt, Vakula Sterne in verträumten Porträts, die eine charismatische Persönlichkeit demonstrieren sollen. Sie überblickt wunderlich die Pariser Nacht auf einem Wasserspeier, der gleichzeitig als YouTube-Wiedergabetaste fungiert, nachdem sie einen New Yorker U-Bahn-Zug von einem Bahnsteig mit einer Busking-Katze aus erwischt hat. Besuche in Venedig und Ibiza bieten eine ebenso exzentrische Kulisse für Instagram- und E-Mail-Links, in denen selbst Cocktail-Robben zum Verfolgen einladen. Es ist eine Zunge in der Wange, aber mit so viel Charme und Technik gemacht, dass Sie nicht anders können, als sich zu verlieben. Sogar der Mauszeiger ist herzförmig.
Ein herausragendes UI-Element, das auf WordPress CMS basiert, ist ein unterhaltsamer Bereich, in dem Sie Outfits per Drag & Drop auf eine virtuelle Vakula ziehen können, um echte Modellierungs-Snaps anzuzeigen. Wenn es um Visitenkarten für mögliche Castings geht, schlägt diese eine denkwürdigere Pose ein als die meisten anderen.
Autor: Mark Billen
03. Mittleres Kind
Preisgekrönter Sandwichladen mit Sitz in Philadelphia Mittleres Kind brauchte eine Website, die zu ihrer skurrilen, unprätentiösen Atmosphäre passte. Full-Service-Design- und Technologiestudio Selbstbewusst stellte sich der Herausforderung und schuf eine Website, die auf einer vollständig maßgeschneiderten Website basiert WordPress-Theme mit Bauholz und ACF - eine Kombination, die Studio-Partner Mike Wagz als 'Game-Changer für ernsthafte WordPress-Theme-Entwickler' bezeichnet.
Self Aware nutzte auch die neuesten Webtechnologien, um ein optimales Erlebnis zu bieten: Das Layout wurde mit erstellt CSS-Raster , und ein Servicemitarbeiter Zwischenspeichert statische Assets, einschließlich CSS- und JavaScript-Dateien, um die anfänglichen Ladezeiten zu beschleunigen.
'Das mittlere Kind versprüht Atmosphäre aus jeder Ecke', fügt Wagz hinzu. 'Es heißt Kunden aus allen Lebensbereichen mit genau der richtigen Menge an Spaß, Kitsch und Eigenart herzlich willkommen. Ich denke, dieses Design ist erfolgreich, weil wir diesen Geist einfangen und ins Web übersetzen konnten. '
Schauen Sie sich diese oben an, um Ihr perfektes Werkzeug zu finden Website-Ersteller . Die besten Preise finden Sie weiter unten.
04. Sea Harvest
Beim Fischmarkt in Canberra Meeresernte brauchte eine neue Markenidentität und eine intelligente digitale Präsenz, um sich anzupassen, und wandte sich an die australische Web- und Markenagentur ED . Die WordPress-Website bietet ein auffälliges Layout im Zeitungsstil mit vielen skurrilen Details.
'Wenn wir an Meeresfrüchte denken, erinnern sich viele von uns daran, wie sie mit Freunden und der Familie am Strand Fish and Chips gegessen haben', sagt Designer Cam Tidy. 'Oft wickelten diese Imbissbuden Ihr Essen in eine Zeitung ein, daher fühlte es sich natürlich an, dies als visuelle Idee zu untersuchen.'
Das Replizieren eines statischen Drucklayouts im Web war jedoch nicht ohne Herausforderungen. Das Team verwendete CSS Flexbox, um Inhalte neu zu positionieren und dabei unabhängig von der Bildschirmgröße einen gleichmäßigen Abstand beizubehalten. Nahezu jede Messung basiert auf einer reaktionsfähigen Skala mit REM-Einheiten, wodurch die Kontrolle über Typ und Bildproportionen beim Skalieren des Browsers erleichtert wird.
Die Lieblingsfunktion von Entwickler Bryn Shanahan ist die Tatsache, dass Benutzer auf der Website 'zeichnen' können, auch über eine interaktive Wortsuche . 'Wir haben dies erreicht, indem wir die Site mit einem HTML5-Canvas-Element abgedeckt haben, auf das dann die Zeichnungen des Benutzers gezeichnet wurden', erklärt er.
ED verwendet WordPress für viele seiner Website-Projekte und findet es benutzerfreundlich und intuitiv für Kunden. '[WordPress hat] eine einfache Back-End-Entwicklung, die mehr Zeit lässt, sich auf das Front-End zu konzentrieren, um das Design zum Leben zu erwecken', fügt Entwickler Adam Forcucci hinzu. 'Die Fähigkeit zu Machen Sie es mit der WP Rest API kopflos ermöglicht es uns, Frameworks wie React zu verwenden, die zum Kern unserer zukünftigen Entwicklung auf der Plattform werden. '
05. Maxim Shkret
Sitz in Sankt Petersburg, Russland, Maxim Shkret ist ein freiberuflicher digitaler Künstler. Seine beeindruckende WordPress-Website verbindet das Portfolio mit dem E-Commerce-Markt und startet eine neuartige Spendenaktion.
Die Site wird mit einer Reihe von vier 3D-Modellen oder digitalen Skulpturen geöffnet, die um 360 Grad gezogen und gedreht werden können. Schwein, Wüstenfuchs, Einhorn mit doppelter Natur und schmelzender Panda können nach links und rechts gedreht werden, um einen bevorzugten Winkel zu erzielen. Durch Klicken auf die Schaltfläche 'Diese Aufnahme kaufen' können Besucher ein digitales Bild in verschiedenen Dimensionen zu verschiedenen Preisen erwerben. Der Erlös wird wieder in die Umwandlung jedes digitalen Modells in reale physische Skulpturen mithilfe eines fünfachsigen 3D-CNC-Bearbeitungsprozesses fließen. Es ist eine gute Idee, um Mitwirkende einzuladen, und zeigt, wie ein Crowdfunding-Ansatz mit einer typisch passiven Erfahrung verbunden werden kann.
Zu den Produktionsguthaben für Websites gehört das New Yorker Sochnik Design Studio, aber die raffinierten Bemühungen der Benutzeroberfläche überschatten niemals Shkrets Talent. Dies beinhaltet einen einfachen Galerie-Abschnitt mit Standbildskulpturen, die sich durch einen wässrigen Filter kräuseln und winken. Es ist ein subtiler Effekt, erhöht aber den Sinn für Textur, den Shkret jedem Stück geben möchte.
06. KOBU
Es überrascht nicht, dass Portfolio-Websites weiterhin einige der fruchtbarsten Grundlagen für kreativen Ausdruck und Inspiration im Internet bieten. Diese Online-Telefonkarte für die portugiesische Agentur KOBU folgt diesem Ethos mit einer geschmackvollen, zurückhaltenden WordPress-Website, die immer noch voller Charakter ist. Die technische Arbeit, die sich selbst als 'Markenlabor' bezeichnet, das keine Angst vor Experimenten hat, zeigt Vorstellungskraft über Komplexität.
Über eine Reihe von Elementen erhalten wir eine Erinnerung daran, wie CSS und SVG für maximalen Frontend-Charakter kombiniert werden können. Die absolute Positionierung wird verwendet, um charmante Drahtgittermotive zu überlagern, die Linien zwischen fetten Hintergrundfarbblöcken aufzubrechen und Abschnitte miteinander zu verknüpfen. Ein gelooptes HTML5-Videopanel erhält eine eindeutige wackelige Kante, wobei eine SVG-Form als Maske darüber positioniert wird, bevor der Randradius von Fallstudienbildern halbiert wird, um kreisförmig zu werden. Die Website nutzt die Karussellbibliothek von slick.js, um das KOBU-Team mit einem Büropferd durch die Mitte der Hauptseite zu 'traben'.
Der Zenit ist jedoch wahrscheinlich das Bit, das wir zuerst sehen und das sich auf einem welligen Header im Lava-Lampen-Stil öffnet, der durch Manipulieren von SVG-Pfaden erzeugt wird. Die Verwendung des Plugins anime.js, einer polyvalenten JavaScript-Animations-Engine, ist nicht zuletzt ein auffälliger Trick zum Erstellen einer Farbpalette.
Autor: Mark Billen
07. Form
bilden ist ein strategisches Designstudio mit Sitz in New York. Die Homepage verfügt über ein animiertes Augapfel-Design, das dem Cursor des Besuchers auf dem Bildschirm folgt, während überlagerter Text alle Dinge durchläuft, die noformat erstellen kann. Um den Augapfel zu kreieren, erkundete das Team zunächst das Design in After Effects CC Ian Brewer, Gründer und Creative Director von noformat, erklärt, bevor er mit three.js eine interaktive Version erstellt.
'Wir haben Vertex- und Fragment-Shader verwendet, um das GPU-Rendering zu optimieren, und es pulsieren lassen und das Noformat-Logo im Inneren flashen lassen', fährt Brewer fort. 'Wir haben dann Nachbearbeitungseffekte angewendet, um ein organischeres und weniger 3D-Erscheinungsbild zu erzielen, indem wir die Kanten verwischt und den Glanzlichtern Blüte verliehen haben.'
Der Rest der Website wird den Auswirkungen dieser ersten Seite gerecht, mit raffinierten Übergängen beim Scrollen und subtilen Parallaxeeffekten, die technische Fähigkeiten demonstrieren, ohne die Benutzerfreundlichkeit zu beeinträchtigen.
'Wir haben WordPress für unsere Website ausgewählt, um den Start zu beschleunigen und die Flexibilität zu gewährleisten', erklärt Brewer. 'Im Laufe der Jahre haben wir unsere eigenen Bibliotheken und modulbasierten Bearbeitungssysteme aufgebaut, mit denen wir eine Site schneller als jede andere CMS-Lösung erstellen oder bearbeiten können.'
08. Femme und Fierce
Niederländisches Erlebnisdesignstudio Wunderland hat E-Commerce mit Sass für geliefert Femme und Fierce . Das auffällige Farbschema der WordPress-Website liefert die Markenbotschaft des Online-Modehändlers von Anfang an. Animierte 'Aufkleber' - wirbelnde Lutscher, stoßende Pfeile, leckende Lippen - erzeugen ein freches Gefühl und sollten mit der Snapchat / Instagram-Generation in Resonanz stehen, auf die sich dieser Bereich richtet.
09. Püree Maison
Kartoffelpüree ist ein kreatives und strategisches Studio mit Sitz in Paris. Die WordPress-Website zeichnet sich vor allem durch die sonnig-gelben animierten Kritzeleien aus, die beim Schweben erscheinen, langweiligen Markenaussagen Persönlichkeit verleihen und Übergänge beleben. Sie helfen dem Besucher auch dabei, sich zurechtzufinden, und ermutigen ihn, die Website zu erkunden und mit ihr zu interagieren.
10. Wir sind es praktisch
Wenn es in Ihrem Unternehmen darum geht, Menschen zu begeistern, die mithilfe der virtuellen Realität emotionale Geschichten erzählen, benötigen Sie eine Website, die Menschen in Ihre Arbeit einbezieht. Und Boutique VR Studio Wir sind es praktisch hat das geschafft und noch mehr. Sein Standort, gebaut von Herdl verwendet in WordPress zahlreiche modernste Techniken, einschließlich WebGL und 360-Grad-Video, um Ihnen einen unwiderstehlichen Eindruck von den umfassenden Diensten zu vermitteln. Schauen Sie sich die VR-Testfahrten für Audi mit unerwarteten Promi-Gästen an.
11. Asaro
Asaro ist ein Anbieter einzigartiger Abenteuererlebnisse und unterhaltsamer Reisen für Superyachtgäste auf der ganzen Welt. Im Rahmen eines umfassenderen Rebrandings für Unternehmen wurde diese Website von der in Bristol ansässigen Agentur entworfen und entwickelt Grünes Chamäleon .
Basierend auf einem benutzerdefinierten WordPress-Framework, um die fortlaufende Bearbeitung von Inhalten für den Kunden zu vereinfachen, werden Besucher auf eine Entdeckungsreise voller Charme entführt. Subtile Scroll-Effekte sind sauber mit einer interaktiven gepunkteten Linie verknüpft und zeichnen den Navigationsfortschritt so auf, wie ein Yachtkapitän Karten markieren könnte. Benutzerdefinierte CGI-Renderings wurden als grafische Darstellung verwendet Asaro Exklusives Serviceangebot angesichts des Mangels an fotografischen Vermögenswerten aufgrund des privaten Charakters der Veranstaltungen.
„Die Art Direktion wurde von einer Mischung aus Wassertropfenfotografie und Theaterplakatdesign inspiriert“, erklärt Kreativdirektor Tom Anderson. „Wir haben die Ästhetik des Fotografie-Stils geliebt und waren der Meinung, dass sie gut zum zugrunde liegenden nautischen Thema des Projekts passt.“
Die Zugriffsgeschwindigkeit reagierte nicht nur auf kleinere Bildschirme, sondern war auch eine Motivation für die Optimierung der Leistung. Da Bootsbewohner der Konnektivität des Meeresnetzes ausgeliefert sind, sind die Ladezeiten auf Desktop, Tablet und Handy eher kürzer als unruhig.
Autor: Mark Billen
12. Design Museum Dänemark
Erbaut von der in Kopenhagen ansässigen Design- und Markenagentur Dumme Studios , die Seite für Dänemark Design Museum präsentiert nicht nur die Archive, Sammlungen und Forschungsergebnisse des Museums, sondern präsentiert es auch in einem knallaktuellen Stil. Von der Eröffnungs-SVG-Animation des Museumslogos bis hin zum Blickfang Parallaxen-Scrollen und stimmungsverbessernde Palettentausch beim Scrollen durch den Inhalt ist die perfekte Online-Präsenz für ein wichtiges Designziel.
13. Katy Perry
Pop-Prinzessin Katy Perry verwendet kein anderes als WordPress, um ihre offizielle Website zu hosten. Die Website konzentriert sich verständlicherweise auf visuelle Elemente und Social-Media-Hinweise und verwendet hochwertige Portfolio-Aufnahmen des Künstlers, um ein mutiges Statement abzugeben. Scrollen Sie nach unten, um Tourdaten, Merch und mehr anzuzeigen, oder verwenden Sie die Symbole, um weitere Informationen zu erhalten.
Es ist eine saubere, aber nervöse Seite, die es schafft, das unverwechselbare Bubblegum Pop-Image des Künstlers mit einer benutzerfreundlichen, glänzenden Mag-Style-Funktionalität zu verbinden. Vorbei sind die Zeiten geschäftiger Bandseiten mit zu viel Animation und Musik, die man nicht aufhalten kann. Perrys Website beweist, dass Sie mit nur einem einfachen weißen Hintergrund und leicht navigierbaren Links viel Persönlichkeit einbringen können, sodass Fans die Möglichkeit haben, einfach und bequem zuzuhören, zu sehen und zu lernen.
14. Der Tintenbehälter
Kao Collins wurde 1989 als Collins Inkjet gegründet, ein Ein-Mann-Unternehmen, das Tinte für den kontinuierlichen Tintenstrahldrucker von Kodak liefert. Heute ist Kao Collins einer der weltweit führenden Anbieter. Und wenn Sie noch nie wirklich über Tinte nachgedacht haben (abgesehen vom Fluchen, wenn Ihr Drucker leer ist), wird Kao Collins 'Website The Ink Tank dies ändern.
Gebaut von DBS Interactive , Der Tintentank ist eine auffällige WordPress-Site, die alle Register zieht, um Ihnen aktuelle Nachrichten aus der Tintenindustrie zu liefern und einige der kreativen Möglichkeiten aufzuzeigen, wie Unternehmen und Künstler derzeit Tinte verwenden. Das Highlight für uns ist der Abschnitt 'Geschichte des Druckens': ein wunderschöner Parallaxen-Single-Pager voller Animationen und Effekte, der Sie von Tontafeln bis zum heutigen Hochgeschwindigkeits-Single-Pass-Druck begleitet und nach vorne blickt bei einigen der zukünftigen Druckmöglichkeiten.
Weiterlesen:
