Ik herinner me de discussie een paar maanden terug over een ‘echte’ web design app. Ergens een gulden middenweg tussen Photoshop/Illustrator/Fireworks en HTML. Moet kunnen, denk ik nog steeds – ik hoop alleen dat die app geen HTML/CSS kan uitspuwen, dat gaat enkel miserie geven.

Maar in afwachting van zo’n programma blijf ik trouw aan Illustrator voor de initiële mockups. Ik ga echter nooit alle scenario’s en pagina’s uittekenen, ik ga vrij snel in Coda aan de slag.
Ik moet er wel bij zeggen dat ik voor mensen werk die prima vertrouwd zijn met het internet en zijn mogelijkheden, en dat ik nog nooit zo’n responsive design heb gemaakt…

Bij Gorilla zitten we zo een beetje in een constante discussie. Ik wil heel vlug overschakelen naar HTML/CSS maar Redg blijft liever zo lang mogelijk in photoshop. Ik wacht dus nog even tot die het licht heeft gezien. Dat komt wel… de combinatie mobile/CSS3 is alles redelijk hard op zijn kop aant zetten.

Heb je de big web show editie gezien/gehoord rond “mobile first”? Very interesting! http://5by5.tv/bigwebshow/6

Het proces dat jij (net zoals Andy Clarke) beschrijft ligt redelijk dicht bij de (voorlopig) ideale workflow denk ik. Eerste look&feel; vastleggen in photoshop en daarna switchen tussen browser en photoshop. Screendumpen en dan tweaken in Photoshop dus.

Photoshop volledig skippen is inderdaad geen goed idee, maar te lang in photoshop zitten is ook nergens goed voor.

Design ziet er goed uit trouwens. Nice.

Thanks Lensco en Jelle, appreciated!

Goe bezig Thomas! Mooi artikel en mooi resultaat, maar waarschijnlijk kon je wel voor 3 van de 4 versies een simpele wireframe gemaakt hebben. Je look and feel lag al vast in versie 1 en dus was al dat photoshop werk niet zo noodzakelijk. Zo te zien zit je op een grid en dus is de stap naar de verschillende resoluties al heel eenvoudig te verwezenlijken.

Ik denk niet dat je Photoshop kan skippen. De controle is veel groter in Photoshop dan in html/css. Ieder design zal afwegen, worstelen en puzzelen zijn met de beperkingen en de mogelijkheden. Het toont dat je je vak serieus neemt en dat het gelukkig geen exacte wetenschap is. Dit maakt het dan ook fun en zorgt voor een uitdaging.

Godspeed!

Bedankt Redg, we zitten op dezelfde golflengte denk ik. Goeie tip om 1 versie te maken in Photoshop en de rest met wireframes uit te stippelen alvorens naar HTML en CSS over te stappen. Dat probeer ik zeker eens voor het volgende ontwerp.

Ik ben momenteel bezig met het “ontwerpen” van een site, waarbij ik helemaal anders tewerk ben gegaan dan ik normaal zou doen. Ik wou nl. dat de site zowel mobiel als op desktop optimaal weergegeven zou worden.

De aanpak is grofweg:

1. Eerst schetsen op papier, maar gericht op de inhoud, de belangrijkheid van de verschillende inhoudsblokken en de onderlinge verhouding tussen de inhoud van meerdere pagina’s.
2. Omzetten in HTML en CSS, hoofdzakelijk gericht op typografie en leesbaarheid, nog geen layout.
3. Ik ben dan beginnen optimaliseren op klein scherm om de leesbaarheid te waarborgen
4. Pas daarna ben ik gaan uitbreiden (via media queries) naar de desktopervaring. Ik gebruikte een grid als achtergrond, waarop zowel de typografie als layout kon worden afgelijnd.

Ik ben dus vertrokken vanuit de inhoud van de website, en niet vanuit een grafische voorstelling. Het meteen in HTML te duiken was eigenlijk heel verfrissend. Je bent nl. niet gebonden aan een vaste layout en kan de inhoud laten vloeien naargelang de grootte van het scherm. Zo zie je ook meteen hoe de elementen zich bewegen op scherm en in relatie tot elkaar. Via CSS kan je makkelijk elementen stijlen naargelang de belangrijkheid en meest geschikte vorm voor die bepaalde schermgrootte. Soit, het was allemaal nogal “fluid” en het was eerder intuïtief uitzoeken, maar ik heb er veel uit geleerd.

Voor toekomstige projecten ga ik zeker weer zo snel mogelijk naar HTML en CSS overschakelen, eerst focussen op typografie en leesbaarheid op kleine schermen en dan doortrekken naar grotere schermen.

Heel erg interessant, Danny.
Ik ben nu uiteraard benieuwd om het uiteindelijke resultaat van jouw ontwerpproces te zien. Is het online terug te vinden?

Leuk idee, maar inderdaad niet altijd haalbaar kwa kostprijs, zelfs als je zo snel mogelijk overstapt op html/css. Trouwens zijn de meeste moderne mobiele browsers zeer handig met zoom. Op men ipad is er geen enkele website dewelke ik niet eenvoudig kan overzien (op de flash sites na). Persoonlijk hecht ik meer belang aan een aparte css file voor de zeer kleine schermen (320*..) waar je echt moet beperken kwa functies.

Opmerking over de website:
De homepagina, de appartementen pagina, en de praktische pagina hebben telkens 4 “onderdelen”. op de ipad is het echter telkens verschillend van ontwerp.
home: 2x2 blocks - appartementen 4x1 blocks - Praktisch 3x1 & 1 block…

Over responsive webdesign dan: Ik denk dat dé uitdaging zal zijn om een efficient proces te vinden, zowel qua design als slice.

Heel erg interessant artikel met een aantal nuttige to do’s om te testen