Summary: We redesigned a website to be responsive using Twitter Bootstrap and JQuery to create design documentation. Bootstrap proved to be an effective tool for conventional interactions but less use with more complex stuff.
One task we've done lately has been to redesign the Thought Into Design site. It's quite boring and uncommunicative and the analytics suggest that there engagement can and should be better.
The broad business requirements are:
After some initial planning, we decided to try out Twitter Bootstrap and frankly, it was a nice experience. There is a short summary of using Bootstrap with real clients which is well worth a read.
What we found was that it is an incredibly quick way to code some static pages up (HTML / CSS / Javascript) and was quite an enjoyable way to code after years of trying to get DIVs to fall into the right place. In some ways, it reminds me a little of table-based coding (and yes, I'm old enough to remember when virtually all sites were done that way!) so I have reservations. Fundamentally, coding is done by defining rows and then the number of elements (from 12) in each row. You can see the redesign in progress here: see the redesign in progress. Plus, responsiveness is baked in.
But after over a decade of doing wireframes, responsive design quickly muddies the water and increases the workload significantly for designers. Instead of a single set of wireframes, we now need to produce them for web, tablets and phones of various shapes and sizes.
Curiously, I remember being pooh-poohed a few years back when I suggested coding alternative CSS sheets for small screen devices like the Asus EEE netbook and was told that only web would ever be needed now. This was just before smart phones...
As an agency, we're happy to do what ever work is necessary to achieve the client's business goals. But it's also inefficient. What about if we could just skip the wireframing process and move directly onto working prototypes as documentation? This is something I've done before, particularly with complex interactions that needed to be tested dynamically, but coding was always a slow process. Bootstrap and JQuery have made the coding process a doddle now. I can see a future for designer-orientated tools that handle this with less code and more visual creation (I'm thinking if there's a product to be made here).
Major advantages are:
But it's not all roses. Going direct to code, for me personally, hinders the creative process. I need to have some aim before I code must like if I'm writing a web application, I need to spend time planning long before I write a single line of code.
In addition, while it can be instructive to be shown capabilities beyond my reckoning, I also need to be able to think / ideate beyond the capabilities of software. One example is how to communicate complex information using dynamic graphs / charts, and Bootstrap won't handle those complex interactions. For the simple, bread-and-butter stuff, Bootstrap is a superb tool. I will still run to my sketchpad as a first option,
Disadvantages are:
One task we've done lately has been to redesign the Thought Into Design site. It's quite boring and uncommunicative and the analytics suggest that there engagement can and should be better.
The broad business requirements are:
- Offer a client list
- Explain the types of work we do
- Show work samples
- Improve the user journey to contact us
After some initial planning, we decided to try out Twitter Bootstrap and frankly, it was a nice experience. There is a short summary of using Bootstrap with real clients which is well worth a read.
What we found was that it is an incredibly quick way to code some static pages up (HTML / CSS / Javascript) and was quite an enjoyable way to code after years of trying to get DIVs to fall into the right place. In some ways, it reminds me a little of table-based coding (and yes, I'm old enough to remember when virtually all sites were done that way!) so I have reservations. Fundamentally, coding is done by defining rows and then the number of elements (from 12) in each row. You can see the redesign in progress here: see the redesign in progress. Plus, responsiveness is baked in.
But after over a decade of doing wireframes, responsive design quickly muddies the water and increases the workload significantly for designers. Instead of a single set of wireframes, we now need to produce them for web, tablets and phones of various shapes and sizes.
Curiously, I remember being pooh-poohed a few years back when I suggested coding alternative CSS sheets for small screen devices like the Asus EEE netbook and was told that only web would ever be needed now. This was just before smart phones...
As an agency, we're happy to do what ever work is necessary to achieve the client's business goals. But it's also inefficient. What about if we could just skip the wireframing process and move directly onto working prototypes as documentation? This is something I've done before, particularly with complex interactions that needed to be tested dynamically, but coding was always a slow process. Bootstrap and JQuery have made the coding process a doddle now. I can see a future for designer-orientated tools that handle this with less code and more visual creation (I'm thinking if there's a product to be made here).
Major advantages are:
- Passing off working code to developers that documents the workflows and interactions within itself.
- Reducing time spent documenting interactions statically when a working prototype will do it better
- Communicates the interactions to the stakeholders better
But it's not all roses. Going direct to code, for me personally, hinders the creative process. I need to have some aim before I code must like if I'm writing a web application, I need to spend time planning long before I write a single line of code.
In addition, while it can be instructive to be shown capabilities beyond my reckoning, I also need to be able to think / ideate beyond the capabilities of software. One example is how to communicate complex information using dynamic graphs / charts, and Bootstrap won't handle those complex interactions. For the simple, bread-and-butter stuff, Bootstrap is a superb tool. I will still run to my sketchpad as a first option,
Disadvantages are:
- Might hinder the creative process
- Doesn't help initial ideation
- The working code might not be up to par
- Deals poorly with widgets outside of its reckoning
- Reinforces the idea that UX is about code
No comments:
Post a Comment