![]() Since I had just finished writing this first section of Part II, I got pretty excited about this application! Wirify allows you to convert any Web page into a wireframe with the simple click of a browser toolbar button. Figure 1-The actual page and a Wirify wireframe of CNN.com Merge balsamiq wireframes code#Jussi Pasanen has created a very interesting application called Wirify, which actually does convert production code to wireframes. Merge balsamiq wireframes series#One final note on this topic: One reader who commented on Part I of this series posted an interesting and relevant link. The bottom line is that your diagramming software, wireframes, and prototypes are all simply tools in your toolbox. Our goal is to create a common idea space that facilitates team communication and collaboration. To quote former Oakland Raiders head coach Art Shell, “Just win, baby.” Our goal is not to create perfect, pristine diagrams that adhere perfectly to design documentation guidelines. Which led me to my second lesson: Although all of our theories really do help us think about our work in the proper way, at the end of the day, you really need to do whatever it takes to get your message across and move your team forward. But the bottom line is: you and your process have to be flexible and agile enough to adapt to the needs of any project. I could draw out the process I’ve used on most of my projects with tidy linear arrows and boxes. But they don’t always reflect the vagaries of real life. It’s one thing to draw flowcharts and diagrams and discuss the theories of proper information flow. Software dependencies change, people move off projects, goals change. This episode taught me two important things about our work. Would I need to redraw the flows from Part I? What impact would this new approach have on the process of creating code? Lessons Learned Our goal is not to create perfect, pristine diagrams that adhere perfectly to design documentation guidelines. Instead of going from wireframes to code, I had actually gone in reverse, from production code to wireframes!Īfter putting out the bonfire I had lit with the notes I’d planned to use for Part II, I pondered the meaning of all this. It occurred to me that this was really the exact opposite of what I had written in Part I of this series. The irony I felt had come from that last set of wireframes, which we had created out of production code. They even included a prototype from a usability test, in which we had embedded interactive wireframes. These wireframes had served us faithfully from the beginning-morphing from whiteboard to gray-scale outlines to the current set of colored, high-fidelity “infosthetics.” They were actually a composite of three different types of wireframes: garden-variety Visio wireframes, cannibalized screenshots of a prototype with Visio overlays, and screenshots of an actual second-level page. In fact, I could think of no other medium capable of both communicating design changes and facilitating the discussion that had kept the project moving along. I had been thinking about how useful some particular wireframes had been in keeping our group together and assisting us in making design decisions. What About Going from Code to Wireframes?ĭuring a break from a long wireframing session, I was watching a snowstorm outside when the irony struck me. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |