Portfolio Webdesign Martina Büttner-Leibovici

Referenzen

Webdesign

Martina Büttner-Leibovici

Programmierung

www.amaryllis-lingerie.de

Auftraggeber

Vorgaben

Layout

Zeitraum

Amaryllis Lingerie, Berlin

• Erstellung eines neuen Layouts für die Website einer Designerin von Dessous• frisches, einladendes Design• die Besonderheit der Dessous in den Vordergrund stellen• Verabeitung von edlen, schönen Materialien• Stil und der Eleganz der angebotenen Modelle• Präsentation der Boutique und der Createurin• Umsetzen des Designs mit einem CMS• Startseite und 5 Unterseiten, sowie Verlinkung zur Facebook-Seite (News)

• Nahaufnahmen von Materialien und Accessoires für Header- und Background-Images• die Farbgebung orientiert sich an den Modellen sowie der Ausstattung der Boutique • Fandango Pink in Verbindung mit Mintgrün sowie Weiss und Mittelgrau• Markierung der göffneten Navigationslinks und der Überschriften mit der stylisierten Amaryllis des Logos• in Anlehnung an das vorhandene Logo, Verwendung der Schrifttype ‘Courgette‘ für das Navigationsmenü und die Überschriften• Texte in ‘PT sans‘ in Dunkelgrau

Programmierung

• Erstellung von Mosaikfotos für die Seiten Kollektion und Massanfertigung, sowie Programmierung der Lightbox• Umsetzung mit dem CMS Contao

Februar 2014

Redesign und Programmierung

www.ten4you.de

Auftraggeber

Vorgaben

Layout

Zeitraum

Programmierung

ten4you - Die Schauspieleragentur, Berlin

• Neugestaltung des Logos mit Berlinbezug sowie Webseitenlayout und Programmierung• modernes und hochwertiges Design, leicht zugängliche Seite für den Benutzer• es wird eine originelle Idee zur Darstellung der Fotos in den Schauspielerseiten gesucht • dynamische Darstellung der Videos und Viten in den Schauspielerseiten• Viten, Fotos und Videos sollen leicht upzudaten sein• neue Schauspieler-Profile sollen einfach anzulegen sein

• Logoerstellung unter Verwendung eines stylisierten Fernsehturms• Purpurviolett für offene Navigationslinks, Mouseovers, Titel etc.• Hintergründe, Layer und Schriften in Grau und Weiss• verwendete Schrifttype 'Arial'• Startseite mit einem Mosaik der Portraits aller vertretenen Schauspieler• Aktuell-Teaser auf der Menüleiste• Vergrösserung der Schauspielerportraits als Fullscreen-Hintergrundfotos • Anordnung der Menüleiste links, um die Fullscreen-Fotos oben nicht abzuschneiden• Thumbs der Fullscreenfotos auf der Menüleiste in den Klientenseiten • das Video bzw. die Vita werden bei Klick auf einem halbtransparenten Layer über den Fullscreen-Fotos abgebildet

• HTML und CSS, dynamische Layoutanpassung in jQuery• dynamische Anzeige der Viten, Videos und Fullscreenfotos in jQuery• Verwaltung der Viten und Fotos in XML Dateien• Einlesen der Daten mit PHP• Aktuell-Teaser in PHP• Druckversion der Schauspielerseiten über gesondertes CSS Stylesheet

Oktober - Dezember 2012

www.boardfinder.com

Auftraggeber

Vorgaben

Layout

Zeitraum

German Boardroom GmbH, Düsseldorf

• Erstellung eines Layouts für die Landing page einer Aufsichtsrats-Agentur• moderner Aufbau der Website • elegantes Design• das Geschäftsfeld 'Agentur' des Unternehmens soll fokussiert werden• die Besucher der Seite sollen motiviert werden, Kontakt aufzunehmen• gewünschte Besucherkategorien sind Gremien, die Kandidaten suchen, sowie potentielle Kandidaten• Präsentation von ca. 20 Kandidaten mit Foto und Kurzportrait auf der Startseite

• Dem Logo entsprechend bietet sich die Verbindung eines angenehmen Rottons mit einem hellen Grau an• Begrenzung der Seite nach oben (Menüleiste) und unten (Footer) in Schwarz• assoziatives, nicht mit den Portraitfotos konkurrierendes Headerbild• Kennzeichnung der offenen Navigationslinks (Navigation innerhalb der Seite) in rot• Buttons in einer helleren Rotvariante• Seitenüberschrift auf einer roten Leiste• Das Mosaik der Portraitfotos befindet sich auf einem schlichten, weissen Hintergrund• der Kurztext zu jedem Kandidaten wird dynamisch auf Klick in einem überlagernden Feld angezeigt

März 2014

Webseitenlayout

www.satis-information.de

Auftraggeber

Vorgaben

Layout

Zeitraum

Programmierung

Satis Information GmbH, Berlin

• Erstellung eines neuen Layouts für die Website, das Logo ist vorhanden• das Unternehmens stellt Informationssysteme für grosse und mittlere Betriebe her• auf intuitive Weise soll die Idee 'Methode, Innovation und Technologie' vermittelt werden• die neue Website soll auf ansprechende und lebendige Art die Leistungen des Unternehmens widerspiegeln• Wiederverwendung der Grafiken des Unternehmens• Programmierung des HTML5 / CSS3 Templates für die Homepage und ca. 20 Unterseiten, die über 3 Menüebenen zu organisieren sind

• Grundlage des Webseitenlayouts sind abstrakte, assoziative Hintergrundbilder/ Headerbilder• Slideshow über dem Hintergrundbild auf der Startseite• die Farben des vorhandenen Logos, eine mittleres, warmes Blau, Gelborange und ein helles Grau werden für offene Navigationslinks, Textlinks und Buttons verwendet• die Hintergrundfarbe ist Weiss, die Textfarbe Mittelgrau• verwendete Schrifttypen sind Arial und Lato• die erste Menüebene wird oben neben dem Logo vorgesehen, die zweite befindet sich (bei Bedarf) unterhalb des Headerimages• die dritte Menüebene wird in Form von Teaserblöcken in den betroffenen Seiten unten vorgesehen• der Hauptcontent wird in einem 2/3 Modul organisiert, Teaser und Buttons in 1/3 Modulen

• HTML5/CSS3, für eine Implementierung in XML/XLST• jQuery für die Lightbox und die wechselnden (Menü-)Teaser sowie die damit verbundenen Seiteninhalte• CSS3 Slideshow für die Startseite

Dezember 2013 / Januar 2014

Online-Version Template: www.marlei-webdesign.com/template_alle_fontsV1_slideshow/

Heilpraktikerin

Auftraggeber

Vorgaben

Layout

Zeitraum

Kerrin Olufs, Lüneburg

• die Naturheilpraxis bietet effektive ganzheitliche Lösungen für körperliche und seelische Beschwerden und ein innovatives Konzept zur Stoffwechseloptimierung und Gewichtsreduktion im oberen Preissegment an• klare Strukturierung des Seitenlayouts• das Designkonzept soll gute Orientierung bieten, Interesse wecken und professionnell wirken• weitere Keywords sind Kompetenz, Natürlichkeit und Klarheit• das Logo ist bereits vorhanden

• Bildrecherche in verschiedenen Fotodatenbanken• Auswahl mehrerer in Grüntönen gehaltener Hintergrundbilder, auf denen die Inhalte 'schweben'• vom Logo ausgehende Farbgestaltung des Layouts• Markierung der offenen Navigationslinks sowie Buttons in Flaschengrün• Erdton für die Menüleiste, Sand für die Hintergrundfarbe des Contentblocks, Hintergrund der Teaserkästchen in Lindgrün• Überschriften und alternativ Buttons in Rostrot• Schriftfarbe Dunkelgrau bzw. Weiss• verwendetet Schrifttypen 'PT sans' und 'Lato'

März 2014

Webseitenlayout

www.polarpals.com

Brilliantly Blonde Multimedia AS, Oslo

• Entwicklung einer Website für Apps, die von dem Unternehmens entwickelt werden• Erstellung eines Layouts, welches die Stimmung der Polar Pals Apps aufgreift und sowohl Kinder als auch Förderer anspricht• Verwendung des vorhandenen Bildmaterials• Vergrösserung der Bilder in einer Slideshow• Programmierung der Startseite und 4 Unterseiten sowie Erstellung eines Wordpress- Blogs

• Farblayout auf der Basis des bestehenden Bildmaterials• Verwendung von hellen Blau- und Grautönen• Dunkles Blaugrau für die offenen Navigationslinks, Überschriften und Texte• Schrifttype für Menüs, Überschriften und Texte ist 'Comic sans MS'• Entwicklung der animierten Menübuttons aus den Polar Pals Figuren• Einbindung des Polar Pals Logos und der Figuren in die Seitengestaltung (Hintergründe)• Gestaltung des Contentblocks in Anlehnung an eine Bildschirmoberfläche

• Bildbearbeitung und Erstellung bzw. Anpassung der Grafiken für die Buttons und Backgroundbilder• Programmierung in HTML/CSS/jQuery • Templateerstellung der Blogseite in Wordpress• Automatische Updates der Blogseite sowie der Twitterseite über Publikationen auf Facebook

Juni 2013

Auftraggeber

Vorgaben

Layout

Zeitraum

Programmierung

Layout und Programmierung

www.construction-tracking.com

Auftraggeber

Vorgaben

Layout und Contentmanagement

Zeitraum

Weitere Landing Pages

ENAiKOON GmbH, Berlin

• Redesign mehrerer Landing Pages des Telematik-Unternehmens unter Berücksichtigung des bereits vorhandenen Build und Style Guides• Startseite und Unterseiten• Bilder und Texte bestimmen und ein Konzept für die Anordnung finden• Vergrösserungsfunktion für die Abbildungen• Erstellung der Landing Page mit dem CMS Typo3

• Bildrecherche• Technische Anpassung der bestehenden Typo3 Templates• Komplette Neuorganisation der Inhalte• Sichtung der bestehenden Inhalte • Bestimmung der fehlenden Inhalte (Texte und Bilder)• Textauswahl gemäß SEO-Richtlinien• Seitenerstellung in Typo3 in 4 Sprachen

Februar - Juni 2013

www.cee-plug-with-gps.comwww.stop-fuel-theft.netwww.dieselklau.euwww.enaikoon.com/en/solution/branches/www.control-fuel.com

Contentdesign und -management

www.helenesinger.net

Auftraggeber

Vorgaben

Hélène Singer, Paris

Layout

Programmierung

Zeitraum

• Redesign der Website, auf der die künstlerische Arbeit und Informationen über Hélène Singer veröffentlicht werden• Berücksichtigung der Farbstimmung der abzubildenden Kunstwerke• farblich sind die Farben Gelb und Schwarz vorgegeben• die Seite selbst soll den Werken einen ästhetischen und angenehmen Rahmen bieten• die Werke sollen im Vordergrund stehen• die Menüführung und die Benutzung der Website sollen intuitiv sein• Programmierung der Startseite und 12 Unterseiten mit Video- und Audioeinbettung

• Organisation der Seiten auf 2 Menüebenen• Bestimmung der Hintergrundfarbe Schwarz• Überschriften, Links und Navigationsmenü in Gelb, geöffnete Navigationslinks in Hellgrau• Texte in Hellgrau, als weitere Farbe wird in der Biografie ein dunkleres Rot verwendet• Schrifttype 'Arial'• Veröffentlichung der Thumbnails in Form von Mosaiken, Vergrösserung über eine Lightbox• Aktuellteaser auf der Starseite links• Werkschau in Form einer Slideshow als Content der Startseite• Biografieseite mit 3 Abschnitten und seiteninternem Navigationsmenü

• Bildbearbeitung in Photoshop• Programmierung in HTML/CSS/Javascript • Installation und Anpassung einer Lightbox• Anpassung der Videoformate und Realisierung der Player• interne Video- und Audioeinbettung

September 2012

www.dmg-ev.com

Deutsche Management-Gesellschaft (DMG) e.V., Nürtingen

• Redesign und Programmierung der Website, Logo ist vorhanden• Neuorganisation der bestehenden Inhalte• es werden Formulare für Bestellungen und Kontakt benötigt

• die bestehenden Inhalte werden auf 23 Seiten in zwei Menüebenen organisiert• vom Logo inspirierte Einstiegsseite, für die die Idee des Netzwerks als Bildmenü verwendet wird• für die weiteren Seiten wird weiterhin (in Transparenz auf Hellgrün) das Netzwerk im Hintergrund beibehalten • für geöffnete Navigationslinks, Links und die Überschriften wird das Grün des Logos verwendet• Texte in Dunkelgrau, die Schrifttype ist Arial

• Erstellung der Grafik für den Bildhintergrund• Programmierung in HTML/CSS/Javascript• Bildbearbeitung• Erstellung der Formulare• Erstellung von Tabellen zur Veröffentlichung der Events

November 2011

Auftraggeber

Vorgaben

Layout

Programmierung

Zeitraum

Zahnarztpraxis

• Farbgebung ausgehend vom Blauton des vorhandenen Logos• Verbindung mit einem sonnigem Gelb und Weiss• Bildrecherche in verschiedenen Fotodatenbanken in der entsprechenden Farbgebung• Texte in Dunkelgrau bzw. Weiss• Schrifttype ‘Noto sans‘• Anzeige der Sprechstunden auf der Startseite• Teaser mit kleinen Thumbs zu den wichtigsten Unterseiten

Auftraggeber

Praxis Dr. Birkenstock, Hüttenberg

Vorgaben

• Erstellung eines Layouts für die Praxiswebsite• Beschreibung der Leistungen und des Teams• freundliches, einladendes und vertrauenerweckendes Design• klares, flaches Layout mit gut lesbaren Schriften • eindeutig erkennbare Links und Buttons• auf der Startseite sollen bereits alle wichtigen Informationen bereitgestellt werden

Layout

Zeitraum

August 2013

Webseitenlayout

glückliche-partnerschaft.com

• Farbgebung ausgehend vom Gelbton des vorhandenen Logos• Verbindung mit einem hellen Himmelblau, Hellgrau und Weiss• Bildrecherche in verschiedenen Fotodatenbanken• Texte in Dunkelgrau• Schrifttype ‘Arial‘• ‘Betreten‘-Button auf der Startseite

Auftraggeber

Alexander Prokowitsch, Wangen

• Erstellung des Layouts für eine Website zur Partnerrückführung• der Besucher soll sich wohlfühlen• modern, seriös und und vertrauenerweckend• die Startseite soll wie eine Tür wirken • Verwendung des vorhandenen Logos• für die Startseite muss ein eindeutiges Foto gefunden werden• die Website soll mit dem CMS Contao programmiert werden• Startseite und 6 Unterseiten, 2 Formulare

Layout

Zeitraum

August 2013

Vorgaben

Programmierung

• Programmierung der Seiten und der Formulare in Contao

Layout und Programmierung

Martina Büttner-Leibovici

Borodinstr. 17

13088 Berlin

T. 030-92090945

M. 0157-31633782

Mail: [email protected]

Internet: www.marlei-webdesign.com

Da habe ich esgelernt

1981 Abitur Hannover

1982 - 88 Studium Textil- und Bekleidungtechnik mit

Schwerpunkt Gestaltung an der Fachhochschule

Niederrhein Krefeld-Mönchengladbach

1988 Diplom

1989 - 90 Zusatzstudium Wirtschaftsingenieur an der

Fachhochschule Niederrhein

2010 Weiterbildung zum zertifizierten Webdesigner

an der CFA-Cefag Bagnolet

Das kann ich

• Webdesign

• Gestaltung • Pädagogik • Sprachen

Vita

Code: HTML5, XHtml, CSS3, Javascript, jQuery, PHP, Mysql,

XML

CMS: Typo3, Contao, Wordpress

Programme: Photoshop, Illustrator, Indesign u.a.

Ausführung: Konzeption, Screendesign, Webgrafik, Realisierung

von Websites mit oder ohne CMS, Content

Management, SEO, Web coaching

Umgebung: Mac, Windows

Informatik, bildende und angewandte Kunst

Zeichnung, Installation, Fotografie, Szenografie, Kostümbild

Deutsch und Französisch (muttersprachlich)

Englisch (sehr gut in Wort und Schrift)

Dort habe iches angewendet

1989-91 Kostümassistentin am Düsseldorfer Schauspielhaus,

am Schauspielhaus Bochum und an der Schaubühne

Berlin

1991-97 Tätigkeit als Bühnen- und Kostümbildnerin am

Düsseldorfer Schauspielhaus, am Schauspielhaus

Bochum, an der Schaubühne Berlin, am Hildesheimer

Stadttheater, am Theater Aachen und an der Tribüne

Berlin

ab 1997 Tätigkeit als freischaffende Künstlerin in Malakoff/

Paris

2003-07 Lehrtätigkeit (Modedesign) am Palais de la Culture,

Puteaux

2009-10 Lehrtätigkeit am Collège und Lycée (Kunst), Education

Nationale, Clamart

2009-12 Lehrtätigkeit (Aktzeichnen) an der Ecole municipale

de beaux arts, Fresnes

seit 2009 Freiberufliche Tätigkeit als Web Designerin

Und sonst Tanz

Technik

Musik

Naturwissenschaften

Literatur

Zum Anschauen www.amaryllis-lingerie.de

www.cee-stecker-mit-gps.de

www.construction-tracking.com

www.glückliche-partnerschaft.com

www.ten4you.de

www.polarpals.com

www.helenesinger.net

www.bloc-house.org

www.richard-dussaulx.com

www.aplusb-fm.com

www.decoration-aplusb.com

Portfolio Webdesign Martina Büttner-Leibovici

Documents

Transcript of Portfolio Webdesign Martina Büttner-Leibovici