34
René Chr. Glembotzky Twitter „glembotzky“ Kontakt: Xing, Facebook, Poken :-) Designer vs. Developer UXCamp Berlin 2009

Coder vs. Designer

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Designer vs. DeveloperUXCamp Berlin 2009

Page 2: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

32 Jahrefree-sms.de Gründer

Ex-Head of IT goolive

PHP/ColdfusionMySQL

JavaScript/jQuery

ProjektmanagerBusiness Development

Marketing & Akquise

Page 3: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Logik meets Kreativität

Page 4: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Logik meets Kreativität

Developer Designer

Page 5: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Was ist das Wichtige an einem Design?

● Design ist nicht nur die Form.● Design ist nicht nur die Funktion.● Design ist eine Symbiose aus Form und Funktion.

Design muss gut aussehen und funktionieren.

Page 6: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Was ist das Wichtige an UI-Design?

● UI-Design ist nicht nur das „Sichtbare“.● UI-Design ist nicht nur die Code (IA).● UI-Design ist nicht nur das Interaction-Design.● UI-Design ist die Symbiose aus Sichtbarem, Code

und InteraktionsmöglichkeitenUI-Design muss gut aussehen und funktionieren.

Page 7: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Was ist das Wichtige an UI-Design?

● UI-Design ist nicht nur das „Sichtbare“.● UI-Design ist nicht nur die Code (IA).● UI-Design ist nicht nur das Interaction-Design.● UI-Design ist die Symbiose aus Sichtbarem, Code

und InteraktionsmöglichkeitenUI-Design muss gut aussehen und funktionieren.Und NICHT nur im Photoshop, sondern beim USER.

Page 8: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

5 Dinge, die Designer zwangsläufigberücksichtigen „müssen“...

Page 9: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

5 Dinge, die Designer zwangsläufig berücksichtigen „müssen“...

1. Eine Website ist dynamisch.2.Kritischer Faktor: Technik.3.Raster und Module sind der Schlüssel.4.Miteinander reden5.YES, WE CAN!

Page 10: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Eine Website ist dynamisch

Page 11: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Eine Website ist dynamisch

Page 12: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Eine Website ist dynamisch

● Design muss skalierbar sein.● Überlängen einplanen.● Design muss der Funktionalität angepasst

werden.

Page 13: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Eine Website ist dynamisch

Bildschirmauflösung beachtenScrollbars vermeiden

Page 14: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Eine Website ist dynamisch

Je nach Länge des Contents variiert die Höhe einer Seite.User haben damit kein Problem.

Page 15: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Eine Website ist dynamisch

Je nach Länge des Contents variiert die Höhe einer Seite.User haben damit kein Problem.Designer schon ;-)

Page 16: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Kritischer Faktor:Die Technik

Page 17: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Kritischer Faktor: Die Technik

● 14 IE6 Layout Bugs

Page 18: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Kritischer Faktor: Die Technik

● 14 IE6 Layout Bugs● 63 Techniken für abgerundete Ecken

Page 19: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Kritischer Faktor: Die Technik

● 14 IE6 Layout Bugs● 63 Techniken für abgerundete Ecken● 9 Möglichkeiten, Spalten zu designen

Page 20: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Kritischer Faktor: Die Technik

● 14 IE6 Layout Bugs● 63 Techniken für abgerundete Ecken● 9 Möglichkeiten, Spalten zu designen● 3 Browser Engines

Page 21: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Kritischer Faktor: Die Technik

● 14 IE6 Layout Bugs● 63 Techniken für abgerundete Ecken● 9 Möglichkeiten, Spalten zu designen● 3 Browser Engines● 8 wichtige Browser

Page 22: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Kritischer Faktor: Die Technik

● 14 IE6 Layout Bugs● 63 Techniken für abgerundete Ecken● 9 Möglichkeiten, Spalten zu designen● 3 Browser Engines● 8 wichtige Browser● 34 Möglichkeiten, Performance zu optimieren

Page 23: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Kritischer Faktor: Die Technik

● 14 IE6 Layout Bugs● 63 Techniken für abgerundete Ecken● 9 Möglichkeiten, Spalten zu designen● 3 Browser Engines● 8 wichtige Browser● 34 Möglichkeiten, Performance zu optimieren● 6+ Wege vertikal auszurichen

Page 24: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Kritischer Faktor: Die Technik

● 14 IE6 Layout Bugs● 63 Techniken für abgerundete Ecken● 9 Möglichkeiten, Spalten zu designen● 3 Browser Engines● 8 wichtige Browser● 34 Möglichkeiten, Performance zu optimieren● 6+ Wege vertikal auszurichen● 5 Layout-Stile

Page 25: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Kritischer Faktor: Die Technik

● 14 IE6 Layout Bugs● 63 Techniken für abgerundete Ecken● 9 Möglichkeiten, Spalten zu designen● 3 Browser Engines● 8 wichtige Browser● 34 Möglichkeiten, Performance zu optimieren● 6+ Wege vertikal auszurichen● 5 Layout-Stile● 8 Arten zu fokussieren

Page 26: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Kritischer Faktor: Die Technik

9 Faktoren

4 Dimensionen

3 Plattformen

4 Browser p.P.

2 Rendering Modes

= 672 Möglichkeiten

Page 27: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Schlüsselerlebnis:Raster & Module

Page 28: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Raster & Module sind der Schlüssel

Page 29: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Raster & Module sind der Schlüssel

Mein Favorit: 960 GridSystemhttp://960.gs

Yahoo!UIhttp://developer.yahoo.com/yui/grids/

Page 30: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Raster & Module sind der Schlüssel

Page 31: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Raster und Module sind der Schlüssel

Page 32: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Miteinander reden

„Nur sprechenden Menschenkann geholfen werden“

Page 33: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)

Miteinander reden

● Entwickler müssen „verstehen“, warum etwas geändert werden soll, weil sie keine unnötigen Änderungen mögen.● Roundtables: Designer und Entwickler diskutieren über geplante Änderungen.● Begriffe definieren, um Missverständnisse zu vermeiden.● Kommunikationsprobleme offen ansprechen.

Page 34: Coder vs. Designer

René Chr. GlembotzkyTwitter „glembotzky“Kontakt: Xing, Facebook, Poken :-)