General UI
To help structure Wander, the UI is broken down into sections, called content blocks. There are five content blocks in Boombox that group UI elements that are similar together.
Name | UI Position |
1 — Navigation Bar | top |
2 — Search Bar | second from top |
3 — Category Bar | third from top |
4 — Search Results | middle |
5 — Info panel | second from bottom |
6 — Footer | bottom |
Understanding the general UI layout will make using Wander a breeze. Read through the Content Block types below.
The Navigation Bar is at the top of the Wander UI. Click the icons in the Navigation Bar to move through different screens.
There are four screens in Wander to help you find the best media.
Name | Use |
Gifs | Browse through Gifs, Stickers, Text and big moving 3D Emojis |
Images | Browse through millions of images |
SVGs | Browse through tons of emojis, icons and shapes, sorted in packs |
History | View a history of media that were Added to the Timeline |
To quickly navigate through Wander, you can use controls to go Back and Forward through screens.
Using the < and > will feel just like using any web browser, or familiar app
The Search Bar is a key component to finding the right content for your project. The Search Bar is the second content block in the Wander UI.
After entering a search, your search term will turn into a label so you can easily see what you actually searched for. Clicking on the label will remove the search term and you're able to search something else again.
Next to being a place to search, the search bar also displays an Action Bar with various information on the actions you made. It uses a blue color for neutral information or when enabling tools, a yellow color for warnings or disabling tools and a red color for errors. If you want to disable the Action Bar you can go to the Menu Interface to turn it off.
Example: When importing an item the Action Bar shows you the messages "Added to Timeline".
The Category Tab changes the place you are searching for something. The Category Bar is the third content block in the Wander UI.
Screen | Categories |
Gifs | Gifs, Stickers, Text, Emojis |
Images | Unsplash, Wikipedia, Flickr |
SVGs | Emoji, Icons, Primitives |
History | All, Gifs, Images, SVGs |
On the right side of the Category Bar you find the Zoom Buttons. You can increase or decrease the size of the results you found in the Search Results.
The Search Results show you all the items you searched for. In this panel you can scroll down until no more results are found, which is shown by a No More Results message.
Clicking once on a result selects the item and the border will appear blue. In this state you can use the Info Panel to check the metadata of the item.
Clicking on a selected item imports the item in your composition. You can only import items if you select them first.
The Info Panel shows you metadata on an item after you've selected it. The Info Panel is only visible if it's turned on in the Footer.
On the left side of the Info Panel you will find a small preview of the item that you selected. Clicking on the preview will import the item into your composition.
The metadata of each item is split up into different pages, so looking for data is easy. You can go through the pages with the left and right arrows in the Info Panel.
The metadata of an item changes a bit differently for every source, but credits to the artist or a link to the source are always in the Info Panel.
The Footer provides a place for the Menu button and the Info Panel button. Also on some screens appear options you can use for importing items
The Precompose option appears on the Gifs, Images and History screens. If you enable this feature your item will be precomposed before adding it to your composition.
The loop option only appears on the Gifs screen. If you enable this feature your item gets a Time Remapping expression so it keeps looping endlessly.
