Page 1


It’s the workflow, Stupid!


Huidige workflow (althans, bij Pixelpillow)

1. Bepalen functionaliteit 2. Wireframen 3. Ontwerp paginatypes 4. Na accoord deliverables (.psd, .fw) naar dev. 5. Technische realisatie (zowel frontend als backend)


Nadelen


Aanpassingen

<a> heeft te weinig contrast. Kun je die even aanpassen?

Aaaaahrggg


Statisch

vs

Fluid


Statisch

vs

Fluid


Overdracht (Frontenders / Dev) RWD, hovers, animaties, etc


OMG THEY RUINED MY DESIGN!!!!!!!!


Interactiviteit


Font rendering


Web design tools


en verder ... ? ‣

Browser rendering

Versiebeheer

...

...

...


Nadelen ‣

Aanpassingen achteraf sitewide (stylesheets / symbols / css)

RWD (fluid) vs Statische ontwerptools

Overdracht (Frontenders / Dev) - RWD, hovers, animaties

Interactiviteit / prototyping

Font rendering

Beperkingen bestaande webdesign tools

Browser rendering

Versiebeheer

...


Alternatieve workflow • • •

Content inventarisatie Functionaliteit (FO / User Stories / etc.) Prioriteren functionaliteit (planningpoker / buy-a-feature)

Iteratief proces

• • • • •

Wireframen / Prototypen

Evaluatie / Bijsturing

Onderzoek / Look & Feel Ontwerp HTML / CSS Overdracht aan Frontender / Developer


Onderzoek

Look & Feel Fuctionaliteit


Ontwerp

Niet één ontwerptool maar meerdere kleine


A real web design application

Jason Santa Maria - 2010


http://pxlpllw.nl/wwa


Sketch


Macaw


Pixelmator / Vectormator


Adobe Edge Reflow


Designing for the web is still about words.

Mig Reyes


Grids are good. Right?

Khoi Vin


A modular scale, like a musical scale, is a prearranged set of harmonious proportions.

Robert Bringhurst


I don't use baseline grids as they're too fragile on the web – in fact, they're not really baseline grids anyway, as the browser can't read those metrics from the font. It's probably more accurate to call them ‘line-height grids’.

Mark Boulton


Deliverables


A designer who doesn't code is like a print designer who doesn't understand bleed, creep, halftones, trapping and paper finishes.

Ben Brignell


Toolkit


Grid Cheat sheet


HTML toolkit


Working with Hammer will be twice as efficient as working various static files directly, while avoiding the headaches that PHP or an early introduction of WordPress can bring.

Jack Smith


HTML Styleguide


HTML Styleguide


Animaties + interactie


Version Control


Workflow? »

Meerdere kleine tools ipv 1 uitgebreide

»

Start with type

»

Helder grid (responsive)

»

Design+Code Prototypen in HTML/CSS en continu switchen tussen ontwerptool / browser / CMS (iteratief)

»

HTML/CSS styleguides en/of pagina’s als deliverable ipv .psd of .fw.png

Workflow  

Do we need a new webdesign workflow?

Read more
Read more
Similar to
Popular now
Just for you