Frontend UI/View Map


Years ago, I was learning about Tiles & Struts as we were transitioning to it from a very old system (Vignette). We got to tweak stuff, as well as create from the ground up. With this project, I recall using Blueprint CSS for the first time in a production stage. But that’s for another story, for another time.

Meanwhile, to help with the conversion, I needed something visual to help the other developers in our team know why I have made it like this and what I’m thinking in terms of what “view” we want to be spat out by the backend. And so, the diagrams & illustrations below came about.

You may view it via ui-view-map.pdf. This PDF includes some documentation on what I was trying to convey to other team members.

Feel free to download and share-a-like:

Please do note that it is 2011 now and the HTML structure described in the document is more geared towards early 2000s’ frontend development. I’m just putting this out there as a reference for myself, and those that think they can use something like it for their projects, and/or workflow.

Other than the many IA evangelist of the early Y2K-period, thanks goes out to Nick Finck for providing a good resource page, Visio Stencils for Information Architects. It provided a good base of visual elements to help with the project’s deliverables such as the one linked here. Those stencils are still useful.