Portrait Mode, Actions, and a new look for Lightwell
#LightwellinAction is a monthly roundup of the latest features 🥳
A year ago, we released Lightwell with a distinct goal in mind: to give creatives more control over their finished products. In a perfect world, design elements would translate directly to production-ready outputs. Developers would be able to build on top of designs and prototypes. Streamlining the production handoff from creatives to developers (or removing it completely) was the unexplored frontier in creative software. The tool to accomplish this was missing. For this reason, we approached Lightwell as a production tool first and a design tool second.
Today, we are much closer to achieving true production handoff. The release of Lightwell 5.0 introduced visual programming and enabled creators to add working logic in their apps without previous knowledge of code. The line between designing an idea and building a product is disappearing.
In the newest version of Lightwell, we improve on the new visual programming interface as well as introduce some familiar design features. Without further ado, here’s Lightwell Version 5.2!
New & Improved Editor Interface
The first thing you will notice in the new Lightwell UI is that your panels are on both sides of the canvas instead of stacked vertically on the left. This change was made to improve the usability of both your Element Panels (on the left) and Control Panels (now on the right). For creators with complex scenes containing many Layers, Actions, and Interactions, the additional space will feel more intuitive.
Both panels have also been completely redesigned to improve readability and speed up the workflow. Some highlights include: inline alignment settings, direct asset links, device-specific positions, and interaction alerts on layers and actions. Panel sections are also collapsible, so the only information on screen is the information you actually need.
Get in on the Action
As part of the interface update, we wanted to make it as easy as possible for designers to get started creating in Lightwell. To achieve this, we simplified our menus to only high-level elements.
For those of you already familiar with how Animations and Audio work, it won’t surprise you that we combined them into a new section called Actions.
Actions 🎬 🔈
For Lightwell first-timers, Actions are distinct effects that can be triggered (and reused) on a screen. In other words, all Animations and Audio (including music, sound effects, and dialogue) are Actions.
These Actions are standalone effects that happen, but can only happen when you trigger them in Interactions. You can use any of the 9️ triggers to “Play” an Action, and Actions can be tied to as many triggers as you like.
Portrait Mode
From day one, creators have asked us for portrait mode support in their app development process. We heard you and we’re happy to announce that it’s finally here! When you create a new screen in the App Overview, you have the option to choose screen orientation. You also have the ability to edit the current orientation of your existing screens when you hover over screen thumbnails. Want your menu screen in portrait mode but the rest of your app in landscape mode? Done!
It’s also easy to preview screens in portrait mode for both iPhone and iPad apps. No matter what orientation, your options are a click away.
Zoom, Swoosh 🔍👟
The canvas now supports zooming and panning.
By default, Lightwell canvas functions use Multi-Touch gestures on your Mac. What does that mean for you, as a designer with at least two fingers*?
🤟Zoom: Pinch with two fingers to zoom in or out.
✌️Pan: Swipe in any direction with two fingers to pan around.
*If you only have one finger, you can click the ➖/➕ to zoom.
Contextual Interactions
One of our primary goals has always been to make Lightwell fast and intuitive for creatives to build production-ready interactive experiences. With the launch of visual programming in Interactions, we enabled designers to build working logic in their products without touching a line of code. 💪
This interface allows designers to flex muscles both as visual thinkers and systems thinkers.
In this Lightwell version, we aimed to strike a better balance between simplicity and power in the interface. The ability to program with logic flows provides power to the designer and the visual canvas gives them context and ease-of-use. This interface allows designers to flex muscles both as visual thinkers and systems thinkers.
Now you can view triggered layers on your canvas as you add interaction logic. It’s important to see the effects of your effects! 🤳
Wait Timer
With the new logic interface also comes new logic capabilities. Along with Play, Go To, and Set, we’ve added a “Wait” timer in Interactions. This lets you add an x second pause between effects. ⏱️
Coming Soon
The improvements we’ve been making to Lightwell are the tip of the iceberg. Digital products and experiences in our world are changing at lightning speed and our goal is to accelerate that pace.
For the creators who want to build native apps from end-to-end, Lightwell currently exports their designs to self-contained Xcode projects. But what about the creators who hand off their designs to developers? We’ll soon be releasing a native API that loads full screens, including assets, layouts, actions and logic — with a few lines of code. This design-to-development handoff will enable true “production prototyping” and streamline the creative workflow for all native experiences.
We’re excited to hear what you think of the latest features and even more excited for what’s coming.
Make sure to update to the newest version of Lightwell: Version 5.2. If you don’t see an automatic update reminder, you can always “Check for Updates” in your main menu.
Until next time Lightwellers! Happy Creating! ✨
—
Download Lightwell for Mac OS X
Download the Lightwell Previewer app for iOS
—
