Atelier is a digital art program that acknowledges space as a limitation and allows users to decide how their space will be allocated rather than the program deciding for them. Users can easily view their references and canvas simultaneously through the use of stacking and individually adjustable and zoomable frames. My role in this project was brainstorming creative solutions to the identified problem, communicating our ideas during presentations and designing many of the interactions within the program.
Project time frame: 5 weeks
Tools used: Figma
Team members: Christina and Audrey
Project Challenge
As part of my Design for Creativity and Productivity course, my classmates and I were challenged to identify problems within current creative domains and then solve these problems with our own designs.
The main challenge of this project was designing an application that provides a real solution to the identified problem rather than just another workaround.
Problem Identification & Significance
When creating physical artworks, artists often rely on having a large space where they can lay out their tools references and canvas in a manner of their choosing. Unfortunately, current digital art programs do not provide artists with enough space to simultaneously look at references and create art easily. We believe this is because these programs do not use screen space efficiently. While many artists have found workarounds such as the one pictured below, these workarounds impose their own set of limitations. Below, the artist can now see their references, but around half of the canvas is covered. Not only does this limit the artist’s efficiency, but it also limits the enjoyment they receive when creating artworks.
Traditional painting - the artist has the direct reference in front of them or photos in their workspace near the art
Digital painting - digital layout is inflexible, and reference photos are placed on top of the art directly, leading to inconvenience
Potential Solution
The limitation we aimed to tackle is space. No matter what the application is, you’re limited depending on the size of your screen. We came up with the potential solution of a whiteboard or tabletop-like layout where users can organize their canvas and references more naturally. For our project, we focused on the flexible arrangement of references in particular, and giving the user as much space as possible.
Low-Fidelity Prototype
Based on feedback we received on our initial sketches, we explored two different designs for reference layout.
Design 1:
This was our initial idea which allows users to scroll through a frame to look at their references. If they would like to take a closer look at a particular image, they click on it and it will expand to take the entirety of the frame.
Design 2:
As we received mixed feedback on the initial idea, I decided to explore an alternate way for users to put down their references. Users are no longer forced to keep their references in a frame. This version more closely mimics how a physical artspace would look. Reference images will be placed into stacks which can then be moved around however the user prefers.
To look at all the images in a stack, the user simply clicks on the stack which then expands as pictured. In the end, we felt this version was a better solution to the problem we were trying to solve as references can be moved around freely while still taking up minimal space.
Another important feature of this version is the ability to expand a selected image. Once this image is expanded, users would also be able to zoom in or out and scroll through the zoomed image.
Final Prototype
While I felt pretty happy with what I created in the low-fidelity design, there was a clear tradeoff that came along with the zoom function. If users wanted to move around a zoomed image, they would have to blindly scroll until they arrived to the area they were looking for. This had the potential to be very tedious so I began brainstorming solutions which ended up making their way into the final prototype.
In the final prototype, I implemented a thumbnail image that pops up when the zoom button is clicked. The thumbnail image contains a blue box that the user can drag to the area they would like to view. This allows the user to see where they are going while remaining zoomed in.
Walk-Through of Final Prototype
Summary
Current digital art programs do not use space in an efficient manner. Much of the space is taken up by a preprogrammed layout. This severely limits a user’s workflow as they cannot easily lay out references in the same space as their canvas. We addressed this problem by designing a digital art program that acknowledges space as a limitation and allows users to decide how their space will be allocated rather than the program deciding for them. Users can now easily view their references and canvas simultaneously through the use of stacking and individually adjustable and zoomable frames.
Future Improvements
While our design addresses the lack of space that comes with working on a computer, a true solution would be moving digital art off of the computer and onto a much larger interface. This could be a large tablet or even virtual reality which has potentially unlimited space.
