Designer News
Where the design community meets.
↵
How I designed a website without Photoshop(medium.com)
over 9 years ago from Vikas Chauhan, Team Lead at R K Information Technologies (I) Pvt. Ltd.
Marc Edwards, over 9 years ago
It's really not a big deal to circumvent the Adobe suite or even Sketch nowadays.
What’s the motivation or benefit in doing so? Purely financial?
Darth Bane, over 9 years ago
For me, Photoshop/Sketch is just one more step in the process that isn't necessary in the workflow. It doesn't handle repetitiveness well (e.g. lists or foreach type items), and it won't tell me how it feels navigating the site or interacting with it.
When we created the new profile pages at Tastebuds I created a contact sheet of six different lead examples (the top bit: cover image, profile image, user meta/actions) so we could decide on a winner. Since it was all HTML/CSS, even the investors could play around with the interaction of each idea without having to guess the end result.
Photoshop/Sketch only tells me aesthetics, what it will look like. It won't tell me how it feels interacting with it, won't give me an accurate representation of an actual website. Will this font look good, is this spacing natural when scrolling, and so on.
The financial benefit of going straight from paper sketch (or idea in head) to coding is just a bi-product.
For me, Photoshop/Sketch is just one more step in the process that isn't necessary in the workflow.
I think there’s many workflows that work, but for me, I see Photoshop and other design tools as very rapid ways to explore ideas. And I personally find them way, way faster than writing code, and then I like that I can take a look at the near final design, and work out the best approach for the markup.
The times I have jumped straight into code, I feel like the design has suffered (changes are slower and harder) and like the code has suffered (you often need to refactor many things at the end if you want neat code).
Since it was all HTML/CSS, even the investors could play around with the interaction of each idea without having to guess the end result.
Again, there's many good approaches, but I just use different tools if we need animation or interaction prototyping. Hype works well. As do many other tools.
The financial benefit of going straight from paper sketch (or idea in head) to coding is just a bi-product.
Maybe another difference is that I rarely sketch on paper. I find Illustrator way faster and more flexible. It's great to be able to duplicate and entire design and tear it apart without having to redraw the entire scene.
There’s many great solutions to these problems. :)
For me it's the opposite: code is quicker than Photoshop, and I use my own boilerplate setup so the code is always neat right from the start. We never re-factored code from design to production, it was always the same code (plus the Rails implementation of course).
To me it sounds like a long way around trying to emulate in-browser behaviour by using third-party services like Hype. The time spent learning the software and creating animations is time that could be spent coding the actual modules/page/site.
But again, all this is down to taste. I do find that it's a good selling point when getting freelance contracts to be able to provide a "live" version of the latest design that the client can interact with and give direct feedback on.
At Tastebuds.fm we stopped using Photoshop a long time ago for design. Everything was done in-browser (except for some logos that had to be bitmap). It's really not a big deal to circumvent the Adobe suite or even Sketch nowadays.
I designed the entire Tastebuds iOS app in Sketch, but of the things I designed on the actual site (I didn't have time to do all of it before I left the company) nothing on there touched Photoshop.