Frontend UI/View Map

Years ago, I was learn­ing about Tiles & Struts as we were tran­si­tion­ing to it from a very old sys­tem (Vignette). We got to tweak stuff, as well as cre­ate from the ground up. With this project, I recall using Blue­print CSS for the first time in a pro­duc­tion stage. But that’s for another story, for another time.

Mean­while, to help with the con­ver­sion, I needed some­thing visual to help the other devel­op­ers in our team know why I have made it like this and what I’m think­ing in terms of what “view” we want to be spat out by the back­end. And so, the dia­grams & illus­tra­tions below came about.

You may view it via ui-view-map.pdf. This PDF includes some doc­u­men­ta­tion on what I was try­ing to con­vey to other team members.

Feel free to down­load and share-a-like:

Please do note that it is 2011 now and the HTML struc­ture described in the doc­u­ment is more geared towards early 2000s’ fron­tend devel­op­ment. I’m just putting this out there as a ref­er­ence for myself, and those that think they can use some­thing like it for their projects, and/or workflow.

Other than the many IA evan­ge­list of the early Y2K-period, thanks goes out to Nick Finck for pro­vid­ing a good resource page, Visio Sten­cils for Infor­ma­tion Archi­tects. It pro­vided a good base of visual ele­ments to help with the project’s deliv­er­ables such as the one linked here. Those sten­cils are still useful.

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>