designa utan photoshop - en digital möjlighet för 2014

33

Upload: valtech-ab

Post on 01-Nov-2014

1.305 views

Category:

Design


2 download

DESCRIPTION

I takt med att allt fler digitala enheter dyker upp och responsiv design är en självklarhet snarare än ett tillval ställs det nya krav på arbetet med att ta fram design och koncept för digitala lösningar. Behöver vi all design klar i Photoshop innan utvecklingen tar vid och är det ens möjligt? Magnus Malmstedt, Art Director på Valtech, visar att det går att arbeta på andra sätt och vi tittar på hur man kan bryta sig loss från Photoshop för en mer verklighetstrogen och effektiv designprocess.

TRANSCRIPT

Page 1: Designa utan photoshop - en digital möjlighet för 2014
Page 2: Designa utan photoshop - en digital möjlighet för 2014
Page 3: Designa utan photoshop - en digital möjlighet för 2014

Designa utan Photoshop

Page 4: Designa utan photoshop - en digital möjlighet för 2014
Page 5: Designa utan photoshop - en digital möjlighet för 2014

“En PSD är som en tavla av en webbsida”

Page 6: Designa utan photoshop - en digital möjlighet för 2014
Page 7: Designa utan photoshop - en digital möjlighet för 2014
Page 8: Designa utan photoshop - en digital möjlighet för 2014
Page 9: Designa utan photoshop - en digital möjlighet för 2014
Page 10: Designa utan photoshop - en digital möjlighet för 2014

x2

Page 11: Designa utan photoshop - en digital möjlighet för 2014
Page 12: Designa utan photoshop - en digital möjlighet för 2014

Vad är begränsande med Photoshop?!

•  Det kan lätt bli alldeles för många “PSD-tavlor”.#

•  Tidskrävande och stort manuellt arbete att göra justeringar i designen.#

•  Snygga skisser – men de visar inte verkligheten.#

Page 13: Designa utan photoshop - en digital möjlighet för 2014

< / >!

Page 14: Designa utan photoshop - en digital möjlighet för 2014
Page 15: Designa utan photoshop - en digital möjlighet för 2014
Page 16: Designa utan photoshop - en digital möjlighet för 2014
Page 17: Designa utan photoshop - en digital möjlighet för 2014

“Man borde sträva efter att börja arbeta med designen i kod så

fort som möjligt”

Page 18: Designa utan photoshop - en digital möjlighet för 2014

•  För att skapa grafik – såklart.#

•  Använd Photoshop till att ta fram ett grundläggande manér#

•  Sätta en känsla, skapa mood boards och en ungefärlig riktning mot vart man vill gå.#

Vad är bra med Photoshop?!

Page 19: Designa utan photoshop - en digital möjlighet för 2014

Style tiles

Page 20: Designa utan photoshop - en digital möjlighet för 2014

Style  Guide  Levande  dokument)  

Page 21: Designa utan photoshop - en digital möjlighet för 2014
Page 22: Designa utan photoshop - en digital möjlighet för 2014
Page 23: Designa utan photoshop - en digital möjlighet för 2014

Style guides

Page 24: Designa utan photoshop - en digital möjlighet för 2014

Final-Start.psd#

Final-Start-v2.psd#

Final-Start-v2-final.psd#

Final-Start-v3-final.psd#

Ordning & reda?!

Page 25: Designa utan photoshop - en digital möjlighet för 2014
Page 26: Designa utan photoshop - en digital möjlighet för 2014
Page 27: Designa utan photoshop - en digital möjlighet för 2014

Style Guide!

vs#

Page 28: Designa utan photoshop - en digital möjlighet för 2014

< / >!

Page 29: Designa utan photoshop - en digital möjlighet för 2014
Page 30: Designa utan photoshop - en digital möjlighet för 2014
Page 31: Designa utan photoshop - en digital möjlighet för 2014
Page 32: Designa utan photoshop - en digital möjlighet för 2014

Det kan lätt bli alldeles för många

“PSD-tavlor”.#

Sammanfattning!

Sluta med pixelperfekta skisser. Skapa style tiles och

sätt riktningen för formen.#

Arbeta med designen i kod. Först då ser du hur verkligheten ser

ut.#

Page 33: Designa utan photoshop - en digital möjlighet för 2014

TACK!  Twitter: @m_malmstedt