Autodesk wanted a vehicle for drawing new subscribers to its cloud-based design collaboration platform. I was tasked with designing an easy-to-use 3D and 2D design sharing and viewing application across web, tablet, and mobile form factors.
Autodesk Viewer
Autodesk wanted a vehicle for drawing new subscribers to its cloud-based design collaboration platform. I was tasked with designing an easy-to-use 3D and 2D design sharing and viewing application across web, tablet, and mobile form factors.
1. Context
[↓] Over the last decade, Autodesk has made a concerted effort to transform the way architects and mechanical designers collaborate, design, and make. The ability to view and interact with complex designs on web and mobile is a critical building block for the company's platform business growth.
2. Desktop Wireframes
[↓] When wireframing, I detail the content out. This helps me get in tune with what the product is supposed to do and ensures that the product team and stakeholders will understand what the proposed design entails.
3. Tablet Wireframes
[↓] It was important to design a UI that could work equally well across desktop, tablet, and mobile form factors. This simplified the code and made it possible for a small team to evolve the product quickly.
4. Phone Wireframes
[↓] These wireframes describe how markup drawing works on smartphones. When I wireframe, I always try to imagine a user going through the interaction. This helps me anticipate any issues or edge cases that may occur. The better I can do this, the more efficient the engineering will be.
5. Wireframe Illustrations
[↓] Even at the wireframing stage, it's important to get a feel for what the final experience will be. Since Autodesk Viewer makes it possible to view and interact with architectural and mechanical designs, the wireframes needed to incorporate this kind of content. These were drawn with a Wacom Cintiq and Adobe Illustrator.
6. Design Direction
[↓] I directed the visual design of Autodesk Viewer. The look and feel of the product was designed to fit within Autodesk's design system and the goal was to offer a clean, modern appearance that would elevate the designs being viewed. Visual design credit: Alice Chang.
1. Context
Over the last decade, Autodesk has made a concerted effort to transform the way architects and mechanical designers collaborate, design, and make. The ability to view and interact with complex designs on web and mobile is a critical building block for the company's platform business growth.
2. Desktop Wireframes
When wireframing, I detail the content out. This helps me get in tune with what the product is supposed to do and ensures that the product team and stakeholders will understand what the proposed design entails.
3. Tablet Wireframes
It was important to design a UI that could work equally well across desktop, tablet, and mobile form factors. This simplified the code and made it possible for a small team to evolve the product quickly.
4. Phone Wireframes
These wireframes describe how markup drawing works on smartphones. When I wireframe, I always try to imagine a user going through the interaction. This helps me anticipate any issues or edge cases that may occur.
5. Wireframe Illustrations
Even at the wireframing stage, it's important to get a feel for what the final experience will be. Since Autodesk Viewer makes it possible to view and interact with architectural and mechanical designs, the wireframes needed to incorporate this kind of content. These were drawn with a Wacom Cintiq and Adobe Illustrator.
6. Design Direction
I directed the visual design of Autodesk Viewer. The look and feel of the product was designed to fit within Autodesk's design system and the goal was to offer a clean, modern appearance that would elevate the designs being viewed. Visual design credit: Alice Chang.
1. Context
Over the last decade, Autodesk has made a concerted effort to transform the way architects and mechanical designers collaborate, design,and make. The ability to view and interact with complex designs on web and mobile is a critical building block for the company's platform business growth.
2. Desktop Wireframes
When wireframing, I detail the content out. This helps me get in tune with what the product is supposed to do and ensures that the product team and stakeholders will understand what the proposed design entails.
3. Tablet Wireframes
It was important to design a UI that could work equally well across desktop, tablet, and mobile form factors. This simplified the code and made it possible for a small team to evolve the product quickly.
4. Phone Wireframes
These wireframes describe how markup drawing works on smartphones. When I wireframe, I always try to imagine a user going through the interaction. This helps me anticipate any issues or edge cases that may occur.
5. Wireframe Illustrations
Even at the wireframing stage, it's important to get a feel for what the final experience will be. Since Autodesk Viewer makes it possible to view and interact with architectural and mechanical designs, the wireframes needed to incorporate this kind of content. These were drawn with a Wacom Cintiq and Adobe Illustrator.
6. Design Direction
I directed the visual design of Autodesk Viewer. The look and feel of the product was designed to fit within Autodesk's design system and the goal was to offer a clean, modern appearance that would elevate the designs being viewed. Visual design credit: Alice Chang.
