MFA Thesis- Process
Objective
The objective of this thesis is to discuss the benefits of interactivity and motion design in an online learning environment, present current trends in art museums’ websites, and offer guidelines that these institutions can adopt in order to increase their audience and create a long-term relationship with it.
Design and Implementation Process
The design and implementation process consisted of six parts: ideation, content mapping, visualization, implementation, testing, and revision. The ideation stage revolved around the visual and content direction of the project and included compiling relevant information about the Impressionism, outlining a list of keywords that will guide the visual approach, choosing color scheme and fonts, and creating moodboards and logos. Since the website targets a non-professional population, concepts such as art, interactivity, motion, education, fun and discovery became essential ideas for the project.
Design
Sitemap
The mapping and architecture of content focused on simplicity and ease-of-use. The website halves the content into two main parts—an artists’ section that focuses on their lives and artworks, and a glossary’s section that presents key ideas related to the movement. Overall, the text has been kept to a minimum in order to provide easily digestible information and evoke an experience that is more appropriate to an informal learning setting.
Flowcharts
The flowcharts show three different scenarios of users’ paths, showcasing the ability to toggle intuitively between the artists’ and the glossary’s sections, as well internally from artist to artist and from one glossary term to another. The different paths highlight the simple organization of the website as two main sections, with the goal of allowing users to focus on the area that interest them, and the organic connection and movement between them.
Moodboard and Color Scheme
The focus of the Impressionists on vibrant colors became a key factor in the way I chose the project’s color palette, where my goal was to pick cheerful and fun colors that didn’t overpower the presence of the artworks themselves. The chosen font of Baskerville Old Face meant to balance the colors and evoke a more austere sense of learning.
The moodboard aimed to communicate the interface’s visual quality and direction, where a combination of textual information with art and visual elements evoke a sense of playfulness, curiosity and discovery
Visualization and Prototype
Low-Fidelity Wireframes
Low fidelity and high-fidelity wireframes were created to visualize the layout of the website. The approach was to create a simple, one-page, non-scrollable interface. In each artwork’s page, a few glossary terms are highlighted to suggest that further information can be revealed upon mouse click. Each page also has a timeline at the bottom of the screen that the user can turn on and off to see relevant dates.
High-Fidelity Wireframes
High-Fidelity Wireframes were created in Photoshop.
Prototype- Adobe XD
Two different prototypes were created, one in Adobe XD and another in Adobe After Effects, where each emphasizes different features of the user experience.
The Adobe XD prototype aimed to simulate and assess the architecture of the website, the layout of the content, and the navigation between pages.
Prototype- After Effects
Two different prototypes were created, one in Adobe XD and another in Adobe After Effects, where each emphasizes different features of the user experience.
After Effects was used to complement the XD prototype with videos that simulate the animated and interactive features. These included the proposed guidelines like comparing two elements or expressing a change, or user interface principles such as transition between pages and buttons’ animations.
Motion design features
The following features exemplify the various motion design guidelines created for teaching art and art history, such as expressing a change or comparing two elements.
Other UI and animation elements
The following UI elements like buttons, images, text and overall layout incorporate different animation principles like anticipation, slow-in and slow-out, timing, and staging.
Coding and Implementation
The implementation phase marked the translation of the wireframes and prototypes into the development of a working website. Three main coding languages were used: HTML, CSS and JavaScript, which also included Greensock- a library that provides a timeline to control animated elements. Since ease-in, ease-out and timing are integral parts of the motion design, this library was crucial for the implementation of the animation, especially as it provides intuitive tools to implement and control these features through coding.
Testing
The testing phase aimed to check the effectiveness of motion and interactive features in augmenting learning, capturing attention and building a sustainable audience, as well as to examine standard user experience and interface aspects such as navigation and content hierarchy. It combined A/B testing methods and a modified version of Personal Meaning Mapping (PMM) used in museum experience research. For the former, I created a static version of the visual component with no special interactivity and almost no animation. The latter is a method that utilizes hand-written documentation, where the subjects are interviewed and directed to write down what they know about the exhibition’s theme before and after their visit as a way to examine what and how much they learned during their visit. Since all the tests were conducted online and were anonymous, the subjects were asked solely to document their knowledge while the interview portion was omitted.
Overall, the results correspond to the thesis’ assumption that motion and interactivity can capture people’s attention and bring them closer to art.
Website Refinement (After Testing)
The feedback received during testing, as well as comments given by faculty and peers, led to several modifications in the navigation features and the website’s responsiveness. The main changes that were implemented are as follows:
- The hover position animation in the side menus was eliminated, leaving only the alpha animation.
- The home button was replaced with the word “HOME.”
- The website’s mobile version was refined through the organization of content, modifications to images’ size, and elimination of buttons’ texts.
- Animated loaders were added to the artists’ pages while content is loading.
- The size of the rectangles in the Glossary Page was increased for better legibility.