INTERACTIVE SHOPPING CONCEPTS

Customer: adidas AG

ICONOGRAPHY FOR VISUAL SOLUTIONS

Customer: SIEMENS AG Healthcare Sector

CUSTOM ANIMATED INTERFACES

Customer: ODERSUN AG

1
1

Pretty little things, pretty big impact.

Hi, my name is Knut Hebstreit, a german design professional for mobile and communication in space. I have good knowledge of design fundamentals such as scribbling, typography and composition as well as the technical skills to put those theories in motion. This is my …

– Portfolio –

Responsive_Scene_Contact_King

Responsive Websites

Responsive_Scene_GFK

User Interface Design

140114_BNPP_Comp_Browser-0-00-06-12

Mobile Apps

Illus_GS_Workflow_Studie_gr

Iconography

140114_AutoAct_Comp

Illustration

PinkRibbon-0.00.25.14

Emotional Animatics

Some of my favourite working tools are: Adobe Production Suite, Cinema 4D, Magic Bullet Suite, Vidvox VDMX and various OSC Tools. I am available to hire for 3D and motion design work and constantly looking for new career opportunities and new people to work with.

– Work –

Coaching Scenes

Scribbles for Website Drawing from picture
Char, Coal, Photoshop

Microsite

Marketing Campaign Freelance Art Direction
3D, Design, Animation

3D Configurator

Online Shop for Accessories
Design Lead, Rendering

Infographic

Sales Campaign
Design, 3D

Sometimes i write stuff in my words just for noisy warm places in mind and sometimes i do some stuff for noisy warm places in other minds. Here are the posts i wrote since 2006 that i wrote just for kicks.

– Blog –

140206_Scribble_Feature2

Skizze

By | Best of | One Comment

Alfed Adler, ein bekannter Psychotherapeut und zweitweiser ‘Mittwochabend-Freud-Freund’ lebte von 1873-1934. Er verfasste u.a. “Der Sinn des Lebens” und “Über den nervösen Charakter”. Seine Gedanken und Ansichten sind Grundlage für ein Unternehmen im Bereich Individualpsychologie im Alltag. Für IPA Coaching & IPA Suisse Coaching bin ich nun mit Entwurf und Scribbles für Onlineauftritt und Printmedien beauftragt.

Die zentralen Aufgaben sind:

  • der Seite ein bedienfreundlich-schönes Gesicht zu geben,
  • die Kernsätze zur Arbeit der Coaches mit Merkürdigkeiten auszustatten und
  • “alltägliche Skizzen” als Einladung zum Verweilen zu platzieren.
und ..für mich ein erstes mal, um Skizzen als durchgehendes Stilmittel für einen Onlineauftritt zu nutzen. Für diese ErMUTigung vielen Dank!!

Nach acht Monaten Arbeit (…und einigen Pausen) ist es jetzt soweit: www.ipa-coaching.de geht live. Anbei ein kleines ‘Making-of’, erste Entwürfe, Versuche, Abzweigungen, Festlegungen:




Der Seite sowie allen Beteiligten und Mitwirkenden : alles Gute!!!

Kunde: IPA Suisse Coaching
Leistung: Entwurf & Scribbles für Website, Kommunikationsregeln-Plakate und Visitenkarten.
Joomla-Backend von büro am draht

Idee

By | Best of | No Comments

“Im Rahmen des Projektes “PIC – Playful Interaction Concepts” sollen Wissen und Erfahrungen aus dem Design digitaler Spiele sowie der Gestaltungsphilosophie des User Centered Design (Nutzerorientierte Gestaltung) genutzt und sinnvoll mit dem Entwicklungsprozess von mobiler, betrieblicher Software für kleine und mittlere Unternehmen verschmolzen werden.”

Quelle: PIC – Förderinitiativen Usability des Mittelstandsportals, Bundesministerium für Wirtschaft und Energie

Pic_Logo_Color
Eine neue Wort-Bildmarke sollte die spielerische Idee der Initiative aufgreifen und zu einer merkfähigen Metapher verdichten. Die Idee lag im Raum und wurde konkret von mehreren Beteiligten ausgesprochen.

Die Gestaltung bedarf mehrerer Ansätze. Typografie und spielerische Elemente wurden in schnellen Entwürfen und Skizzen gegenüber gestellt bis ein gemeinsames Verständnis über Gewichtung der Elemente: Schrift, Ball und Schweif vorlag.

Eine Detailabstimmung zu den Themen Abstand und Farbe rundeten die Ausarbeitung ab und führten zu einer positiven Resonanz aller Beteiligten.

Kunde: PIC – Playful interaction concepts
Agentur: Useeds GmbH, Berlin
Leistung: Entwurf und Reinzeichnung

Screen Shot 2013-03-08 at 1.42.59 PM

Exhibition Animation

By | 3D | No Comments

Zwei Beispiele für ein kürzlich realisiertes Projekt im Bereich Referenzen-Animation. Die Animationen zeigen zum einen den Unterschied in der Gestaltung mit Stock-Audio Material (Beispiel 1) und mit einem abgestimmten Sounddesign (Beispiel 2) …. und zum anderen jeweils einen Zwischenstand als Abstimmungs- und Entscheidungsgrundlage für den Kunden.

Beispiel 1: Motion Design mit Stock-Audio

Beispiel 2: Timing Vorschau ohne Spache

Kunde: Spirit Link GmbH
Tools: Photoshop, After Effects, Maxon Cinema4D
in Zusammenarbeit mit Filmmusik & Sounddesign Neumann

2011_LIfeDrawing_Aktsalon

Life drawing

By | Scribble | No Comments

Der Aktsalon ist ein wunderbarer Ort um Menschen kennen zu lernen. Evtl. nicht so hintergründig, wesentlich oder gar emotional. Ganz sicher aber vordergründig – typisch – charakterspeziell. Das Schöne ist zudem, jede Woche, jeden Tag gibt es zumeist ein neues Modell. Jede Woche also eine neue Chance etwas zu lernen.
Heute stand Mayte Modell – sie war stilvoll, körpersprachlich charakteristisch, ihr Blick zugleich fast schon schüchtern..
Ich bin mir nicht sicher, wo ich mit den Zeichnungen überhaupt hin möchte. Angenommen die Perspektiven, das Abbild funktioniert handwerklich halbwegs – geht es nun um das Wesen, den Raum, die Erscheinung oder einfach mal darum im Stil etwas festzulegen. Im Moment macht das Probieren unglaublich viel Spaß!

110404_Aktsalon_Comp_1800

Corporate Design

By | Lab | No Comments

KÏNTEO Embedded Software bat um ein Re-Design für die zentrale Website des Unternehmens. Ein Zusammenspiel aus Interaktion und “Feedbackanimation” soll den Benutzer im Sinne des Wortes zum Umschalten bewegen.

Als Lösung haben wir eine PHP-Seite mit einem Flash10-Include gebaut. D.h. das HTML/CSS steuert also über die Navigation die zentrale Animation. Sofern der User das Flash10-Plugin ablehnt, wird eine reine HTML-Seite angezeigt.

Kunde: Kïnteo, Florin Stoian
Leistung: Entwurf, Screendesign, Animation
Umsetzung & Integration CSS, PHP5: Enrico Gering

mobile-interfaces-2011-creative-workline-35-grd

Mobile App Design

By | Lab | No Comments

es kommt wie es kommen muss – hier nun eine erste Mobile App : der Parking Tracker.
Die Anwendungsfälle: Wo ist mein Auto? Wie finde ich es wieder? Wie viel Zeit bleibt für das Ticket.. und das Design, ganz einfach: Das Pflaster der Straße, das Parkschild, eine freier Stellplatz, die Parklücke. Markant. Einfach. Blau.
Eine Mobile App für Android, im Auftrag von Creativeworkline, IT Consulting & Mobile App Solutions.

Sehr anschaulich auch eine frühe Version mit sog. ‘Parkplatzwächtern’ oder ein Konkurrenzprodukt? Hier zeigen zwei Studenten welche Möglichkeiten ein zukünftiges Parking-System bieten kann, incl. Parkplatz-Zonen, freien Parkplätzen und Orientierung im ‘Urban Jungle’.
Quelle: Youtube

Kunde: creativeworkline
Leistung: Usability Screendesign
Mobile App: Parking Tracker

10_Fototour_Ruinen_Knut_DSC_0070-1

Location Scouting

By | Photography | No Comments

die neu ersteigerte Nikon durfte durch den Sommer einige noch bestehende Berliner Ruinen ablichten und den Fundus interessanter Orte und Bildmotive/Ort erweitertn. Darunter war das ehem. Einwanderer-Wohnheim in B.-Hohenschönhausen, eine, ich glaube, Waffelfabrik in Pankow, die Eisfabrik der ehem. Norddeutschen Eiswerke in Mitte und die ehem. Radarstation auf dem Galgenberg.

auf der Liste der noch zu erkundenden Orte steht derweil das Stadtbad in der Oderberger Str, das Postfuhramt an der Landsberger Alle in Mitte/FHain.

Produktberatung

By | Lab | No Comments

Im Gegensatz zu einer Produktkonfiguration geht es bei einer Produktberatung in der digitalen Welt nicht um das selektierte tunen von Parametern. Hier entscheidet sich der User (in diesem Fall mit Hilfe einer sog. ‘shelf’) für diverse Eigenschaften, Einschränkungen, Benefits oder kurz für Argumente z.B. um sein Wunschnotebook zu finden. Die Berater-Applikation ermittelt aus den gesammelten Daten ein optimales Ergebnis und zeigt Vergleichslösungen als Varianten an.


Die Excentos GmbH ist spezialisiert auf Berater-Applikationen und deren nahtlose Integration in bestehende Online-Shops. Die Anforderungen an das Design in diesem Fall:
1. Entwerfen Sie ein Interface welches ergonomisch und effizient sämtliche Funktionalitäten abdeckt und cool ist.
2. Dieses Interface soll sich variabel passend in ein bestehendes Shop-Design integrieren lassen.


Meine persönliche Meinung zur Erstellung dieser Art von Kreationen: Photoshop ist hier das falsche Tool. Warum? ..ich arbeite in zwei Richtungen: horizontal werden über sog. Frames (also Spalten) diverse Zustände der Entwürfe angelegt, vertikal gibt es die Möglichkeit Texte, Flächen, Buttons ect. wie in Photoshop variabel in Ebenen zu ordnen. Der Vorteil liegt auf der Hand: ich kann Objekte z.B. einen Rahmen um ein komplettes Design in einer Ebene über mehrere Frames platzieren – also quasi ein Element über mehrere Screens verteilen.


An dieser Stelle mag der geneigte Leser auf Möglichkeiten zur Benutzung von Instanzen und verschachtelten Objekten hinweisen… Im Moment des Abstimmens von Farbe, Form und Komposition verschiebt sich (jedenfalls bei mir) auch gerne mal das gesamte Layout und hier ist ganz wichtig durch Gruppierung, Auflösung und Variation an des Pudels Kern zu gelangen und ggf. auch vergleichbar schnell an der Reihenfolge der Screens zu arbeiten. Am Ende des Tages exportiere ich für den Kunden einfach einen Film als Bildsequenz und bei Bedarf auch einzelne Ebenen für die Entwickler.

Kunde: Excentos GmbH
Leistung: Re-Design einer komplexen IT-Oberfläche, Varianten für Marketing und Vertrieb

100504-2_Odersun_Animation_en

3D–Isoflash

By | 3D | No Comments

Hugo Goelder und Martin Christel vereinen Gestaltung und Informationsarchitektur. Ich finde, die Animationen & Designs von Codeluxe bewegen sich zwischen Minimalismus und spielerischer Leichtigkeit – immer hochwertig und immer kreativ. Für den Kunden Odersun habe ich also eine zentrale Animation im genannten Stil für den Relaunch der Unternehmenswebsite geflasht.

Als Idee zum Thema wurde zuerst ein 3D-Setup getestet, welches sich in der Umsetzung aber als zu unflexibel und datenintensiv zeigte. Die zentrale Idee von Hugo war es, für Flash 9 mit isometrischen Mitteln sowie mit Hilfe von Überlagerung, Licht, Schatten, Spiegelung, Layout und Bewegung einen räumlichen Eindruck zu erzeugen.

Kunde: Codeluxe – Christel, Goeldner GbR
Leistung: Animation für Website-Relaunch der Odersun AG

140123_AutoAct_Feature2

Illustration

By | Best of | No Comments

Illustrationen sollen nicht nur begeistern. Auf B2B-Portalen werden Händlern täglich tausende Produkte und Leistungen angeboten. Ein Schaubild mit Text kann dem Händler den richtigen Weg der Bedienung aufzeigen. Die Unterteilung in der Zeichnung stellt die Schritte zur Bedienung übersichtlich dar.

Das Beispiel folgt dem Long-Tail-Ansatz. Hat die Aufgabe ein klares Ziel in einer Kommunikations-Nische? Hat meine Leistung einen klaren Mehrwert gegenüber den Angeboten der Konkurrenz? Es geht um das Suchen und es geht um das ‘sich-zurecht-finden’.

Sicher, es soll gut aussehen und es soll schnell sein.

zz_Layout zee Konfigurator_0007

Screendesign

By | 3D, Best of | No Comments

Produkte können entsprechend ihrer Eigenschaften und Werte angeboten werden. Oder, es kann die Kundenseite nach Einsatzmöglichkeiten und wertbringenden Aspekten gefragt werden.

In diesem Fall ist nicht die komplette Modellpalette von Interesse, aber jene Funktionen und Eigenschaften, die dem Kunden wichtig sind, werden erklärt und beworben.

Unser Layoutraster bietet zur Darstellung einer Produktfamilie funktionale Eigenschaften für Medienintegration. Hier werden Vorteile beschrieben ohne die Absicht, höherpreisige oder günstigere Geräte hervorzuheben.

Kunde: Siemens Healtcare
Agentur: Spirit Link GmbH
Tools: Cinema 4D, Photoshop, Flash

140206_3d_Feature

3D Illustration

By | 3D, Best of | No Comments

Das Abbild eines Unternehmens als Stadt. Gebäude, ein Sadion, der Nahverkehr – beschreiben Leistungen und stehen sinnbildlich für das Selbstverständnis der Mitarbeiter.

Eine Stadt, farblich reduziert, bietet Platz für Informationen. Eine andere Stadt, farblich ausgearbeitet, emotionalisiert. Lizenzfreie 3D Modelle werden mit Details zu einer illustrativen Stadt ergänzt. Perspektiven und Kamerabewegungen erklären Zusammenhänge und Erfolge der Mitarbeiter.

Kunde: Siemens Industries
Agentur: Spirit Link GmbH
Tools: Cinema 4D, Photoshop, After Effects, Flash

Flash Summer Camp 2009 Berlin

By | Lab | No Comments

Am 14.6. wird es am Erkelenzdamm 59 in Berlin Kreuzberg eine Konferenz in erster Linie für Flash-Developer geben. D.h. neben einigen Agenturen und Adobe will die Flash-Gemeinde die neusten Infos in Sachen Flash10, Flex, Papervision, Realtime 3D, Audio und Video sehen und hören .. und, soweit der geneigte Besucher möchte kann er oder sie auch auch einen Vortrag zu Konzept & Design von komplexen Flash-Konfiguratoren so gegen 14.30 geniessen. D.h. ich werde den Vortrag von den dc-days 2008 noch etwas in Richtung Entwicklung anpassen und hoffe hilfreiche Beispiele und Tips zur Herangehensweise bei der Konzeption solcher Projekte in Petto zu haben.

Links und Anmeldung über die Flex User Group: Flash Camp, Berlin 14.6.2009

3578298596_c254485755_o

Spanischer Tanz

By | Scribble | No Comments

Am Donnerstag bei Enrico gabs jetzt einen spanischen Abend – also eine Performance zu einer Techno-Trance-Movie-Mukke. Schade, das Mädel ist auch schon wieder unterwegs in die Heimat. Enrico Pietracci arbeitet im Stil Modell-Artist-Musik. D.h. auch Licht und Raum sind wichtig – wenig geplant, viel zu entdecken.

Du musst “zusehen” was passiert – wie lange Sie wartet oder wann sie anfängt weiter zu gehen…

meine Flickr – Skizzen

090423_Pietracci_Kreide_sm

Lisa tanzt mit Chello – 2

By | Scribble | No Comments

Also zum einen war das Modell neu, sie hat sich wesentlich langsamer bewegt, ist eigentlich recht gar wenig auf die Musik eingegangen. Das Cello hat eher gegen eine Wand gespielt und das wußte Sie auch. Für mich war es heute eben auch erst mal wieder einfacher, d.h. ich konnte mich auf den ganzen Klimbim konzentrieren der das Blatt oder die Figuren darauf zueiander interessant macht. Das wird aber nicht immer so sein – und das ist auch gut so.

Screen Shot 2013-03-08 at 2.04.35 PM

Testimonial Animation

By | Lab | No Comments

Die Aufgabe: Gestalten Sie einen kurzweiligen Animationsfilm als Loop für eine Konferenz.

Der geneigte Besucher der Konferenz, leicht aufgeregt, mit Vorfreude, steht frisch geduscht in der Reihe zur Registrierung. Weitere Besucher vor ihm – was wird ihn erwarten, welche Referenten, welche Beiträge…

Ein Testimonial lat. testimonium = Zeugenaussage, wirksam präsentiert gibt dem Besucher einen Vorgeschmack und Informationen für die anstehenden Tage und Stunden. In diesem Fall wirksam hinter den Damen am Welcome-Desk auf 50″ Plasma in Full-HD.

Kunde: giinco GmbH
Aufgabe: Animation
Umsetzung: After Effects

3428563352_c32b30a0f4_z

Lisa tanzt mit Chello – 1

By | Scribble | No Comments

..bei Enrico Pietracci ist etwas ist zwischen Mediation, Tanz, Performance und zwischendrin Linien, ein paar Flächen – ganz viel Bewegung, etwas Verführung ganz sicher Verbrüderung oder sonst was ohne Worte – bei Enrico ist eh alles anders, ein Chello, keine Pose dauert 20 Sec, Fläche, Form – alles humbug, ich brauch wieder Pinsel und Wasser und ich brauche: .. BLÄTTER!!!