The debate: is it possible to develop the mockup of a website directly on the browser?
YIW is also a place of confrontation of ideas and also of professional and personal growth, therefore, when possible, we are pleased to involve you in some debates which are born (in and out of the editorial staff) and invite you to say your opinion on the argument.
Today’s controversy pertains to an interesting – and at the same time subversive – article by Meagan Fisher on 24ways.org in which the “death of Photoshop” is literally praised in favor of a mockup carried out directly on the browser.
In a few words, the article invites to design a website without first creating the classic aesthetic draft by means of a graphics software (in the specific case Adobe Photoshop) because – I’m citing textually – “Photoshop has a little usable interface, tends to crash during the most delicate moments and as everybody knows, has also remarkable problems with text rendering”.
It’s obvious that this article leaves us a little perplex on the limits of this new work methodology: let’s see together which are they.
Working with Photoshop can be counterproductive since it tends to crash in crucial moments, has an interface which is little usable and has got problems with text rendering.
This pleasant interview on helikopterdesign, which had as subject “what do you consider essential for the creation of a website” has revealed that, out of a sample of 25 designers (some of whom are definitively influential) a significant part uses Adobe Photoshop during the phase of graphic projection of the website. (some prefer Fireworks while others have chosen other tools as essential items).
Personally I work with Photoshop (version cs3) several hours a day and I have become aware that, after a few updates, Adobe has finally rendered the version stable: since over a year this version does no longer crash and this is obviously great news as this inclination of the software of restarting frequently – with loss of unsaved work as consequence – rendered the design phase really stressful.
I have never become aware of how the interface of Adobe Photoshop could be little usable: I only know that it can be complex, especially for beginners, but this could depend on the vastness of the software itself and not due to a wrong designing of the interface.
Finally, with regard to text rendering, in fact Photoshop has a text aesthetic appearance slightly different from how it will appear once the text content has been inserted in the markup (only Safari displays text exactly as on Photoshop). Nevertheless, as far as I’m concerned at least, the small differences in text rendering have never been noticed by my clients and have never influenced in a decisive way the aesthetic appearance of the website.
With the emerging of CSS3 browsers can display graphic drafts as beautiful as those created in graphics software.
The CSS3 are powerful and have many graphic properties which are really enthusiastic, we agree on that. But can they really substitute Photoshop in all aspects? Shades, nuances and rounded corners: a good design is just that? For the rest of it the layout example used by Meagan is very simple and graphics is reduced to the minimum. But does the website that came out deserve a place at a random css gallery?
Let’s take as reference the last three websites inserted on Css Mania:
All of them are designs rich of aesthetic details which, as a result, necessarily have to be designed with a graphics software. Maybe such a process can be avoided for simple websites, minimalist, or extremely linear but for websites more attractive aesthetically, it is impossible to renounce to the projection and design phase on Photoshop (or an equivalent graphic program).
It is easy to carry out the modifications by acting directly on the markup and on the style sheet, while on Photoshop some changes (such as the rounded angles) are a real nightmare, given that they require to work entirely on all the interface created.
Obviously, setting the rounded corners to the boxes with extreme ease is one of the advantages of css3, but what if the modifications to perform were of a more full-bodied nature? What if the client instead of asking to change font asked for the expansion of all the inferior box or for the more drastic modification of the already defined structure?
Worse even: if the client didn’t like completely the draft and asked for something more graphical, how to integrate it in a xhtml page already defined?
Although it might happen that I also have to deal with xhtml and css, my role consists mostly in webdesign: colors, typography, images, special graphic effects, etc. Personally speaking I believe that this method brings more limitations than real advantages and can represent a solution only for developers who cannot (or don’t want to) rely on a designer and in this way are free to create a layout without the help of a graphics software, turning the development phase into the real protagonist.
During the phase of projection and design of the layout, I tend to make many tentatives, moving the various graphic elements, modifying the dimensions, adding determined effects instead of others, combining more fonts in search of the right one. Often it takes hours (days even) before finding the right aesthetic and functional result. How’s it possible to meet these needs with the direct projection on the browser?
In the layout example Meagan has set the vari0us sections without any hesitation, without carrying out tests or modifications with the scope of finding the best solution: where’s best to position the photos of the gallery? Is it preferable opting for a horizontal navigation rather than a vertical one? This has been possible given the simplicity of the layout but rarely it is this easy making the mockup of a website; on the other hand (and this is a personal remark) a designer could feel like “being with clipped wings”, as if not having full freedom of projecting and like having to fall within certain limitations.
In synthesis: what happens to creativity? We just have to limit ourselves in rounding boxes and setting the relative shades?
The article in question is without doubt very stimulating, but I believe that we have to judge it with certain caution.
Tell me what you think
Do you think that the method proposed by Meagan is a valid alternative to the traditional draft on Photoshop, too? Have you ever designed a website directly from the browser, without having to rely on a graphics software? Let’s talk.
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »