Interaction & layout

Local Add-on API

Download Local Community API Docs Components

Search…

Getting started with Add-ons

Designing your Add-on

The Local interface

Where should I put my Add-on?

Interaction & layout

UI components

Building your Add-on

Interaction & layout

Interaction
Once you know what your Add-on is going to do and where it makes the most sense within the app, you can start to think about how the user will interact with it.
Local is built on the premise of making complicated tasks simple. To achieve this, we work hard to design and build consistent and clear UI focused on achieving goals. To help you create these sorts of interactions, alongside this guide, we've provided various layout and UI components to help build your interface.
Before you even start building, think about which layout best fits your Add-on's goals, which components make the most sense for the goals your user is trying to achieve, and how you can maximize these early decisions to set your Add-on's audience up for success. When in doubt, opt for clarity over complexity!
Before opening your code editor, break out a pencil and paper to quickly sketch your Add-on's UI. It may seem tedious, but this clarity-of-thought will come through in the end!
The "Sites" tab
Your Add-on can integrate with any part of Local, however, the most popular way will be adding on to the "Sites" tab. There are three core layouts within this section that you can use to build your Add-on's interface.
Full-width layout
Full-width layouts are great for disseminating lots of information, containing multiple sections of content, or for rich interactive experiences. Tables, for example, work really well in this layout, as it has the most horizontal space available for columns of information.
Left column layout
Left columns are generally reserved for tabbed navigation.
Right column layout
Whether you're creating an experience inside of its own tab of the site or expanding an existing tab, the right column is great for creating a secondary level of content hierarchy. Due to its relative size, the larger left side will always appear as more important hierarchically, so use a right sidebar for secondary or supplementary content.
The title bar
Regardless of where your Add-on lives, it's important to create context around its functionality. Add-ons located inside of existing views, such as the table view, are naturally more likely to communicate their presence by default. For other situations, such as when placing an Add-on inside a right sidebar column or on its own tab, always use the title bar. This helps not only remind the user what functionality they're seeing, but in the case of an Add-on inside a new tab, it becomes a useful way-finding device.
A title bar in a right column layout
Responsiveness
Local is responsive, to a point. These are the current interface dimensions.
​
Default
Minimum
Width
1200
1000
Height
800
650 (Mac)
620 (Windows)
​

Where should I put my Add-on?

UI components

Last modified 3yr ago

Export as PDF

Copy link

Outline