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?



TE_160125_Webdesign

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!




PAGE_032016_website_mitKontur

Kommentieren

Einfach mit dem PAGE Account anmelden oder Formular ausfüllen

Name *

Email *

*Pflichtfeld

Ihr Kommentar *

 
 

Das könnte Sie auch interessieren