Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

App center documentation #125

Merged
merged 27 commits into from Apr 8, 2019
Merged
Changes from 7 commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -0,0 +1,124 @@
---
id: app-center-preparing-assets
title: App Center
sidebar_label: Preparing assets
---


##### Preparing assets for publishing your Aragon app

Before you publish your Aragon app in the App Center, you need to prepare a few types of assets to display it correctly, and differentiate from other apps.
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
Before you publish your Aragon app in the App Center, you need to prepare a few types of assets to display it correctly, and differentiate from other apps.
Before you publish your Aragon app in the App Center, you will need to prepare a few types of assets to display it correctly, and differentiate from other apps.


The main assets are:

- App Menu Icon (SVG)
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
- App Menu Icon (SVG)
- App menu icon (SVG)
- Large app icon (SVG or PNG)
- App Badge Icon (SVG or PNG)
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
- App Badge Icon (SVG or PNG)
- App badge icon (SVG or PNG)
- Screenshots (PNG)
- Short description (text only)
- Long description (Markdown or text)

<br>
In the next sections we will go through these one by one, as well as link to some templates so it’s easy for you to prepare everything that you need.
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
In the next sections we will go through these one by one, as well as link to some templates so it’s easy for you to prepare everything that you need.
In the next sections we will describe the requirements for each asset one by one. Templates are also provided to help you prepare everything.

<br>


## Icons

### Menu icon

This icon is used on the left hand app navigation panel of Aragon.
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
This icon is used on the left hand app navigation panel of Aragon.
This icon is used on the left hand app navigation panel of the Aragon client.
<br>
<br>
<span>![*](/docs/assets/check.svg) **Size** of the icon including padding is **22x22 px**. The padding should be around 3px or more on each side, depending on the icon shape</span>
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
<span>![*](/docs/assets/check.svg) **Size** of the icon including padding is **22x22 px**. The padding should be around 3px or more on each side, depending on the icon shape</span>
<span>![*](/docs/assets/check.svg) **Size** of the icon, including padding, is **22x22 px**. The padding should be at least 3px or more on each side, depending on the icon shape</span>

<span>![*](/docs/assets/check.svg) **Color** of the icon should be **#888888** so that we can automatically colorize the icon for you correctly in the Aragon client for various icon states</span>
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
<span>![*](/docs/assets/check.svg) **Color** of the icon should be **#888888** so that we can automatically colorize the icon for you correctly in the Aragon client for various icon states</span>
<span>![*](/docs/assets/check.svg) **Color** of the icon should be **#888888** so that the Aragon client can automatically colorize the icon in different app states</span>


<span>![*](/docs/assets/check.svg) **Line width** of the icon shape should be 1px so your app icon will look consistent with others. Sticking to the pixel grid is also recommended for sharp rendering</span>

<span>![*](/docs/assets/check.svg) Export to **SVG** for App Center submissions</span>

This comment has been minimized.

Copy link
@0xGabi

0xGabi Apr 5, 2019

Member

Maybe further explain what App Center submissions are? Or include a note or link.


<br>

<center> ![Do](/docs/assets/app-center-1.svg) ![Dont](/docs/assets/app-center-2.svg) </center>

### Large app icon

The large app icon will be used on the Aragon App Center, and unique icons help users to visually differentiate between apps. The large app icons can be displayed in various sizes, so you should target at least 192x192px when designing the icon.
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
The large app icon will be used on the Aragon App Center, and unique icons help users to visually differentiate between apps. The large app icons can be displayed in various sizes, so you should target at least 192x192px when designing the icon.
The large app icon will be displayed in the Aragon client's App Center, and unique icons will help users to visually differentiate between apps. The large app icons may be displayed in various sizes, so you should target at least 192x192px when designing the icon.
<br>
<br>
<span>![*](/docs/assets/check.svg) Try to have some visual similarity to the App menu icon - otherwise users can be confused



</span>
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
<span>![*](/docs/assets/check.svg) Try to have some visual similarity to the App menu icon - otherwise users can be confused



</span>
<span>![*](/docs/assets/check.svg) Try to have some visual similarity to the App menu icon - otherwise users may be confused after installing the app



</span>

<span>![*](/docs/assets/check.svg) The default Aragon apps have a **gradient background** and a **white cutout shape** - but it’s up to you to choose the branding and style for your app icon

</span>
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
<span>![*](/docs/assets/check.svg) The default Aragon apps have a **gradient background** and a **white cutout shape** - but it’s up to you to choose the branding and style for your app icon

</span>
<span>![*](/docs/assets/check.svg) The core Aragon apps (Finance, Token Manager, and Voting) have a **gradient background** and a **white cutout shape** - but it’s up to you to choose the branding and style for your app icon

</span>

<span>![*](/docs/assets/check.svg) Export to **SVG** or high res (192x192px) **PNG** for App Center submissions
 </span>

<span>![*](/docs/assets/check.svg) The exported icon shoueld be **square**. We will apply a mask with rounded edges - don’t export with rounded edges already applied in the design</span>
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
<span>![*](/docs/assets/check.svg) The exported icon shoueld be **square**. We will apply a mask with rounded edges - don’t export with rounded edges already applied in the design</span>
<span>![*](/docs/assets/check.svg) The exported icon should be **square**. The Aragon client will automatically apply a mask with rounded edges</span>

<br>

<center> ![Do](/docs/assets/app-center-3.svg) ![Dont](/docs/assets/app-center-4.svg) </center>

### App badge icons

The app badge icon can be used in the UI whenever the app is referenced in other apps. 
The badge is a default aragonUI component, and has some neat extra features, like being able to click on it to show the contract address and app version quickly.
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
The app badge icon can be used in the UI whenever the app is referenced in other apps. 
The badge is a default aragonUI component, and has some neat extra features, like being able to click on it to show the contract address and app version quickly.
The app badge icon can be used in the UI whenever the app is referenced in other apps. 
The badge is a default aragonUI component, and has some neat extra features, like being able to view the contract address and version of an app quickly.
<br>
<br>
<span>![*](/docs/assets/check.svg) This should be visually the same icon as the Large app icon - except if your Large app icon has a lot of detail, you may want to reduce the level of details for the App Badge icon as it’s small</span>
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
<span>![*](/docs/assets/check.svg) This should be visually the same icon as the Large app icon - except if your Large app icon has a lot of detail, you may want to reduce the level of details for the App Badge icon as it’s small</span>
<span>![*](/docs/assets/check.svg) This should be visually the same icon as the Large app icon. However, if your Large app icon has a lot of detail, you may want to reduce the level of detail for the app badge icon as it’s smaller</span>

<span>![*](/docs/assets/check.svg) Export to **SVG** or high res (48x48px) **PNG** for App Center submissions</span>

<span>![*](/docs/assets/check.svg) The exported icon should be **square**. We will apply a mask with rounded edges - don’t export with rounded edges already applied in the design</span>
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
<span>![*](/docs/assets/check.svg) The exported icon should be **square**. We will apply a mask with rounded edges - don’t export with rounded edges already applied in the design</span>
<span>![*](/docs/assets/check.svg) The exported icon should be **square**. The Aragon client will automatically apply a mask with rounded edges</span>

<br>

<center> ![Do](/docs/assets/app-center-5.svg) ![Dont](/docs/assets/app-center-6.svg) </center>

### Screenshots

The screenshots of your app will be used in the App Center view for your app, so that users can quickly see how your app looks before deciding to install it.
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
The screenshots of your app will be used in the App Center view for your app, so that users can quickly see how your app looks before deciding to install it.
The screenshots will be shown in your app's expanded App Center page, to show users a preview of your app before deciding to install it.
<br>
<br>
<span>![*](/docs/assets/check.svg) Include 2-8 main screens of your app - so it’s easy to see what it does</span>

<span>![*](/docs/assets/check.svg) You can include both desktop and mobile (portrait) screenshots

</span>

<span>![*](/docs/assets/check.svg) Desktop (landscape) screenshots should be 16:10 aspect ratio, minimum resolution
 **2560 px × 1600 px** (we will resize these to the final resolution)</span>
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
<span>![*](/docs/assets/check.svg) Desktop (landscape) screenshots should be 16:10 aspect ratio, minimum resolution
 **2560 px × 1600 px** (we will resize these to the final resolution)</span>
<span>![*](/docs/assets/check.svg) Desktop (landscape) screenshots should be 16:10 aspect ratio, minimum resolution
 **2560 px × 1600 px** (they will be automatically resized)</span>

<span>![*](/docs/assets/check.svg) Mobile (portrait) screenshots should be 9:16 aspect ratio, minimum resolution
 **1080 px x 1920 px** (we will resize these to the final resolution)</span>
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
<span>![*](/docs/assets/check.svg) Mobile (portrait) screenshots should be 9:16 aspect ratio, minimum resolution
 **1080 px x 1920 px** (we will resize these to the final resolution)</span>
<span>![*](/docs/assets/check.svg) Mobile (portrait) screenshots should be 9:16 aspect ratio, minimum resolution
 **1080 px x 1920 px** (they will be automatically resized)</span>

<span>![*](/docs/assets/check.svg) Export to **PNG** for App Center submissions</span>

<br>

### App description

The description of your app is very important for users to quickly understand what it does. The App Center uses two descriptions.
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
The description of your app is very important for users to quickly understand what it does. The App Center uses two descriptions.
The description of your app is very important for users to quickly understand what it does. The App Center can render two descriptions: a short preview and a longer, detailed description.

#### Short description

This is shown on the App Center cards - it will be the first impression of your app so make it count!
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
This is shown on the App Center cards - it will be the first impression of your app so make it count!
This is shown on your app's card in the App Center - it will be the first impression of your app, so make it count!
<br>
<br>
<span>![*](/docs/assets/check.svg)Maximum 3 lines of text, max character count 60</span>

<span>![*](/docs/assets/check.svg)Keep it very easy to understand at a glance</span>

<span>![*](/docs/assets/check.svg)Don’t repeat the app name in the short description</span>

<br>

<center> ![Do](/docs/assets/app-center-7.svg) ![Dont](/docs/assets/app-center-8.svg) </center>

#### Long description

This is shown on the App Center view about your app. The best kind of description is a concise, informative paragraph followed by a short list of main features. Potential users will skim through this so make it easy to digest.
This conversation was marked as resolved by delfipolito

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 5, 2019

Member
Suggested change
This is shown on the App Center view about your app. The best kind of description is a concise, informative paragraph followed by a short list of main features. Potential users will skim through this so make it easy to digest.
The long description will be shown in your app's expanded App Center page. We recommend using a concise, informative paragraph followed by a short list of main features. Potential users will likely skim through this, so make it easy to digest.
<br>
<br>
<span>![*](/docs/assets/check.svg)Maximum character count 400</span>

<span>![*](/docs/assets/check.svg)Ideally a short paragraph about the main app function, then a list of features</span>

<span>![*](/docs/assets/check.svg)Keep it simple to understand for all types of users</span>

<span>![*](/docs/assets/check.svg)You can use Markdown for rich text</span>

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
Oops, something went wrong.
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.