Getting started with web design
I’ve been trying to get more into the design side of things, flexing the right side of my brain. Having trouble finding a workflow that fits. I’ve done design work before, but would never call myself a designer by any stretch of the word, and the work has always felt awkward.
I deeply enjoy developing for the front end, and thus would like to be well rounded and add some good UI design to my arsenal. Here is the normal work flow.
- Get an idea, work through the usability/process on paper (sometimes skip this step)
- Open Photoshop and start putting the page/elements together
- Get feedback/re-evaluate
- Tweak the design
- Go back to step 3, repeat until satisfied
- Build the thing in HTML/CSS
The Problem
Photoshop is wonderful. But for designing, it is time consuming and not very re-usable or interactive, you can’t really examine a process or user experience.
Tried Solutions
Wire-framing
Working through a wire-framing tool such as Balsamiq (which is an amazing tool BTW). Gives you some intraction and you get a clear idea of what the UX will be, but again, not re-usable.
Flash prototyping
Generally the best interaction, good feel for UI/UX. Assets are largely resusable. Faster than working through Photoshop, in my opinion. But you still need to do some scripting to get the interactions to work, which seems like repeating yourself if you build the thing in HTML/CSS/JS.
The result
I ended up using what I know – markup. By using tools like CodeKit and LiveReload The work was done quickly and I ended up with a reusable, interactive, true to form prototype.
This process will not be ideal for most, and I’m open to different ways of going about it. This seems to be the most time efficient. There is one inherit problem with this method, that is that I don’t get to be completely “right-brained” with this process, I’m still thinking in logical, analytical terms, which I believe will be limiting.
Please feel free to share your workflow experiences.
