Einzig≠artig – Individuelles Webdesign
Fertige Icon-Sets, Call-to-Action-Elemente, Free-Fonts oder Stockfotos: Wer nutzt sie nicht gerne als Abkürzung, statt selbst Design Patterns zu entwerfen?
Hier finden Sie Links zu den im Artikel genannten Web-Fonts, Icons und Ghost-Button-Beispielen:
Web-Fonts
Mit Web-Fonts für Abwechslung sorgen:
Google Fonts sind kostenlos, sehr modern, kommen aber leider dementsprechend häufig zum Einsatz.
www.google.com/fonts
Adobe stellt Webdesignern über die Edge Web Fonts eine große Bandbreite kostenloser Fonts zur Verfügung.
https://edgewebfonts.adobe.com
Auch Font Squirrel offeriert zahlreiche Free-Fonts fürs Webdesign.
www.fontsquirrel.com
Für gute Lesbarkeit sorgt Eben Sorkins Free-Font Merriweather.
https://ebensorkin.wordpress.com
Schön sind die serifenlose, leicht quadratische Jura von Daniel Johnson und die fette Bevan von Vernon Adams.
www.google.com/fonts/specimen/Jura
www.google.com/fonts/specimen/Bevan
Die leicht exzentrische, serifenlose Capri Pro von Felix Braden und die geometrische serifenlose URW Geometric von Jörn Oelsner gehören zu den vielen neuen Retail-Fonts.
www.myfonts.com/fonts/floodfonts/capri-pro
http://is.gd/urwgeometric
Für Headlines eignet sich der Scriptfont Goodlife von Hannes von Döhren.
ww.hvdfonts.com/#199-goodlife
Persönlicher Webseitenliebling der Typoexpertin Antje Dohmann von PAGE ist Göran Söderströms Trim.
http://lettersfromsweden.se
Icons
Unverbrauchte Icon-Sets
Wer ein wenig auf Dribbble oder Behance wühlt, findet immer aktuelle und unverbrauchte Icon-Sets zu jedem Thema – kostenlos oder zu kleinen Preisen. Einige haben wir für Sie ausgewählt:
Die Flat Icons von Mighty Deals aus Vancouver zeichnen sich durch sanfte Farben aus. Außerdem sind sie kostenlos.
www.behance.net/gallery/22401077/Flat-icons
Das kostenlose Icon-Set der Designerin Réka Tamás aus Budapest besteht aus fein gezeichneten Linien.
http://is.gd/vectorline_rekatamas
Das Set des Grafikdesigners Goran Babic aus Novi Sad bietet
22 Piktogramme rund ums Büro, wie Bleistift, Kugelschreiber, Computer, Notebook, Aktenkoffer et cetera für je einen Dollar.
https://dribbble.com/shots/2282125-Office-Icon-Set
www.iconfinder.com/iconsets/office-29
Von GraphicsFuel kommt ein kostenloser Satz mit 18 im Flat Design gestalteter E-Commerce-Icons. Die in Adobe Illustrator erstellten Symbole sind voll skalierbar und lassen sich zusätzlich zu den farbigen Farbfonds auf hellem oder weißem Hintergrund verwenden.
www.graphicsfuel.com/2015/11/ecommerce-icon-set
Diese 15 nützlichen Warenkörbe stammen vom Stockholmer Designer Alexey Tretina. Das Vektorset gibt es in drei Größen. ae
www.behance.net/gallery/24672579/Free-Shopping-Cart-Icons
Ghost-Buttons
Ghost-Buttons zur Individualisierung
Text- oder Icon-Buttons, die wie Geister vor einem Fullscreen-Hintergrund zu schweben scheinen, liegen voll im Trend. Nutzen Sie Ihre Kreativität, um ihnen eine individuelle Note zu verleihen, beispielsweise ausdrucksstarke Typo oder dezente Animationen und Transitions! Hier einige Anregungen:
Der japanische Romanautor Haruki Murakami spielt auf seiner Website mit Schrift. Der Ghost-Button »Learn More« korrespondiert mit dem Namenslogo in der oberen Menüleiste und signalisiert durch den Hover-Effekt Interaktion.
www.harukimurakami.com
Die Designer der slowenischen Agentur Iuvo haben die Ghost-Buttons auf ihrer Website aufwendig animiert und mit sehr viel Liebe zum Detail gestaltet.
www.iuvo.si
Oft setzen Designer Ghost-Buttons auf Fullscreen-Videos ein, denn aufgrund ihrer Schlichtheit brauchen sie kaum Platz und schränken die Sichtbarkeit des Videos nicht ein. Bei der britischen Webagentur Union Room bleiben sie trotzdem gut erkennbar.
www.unionroom.com
Der sehr zurückhaltende Ghost-Button auf der Website der Werbeagentur Urban Influence aus Seattle überlässt die Bühne ganz dem Video, das den Arbeitsalltag der Agenturmitarbeiter in den Vordergrund rückt.
http://urbaninfluence.com
Bunte Animationen bedecken die Website der polnischen Motion-Design-Agentur Panoptiqm. Trotzdem ermutigen rot geränderte Ghost-Buttons den User zur Interaktion.
http://panoptiqm.com/#Hidden_Crisis-125
Mehr zum Thema »Individuelles Webdesign« erfahren Sie in PAGE 03.2016 im PAGE-Shop!
Das könnte dich auch interessieren
