The high-fidelity mock up is the high quality visual design of our interactive system. In order to provide a clear guideline of what the final product looks like, it’s important to have a high-fidelity mockup. Previously we created sitemap and paper prototypes to build up the information system. After getting feedback from participants, we polished the information system and constructed a complete wireframe for our product.
Since our wireframe is already close to a high-fidelity mockup, we focused on making detailed design decisions on coloring and improving visual elements. For coloring, we noticed that a few of our peers chose to use purple in their Hi-Fi mockups, because their project are related to University of Washington. But considering how strong purple looks, we chose milder colors, which is the combination of blue and white in this case. We strongly believe color of this hue will make it visually comfortable for users. For improving visual elements, we changed the icons such as “back” and “menu” so they works with the colors we chose. Also partially inspired by Google’s Material Design, we added some 3D effect to markers and buttons to increase their visual affordances and to make them look nicer to our eyes.
Now that we have the guidelines for both visual design and information system, I believe it’s ready to be made into a real phone application. Also it is important to inform the stakeholders the design problem and our design solution in order to get further support.