Hi, ich bin der Chris, der Neue im Frontend-Team bei der joocom und in meinen ersten Blog-Beitrag möchte ich eine Möglichkeit zeigen, wie man Seiten mit längeren Texten schnell Benutzerfreundlicher gestalten kann. Dazu lassen wir uns durch jQuery aus den Überschriften unseres Content-Bereiches dynamisch eine Sprungmarken-Navigation generieren.
Typografie auf mobilen Geräten
Im Umgang mit responsive Design und Mobilen Webseiten bleibt auch ein Aspekt der Gestaltung wie immer von sehr hoher Bedeutung, die Typografie.
Gerade hier muss man viele Besonderheiten noch genauer betrachten als schon beim normalen Webdesign.
Posted in Grafik & Design
Tagged Fonts, Mobile, responsive, Schriftarten, Typografie
Leave a comment
Tutorialreihe R-Type Flashgame selbst machen
Servus und hallo alle miteinander, heute möchte ich mal für alle werdenden Softwareentwickler eine Tutorialreihe beginnen, mit der ihr ein einfaches Flashgame bauen könnt, welches im Stil von dem alten Spieleklassiker R-Type angelehnt ist. Ich werde das Tutorial in mehrere Parts aufsplitten und dies immer die kommenden Wochen ergänzen.
Posted in Allgemein
Leave a comment
Das Metro Style Design (Flat Design)
Der Metro Design Style (Flat Design) und die damit zusammenhänge Bildsprache wurde erstmalig von Microsoft mit seinem neuen Betriebsystem Windows 8 released und kommt seitdem auf bedeutenden Produkten wie Zune, dem Windows Phone, Xbox sowie natürlich Windows 8 zum Einsatz und wird auch in den kommenden Produkten von Microsoft Einzug halten. Kernmerkmal des Metro Design Style ist das Entfernen von allen überflüssigen Designelementen und visuellen Spielereien und die gleichzeitige Hervorhebung des Inhalts. Dadurch wird eine sehr prägnante Leichtigkeit erhalten, die darauf abzielt, den Endbenutzer auf den Inhalt und die Interaktion mit dem Inhalt zu fokussieren.
Als weiteres Kernmerkmal soll das Erlebnis des Designstils und seiner verbundenen Einfachheit auf allen Endgeräten nahezu gleich sein – egal ob Smartphone, Tablet oder Desktop. Die Prägung des Metro Design Stils hat nicht nur Vorteile in der Bedienbarkeit von Produkten und Anwendungen, sondern durch die kontinuierliche Implementierung in zahlreiche Anwendungen wird der Benutzer an die Oberfläche und seinen Umgang damit gewöhnt, was das Erlebnis – gerade von neuen Produkten – deutlich vereinfacht. Der Endbenutzer muss damit nicht stetig neue Designkonzepte erlernen.
Wie bereits der Name “Metro Style Design” andeutet basiert die Gestaltung der Oberfläche auf Inspirationen von allgemein gültigen Typografien und Symbolsprachen wie man sie beispielsweise von Flughäfen, Bahnhöfen oder U-Bahn Stationen kennt. Kräftige Farben, einfache Symbole und abstrakte Unterteilungen erzeugen eine einfache und klare Designsprache, die nahezu keine Fehldeutungen zulässt. Reisende auf der ganzen Welt profitieren von dieser abstrakten Designsprache – unabhängig von lokal gesprochenen Sprachen oder kulturellen Eigenheiten. Das Metro Style Design oder auch Flat Design genannt nutzt diese Effekte um dem Benutzer eine simple und leicht zu bedienende Anwendung, Website, etc. zur Verfügung zu stellen.
Herausforderungen für Designer
Die Herausforderungen für Screendesigner sind beim Metro Style Design größtenteils in der Reduktion auf den Inhalt zu finden. Visuelle “Verschönerungen” sind nur mit Vorsicht einzusetzen und Usability in den Vordergrund zu stellen. Der Inhalt gewinnt als Designelement immer mehr Wertigkeit und wird gezielt in den Vordergrund gestellt. Typographie, Aufbau und Anordnung gewinnen deutlich mehr an Bedeutung und müssen abgewägt und passig ausgerichtet werden. Ein weiterer Gesichtspunkt spielt die Farbwahl. Klare Abgrenzungen, die Bedeutungen von Farben und die optische Abgrenzung von Farben können allgemeingültig eingesetzt werden. Das Metro Style Design (Auch Flat Design) genannt, nutzt zur Unterteilung von Inhalten gezielt Flächen und Farben.
Gelungene Beispiele für das Metro Style Design
Posted in Grafik & Design
Tagged Flat Design, Metro Design, Metro Style, Metro Style Design, Microsoft, Windows 8
Leave a comment
Timeline mit timeline.js erstellen
Möchte man mehrere Ereignisse über einen bestimmten Zeitraum (z.B. Releases von Versionen und deren Datum) darstellen, bietet sich nichts mehr an als eine Timeline und mit timeline.js geht das sogar richtig einfach.
Posted in Frontend Entwicklung
Leave a comment
Tutorial: UI Flat Design – Newsbeitrag für Blog – Teil 1
Hallo! In diesem Tutorial zeige ich euch, wie man einen Newsbeitrag für seinen Blog im “UI flat design” designen kann. Aussehen wird es am Ende ungefähr so:
openssl: Passwörter als Parameter vermeiden
Passwörter als Kommandozeilenparameter sind immer ein potentielles Sicherheitsleck, da sie in der Ausgabe von ps, top, htop, etc. für alle Nutzer eines Systems zu sehen sind.
Continue reading
Produkt-Screenshots mit PlaceIt erstellen
Hi Freunde des gepflegten Web-Codings, heute mal ein tolles Tool für das Erstellen, Weiterreichen und Präsentieren von Produkt-Screenshots. PlaceIt von Breezi hilft euch dabei, eure Sites und Projekte ins rechte Licht zu rücken. Continue reading
Photoshop: Poster-Effekt
Hi und herzlich Willkommen zum Grafik Blogpost am Freitag,
heute möchte ich euch einen sehr einfachen Foto-Effekt vorstellen, welchen man auf viele Weisen, Wallpaper, Flyer oder Poster, einsetzen kann. Im Endeffekt werden wir den Ausschnitt einer Person, durch Überlagerungen, durch ein Panorama Foto ersetzen.
Posted in Grafik & Design
Tagged Hannover, Photomanipulation, Photoshop, Screendesigner, Tutorial
Leave a comment
LayoutIt – A Bootstrap Interface Builder
Heute möchte ich nur kurz das Tool LayoutIt vorstellen.
Bei dem Tool handelt es sich um ein kick-off Werkzeug für Frontend-Projekte, mit dessen Hilfe sich auf Grundlage von Bootstrap mittels Drag & Drop ein Interface-Template zusammenstellen lässt. Dieses Template kann dann als Grundlage für die eigentliche Seitenumsetzung genutzt werden.
Es befindet sich zwar aktuell noch in einer Beta-Version, aber bietet schon jetzt die Möglichkeit, sich aus drei vorgegebenen Basis-Templates, eines als Grundlage auszuwählen. Auch ist es möglich, mit einem komplett leeren Template zu arbeiten und das Interface nach seinen eigenen Vorstellungen aufzubauen.