General UI

A couple building blocks

Summary

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.

1. Navigation Bar

The Navigation Bar is at the top of the Wander UI. Click the icons in the Navigation Bar to move through different screens.

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

2. Search Bar

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.

Result Labels

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.

Action Bar

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".

3. Category Bar

The Category Tab changes the place you are searching for something. The Category Bar is the third content block in the Wander UI.

Categories per Screen

Screen

Categories

Gifs

Gifs, Stickers, Text, Emojis

Images

Unsplash, Wikipedia, Flickr

SVGs

Emoji, Icons, Primitives

History

All, Gifs, Images, SVGs

Zoom buttons

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.

4. 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.

Selecting items

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.

Importing items

Clicking on a selected item imports the item in your composition. You can only import items if you select them first.

5. Info Panel

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.

Preview

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.

Pages

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.

Data

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.

6. Footer

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

Precompose

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.

Loop

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.