Tag: webdesign

201310Dez

Type Rendering Mix: Web-Schriftarten richtig glätten

Individuelle Schriftarten auf einer Website sind in erster Linie etwas Positives, da sie dem angedachten Design gerecht werden und für mehr Harmonie sorgen, wenn die gesamte Typografie entsprechend abgestimmt wurde. Allerdings werden Web-Schriftarten nicht in allen Browsern und Betriebssystemen gleich dargestellt. Ich hatte vor einiger Zeit berichtet, da seit Windows Vista und einer aktivierten Hardwarebeschleunigung das GDI-Rendering durch DirectWrite ersetzt wurde. Unter Mac OS X und iOS kommt das Font-Rendering "Core Text" zum Einsatz, das alle Schriftarten etwas kräftiger darstellt. Unter Android und Linux wiederum werden Texte durch FreeType angezeigt.
Um den verschiedenen Betriebssystemen und Browsern gerecht zu werden, kann das Skript Type Rendering Mix genutzt werden: Hiermit werden 2 CSS-Klassen auf das "html"-Element angewendet, die Aufschluss über das Font-Rendering (Rasterizer und Anti-Aliasing-Methode) geben.

Type Rendering Mix - Apply CSS based on the text rasterizer and antialiasing your browser is using

Wenn in einem Webdesign also eine eigene Schriftart verwendet wird, kann die CSS-Klasse "tr-coretext" beispielsweise so angepasst werden, das hier ein leichterer Schriftschnitt verwendet wird (font-weight). So kann in den unterschiedlichen Systemen ein einheitliches Schriftbild besser gewährleistet werden.

201308Dez

Headroom.js: Kopfleiste durch Scrolling ausblenden

Der Effekt dürfte mittlerweile schon auf der einen oder anderen Website gesichtet worden sein: Wird durch das Scrollen der Seite ein gewisser Punkt erreicht, verschwindet der Kopfbereich der Seite. Oft handelt es sich dabei um eine kompakte Navigation, die wichtige Elemente beinhaltet. Dieser Effekt kann also nützlich sein, wenn ein Menü innerhalb eines bestimmten Bereichs der Seite angezeigt werden soll.
Wer zu dem Effekt das passende JavaScript-Modul sucht, ist mit Headroom.js gut bedient.

Headroom.js - Hide your header until you need it

Das Plugin kann direkt in JavaScript, in Verbindung mit jQuery oder mit AngularJS verwendet werden. Es bietet verschiedene Optionen wie eine Toleranz, einen vertikalen Offset sowie Klassen, die beim Eintreffen der Ereignisse vergeben werden. Mehr Details gibt es bei GitHub.

201314Nov

Webdesign: Kostenlose Bootstrap-UI-Kits von PixelKit

Twitters Bootstrap-Framework zählt mittlerweile zu einem der beliebtesten CSS-Frameworks, die fertige UI-Komponenten, ein Grid-System, Glyphicons sowie JavaScript-Module enthalten. Inzwischen gibt es auch etliche Modifizierungen und Erweiterungen, die auf dem Framework aufbauen. Von PixelKit gibt es diesbezüglich fertige UI-Kits, die bei GitHub kostenlos heruntergeladen und eingesetzt werden können (CC- und MIT-Lizenz). Die UI-Kits enthalten Stile und Grafiken für alle denkbaren Standard-Komponenten wie Dropdown-Menüs, Login-Bereiche, Switches, Fortschrittsbalken, Kalender-Widgets, Slider, Video-Player, Tabs, Graphen, Suchfelder und Drehregler (Knobs).

Kostenloses PixelKit Bootstrap-UI-Kit - Vanilla Cream

Momentan gibt es 5 fertige PixelKit-Bootstrap-Themes: Vanilla Cream, Dark Velvet, Arctic Sunset, Modern Touch und Metro Vibes. Die UI-Kits verwenden Grafiken und sind nicht Retina-tauglich. Der Quellcode existiert in CSS- und LESS-Form.
Mittlerweile gibt es natürlich auch für Bootstrap-Themes einen Markt: Kostenpflichtige UI-Kits finden sich bei WrapBootstrap und kostenlos geht es mit Bootswatch.

201308Nov

GlyphSearch: Icons in bekannten Icon-Sets finden

Der Einsatz von Web-Schriftarten und damit verbundenen "Icon Fonts" wird immer selbstverständlicher, da moderne Webbrowser OpenType- und TrueType-Schriftarten nativ unterstützen. Firefox und Internet Explorer ermöglichen individuelle Schriften schon seit geraumer Zeit durch WOFF und EOT und somit sind entsprechende Icon Font-Pakete stark im Trend: Sie heißen Font Awesome, GLYPHICONS oder Ionicons und enthalten etliche Symbole, die kostenlos verwendet werden können.

GlyphSearch: Search for icons from Font Awesome, Glyphicons, and Ionicons

Ein Überblick der enthaltenen Icons findet sich auf den Websites der Icon-Set-Anbieter. Wer in allen Sets zugleich eine Suche ausführen möchte, kann dazu GlyphSearch verwenden. Eine kleine Suchmaschine, welche den Suchbegriff auf die genannten Icon-Pakete anwendet und entsprechende Treffer liefert.

201303Nov

Colourcode: Farbschemata entwickeln und exportieren

Adobe Kuler stellt längst nicht mehr das einzige Online-Werkzeug für das Erstellen von interessanten Farbschemata dar: Mit ColorJack, ColorBlendy, ColorRotate und dem Color Scheme Designer stehen bereits vielseitige Alternativen zur Auswahl.
Aktuell gibt es eine weitere Entwicklung auf diesem Gebiet, die Colourcode getauft wurde und das Definieren von großen Farbflächen über Mausbewegungen erlaubt.

Colourcode - Find your colour scheme

Das Konzept ähnelt dem Piknik Color Picker und wurde erweitert um vordefinierte Farbkontraste (monochrom, analog, triadisch, komplementär, etc.), wobei sich Farbkombinationen auch frei erstellen lassen.
Interessant dürften vor allem die Export-Möglichkeiten für Webdesigner und -entwickler sein, da sich die Farbschemata im SCSS- oder LESS-Code abspeichern lassen. Alterativ können die Farben auch als PNG-Grafik heruntergeladen oder als permanenter Link verwendet werden. Bei GitHub gibt es übrigens den Quellcode der Online-Anwendung.

201302Nov

Webdesign: Sammlung mit über 4000 Foto-Texturen

Viele moderne Websites überzeugen durch ein gut abgestimmtes Design, das in der Regel mit feinen Texturen und Mustern aufgewertet wird. Obwohl das "Flat-Design" durch Windows 8 und iOS 7 im Trend liegt, besteht hier die Gefahr, in der Masse unterzugehen. Daher sollten immer Muster oder Foto-Hintergründe in Betracht gezogen werden: Wenn eine Textur auch nur dezent im Hintergrund zu sehen ist, so macht dies einen großen Unterschied zu einer farbigen Fläche oder einem Farbverlauf. Umso wichtiger ist eine große Auswahl an verschiedenen Foto-Texturen, die im Netz zwar vertreten, aber nicht immer leicht zu finden sind.
Bei TonyTextures.de gibt es nun einen Bereich, in dem über 4000 kostenlose Texturen zum Download bereitstehen und sowohl privat als auch kommerziell genutzt werden dürfen.

TonyTextures.de - Kostenlose Foto-Texturen für Webdesign und Architekturvisualisierung

Die Foto-Texturen stehen in einer Auflösung von durchschnittlich 1600 × 1200 Pixeln zur Verfügung und können direkt heruntergeladen werden. Ein Blick in die Sammlung lohnt sich auf jeden Fall, da sich hier interessante Motive aus unterschiedlichen Bereichen finden: Erde, Sand, Holz, Stein, Metall, Moos, Gebäude, Wolken, Landschaften, Innenräume, Pflanzen oder Wasser stellen Einige der Kategorien dar, in welche die Sammlung untergliedert ist. Viel Spaß beim Stöbern.

201323Mai

Unheap: Übersichtliche jQuery-Plugin-Sammlung

Die Zahl der neu entwickelten jQuery-Plugins dürfte täglich ansteigen. Durch die einfache Architektur ist es sehr einfach, ein jQuery-Plugin zu schreiben. Mittlerweile gibt es bereits große Online-Sammlungen, die in Kategorien unterteilt sind und ein breites Spektrum an Plugins beinhalten.
Eine etwas modernere Auflistung findet sich auf der Seite Unheap: Auch hier wurden die verschiedenen Plugins in Kategorien unterteilt und lassen sich so besser unterscheiden.

Unheap - A tidy repository of jQuery plugins

Unheap ist sehr gut strukturiert und beinhaltet aktuelle Plugins für alle denkbaren Bereiche. Von Navigationen über UI-Widgets bis hin zu Video-Playern und Galerien. Es gibt eine Suchfunktion und neue Plugins können einfach über ein Formular eingereicht werden.
Weitere Sammlungen dieser Art, die nicht auf jQuery beschränkt sind, wären JSDB.io oder Jster.

201309Mai

Adobe: Creative Suite ab Juni per Creative Cloud

Die Meldung dürfte langsam, aber sicher die Runde machen: Adobe hat in einer offiziellen Pressemitteilung und auf dem Photoshop.com-Blog das kommende Abo-Modell für seine Creative Suite vorgestellt: So werden die primären Anwendungen des Software-Pakets künftig nur noch in Verbindung mit einem monatlichen Abo der Creative Cloud zu haben sein. Die Programme werden dann den Zusatz "CC" tragen. Dazu zählen künftig also Photoshop CC, Flash Pro CC, InDesign CC, Illustrator CC, Dreamweaver CC, Premiere Pro CC und After Effects CC.

Adobe Creative Cloud

Schon mit der HTML5-Animationssoftware Edge Animate wurde eine Anwendung eingeführt, die nur über die Creative Cloud erhältlich ist. Ein Einzelprodukt in der Creative Cloud kann für 24,59 EUR im Monat genutzt werden, während alle Apps für 61,49 EUR monatlich bereitstehen. Mehr dazu in der Tarifübersicht.
Die Creative Cloud ist nicht zu verwechseln mit webbasierten Anwendungen: CC-Anwendungen an sich funktionieren weiterhin offline wie bisher, lediglich der Download erfolgt über die Cloud. Bis zum 31. Juli 2013 bietet Adobe bestehenden Kunden 40% Rabatt bei einem Upgrade auf CC-Produkte an. Die Creative Suite 6 (CS6) ist damit das letzte Produkt seiner Art, das noch als Box-Version erhältlich ist. Im Photoshop.com-Beitrag werden übrigens auch die Neuerungen von Photoshop CC aufgelistet, zu denen Features wie "Camera Shake Reduction", "Intelligent Upsampling" oder "Smart Sharpen" gehören. Interessant für Webdesigner ist die Möglichkeit, den Radius abgerundeter Ecken auch noch nachträglich einstellen zu können.