Interaction & layout
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!
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 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 columns are generally reserved for tabbed navigation.
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.
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
Local is responsive, to a point. These are the current interface dimensions.
| Default | Minimum |
Width | 1200 | 1000 |
Height | 800 | 650 (Mac) 620 (Windows) |
Last modified 4yr ago