Cycle through the completed interactive pages >>here<<
Objective Redesign Multitude's GUI
Specifications Work directly with programming team. Answer to lead programmer as art director.
Key Screens (Below)
Specifications Work directly with programming team. Answer to lead programmer as art director.
Key Screens (Below)
To begin, I was given a full tour of the software hilighting both front and backend features: How museum visitors interacted with it, and how the programmers worked with it. I was then given a set of "Key Screens" on which to base my redesign. The Key Screens were chosen for their representative nature: they were the most important screens for staff and most trafficked for visitors and their layouts exemplified templates used for all other pages.
My prompt was simple "Dark layout, modern text, austere sensibility"
Sketches I began with a raster sketch thumbnailing the new layout, tweaking colors and refining proportions by eye.
Polished Comps Then I moved on to create mock ups with Adobe Photoshop, making use of guides, grids, and layer comps.
New Approach - Web Coded Comps I took the initiative to try something which I'd been considering for some time: Coding my mock ups as web pages. It would provide interactivity for the client and greater flexibility for myself; I could code the content into HTML and simply restyle as needed and as I went in CSS.
Contrast raster images: Because a flat mockup combines content and style into an image, changing one requires redoing both wasting time and effort.
Extensive Functionality - Programming The choice to web code my comps opened the door to expanding my project:
Originally, I was expected to create flat images which the programmers would then code in.
However, because I had created web pages, my role became more than superficial styling. My supervisor next had me code ever more interactivity into them. What began as responsive scaling ended with making AJAX calls and printing tickets.
You can cycle through the finished pages >>here<<
Final Thoughts
It was awesome to work with the progammers directly and have them as art directors. No one knew more about the software and they provided insights into how the app should work, and up to the minute monitoring of bugs. I feel we were able to achieve better unity of form and function.
Initiative pays off: Not only did I have a chance to experiment which paid off with a new technique to incorporate into my workflow, coding websites instead of drafting flat comps opened the door to a whole new project: building my programming skills.
It was awesome to work with the progammers directly and have them as art directors. No one knew more about the software and they provided insights into how the app should work, and up to the minute monitoring of bugs. I feel we were able to achieve better unity of form and function.
Initiative pays off: Not only did I have a chance to experiment which paid off with a new technique to incorporate into my workflow, coding websites instead of drafting flat comps opened the door to a whole new project: building my programming skills.
By demonstrating my coding interest and ability I was able to get the most out of being surrounded by professional programmers. The concentrated programming work solidified my Javascript and pushed me into new more advanced territory I would not have managed without guidance.
Machinethink: When tackling how to build the calculator for merchandise and ticketing, my first instinct was to model it on my own thinking - But I soon noticed my brain was using several redundant techiques at the same time! It worked for me, but not to model my code after.
Machinethink: When tackling how to build the calculator for merchandise and ticketing, my first instinct was to model it on my own thinking - But I soon noticed my brain was using several redundant techiques at the same time! It worked for me, but not to model my code after.
Coming up with an efficient, elegant solution (snippet below) was a personal high point and really threw into stark relief the differences in how humans vs computers "think". Often our goal is to replicate human cognition with technology, but maybe we can build more efficient mental habits by studying code--one can hope!
