schliessen

KABE Far­ben

Branche

Baufarben

Service

UX/UI Design

Seit 110 Jah­ren hat sich das Schwei­zer Fami­li­en­un­ter­neh­men Karl Buben­ho­fer AG erfolg­reich im Bereich der Far­ben eta­bliert. Mit den Kern­kom­pe­ten­zen Baufar­ben, Put­ze, Fas­sa­den­dämm­sy­ste­me, Indu­strie- und Pul­ver­lacke bie­tet das Unter­neh­men sei­nen Kun­den sowohl im B2B- als auch im B2C-Bereich hoch­wer­ti­ge Pro­duk­te.

Aus­gangs­la­ge

Die bestehen­de Pro­gres­si­ve Web App soll­te in die­sem Pro­jekt neu gestal­tet und für die Nut­zer intui­ti­ver sowie attrak­ti­ver gemacht wer­den.

Stell dir vor: du hast ein Haus­pro­jekt und möch­test die Vor­der­wand in einer bestimm­ten Far­be strei­chen. Bevor du sie streichst, wür­dest du ger­ne die Farb­op­tio­nen aus­pro­bie­ren. Klingt viel­ver­spre­chend, oder?

Mit­hil­fe der App soll das mög­lich sein — unab­hän­gig von der Struk­tur der zu strei­chen­den Ober­flä­che; Dach, Fas­sa­de oder Innen­wand. Dar­über hin­aus soll­te ein PDF-Doku­ment erstellt wer­den, das das indi­vi­du­ell kon­fi­gu­rier­te Pro­jekt abbil­det — inklu­si­ve der gewähl­ten KABE-Far­ben. Cool, oder!?

ux/ui design

appli­ca­ti­on

respon­si­ve­ness

Her­an­ge­hens­wei­se

Also Ärmel hoch­krem­peln und los geht’s. Zuerst erstell­ten wir eine Liste mit den Anfor­de­run­gen. Anschlie­ssend ein Fluss­dia­gramm, mit dem wir den gesam­ten Pro­zess visua­li­sie­ren und fest­le­gen konn­ten, wel­che Daten­bank die Infor­ma­tio­nen lie­fer­te.

Sobald wir alle Infor­ma­tio­nen hat­ten, konn­ten wir mit der Erstel­lung der Wire­frames begin­nen. Damit hat­ten wir eine erste gro­be Visua­li­sie­rung aller Funk­tio­nen, die auf einen Blick ersicht­lich sein soll­ten. Hier­für haben wir das UX-Kon­zept “Die Prin­zi­pi­en der Grup­pie­rung” (oder Gestalt­ge­set­ze der Grup­pie­rung) ange­wen­det, wel­ches uns ermög­lich­te, die Ele­men­te nach Kate­go­rien zu klas­si­fi­zie­ren und auf Basis ihrer Ähn­lich­keit in Grup­pen zu unter­tei­len.

Wir haben uns dazu ent­schlos­sen, ver­schie­de­ne Arten von Infor­ma­tio­nen, wie z.B. “Werk­zeu­ge”, “Ebe­nen” sowie “Far­ben” und “Tex­tu­ren” zu grup­pie­ren und von­ein­an­der zu tren­nen.

Testen, testen und jetzt ein biss­chen Far­be rein­brin­gen…

Nach diver­sen Tests und Über­ar­bei­tun­gen ist es uns gelun­gen, eine App zu ent­wickeln, die alle tech­ni­schen Kom­po­nen­ten auf ein­fa­che und intui­ti­ve Wei­se dar­stellt und natür­lich rea­li­stisch pro­gram­miert wer­den konn­te.

3D-Funk­ti­on

Die letz­te Her­aus­for­de­rung war die Imple­men­tie­rung der 3D-Tex­tur — erin­nerst du dich an das Dach, das im ersten Teil erwähnt wur­de? Um eine rea­li­sti­sche Visua­li­sie­rung der Tex­tu­ren zu errei­chen, muss­ten die Grö­sse der Ober­flä­che, die Per­spek­ti­ve und die Mate­ri­al­grö­sse in die Pla­nung mit ein­be­zo­gen wer­den.
Wenn du die 3D-Funk­ti­on in der Anwen­dung akti­vierst, kannst du die Flä­che (in die­sem Fall das Dach) im Bild aus­wäh­len und das Mate­ri­al rea­li­stisch dar­auf zeich­nen.

Es ist so pro­gram­miert, dass der Benut­zer nur die Flä­che zeich­nen und die Grö­sse (in Metern) ein­ge­ben muss. Die App über­nimmt den Rest.

Nach­dem der Nut­zer sein Pro­jekt fer­tig­ge­stellt hat, kann er sein Doku­ment als PDF expor­tie­ren. In dem Doku­ment fin­det sich eine Visua­li­sie­rung des Pro­jekts sowie alle Arti­kel­num­mern der KABE-Far­ben, die für das Pro­jekt ver­wen­det wur­den.

wei­te­re Pro­jek­te

Rimuss
Wäl­li 75 Jah­re