Design, Interaction, Code & Teaching

019 Unser neues Projekt: lernox – ein App zum Lernen im 21. Jahrhundert

logo-lernox-neues-lernen-leben

Das Motto von unserem neuen Projekt lernox ist neues Lernen leben. Ich freue mich riesig, dabei zu sein. Wir wollen LehrerInnen, Schüler und Eltern unterstützen, digitale Lern- und Lehrmaterialien in der Schule zu nutzen.
Unser Ziel ist eine schöne, intuitive App zu entwickeln, die hilft, mit freien Bildungsmaterialien aus dem Internet zu lernen. Das Netz ist voll von wertvollen Wissensbausteinen. Wir müssen diese nur finden, entdecken und beurteilen können und brauchen Tools, um mit diesen Materialien Unterrichts- und Lernmodelle zu gestalten.

Weiterlesen


018 Designer im Gespräch

Ihr seid herzlich eingeladen, 10 bis 13.30 Uhr, Donnerstag 13. Juni, Hdpk Berlin – Eintritt frei,
Maren von Stockhausen | Editorial Design, Dan Abbot – Storm Thorgerson Studios | Music Artwork, Frank Müller | Interaction Design und Ursel Schiemann | Corporate Design

Update 18.06:
SlideShare-Präsentationen von Maren, Dan, Frank und Ursel online

Designer im Gespräch

Plakatgestaltung: Jendrik Drazetic

Ich wundere mich immer wieder, wie unterschiedlich die Lebensläufe von uns Designern sein können. Verschiedene Motivationsgründe, Tätigkeitsfelder und Arbeitsweisen – einfach toll! Es gibt so viele Nischen, Möglichkeiten und vor allem Spaß an diesem Beruf. Ein bisschen von dieser Vielfalt wollen wir in den Gesprächen mit vier Designern am Donnerstag entdecken. Vor allem interessiert mich der kreative Weg mit allen Höhen und Tiefen, der zu den ausgezeichneten Arbeiten führt. Nicht selten sehen wir nur die glänzenden Ergebnisse eines Projektes und bekommen zu wenig darüber mit, welche Entstehungsprozesse und Methoden dahinter standen.

Weiterlesen


017

“It begins with an idea and then it becomes something else.”

Pablo Picasso

Angst vor einem weißen Blatt Papier? Kein genialer Einfall und die Abgabe drängt? Wartet nicht bis Ideen vom Himmel fallen! Wie Ideen entstehen, wie ihr Kreativitätstechniken anwendet und wie man das Beste aus Ideen macht – fast wie Picasso – bereiten Zwetana vom Connecting Design Blog und ich in einer neuen Flipped-Classroom-Serie vor.

Folgt mir auf Twitter, Google+ oder Facebook, damit ihr den Anfang der Ideation | Idea Generation Serie nicht verpasst.


016 AUFRUF: Deine Stimme für meinen Kurs Web-Applications beim MOOC-Wettbewerb

pepe-juergens-forming-behaviour-gestaltung-konzeption-web-apps

Massiv Open Online Course (MOOC) sind kostenlose, frei zugängliche Onlinekurse. Ich möchte einen MOOC zu dem Thema Web-Applications entwickeln. Wie ihr Web-Applications konzipiert, wie ihr visuelle Lösungen für eure Ideen gestaltet und wie ihr davon Prototypen entwickelt. Mein Zielpublikum seid ihr: Designer, Publizisten, Entrepreneure, Entwickler ohne große Vorkenntnisse in der Konzeption und Gestaltung von Web-Apps.

Doch damit ich diese Vorhaben realisieren kann, brauche ich eure Hilfe! Der Wettbewerb MOOC-Production-Fellowship stellt für die zehn besten MOOC-Kurse die Finanzierung für die Realisierung zur Verfügung. Stimmt für meinen Kurs Forming Behaviour – Gestaltung und Konzeption von Web-Applications und lasst uns zusammen diesen Kurs im nächsten Winter machen.

Update 23.06.2013: Vielen Dank für eure Unterstützung!


015 7 vielsprechende Portfolios der Design-Klasse

deinen-blick-fesseln
Wir wissen alle, wie schwer es ist, sich selber zu präsentieren und unser persönliches Erscheinungsbild zu gestalten. Und das erste mal ist natürlich das schwerste Mal. 7 Studenten meiner Design-Klasse an der HdpK Berlin stellen sich vor: das erste Erscheinungsbild mit Online-Portfolio, Akzidenz-Ausstattung Visitenkarte und Briefbogen.

Weiterlesen


014 CSS3-Keyframe-Animation – CSS3-Animations Part III

skizze-css-animation-bird-flying

Wenn ein Bild mehr als 1000 Worte sagt, was kann dann eine Animation alles ausdrücken? Oft übernehmen einfache Animationen die Erklärung komplexer Zusammenhänge auf Webseiten oder in Applications. Animationen werden als Mittel der Nutzerführung eingesetzt – gerade im mobilen Kontext. Blinkende Buttons fordern uns zur Interaktion auf und ein kreisender Pfeil zeigt uns, dass wir auf das Nachladen von Daten warten müssen. Animationen spielen eine zentrale Rolle im Web- und Application-Design.

Im dritten Teil der Serie stelle ich CSS3-Animations vor. Bei Animationen denken die meisten an Adobe Flash, doch leider wurde Flash nicht für iOS oder Android entwickelt. Zum Glück können wir Web-Animationen auch mit CSS3 realisieren, die sowohl auf modernen Browsern als auch auf Smartphones und Tablets wunderbar flüssig laufen.

Weiterlesen


013 CSS3-Transform: verschieben, drehen, skalieren und verzerren – CSS3-Animations Part II

css3-transform-skizze

Schriften senkrecht setzen, Parallelogramme, Sterne und andere Shapes nur aus HTML-Elementen erstellen und Bewegungseffekte für Transitions und Animations – im zweiten Teil der Serie erkläre ich, wie ihr mit CSS3-Transform-Styles HTML-Elemente visuell verändern. In den Beispielen zeige ich insbesondere wie ihr Transforms mit Transitions kombiniert, um den klassischen 3D-Flipped-Image-Effekt zu erzeugen, und wie ein Bildermenü mit der Maus aufgedeckt wird.

Weiterlesen


011 Die Evolution der Informationsgesellschaft

Digitale Technologien entwickeln sich im Sauseschritt. Meine Stadt Berlin ist (endlich) Startup-Metropole und wir können diese digitale Welt von übermorgen heute mitgestalten! Zeit einmal durchzuatmen, zurückzublicken und zu verstehen, wie sich unser Alltag durch das Internet in den letzten 20 Jahren revolutioniert hat.

Zwetana Penova betrachtet in ihrem Artikel 23 Jahre online – menschliches Verhalten im Kontext Internet die vier wichtigsten Veränderungen: Zugang zu Informationen, Lernen, soziale Netzwerke und Konsum, um einen Ausblick auf innovative Entwicklungen der Zukunft zu geben. Dabei steht immer der Mensch im Mittelpunkt und nicht die Technologie.

Hier geht’s zum Artikel.


010 CSS-Position: relative, absolute und fixed – Positionieren, Raster & Layouts Part III

css-skizze-position-absolute-relative-fixed

In diesem dritten Teil positionieren wir HTML-Boxen komplett außerhalb des HTML-Flows. Andere HTML-Elemente haben keinen Einfluss mehr auf die Platzierung der Boxen auf dem Screen. Die Boxen werden einfach absolut zu einem bestimmten Nullpunkt positioniert und bleiben dort stehen.

Weiterlesen


009

“Der Wert einer Idee liegt in ihrer Umsetzung.”

Thomas Alva Edison

An Ideen mangelt es nie, doch nur wenige werden Realität. Wie oft bekomme ich zu hören: “Wie findest du denn …?”, “Was hältst du von …?”, “… ist das nicht richtig gut?” und danach passiert gar nichts mehr.
Weiterlesen


008 Flipped Classroom Interaction Design

Zu Interaction Design gehört auch ein Verständnis für Technologie, weil es das Material ist, mit dem wir arbeiten. Die Stichworte sind HTML5, CSS3 oder auch Javascript. Ein Interaction Designer sollte seine konzeptionellen Ideen prototypisch realisieren können. An diesem Punkt beginnt die Flipped-Classroom Serie.

Weiterlesen


007 Box-Model und Float – Positionieren, Raster & Layouts Part II

Layout Positionieren mit Float-Eigenschaft und CSS-Box-Model

Diese Flipped-Classrooom Serie erklärt das Positionieren von HTML-Elementen mit CSS für Raster und Layouts.

In diesem zweiten Teil stelle ich die CSS-Eigenschaft float vor. Float ist die wichtigste CSS-Eigenschaft, um HTML-Elemente wie DIVs, Überschriften H1, H2 etc. außerhalb des normalen Textflusses zu positionieren. Mit Float lassen sich alle grundlegenden Raster wie mehrspaltige Layouts und Galerien realisieren.

Weiterlesen


006 CSS-Styles und Selectors – Positionieren, Raster & Layouts Part I

CSS-StyleSheets und Selectors zum Positionieren, Raster und Layout

Diese Flipped-Classroom Serie Positionieren, Raster und Layouts erklärt die Grundlagen der Gestaltung mit CSS: Angefangen bei den Selectors – HTML-Elemente zum Stylen auswählen – über das Boxmodel – die Größeneigenschaften von Elementen – bis zur Positionierung mit float. Dieses Grundwissen ist der Ausgangspunkt für kreatives Webdesign und für die Konzeption von pixelgenauen Rastern und Seitenlayouts.

Weiterlesen


005 Javascript-Weiche für Browser und Screengrößen – Responsive CSS Part II

Javascript-Weiche für iPhone und Smartphone

Diese Flipped Classroom Serie beschäftigt sich mit Webpräzensen für unterschiedliche Screengrößen und Devices von Smartphone bis Cinema-Display. Der erste Artikel erklärt ein Responsive Basislayout.

In diesem Artikel stelle ich die zweite Strategie vor: Für individuelle Devices oder unterschiedliche Bildschirmgrößen separate Webseiten anzeigen. Mehrere Seiten zu pflegen kann sehr aufwendig werden. Manchmal führt allerdings kein Weg daran vorbei, zum Beispiel wenn die normale Webseite auf Flash basiert und mobile Devices das Flash-Format nicht unterstützen. Adobe hat die Entwicklung des Mobile-Flash-Players komplett eingestellt.

Weiterlesen


004 Responsive-Design mit CSS3-Media-Queries – Responsive CSS Part I

Responsive Design mit CSS3-Mediaqueries für iPhone und Smartphone
Der klassische Computer ist nur noch ein Medium von vielen, um im Internet zu surfen. Im Alltag ersetzen Netbook, Tablet und Smartphones den sperrigen Computer und bald werden LCD-Fernseher und andere Gadgets diese Palette erweitern. Diese Medien unterscheiden sich dramatisch in der Auflösung und Größe der Screens von 3.5” eines SmartPhones bis 27” des Cinema-Displays. Für eine Webpräsenz bedeutet das: Es sollte eine Layouts-Strategie für große und kleine Screens konzipiert werden, um den Content mediengerecht zu präsentieren.
In dieser Serie stelle ich grundlegende Ansätze und die Realisierung vor. HTML5, CSS3 Media-Queries und ein paar Schnipsel Javascript machen aus einem starren Layout eine dynamische Webseite, die auf dem Smartphone und dem Cinema-Display richtig gut funktioniert.

Weiterlesen


003 Gesetz der Erhaltung der Komplexität

Besser als Pigor kann man es nicht ausdrücken: Technologie und Applications plagen uns an jeder Ecke!

Jede Application hat ein nicht reduzierbares Maß an Komplexität. Komplexität kann sich nicht einfach in Luft auflösen. Larry Tesler vom Apple Development Team formuliert das im Law of Conservation of Complexity: Every application must have an inherent amout of irreducable complexity. The only question is: who will have to deal with it?

Weiterlesen


002

“Git rid of half the words on each page,
then get rif of half of what’s left.”

Steve Krug

Steve Krug’s Third Law of Usability ist kein Pläydoyer für minimalistisches Design. Es geht nicht um Stilfragen, sondern um Usability.

Weiterlesen


001 Was ist denn hier los?

Viele wissen es schon: Neben der Studioarbeit bin seit April Professor für Interaction Design. Ein guter Zeitpunkt einen Blog zu starten über das, was ich jetzt seid 15 Jahre mache: Design, Interaction & Coding — geplant sind auch E-Learning, Tutorials und Screencasts (nicht nur für meine lieben Studenten). Also angeschnallt und los geht’s.

Auf der Agenturseite WELTFORMAT findet ihr weiterhin meine Projekte und Arbeiten.

Ich hoffe, ihr seid dabei!