Yes, CVsIntellect was designed in the browser!
What is Design?
In my opinion:
Its the creation of a plan or convention for the construction of an object or a system
Its applicable in the website too! For me, the best tool for creating such a 2D plan or convention is to create PSD [or any other format] mockup first before actually making it. But wait… why do we need to create PSD first? For planning? For user testing? For estimation? To get the feel? Do we seriously have time for that? Can’t we directly start designing it in the browser with HTML/CSS and then do user testing with that?
Initially, even I created lots of PSD mockups for CVsIntellect, to come up with the final solution for the home page [and wasted lots of time], though I could never finalize upon one :(
But after spending an entire week — I was like “phewww… why don’t I try designing it directly in the browser [coding] and show it to my team (that is distributed across the globe) at any time?” And trust me it was one of the best decisions I had made so-far. I was able to do things faster and get closer to perfection. Moreover, it didn’t require me to redesign the entire thing by coding, which in turn saved a lot of time!!!
There are many pros of designing in the browser, some prominent and obvious ones are:
Effective user testing: You can’t click on the Images, can you? They can’t behave. But, designing it in the browser will help you to understand the behavior of any control. And, how users are actually interacting with it. Its your live prototype that can become your final design anytime! And here final means final! :-)
Faster feedback: I can relate this process to a software practice called Continuous Development. By designing directly in the browser and continuously showing it to users/stakeholders and getting feedback, it will help increase your speed. Once we get the pivot, we will continue designing it in chunks, and each chunk will be an iteration and in every iteration we will ask for feedback.
Jeff Patton’s lean approach to products talks about this:
Build the smallest thing you can as a base. Know you’ll change it. Build it out over time. Stop when you’ve done enough.
Satisfaction: By being involved in the entire process you may also get to know how the design got to where it was and are better able to adapt it to the situation as it changes.
Realistic view: Another major concern is, sometime you feel that, this is not what I designed, may be because of lack of real data? If you can integrate your json file with the page and then design, this will make your life easier! It will also save you from a data entry job ;-)
It’s not that I am uninstalling my Photoshop now. There are a few situations, where I will have to rely on the Photoshop, I will do some sketching and Photoshop here and there but it’s for just wireframing and layout, not for perfecting pixels final output. May be I will have to use it for website assets like icons.
I would love to continue such a practice, some people call it as NoPSD movement or continuous design, whatever it is, but… it works :-)
