UI Builder Designer Guide
The Zapp Builder defines the visual language of an app by using Supported Components and a Cell Style Family.
A Cell Style Family includes all the cell styles per component the Builder supports. Each Cell Style can hold different types of data, such as video, article, gallery, web page and others.
The following guideline is an ongoing document that will be updated as we continue to develop the builder apps’ visual language. Please refer to the Sketch File when creating a new Cell Style Family.
Creating New Family
When you would like to design a new Cell Style Family, please follow the following guidelines:
- Design should be based on the smallest screen sizes that we support, since developers are basing the size adaptation to bigger scale screens on the basic size:
- Iphone: 320 x 568 px
- iPad: 1024 x 768 px
- Smartphone: 360 x 640 dp (mdpi)
- Tablet: 1280 x 800 dp
- Make a huge effort to create the cell style of iPhone and iPad the same in proportions, and use the same assets. The same goes for the Smartphone - Tablet. You would like to manage as minimum of styles and assets.
- Define which types of data are populating which cell styles. Accordingly design the different parameters per data type. (Articles have publish date, whereas Category don’t for example).
- List all the functional and informative icons that you’d like to use per data type and per cell style. (some cell styles are too small to show all the buttons you have available, and you’ll need to choose)
- Design Assets with asset bounds that are bigger than the assets, at least 2px from all sides. (We are well experienced that this way the assets looks better in the app)
- If you’ve used gradients on the cell, export it as well as an asset.
- Assets should be exported in several dimensions:
- iOS: 1x, 2x, 3x
- Android: 1x, 1.5x, 2x, 3x
- The developers should know how to create the cell style for different screens, that’s why we should hand them the basic smallest size, and from that one they are scaling it. For this reason, designers should instruct exactly how to arrange the elements in the cell - which element is the anchor, which are dependent on which. What should stay fixed, what should scale proportionally? For example:
- When the cell scales - does the ‘play’ icon stay in the same distance from the edge of the image or is it positioned proportionally to the cell’s scaling?
- Same goes to the ‘lock’ icon, the ‘channel’ icon, and the ‘duration’ label.
- Is the distance between the labels and assets in the bottom side fixed while scaling, or is it changing proportionally to the cell’s scaling? Same for the distance from the most top and bottom of the view.
Keys for assets and styles shouldn’t be specific, but general, so that they can be reused. Follow these guidelines:
- All in small letters (no capitals)
- Use underscore between words
- White Label Screens: screen_function___state_number (ie.: epg_backtonow_pressed)
- Component based Screens: function_state_number_ (i.e.: _play_1, favorite_selected_2)