Wix Blocks: Design Guidelines for Applications
6 min read
Wix Blocks is open to all Wix Studio users. To get access to Blocks, join Wix Studio.
Wix Blocks allows you to design stunning apps with simple drag-and-drop abilities, with very little code, in a similar way to how you build Wix websites. Before you start, there are some simple guidelines that we recommend.
In this article, learn how to:
Create responsive apps
Blocks allows you to build responsive apps and install them on all Wix editors. Designers can build fully fluid and functional widgets that support viewport/widget size change and customized content. This is why, before you begin to work on Blocks, it’s important to know the basics of responsive and fluid design.
Building with layout elements such as layouter, grid, stack and repeater will help you create responsive behaviors.
The 6 layout elements for creating responsive behaviors.
Tip: plan ahead!
Defining your responsive behaviors and desired customizations before your start to build. This will help you decide on the structure and layout tools that you should use. For example, it will help you determine in advance how many columns you need in your grid.
Support customizable content
When you build an application in Blocks, you should take into consideration that it can be customized in the Wix editors and should support this customizable content. For example, a user who installs your app in the editor can delete some of the elements. Therefore, it’s important to adjust the design of your app to different kinds of edge-cases scenarios, such as how it will look when one of the sections is deleted. For example, look at this widget:
Here you can see the same widget after the user chose to delete the image:
To make sure that your content stays customizable:
- Use elements such as grid (on min-content) and stack in order to make sure that different content lengths, and showing/hiding content will not break the layout.
- Test your app with different contents (text lengths, different images, languages etc.).
- Show and hide elements in order to make sure the behavior is as you expected.
Use presets for design and layout
Design presets allow you to create a variety of designs for one app. Design across breakpoints and reorganize the same elements to create multiple layouts for your widget (e.g. desktop and mobile). Note that all presets contain the same elements - reordered, but not re-parented. Everything is connected with the same logic. For example, grids in all presets must have the same number of cells.
Learn more about creating and managing design presets.
Advantages of Presets
Limitations of Presets
Changes per preset versus global changes
Stay as fluid as possible
Use widget in widget
Connect elements to site themes
Since your widget does not stand alone but will be installed in a site, it is important to make sure when you build it, that it connects to the site theme.
Points on connecting elements to themes:
Connect your colors to a theme:
Make sure to connect your elements to the site's color palette in order to:
- Keep your app consistent and aligned with any Wix-site color scheme.
- Make sure your app is visually accessible.
Connecting Text themes:
Make sure your text components are connected to the text theme in order to:
- Keep your app consistent and aligned with any Wix site text theme.
- Make sure your app is visually accessible.
Note: You can disconnect the font size from the theme. This maintains the look of the typography when the user changes their theme from the Theme Panel.
Tip: Test your theme in Preview
When you finish connecting all the elements to site themes, go to Preview in Blocks and click Test Theme. This will help you make sure that you didn't miss any element in your widget and that everything is connected perfectly.
Make sure that:
- Your design works with different color schemes, and it is properly connected.
- Your design works properly with different font families.
After you finish designing your widget, we recommend that you install your app to make sure it works properly.
Did this help?
|