remix 3d
2017
Remix 3D is a cloud-based library which connects thousands of 3D models to productivity and mixed reality experiences across Windows 10. As the project's Lead Visual Designer I had the opportunity to shape the UI from early concepts to the final live product.
CAPABILITIES USED
UI Design, Visual Design, Product Consistency, Iconography, Collaboration, Conceptualization
MISCELLANEOUS
Work created at Microsoft
CAPABILITIES USED
UI Design, Visual Design, Product Consistency, Iconography, Collaboration, Conceptualization
MISCELLANEOUS
Work created at Microsoft
Final Remix3D.com implemented home page as of May 2018 shown below.
laying it out, locking it down
One of my core priorities for Remix 3D was designing the full end-to-end website UI based on guidelines from UX design, copy writing and art direction. Shown below is an example of the About Us page, one of many pages which I created for the final website.
Every page, and all of its parts, needed to re-flow across five target thresholds. I accomplished this by utilizing invisible grid systems which defined the page layout at each snap point.
Once the art target and content received final approval, I would go through the intricate process of redlining all the core elements of the UI to provide the specs needed by engineering for website implementation. The redline specs dictated how the layouts reflowed, along with typography styling, color treatments and specific iconography or image assets.
The final result was an intuitive front-end website which reflowed seamlessly across all devices and screen sizes.
ui toolkit to the rescue
As the product UI grew in scope, so did the level of confusion between design and engineering. To bring cohesion and clarity to the project I initiated the effort to build a UI Toolkit as a master resource for all the core elements of the website UI. Below is an example of the typography style guide which I created to be used on various text throughout the website.
I tested the type treatments further to ensure they would work on blocks of text wherever needed.
Color treatments received a similar consistency pass to ensure the website UI utilized a specific set of pre-defined colors. I worked closely with engineering to develop specific color treatment names in order to optimize their styling library in code.
I utilized Adobe Libraries to ensure that our entire design team could easily access the most up to date UI components across all their Adobe products. This greatly improved the design team's workflow and was also beneficial to our partner team members working remotely.
The website UI was made up of many building blocks and cards were by far the most used. The model and creator cards shown below were some of the core visual templates which I designed for the UI Toolkit after many iterative passes.
With the primary card templates defined, I created an assortment of states for each card type, along with their size variations for UI re-flows.
Once the visual design was finalized, I would then again do a technical design pass to redline each card, giving engineering the specs they needed for implementation.
consistency with windows
As a Microsoft product, it was crucial for Remix 3D to retain a level of visual consistency with Microsoft's company brand and the Universal Windows Platform (UWP) UI standards. One example of such consistency efforts is demonstrated below. I needed to utilize elements from the Media Transport Control to create a set of clean and cohesive UI controls for the Remix 3D object viewer.
Shown below is the final object viewer I designed to align with UWP standards while providing providing a set of custom features specific to Remix 3D.
The next step was to test the proposed object viewer design in all of its various states, across all threshold sizes. When designing any product UI, I always initiate this design check to ensure there are no unpleasant surprises during implementation which were not resolved during the design phase.
As an additional step, I do an in-context comp to see how the specific component will fit visually among other parts of the product UI.
