Brave New World: A Designers Foray into Web Prototyping and Frameworks
by Alfonso
(Note to any impatient readers: there's a video of the finished web app at the end of the article.)
The debate over working in the hi-fidelity comps of Photoshop versus designing in the browser has been one I’ve mostly observed with mild curiosity. However, with the rise of working in Agile, responsive design, the emergence of the lean startup philosophy and the availability of rapid prototyping frameworks such as Bootstrap, I’ve been compelled to re-examine the debate, along with my own design process.
Was designing in a browser simply a better way to work in this accelerated landscape? Was it time for a change?
Putting theory into practice.
I decided that the only way I’d find out would be by trying out this new process with a real-world project.
So, I gave myself a typical project: Using an appropriate prototyping framework, I would design and develop a mobile web app. The goal would be to end up with a functional prototype that looked exactly as I had envisioned and could theoretically then be handed off to a developer as HTML/CSS assets for the heavy duty development.
(Full disclosure: I do have some familiarity with HTML markup. But really, just enough to be dangerous.)
I quickly came up with the idea for a PixelMEDIA Welcome Kit, which would be intended for new hires and clients. It would include an employee directory, mapping functionality from a user’s current location, and the means for quick, general assistance.
My first steps, as usual, were taken with pencil and paper. I created a simple architecture and rough wireframes for the application.
Opening up Photoshop, I then worked out the most complicated screen — the employee directory. This enabled me to come up with a general look and feel that would carry through to the rest of the app. The remaining screens were purposely left undesigned to see if this could be done fully in the browser. At last, I was ready to start busting out some code.
Using a prototyping framework.
I chose jQuery Mobile (jQM from here on out) as my framework. Getting started with it was incredibly easy (and well documented). I simply linked up the.css/.js files, dropped in some default component types and soon I was looking at a pretty little list screen. Not only that, but page transitions were handled nicely for me as well. Now all I had to do was make it look like the design I’d come up with in Photoshop.
That’s pretty much where the “easy” part ended for me.
It turns out that while it’s very quick to whip out a prototype, jQM doesn’t seem to like it when you try to apply your own look and feel to it. I honestly had no idea what “!important” was for, but will tell you that my stylesheet is now riddled with it (not exactly good practice, I’ve since learned).
Still, something wonderful began to happen. I fell into an iterative loop, very similar to pushing pixels around in Photoshop:
- modify in the browser with my web inspector
- update the HTML/CSS
- refresh
- review on the mobile device
- repeat
And slowly, my design began to take shape exactly as I had conceived it. Scratch that — better than I had conceived it. Why? Because I found myself starting to make changes to the design in real-time based on using the prototype in the device it was intended for. I quickly experimented with interactions, positions, transitions and numerous tiny details that, had I asked a developer to do for me, would have earned me a sound beating.
I ended up designing the remaining screens primarily in the browser, dropping into Photoshop only for the Loading screen, the app icon, and the few raster graphics used. By the end, I was feeling pretty comfortable with the process and was able to work much more quickly.
Approximately 30 hours later, I had a fully functioning, rather nice-looking web app, ready for client approval (I approved it, in case you’re wondering). This included everything — concepting, IA, design, content creation, development, and custom photography. Not bad, and well within my definition of a quick prototype.
Once you’ve taken the red pill, you can’t go back.
The app itself is by no means groundbreaking. It wasn’t meant to be. This was an exercise in process, and for me, it was a huge eye-opener. I was able to work faster, make smarter decisions, and ended up with a functional prototype that I could easily put in front of users for testing (which, in fact, I did).
Will I stop using Photoshop? Of course not, just like I won’t stop using pencil and paper — they’re wonderful tools that help me get my work done.
Am I going to become a developer? Of course not, design is my passion. But I will have enough development skills to use the browser and the languages behind it as tools to help me get my work done better.
So, why would I encourage you, as a designer, to consider adding development skills to your design process?
- The design choices you make will be informed by actually using your product, in its intended environment. The result? Better design.
- Your explore>test>revise iteration cycle will be lightning fast. And, you can do it whenever you want, as many times as you want.
- You won’t be as fixated on a “Pixel-perfect” layout in Photoshop. Why? Because you’ll be working and refining in the browser (read: more efficient use of design time).
- New possibilities will come up that likely would not have occurred to you in Photoshop.
- Imagine your client using and approving a prototype (or simply an HTML mock-up) rather than passively looking at a comp. Enough said.
- Your designs will end up as perfect as you want them to be; you won’t have to pester others if there are any imperfections. (By the way, that sound you’re hearing is the wild applause coming from your developers).
I admit, it’s not all wonderful. There’s the ramp-up time it takes to get comfortable with HTML markup; for some, this will be painful. The workflow is a little more complicated than simply doing everything in one application like Photoshop. More importantly, there’s what I would call the Bootstrap Trap: If you use a prototyping tool like Bootstrap or jQuery Mobile, it’s easy to simply let it do all the work. Beware, as that’s a slippery slope where exploration and user-centric design can easily be shunted aside in favor of expediency.
For me, that’s not enough to outweigh the advantages.
Time to walk the walk.
As more of an exploration in process rather than an actual product, the app itself is not available for download (unless you work here or, I guess, ask me nicely). However, I whipped up a little video highlighting what the experience/design is all about.
So, I’m curious: Are any of you including development in your design process? What prototyping frameworks are you using? Drop me a line and let’s share some knowledge.
Alfonso F. is a senior visual/experience designer at PixelMEDIA.