Methodology

This individual project, part of the "Graphical Interfaces - DAT595" course, took place over three weeks at a 50% study pace in autumn 2023. The task was to design a user interface for controlling up to 32 stage lights in a small concert or stage play. The lighting designer need to prepare light sequences, groups, and links them to instruments (e.g., a drum beat triggering light changes) before the concerts. The system should also to offer both flexible real-time control and predetermined sequences, allowing adjustments during the performance. The focus was on UI components and UX patterns, with minimal time for ideation.

The methodology included brainstorming key functionalities and researching similar lighting control systems to inspire my design. I envisioned a dynamic interface that allows intuitive control of light sequences, with both preset and real-time adjustments. For the aesthetic, I chose a dark gradient theme with purple, pink, and white accents, inspired by the UI of Adobe programs, which is highly appreciated by expert users for its clean, professional look.

I continued by creating wireframes, shown in Figure 1, based on the findings from the research phase and the design vision for the lighting control system. This helped guide the creation of the high-fidelity prototype. As this project focused solely on GUI design, no user testing was performed and very little time was set for the ideation phase. In other design projects, user testing would be essential to ensure optimal usability and a great user experience.

Style Guide

The Ljustra Style Guide, shown in Figure 2, embraces a modern dark theme, featuring subtle color accents and a clear hierarchy for a cohesive UI. The background is set in the darkest black, complemented by two shades of black (5% and 12%) for panels and other elements, adding depth and layering. Typography follows a structured approach, with bold Inter in purple for headers, regular Inter in white for subheaders, and regular Poppins in white for primary text. The design also includes toggle switches, where orange represents the inactive state, while green indicates an active or enabled state.

The color palette consists of three core color families—Purple, Green, and Orange—each available in three shades (200, 100, and 50). Purple is designated for headers, green signifies active states, and orange is used for inactive states. Optimized for dark concert environments, this system helps lighting designers work comfortably in low-light conditions. Its balanced contrast prevents eye strain, while muted yet clear colors ensure visibility without distraction. This allows for quick assessment and real-time adjustments, improving efficiency and precision during live events.

Overview

The software is intendened for professionals and, as already mentioned, the Adobe Ui's was an important inspiration as it is very appreciated for professional use. The interface is structured of panels that can be rearanged and resized by the users to fit there light rig and preferences the best. It accommodates both a pre-view, shown in Figure 3, for creating sequences ahed of concerts, and live-view, shown in Figure 4, to control the light rig in real time, ensuring that lighting designers can react dynamically during a performance.

Effects & Movement

On the left side, the Effects & Movement panel provides control over the selected light or group of lights in terms of effects and movements. In the Effects tab, users can adjust the prism, spin, strobe, and pulse using sliders. Additionally, it includes a Gobos selection, offering different light projection shapes such as stars, triangles, and squares. The Movement tab allows control over pan and tilt motion, as well as beam width and light intensity, giving designers greater flexibility in creating dynamic lighting sequences.

Preferences

Next to that is the Preferences panel, setting the default state for individual or group of lights. The light designer can control the tilt and pan of the lights, modify beam width, and adjust intensity levels. These settings ensure that each light is positioned correctly and behaves as intended before applying effects, movment or integrating them into sequences.

View

At the center, a 3D Stage View provides a real-time preview of the lighting setup, showing active lights and effects within a stage environment. This visualization enables designers to see the impact of their lighting choices before they go live, enhancing accuracy and reducing trial-and-error adjustments. A 3D toggle allows users to switch between different perspectives, offering a more comprehensive view of the setup and an easier view for arranging the placement of the lights.

Lights & Groups

On the right side, the Lights panel lists all 32 lights in the system, categorized into groups by a color tag for easier control. Each light is labeled, and users can toggle them on or off. Below, the Groups panel simplifies lighting control by organizing lights into preset groups such as Top Audience, Bottom Audience, and Back Bottom L/R. Each group has an on/off toggle, allowing quick activation or deactivation of multiple lights at once. This feature reduces the complexity of managing individual lights and streamlines adjustments.

Sequences

Below the stage view, is the Sequence , enabling the designers to program lighting sequences in sync with music or stage events. Featuring a multi-layered timeline, each row represents a different effect or movement of a light group. A song waveform (e.g., "Avicii - Levels") provides a visual representation of the music, allowing precise timing adjustments. The light designer can move, edit, or extend effect blocks to refine synchronization.

Sequence Queue & Functions

To the right of the timeline, the Sequence Queue & Functions panel allows selection and managment in the order of the pre set lighting sequences. Sequences can be link to specific songs, enabling seamless transitions between different lighting setups during a performance. The Functions tab allows designers to set quick-access live controls, making it easy to execute actions during a performance, such as turning off all the lights