Lightshow
As a final project in a UI course, where the goal was to apply theoretical knowledge into practice, I created Lightshow. Lightshow is a desktop interface, used by light engineers to prepare and perform live light shows at concerts. It is designed with the intent to be produced by Adobe, by taking inspiration from some of their user interfaces.
- Click on images to show in full screen -
Type of project
Individual project in UI course
Duration
2 Weeks (winter 2022)
Tools
Figma
Inspired by Adobe
As the intended usergroup would have the goal of becoming expert users, I saw resemblance to the adobes selection of software. I therefor took it as a challenge to design Lightshow with the intent of it looking like it was produced by Adobe themselves. Illustrator, After effects and Photoshop were used as inspiration for the base of the interface.
Two modes - Prepare/Live
Lightshow has two main modes, Prepare and Live.
Prepare at home
Lightshow enables the light engineer to prepare at home by creating sequences, that can later be used creatively during live performances. When using the Prepare-mode, the user can adjust every aspect to get the details precisely as envisioned.
Easy use for basic settings
As every user has to start somewhere, the basics of preparing a sequence is intended to be as intuitive as possible.
Allows for control of details
Icons are chosen over descriptive text to make the UI as space efficient as possible. Hovering over a tool provides the user with more information if needed. This, in combination with high control detail settings, makes the software accustomed to expert users.
Become an expert user!
As the intended user group is expected to aim to become expert users, Lightshow is designed to make this process as easy as possible. Learning hotkeys are essential to become an expert user. When a tool is used by clicking with the cursor, the hotkey is displayed in the lower left corner to make this process as easy as possible.
Save your preparations as sequences
When a sequence is done, the user controls how it is displayed visually to help them remember it.
Organize your preparations
Lighshow allows the user to control where they want to save their work. If many sequences are required, ones that are less frequently used can be place in folders.
Create light shows live!
Lightshow is designed to give the light engineer as much creative freedom as possible during the live show. For the user that wants to prepare sequences for whole songs, that is possible. But Lightshow also works great for the user who wants to be able to respond to both the artist, and the crowds reactions through shorter and more flexible sequences.
Queue sequences
Sequences are queued simply by clicking them. If the users mind slips about a sequence, hovering over it with the cursor will give a quick preview in the upper right corner. The quick access toggle sequences are commonly used patterns that are used during transitions and drops.
Too many sequences? Group in folders!
For the user who prefers to over prepare, they can reach their folders containing large amounts of sequences by a simple click with the cursor.
Aquired knowledge
As this was my first individual work in Figma, I learned a lot about visual design and prototyping the software. Being able to take inspiration from the visual identity and structure of Adobe was also something I had not done before, and it was a good learning in understanding of visual brand identity.
