Dank der Macht von JavaScript sind die Wörter „dynamisch“ Und “Illustration” gelten nicht mehr ausschließlich für Flash-basierte Websites.
Jetzt, da dynamisches HTML in den am häufigsten verwendeten Browsern Realität ist und es viele ausgefallene JavaScript-Bibliotheken gibt, die die Verwendung erleichtern, können CSS-Websites einen Teil des guten Rufs zurückerobern, den Flash so sehr genießt.
Von diesen neuen JavaScript-Bibliotheken jQuery hat sich aufgrund seiner Benutzerfreundlichkeit, seines Funktionsumfangs und seines anfänglichen Fokus auf visuelle Einzigartigkeit zu einem der am weitesten verbreiteten entwickelt.
Hier sind 24 clevere Beispiele für Website-Designs mit jQuery und Illustration.
1.Formular Fünfundfünfzig
Merkmale: Ändern der Kopfzeilenillustration; mehrere kleine Diashow-Fenster.
Beschreibung: Diese Website verfügt nicht nur über viele wirklich gute Designinhalte, sondern jQuery wird auch auf vielfältige Weise verwendet, um das Erscheinungsbild und die Benutzerfreundlichkeit der Website zu verbessern. Fügen Sie einen sich regelmäßig ändernden illustrierten Hintergrund und einige nette kreisförmige Schnittstellensteuerelemente hinzu und Sie haben eine wunderschöne Verbindung von jQuery und Illustration.
Homepage mit Header-Abbildung:
Linke Spalte mit aktivierten Tags:
2. Gefroren
Merkmale: Vertikales und horizontales Schieben.
Beschreibung: Abgesehen von den großen, bunten Kreisen mit Zahlen fielen mir vor allem die illustrierten Profilbilder auf. Also habe ich sie angeklickt. Dann geschah die Magie: vertikale und horizontale Fensterschattierungen, die eine ganze Reihe von Blogeinträgen mit eingebetteten Vimeo-Videos öffneten. Der dauerhafte Fußzeilenverlauf ist ein interessanter Effekt, wenn Sie nach unten scrollen.
Große Kreise und Autorenillustrationen auf der Startseite:
Vertikal expandierender Inhalt:
Die Illustrationen des Autors werden erweitert, um Blogeinträge und Videos anzuzeigen:
3. iPhone-Modell
Merkmale: Drag & Drop, Targeting
Beschreibung: Wenn Sie jemals darüber nachgedacht haben, eine App für das iPhone zu erstellen (und welcher Webentwickler hat das nicht getan?), dann ist dies möglicherweise eine Website, die Sie sich ansehen sollten. Sie können damit skizzierte oder am Computer gezeichnete Elemente der Benutzeroberfläche per Drag-and-Drop auf einen skizzierten oder am Computer gezeichneten iPhone-Umriss ziehen. Auch wenn das Design recht schlicht gehalten ist, handelt es sich um einen innovativen Einsatz von Illustrationen, der bisher nur mit Flash möglich war.
Computergezeichneter iPhone-Editor:
4. Florida gedeiht
Merkmale: Mouseover mit Transparenz, Diashow
Beschreibung: Die brillanten Farben und Details des abgebildeten Baumes auf dieser Splash-Seite ziehen sofort die Aufmerksamkeit auf sich. Klicken Sie auf eine der Kategorien, die vom Baum abzweigen, und Sie erhalten nicht nur beschreibende jQuery-gesteuerte Inhalte, sondern auch einen völlig anderen Baum. Scrollen Sie nach unten und Sie sehen eine schöne zentrierte Diashow und eine Fußzeile, die das natürliche Motiv in den Untergrund bringt.
Vollständige Ansicht der Startseite mit großem Baum, Diashow und Fußzeile:
Baum „Benutzerfreundlichkeit“:
5. Tea Round App
Merkmale: Diashow, kleinere Animation, verschiebbare Objekte
Beschreibung: Vielleicht liegt es an mir oder an einem Zeichen dafür, dass Apple brillante Designer hat, aber ich mag Websites, die iPhone-Fotos zugeschnitten haben. Diese Website verfügt über eine animierte Website mit einer Diashow auf dem Bildschirm, die durch Bewegen der Maus über einige gut gestaltete Schaltflächen ausgelöst wird. Der abgerundete Helvetica-Typ passt gut zum Design des Telefons und der Tasten. Die Illustrationen zum Thema Tee auf der Seite und in den Screenshots der App verbinden alles.
Animationen innerhalb der iPhone-Grafik auf der Seite:
Das Popup-Fenster zeigt den Bildschirm der App an:
Ein weiterer Bildschirm der Tea Round-App, dargestellt in der iPhone-Grafik:
6. Mindestens haltbar bis
Merkmale: Bildschirmpositionierung, Navigationsanimation
Beschreibung: Wenn Websites jQuery-Steroide verwenden könnten, wären dies die Barry Bonds des Webs. Bei all der dynamischen Optik könnte diese Website leicht mit einer Flash-Website verwechselt werden. Nach sorgfältiger Prüfung werden Sie jedoch feststellen, dass die Seite weder Flash ist noch aus Programmiersicht komplex ist. Aber die Erkenntnis, dass von Flash keine Spur vorhanden ist, wird sich tief in Ihre Psyche einprägen.
Weitere Sachen in geschweiften Klammern:
Animation
Es ist immer eine Überraschung, ein Website-Design zu finden, bei dem DHTML zur Erstellung der Animation ausgewählt wurde. Das Beste für mich ist, dass ich es auf meinem iPhone sehen kann. Ich bin mir sicher, dass das nicht der Hauptgrund dafür ist, dass die Designer Flash und seine animationsfreundlichen Tools ignoriert haben. Ich weiß nicht, wie sehr sie sich beim Codieren ihrer Animationen auf jQuery verlassen haben, aber sie mussten irgendeine sadistische Tendenz gehabt haben, um das hinbekommen zu können.
7. Toris Auge
Merkmale: Origami-Vögel fliegen horizontal.
Beschreibung: Wer denkt schon daran, Origami auf einer Webseite zu verwenden? Und wer denkt schon daran, blaue Origami-Vögel zur Darstellung von Tweets anstelle der üblichen blauen Illustration zu verwenden? Und wer denkt schon daran, Tweets zu animieren? Die Antwort auf diese Fragen lautet: Die Schöpfer von Tori’s Eye. Wenn Sie eine Website mit einer dieser Funktionen erstellen, erhalten Sie etwas völlig Originelles. Für diese Entwickler reichte es nicht aus, alle diese Funktionen zu haben. Sie trafen die kontraintuitive Entscheidung, die gesamte Animation ohne Flash zu erstellen!
Origami-Twittervögel fliegen über eine Landschaft:
8. Taschen
Merkmale: Diashow und Fußzeilenanimation mit einfarbigen Symbolen.
Beschreibung: Der Einsatz von jQuery wird hier am deutlichsten, wenn die Slideshow durch einen Klick im Navigationsbereich ausgelöst wird. Der große Leerraum, die schwarze Schrift und die passenden Symbolillustrationen sorgen für eine gut aussehende Website. Aber siehe da, eine Animation in der Fußzeile hat seit Ihrer Ankunft nicht aufgehört zu funktionieren. Klicken Sie mit der rechten Maustaste auf die durchgehend schwarzen Animationen und entdecken Sie das Geheimnis des Dauerfilms der Website: Sprites und DHTML.
Große Symbole, die über den gesamten Inhalt der Diashow verteilt sind:
Die Fußzeilenanimation läuft kontinuierlich, unabhängig davon, wo Sie sich auf der Website befinden:
9. Kidd 81
Merkmale: Header-Animation, die horizontal verläuft.
Beschreibung: Die farbenfrohen Winterzeichnungen hier ziehen sofort Ihre Aufmerksamkeit auf sich und das Design ist bis zur Fußzeile durchgehend. Wie einige dieser anderen Websites, die jQuery zum Animieren von Objekten verwenden, scheinen die fließenden Bilder auf den ersten Blick nicht von Flash zu unterscheiden. Das Tüpfelchen auf dem i sind jedoch die ziehbaren „Wow! Ich kann nicht glauben, dass man diese ziehen kann“-Symbole.
Animationen für die Kopfzeile der Startseite:
Eine Fußzeile mit dem gleichen illustrierten Thema:
Der Store-Bereich hat den gleichen Charakter und die gleichen Farben:
Vertikales Scrollen
Einige JavaScript-Tools sind in der Lage, einen reibungslosen Bildlauf zwischen Abschnitten einer Seite auszulösen. jQuery ist natürlich mehr als fähig, diesen Effekt zu erzielen, und zumindest einige der Websites in diesem Abschnitt gehen diesen Weg. Dynamisches Scrollen ist ein schöner Effekt, aber in Kombination mit kreativen und detaillierten Illustrationen ist die Funktion nur ein Teil des Gesamtbildes.
10. Tomas Pojeta
Merkmale: Himmel, Ozean, Unterwasser.
Beschreibung: Wie einige andere Websites in diesem Abschnitt verwendet Pojeta ein Motiv, das von großer Höhe bis unter die Oberfläche reicht. Der obere Teil der Website befindet sich im Weltraum mit seiner sehr detaillierten Rakete und seinem Affen. Scrollen Sie nach unten und Sie werden Außerirdische und Ballons in der unteren Atmosphäre sehen. Weiter unten befindet sich mitten im Wasser ein wie eine Osterinsel aussehendes Stück Land, das zu einer Unterwasseransicht mit einem U-Boot führt. Jede Illustration passt und die Übergänge sind nahezu nahtlos.
11. Morphix
Merkmale: Weltraum, Himmel, Land, Untergrund.
Beschreibung: Morphix beginnt ebenfalls mit etwas Action in der oberen Atmosphäre, geht dann aber zu Land statt zum Meer über und endet mit einem Cutaway im Untergrund. Der Stil ist offensichtlich unterschiedlich, aber die Illustration für jede Ebene erstreckt sich wie die letzte über die gesamte Breite der Seite und vermittelt so den Eindruck eines Horizonts. Und auch hier ist der Übergang vom Himmel zum Untergrund fließend, vor allem beim dynamischen Scrollen.
Obere Atmosphäre, mit Portfolio:
Erdgeschoss, mit Kühen und Wolkenkratzern:
Unterirdisch, mit Baumwurzeln und Murmeltier:
12. GANDRWeb
Merkmale: Verschiedene Infografiken.
Beschreibung: Im Gegensatz zu den beiden vorherigen Websites verwendet diese Infografiken anstelle von Zeichen, Landschaften und Hintergründen. Jeder Abschnitt der Seite erläutert die zugehörige Grafik. Wenig überraschend befindet sich unten auf der Seite ein großes Webformular. Eine rein verkaufsbezogene Website, die so viele gute Illustrationen verwendet, ist selten. Die durch jQuery ausgelösten Übergänge verleihen der Nachricht Glanz.
Infografik mit Erläuterungen zu Vorteilen und Preisen:
Infografik zur Erläuterung des Designprozesses:
13. Orman Clark
Merkmale: Wolken, Boden und Flugobjekte
Beschreibung: Wie die ersten beiden Websites in diesem Abschnitt beginnt auch die Website von Orman Clark mit dem Himmel, aber die große Seite bleibt bis zur Fußzeile beim Wolkenhimmel, wo wir den Boden erreichen. Ein auffälliger Unterschied zwischen dieser Seite und den meisten anderen in diesem Artikel ist die feste Position der Hauptnavigation und Illustration. Dies wird durch die Sternenexplosion oben im Hintergrund betont, die das schwebende Ei hervorhebt. Die Website bietet außerdem eine gut integrierte jQuery-Diashow für das Portfolio.
Biplane- und jQuery-Portfolio-Diashow:
Webformular, Fußzeile und feste Navigation:
14. Dreamerlines
Merkmale: Verschiedene Collagen.
Beschreibung: Die Dreamerlines-Website verfolgt einen diskreten Ansatz. Wie bei GANDRweb verfügt jeder Abschnitt über eine eigene Grafik, die nur durch Leerzeichen mit den benachbarten Abschnitten verbunden ist. Jeder Abschnitt ist jedoch einzigartig, detailliert, farbenfroh und aufmerksamkeitsstark. Umfangreiche Illustrationen, großer, fetter Text und Hintergrundfarben geben den Ton an.
Webformular umgeben von vielen Bildern:
15. Geselliger Snack
Merkmale: Draht, Vögel und Erde.
Beschreibung: Das Himmelsmotiv wird nie alt, und Designer können aus einer Vielzahl von Paletten wählen, um ihren Horizont einzufärben. Der Horizont von Social Snack ist etwas verschwommen, mit ausgeprägten Grün- und Brauntönen. Vögel sitzen auf Drähten, die vertikal über die Seite verteilt sind, um Abschnitte zu trennen. Den Abschluss der Website bildet ein Dach. Obwohl der Blog nicht über einen reibungslosen jQuery-Scroll verfügt, verdient der unterhaltsame, illustrierte Header mit niedlichen Charakteren Erwähnung.
Die Farbpalette und das Vogelmotiv oben:
Die Rahmen für die Teamfotos hängen an einem Vogeldraht:
Niedliche Charaktere im Blog-Bereich:
Diashow
Eine der häufigsten und bekanntesten Anwendungen von jQuery ist die ehrwürdige Diashow. Wenn nach einem Mausklick Inhalte über den Bildschirm gleiten und kein Flash gefunden werden kann, handelt es sich wahrscheinlich um jQuery. Diashows finden Sie überall auf Unternehmenswebsites, Landingpages, Agenturportfolios und E-Commerce-Websites. Sie sind so allgegenwärtig. Nachfolgend finden Sie einige Beispiele für Diashows, die durch scharfe Illustrationen lebendig werden.
16. GoSiteWave
Merkmale: Vertikale Diashow mit horizontaler Navigation und attraktiven Symbolen.
Beschreibung: Die vertikal scrollende Diashow in Kombination mit den Symbolen und Bildern ist hier die eigentliche Geschichte. Von Diashows wird erwartet, dass sie horizontal scrollen, daher ist hier das Gegenteil ein Blickfang. Die leuchtenden Blau- und Orangetöne, die glatten, abgerundeten Knöpfe und der dunkle Hintergrund mit geschickt platzierten Lichtstreifen verstärken den Effekt. Wenn die Icons nicht so gut gemacht wären, hätte es die Website natürlich vielleicht nicht geschafft.
Foliengrafiken der Startseite:
17. Skizzieren
Merkmale: Horizontale Diashow mit Flash-Filmen, mit vorinstalliertem Inhalt, großem Text und Illustrationen.
Beschreibung: Wenn Sie Gelb mögen, werden Sie diese Website lieben. Diese Diashow enthält große, zugeschnittene Illustrationen, die den gelben Hintergrund intakt halten. Eine zusätzliche Slideshow im Pop-up „Lightbox“ enthält das Portfolio. Habe ich erwähnt, dass die Illustrationen groß waren? Sie nehmen viel Platz ein, sind aber sehr gut gemacht. Die Hintergrundfarbe und die Bilder werden durch die grünen und weißen Navigationselemente akzentuiert, und der scharfe Kontrast stellt sicher, dass die Benutzerfreundlichkeit kein Problem darstellt.
18. Formular fünfundfünfzig
Merkmale: Reibungsloses vertikales Scrollen, dynamisch generierte Blog-Inhalte, Diashow, Hervorhebung der Hauptnavigation,
Beschreibung: Lassen Sie sich nicht von der monochromen Farbpalette und den einfachen Strichzeichnungen täuschen. Diese Agenturseite bietet alles. Reibungsloses vertikales Scrollen, eine feste Fußzeile, die Inhalte überlagert, eine Portfolio-Diashow, dynamisch eingebettete Blog-Inhalte usw. Angesichts all dieser Funktionen ist das, was die Website wirklich auszeichnet, die Gesamtzahl der zufälligen Illustrationen und die Tatsache, dass sie Sind alle ziemlich lustig. In diesem Sinne ist ein Besuch der Website nicht vollständig, ohne das urkomische „About“-Video anzuhören.
Viele Illustrationen im Startbildschirm
Schriftarten passen zum Illustrationsstil
Portfolio-Diashow
Die Titel der Fußzeilennavigation werden beim Scrollen hervorgehoben
Horizontales Scrollen
Im Gegensatz zur Diashow, die normalerweise auf einen Abschnitt einer Website beschränkt ist, erfolgt das horizontale Scrollen (wie hier definiert) auf Browserebene oder fühlt sich zumindest so an. Für dynamisches horizontales Scrollen gibt es nicht so viele gute Beispiele wie für vertikales Scrollen; Aber wie Sie sehen werden, haben Designer, die horizontal denken, eine große Vorstellungskraft.
19. Serienschnitt
Merkmale: Große Illustrationen für Portfolio; horizontales und vertikales Scrollen.
Beschreibung: Diese Diashow ist eigentlich so konzipiert, dass sie den Anzeigebereich des Browsers einnimmt. Sie können nicht nach links oder rechts scrollen, aber ist das wichtig? Die Illustrationen und das Design sind so hervorragend, dass der Entwickler eine kreuz und quer verlaufende, auf dem Kopf stehende oder eine andere unintuitive Navigationsmethode hätte verwenden können, und die Leute würden sich trotzdem die Mühe machen, herauszufinden, was als nächstes kommt. Was wirklich hilft, ist die Größe des Navigationssymbols und die Tatsache, dass die Portfoliofotos und -bilder den gesamten Bildschirm einnehmen.
20. Tyler Finck
Merkmale: Horizontale Übergänge mit aus dem Hintergrund erstellten Animationen.
Beschreibung: Hier ist ein großartiges Beispiel für die Verwendung des Hintergrundbilds zum Erstellen eines Animationseffekts für das dynamische horizontale Scrollen. Die Farbpalette besteht hauptsächlich aus Schwarz und Weiß. Die Schriftarten sind fett und haben an bestimmten Stellen einen dicken, blockigen Hintergrund, und die bildbasierte Schriftart wirkt skizzenhaft. Das Gesamtpaket funktioniert gut.
Eine minimalistische Homepage:
Andere Funktionalität
Einige Websites, die jQuery verwenden, sind nicht einfach zu kategorisieren. Sie verfügen möglicherweise über ungewöhnliche Funktionen, nutzen subtil jQuery oder adaptieren eine gängige Technik auf ungewöhnliche Weise. Vorabladen, automatische Textvervollständigung, Ein- und Ausblenden und das Überlagern von Text über Bildern sind einige der Tricks, die in den letzten Websites dieser Sammlung zu finden sind.
21. Orangefarbenes Etikett
Merkmale: Bild vorab laden.
Beschreibung: Das Vorladen von Bildern ist der Umfang der Verwendung von jQuery durch Orange Label. Wenn Sie nach unten scrollen, werden der Seite Portfolioelemente hinzugefügt (mit einer rotierenden Grafik, die Sie darüber informiert, dass sie vorab geladen werden). Unter dem Gesichtspunkt der Benutzerfreundlichkeit verhindert diese praktische Funktion, dass die Seite automatisch bandbreitenintensive Inhalte lädt. Die Abbildung oben ist groß, farbenfroh, sehr detailliert und ein köstlicher Augenschmaus.
Portfolioelement und Fußzeile:
22. Seidensymbol-Finder
Merkmale: Textvervollständigung.
Beschreibung: Geben Sie den Namen eines Symbols ein und diese Website sortiert die Symbole basierend auf den möglichen Ergebnissen Ihrer bisherigen Eingabe. Die Qualität der Symbole ist ziemlich gut und der Service ist insgesamt recht praktisch. Da es beim Design wirklich um Suchergebnisse geht, gibt es wenig visuelle Ablenkung, was ein großer Pluspunkt ist.
23. Wyniknit
Merkmale: Verblasst.
Beschreibung: Diese Website beginnt mit einer großartigen Löwenzahn-Illustration, einem guten Layout und einer schönen Auswahl an Schriftarten. Die einzige wahrnehmbare jQuery-Aktion ist das Ein- und Ausblenden, das beim Navigieren durch die Registerkarten auftritt. Ein weiteres kleines Stück Himmel ist die Art und Weise, wie die Löwenzahnstiele sowohl die aktiven als auch die inaktiven Registerkarten überlappen. Und wenn Sie sich den Hintergrund genau ansehen, werden Sie einige kunstvolle Windwirbel erkennen, die die schwebende Fauna begleiten.
24. Halo-Agentur
Merkmale: Automatische Diashow mit Hintergrundillustration; Text über Bildern.
Beschreibung: Hintergründe, Hintergründe, Hintergründe. Navigieren Sie durch diese Website und Sie werden eine Vielzahl dekorativer Exemplare voller farbenfroher 3D-Illustrationen finden. Auf ein beeindruckendes Portfolio kann über eine jQuery-Diashow auf der Startseite zugegriffen werden. Alternativ können Sie Informationen zu jedem Element im Portfolio- (oder „Arbeits-“)Bereich über die Texteinblendung auf dem Miniaturbild finden.
Das Portfolio überlagert Bilder mit Text:
Ein weiterer bunter Hintergrund:
Exklusiv für WDD geschrieben von Maurice Wright. Er ist Webentwickler, Designer und Schöpfer von Moluv.com. Seit 2000 ist Moluv eine Design-Inspirationsquelle für kreative Köpfe, die auf der Suche nach den schönsten Websites im Internet sind.
Wie hat jQuery die Art und Weise verändert, wie Sie Ihre Websites entwerfen? Bitte kommentieren Sie unten …
