Der Typetester ist ein kleiner Helfer, den ich schon länger in meinen Bookmarks gespeichert habe. Das Tool umfasst über 2200 Schriften die live miteinander verglichen werden können. Es werden neben den sogenannten „Web Safe Fonts“ (also den typischen Systemschriften wie Arial, Verdana, etc.) auch alle Web […]
Alle Artikel mit dem Schlagwort “web”

CSS Only No.4: Filter Effects & Blend Modes
Die Verwendung von Filter-Effekten wie Grayscale, Contrast, Hue, Brightness oder Blur per CSS sind in der letzten Zeit immer populärer geworden. Nicht zuletzt weil Web-Designer diese Effekte aus professionellen Bildbearbeitungs – und Designtools wie Photoshop kennen und seit jeher anwenden. Auch die CSS-BlendModes (Overlay, Multiply, Screen etc.) […]

CSS Only No.3: Cursor
Die Verwendung von unterschiedlichen Cursor-Typen macht im Webdesign an vielen Stellen Sinn. Sei es das einfache Feedback bei Formulareingaben und Karten oder nur die Verdeutlichung von verlinkten Elementen. Cursor unterstützen auf subtile Weise die Benutzbarkeit und das schnellere Erfassen von Funktionen im Web.

Kleine Helfer No.12: DummyText.com
Quasi der LoremIpsum-Generator für Webentwickler. DummyText.com bietet die Möglichkeit, automatisch Platzhaltertexte in die eigenen HTML-Templates, MockUps oder Webentwicklungsprojekte zu integrieren. Das spart viel Zeit und die Integration ist super simpel.

Artsy – Template
Artsy – ein Portfolio Theme auf Basis von Bootstrap. Bei dem Artsy-Theme habe ich weniger Anspruch auf das erstellen von vollständigen Unterseiten, Shortcodes, etc. gelegt. Vielmehr lag der Fokus auf Gestaltung, Einfachheit und Flexibilität. Rein formal handelt es sich um einen Onepager. Allerdings nicht im klassischen Sinne. Denn hier werden nicht wie […]

EVNT BRND – Template
Wer rastet der rostet! Da beschäftige ich mich doch lieber regelmäßig mit neuen Funktionalitäten und Möglichkeiten im Webdesign. Zwar war es anfangs eigentlich nicht mein Ziel ein komplettes Template zu erstellen sondern eher das Interesse an Bootstrap, Animate CSS, Webfont Icons usw…

Car & Bike Classics
Die Webseite Car&BikeClassics.de gehört einem sehr guten Freund von mir der sich mit seiner typenoffenen KFZ-Werkstatt selbstständig gemacht hat. Neben den üblichen Arbeiten einer Autowerkstatt, fokusiert er sich stark auf die Restauration von Oldtimern (Motorräder, Sportwagen, Kleinbusse, …). Nach der Logo-Erstellung musste nun auch eine Webseite her.

Echtzeitdaten No.5: The Colors of Twitter
Ein Testbild? Der QR-Code2.0? Nein! Auch hierbei handelt es sich um eine Visualisierung von Twitter-Daten in Echtzeit. „The Colors of Twitter“ ist ein Projekt von Charlie Clark, welches Tweets nach der Erwähnung von Farben untersucht und diese dann chronologisch auflistet.

Just Another OnePager
Das sich Onepager als Medium für das digitale Storytelling mittlerweile etabliert haben sollten, begründet sich allein schon durch die Schlagzahl in der sie publiziert werden. Auf BILD.de wurde erneut diese Erzählweise genutzt um den „GROSSEN PFLEGEHEIM PRÜF-REPORT“ zu realisieren. Und wie bei den vorhergehenden Online-Specials […]

Kleine Helfer No.9: Muster & Texturen
Heute eine Sammlung von kleinen Helfern zum Thema Muster und Texturen. Meiner Meinung nach spielen diese in der Webentwicklung seit jeher eine große Rolle. Warum? Weil sie bei geringer Datenmenge die Möglichkeit bieten das Browserfenster füllend mit einer Hintergrundoptik zu versehen!

CSS only No.1: Drawing
A Single Div ist ein Projekt von Lynn Fischer, welches die Möglichkeiten von CSS Drawing aufzeigt. Wirklich beeindruckende Beispiele und gerade in Zeiten des Flat-Designs eine ja auch wirklich realistisch umsetzbare Alternative zu Grafik-Elementen.

Storytelling zum 1.Weltkrieg
Vor 100 Jahren begann der Erste Weltkrieg. BILD begleitet diese „Urkatastrophe des 20. Jahrhunderts“ mit einem ganz besonderen Special, dessen Protagonist der junge Leutnant Fritz Rümmelein aus Niederbayern ist.

Kleine Helfer No.8: EyeQuant
Das Tool EyeQuant liefert eine schnelle und zuverlässige Aussage darüber, wie eine Webseite vom User wargenommen wird. Sogar Mockups oder bestehende Webdesigns können dahingehend analysiert werden. Dies beschleunigt die Valiedierung von Designverbesserungen und spart nicht nur Zeit sondern auch kosten.

Kleine Helfer No.7: guidelin.es
Wer sich unsicher über die Richtlinien der einzelne Social-Networks und Web-Dienstleister ist, findet auf guidelin.es (übrigens eine tolle Domain) alles was er braucht. Unter dem Titel „Find Guidelines on the Web – The fastest Way to Brand Assets“, gelangt man zu den jeweilgen Anbietern und […]

Sterbehilfe-Dossier
Sterbehilfe – in Deutschland ein Tabu-Thema, über das Wenige sprechen wollen. BILD hat es getan und im Oktober vergangenen Jahres den sterbenskranken Gernot Fahl († 69) auf seiner letzten Reise in die Schweiz begleitet. Die Storytelling-Abteilung hat den Bericht inform eines Online-Dossiers umgesetzt. Neben den […]

Kleine Helfer No.4: Am I responsive?
Yes I am! Die Website Am I Responsive? tut genau das was sie verspricht. Einfach die URL eingeben und auf einen Blick sehen, wie die eigene Webseite auf den unterschiedlichen Devices dargestellt wird. Der schnelle Responsive-Test sozusagen. Einfach. Simpel. Ein Kleiner Helfer im Alltag.

Kleine Helfer No.2: CSS Gradient Generator
„Bin ich einmal nicht gut drauf, mach ich einen Farbverlauf.“ Das pflegte ein Gestaltungsprofessor von mir gern zu sagen, wenn er das Gefühl hatte, das der angehende Designer bei seiner Aufgabe zu schnell die Verlaufspalette als Allheilmittel verstanden hat.

Vom Maidan zur Krim
BILD.de bereitete seine komplette Berichtererstattung zur Ukraine in einem Web-Special neu auf. Unter dem Titel „Vom Maidan zur Krim“ entstannt eine Artikelsammelseite, die es dem Leser ermöglicht, den Verlauf der Krise in chronologischer Reihenfolge nachzuvollziehen. Hochwertige Infografiken unterstützen die inhaltliche Tiefe visuell.

Kleine Helfer No.1: User Inter Faces
Von Zeit zu Zeit finde ich im Netz das ein oder andere Tool, welches einem das Leben als Web- oder Interfacedesigner erleichtern kann. Diese kleinen Helferlein, möchte ich hier nach und nach einmal vorstellen. Man darf also gespannt sein, was sich in Zukunft unter dieser […]

Parallax Scrolling Experiment
Was als kleines Experiment begann, endete dann doch in einem ziemlich großen Aufwand. Denn eigentlich wollte ich nur ein wenig mit dem Skrollr von Prinzhorn rumspielen um die Möglichkeiten von Parallax Scrolling zu testen. Das reizvolle an gerade diesem Template ist, das man nicht nur […]

IT’S A BATTLE, STUPID!
Hier das Ergebnis unserer Arbeit bei den Lead Awards 2013. Unter dem Motto „IT´S A BATTLE, STUPID!“ ist eine WebSite mit dem Thema „Die Merkel-Jahre. Eine Ära.“ entstanden, auf die man wirklich stolz sein kann. Bedenkt man das für die Umsetzung lediglich 7 Stunden zur Verfügung standen. […]

were here
Von Zeit zu Zeit kommt es vor das ich Gesichter sehe. Das kann überall passieren. Auf der Straße, auf dem Weg zur Arbeit oder abends in der Kneipe. Für diejenigen denen es genauso geht, soll dieses Portal entstehen.

60 Sekunden Internet
Was passiert innerhalb einer Minute im Internet? Eine ganze Menge! So werden z.B. 2 Millionen Suchanfragen auf Google getätigt, 278000 Tweets abgesetzt und 20 Millionen Fotos auf Flickr angesehen.

Bundestagswahl 2013
Zur Bundestagswahl im September 2013 hat sich das Storytelling-Team von BILD.de ordentlich ins Zeug gelegt und eine eigene „Wahlbühne“ gezaubert. Ziel war es nicht nur die aktuelle Berichterstattung und die Ergebnisse in Diagrammen abzubilden, denn das macht ja schließlich jeder. Vielmehr sollte das Interesse gerade […]

Brut Berlin 1.0
Knapp ein Jahr hat das Redaktionsteam aus Kultur- und Medienmanagement Studenten mit Unterstützung von Mitarbeitern der BILD-APP-Redaktion des Axel Springer Verlages über einem neuen Format für ihr Institutsmagazin gebrütet. Das Resultat kann sich sehen, klicken und be-touchen lassen: Die entstandene Web-APP kleidet Inhalte der Berliner […]

Widget Generator
Der „Widget-Generator“ von BILD.de war von seinem Umfang her eher überschaubar. Dennoch möchte ich dieses Mini-Projekt hier zeigen, da die Umsetzung der animierten Kopfgrafik via Flash (Ja! 2009 war Flash noch das Tool um Animationen im Web vernünftig darzustellen :)) wirklich großen Spaß gemacht hat. […]

Visual Browsing
Diplomthema Interfacedesign ws 2007/08 Die bestehende Nutzung des Internets in Bezug auf userorientierte, assoziative Navigation, stellt sich mit herkömmlichen Browserapplikationen nach wie vor wenig benutzerfreundlich dar. Konventionelle Suchmaschinen stellen die Ergebnisse fast ausschliefllich textbasiert dar. Ein visuelles Erschlieflen von Inhalten wird hierbei nicht unterstützt. Zudem […]

take me to the world
Zum 125. Geburtstag der Kaufhauskette Karstadt lobte die Filiale Karstadt Dessau einen Wettbewerb unter dem Motto „Dessau in die Welt tragen“ aus. Hierzu sponserte die Firma Samsonite 20 Koffer, die verändert, umgebaut, mit entsprechenden Oberflächen oder Inhalten versehen das Motto thematisieren sollten. Das Ziel des […]