Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Listicle

Jeden Monat neu: Freebies, Fonts, Tools und News für Designer

    Jeden Monat neu: Freebies, Fonts, Tools und News für Designer

(Grafik:
photocase/EzraPortent)

So funktioniert modernes CSS, hier findet ihr iOS-10-Design-Kits und viele nützliche, kostenlose Tools.

Damit ihr auch in diesem Monat bestens auf eure Projekte vorbereitet seid, haben wir eine Liste mit verschiedenen Goodies für Designer und Entwickler erstellt.

Wie immer ist alles auf der Liste kostenlos und mit nur wenigen Klicks einsatzbereit. Ob Anfänger oder Fortgeschrittener: Hier ist für jeden was dabei.

Lesenswert

Modernes CSS

css-tipps
(Grafik: tutorialzine.com)

Auf tutorialzine findest du 20 hilfreiche und von der CSS-Community ausgewählte Tipps, die das Coden mit CSS einfacher machen sollen – für Anfänger und erfahrene Coder. Jeder Tipp wird ausführlich inklusive Code-Beispiel erklärt. Unter den 20 Tipps findest du Beispiele für Flexbox, Background-Images, CSS-Reset und viele weitere.

15 inspirierende UX/UI Designer

(Grafik: mockplus.com)
(Grafik: mockplus.com)

Von den Großen lernen und inspirieren lassen: Berry Sarah hat auf Mockplus eine Liste von 15 Designern zusammengestellt, denen du auf Twitter oder ähnlichen Kanälen folgen solltest. Unter den 15 UX- und UI-Designern sind etwa Luke Wroblewski, Designer bei Yahoo, und Joshua Porter, UX-Designer bei Hubspot.

Styleguide: So geht's richtig

(Screenshot: medium.mybridge.co)
(Screenshot: medium.mybridge.co)

Styleguides verraten uns, wie eine Marke optisch nach außen tritt und wie wir mit ihr umgehen. Alles was du über die Erstellung eines Styleguides wissen solltest erklärt Mybridge Design in seinem Artikel.

CSS-Wunder

(Grafik: html5hive.org)
(Grafik: html5hive.org)

Der Artikel zeigt Animationen und Projekte, von denen man mit CSS2 nur hätte träumen können. Seit CSS3 ist die Umsetzung von Animation ohne JavaScript oder Flash leichter denn je. Hier findest du beeindruckende Projekte inklusive Code zum Inspirieren.

Tools

Vectr

(Screenshot: vectr.com)
(Screenshot: vectr.com)

Vectr ist ein kostenloses Vektorgrafik-Tool, das sowohl lokal auf Mac, Windows, Linux und Chromebook als auch als Webapp genutzt werden kann. Die Funktionen und das Interface sind in beiden Versionen identisch. Am 13. September hat Vectr die Beta-Phase verlassen und die Entwicklung soll vorerst ausgereift sein. Das Interface erinnert an Illustrator in vereinfachter Version.

Stocky

(Screenshot: stocky.pro)
(Screenshot: stocky.pro)

Ob für kommerzielle oder persönliche Zwecke, auf Stocky findest du kostenlose Stock-Fotos, Videos Grafiken und Musik, die du in jedem deiner Projekte verwenden kannst. Und falls das Gewünschte nicht dabei sein sollte, kannst du Stocky jederzeit eine Anfrage schicken.

Adioma

(Screenshot: adioma.com)
(Screenshot: adioma.com)

Mit Adioma kannst du schnell und unkompliziert Infografiken, Timelines, Organigramme und vieles mehr erstellen. Mit vordefinierten Icons, Templates und Strukturen wird dein textlastiger Content in kürzester Zeit zu einer anschaulichen Infografik.

UIDB

(Screenshot: uidb.io)
(Screenshot: uidb.io)

UIDB steht für User Interface Database, eine Website, die dir Inspiration zu User-Interface- und User-Experience-Beispielen zeigt. Dich erwartet eine übersichtliche und selbsterklärende Benutzeroberfläche. Über die vorgefertigten Tabs, Filter oder über die Suche gelangst du zu den UI-Beispielen.

Timely

(Screenshot: timelyapp.com)
(Screenshot: timelyapp.com)

Timely ist eine automatische Timetracking-App für Freelancer oder Teams. Mit Timley kannst du all deine Apps in einer App vereinen und organisieren. Nutzen kannst du Timely auf deinem iPhone, Macbook, iPad, iWatch und natürlich im Browser. Android soll demnächst auch unterstützt werden.

Farbpaletten

(Screenshot: color.adobe.com)
(Screenshot: color.adobe.com)

Webfarben stehen für grenzenlose Kombinationsmöglichkeiten. Allerdings kann die Vielfalt an Farben auch zur Herausforderung werden, eine perfekte Farbpalette oder -kombination zu finden. Bei solchen Problemen kann dir dieser Artikel helfen. Wir haben sieben ausgewählte Tools und Websites herausgesucht, mit denen du dir deine Farben individuell zusammenstellen kannst.

Freebies

iOS-10-Kit

(Screenshot: ios10.greatsimple.io)
(Screenshot: ios10.greatsimple.io)

Die offizielle Version von iOS10 ist live und somit auch neue Guidelines für alle iOS-Designs. Das Kit enthält 63 Screens für jede Komponente, vom Homescreen bis zu kleinen Detailanforderungen. Es ist kostenlos für Photoshop, Sketch und Craft erhältlich.

Citysets

(Grafik: citysets.co.uk)
(Grafik: citysets.co.uk)

London, Paris, New York und Sydney, für diese Städte findest du jeweils zwischen 19 und 21 typische Icons auf citysety.co.uk. In jeder Kategorie sind die entsprechenden Wahrzeichen enthalten. In dem Paris-Kit findest du natürlich ein Croissant, ein Baguette und den Eiffelturm. Die jeweiligen Sets sind als Illustrator-, Sketch- oder SVG-Datei kostenlos erhältlich.

Designer Emojis

(Grafik: designcue.co)
(Grafik: designcue.co)

Designer Emoji ist ein aus 45 Vector-Dateien bestehendes Set, die den Alltag und die Person eines Designers wiederspiegeln sollen. Das Set steht kostenlos auf designcue.co zum Download bereit. Unter den 45 Vectoren findest du Designer-Emojis, Hardware-Emojis und Symbole für die Arbeit eines Designers.

Checkout Pages

(Foto: Shutterstock.com)
(Foto: Shutterstock.com)

Eine schnelle Kaufabwicklung ist das A und O beim Online-Shopping. Doch oft hapert es am Design und an technischen Anforderungen. Wie es richtig gemacht wird, zeigt die Website checkoutpages.xyz. Sie zeigt und veröffentlicht die besten Checkoutseiten als Vorzeige-Beispiele. Außerdem findest du auch ausgewählte Pricing-, Store- und Produktpages auf der Website.

Halloween Icons

(Screenshot: behance.net)
(Screenshot: behance.net)

Am 31.Oktober ist Halloween und damit du vorbereitet bist, hat Justyna Stastik auf Behance eine kostenlose Icon-Sammlung für deine Einladungskarten, Plakate oder anderen Projekte online gestellt. Falls du mehr Inspiration benötigst, kannst du dich von sehenswerten Halloween-Designs auf Behance inspirieren lassen.

Fonts

Banaue

(Foto: wildtype.design)
(Foto: wildtype.design)

Banaue ist eine herbstliche Handwritten-Font für den „Homemade-Look“. Die Font hat 104 Schriftzeichen, enthält alle Basic-Glyphen und wird als .otf-Datei geladen. Designt wurde die Schrift von Ieva Mezule.

Portico

(Screenshot: behance.net)
(Screenshot: behance.net)

Eine ebenfalls herbstliche Font ist Portico. Die kostenlose Font soll laut dem Designer so vielfältig wie möglich sein. Und das ist gelungen: Ob für persönliche Applikationen, für Grunge- oder Vintage-Designs, die Schrift lässt sich vielseitig einsetzten.

Phalanx

(Screenshot: behance.net)
(Screenshot: behance.net)

Halloween steht vor der Tür und dir fehlt noch die richtige Font für deine Einladung? Dann ist Phalanx vielleicht die richtige. Eine Vintage-Font, inspiriert von den frühen 1900er Jahren. Die Schrift enthält das Alphabet und Zahlen von 0 bis 9.

Du hast Fonts, News, Freebies oder Tools, die im nächsten Monat hier stehen sollten? Dann schreibe sie in die Kommentare oder mir direkt auf Twitter.

Finde einen Job, den du liebst zum Thema JavaScript, Java

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden