1. General: The UI made by the designer for the folders page is very similar to the sound d packs details page. We will make a few adjustments to be more consistent with the sound packs page. Below is a screenshot of the folder's detail page:
2. Implementation details: At first, we should plainly duplicate the sound packs page structure and apply it to the folders. As for sound packs, when clicking on a folder, the detail page appears.
3. Differences with sound packs page:
3.1 Description: The description in the header is no a text description like for packs, but only a summary of the files included in the folder. For now we should structure it as follow:
1st line: Total number of files (e.g 150 files)
2nd line: Tags (the list of tags attached to this folder)
3.2 Header background: The header background is different as for the sound packs, it doesn't included the blurred background effect. Also the title font color is different and is placed above the folder image.
3.3 Tags in header: The row of tags displayed in the header is to ignore for now:
3.4 Actions list: There is a row of actions which appear at the bottom of the header, this should be included (it has one option which is not included in the packs details page: "delete")
3.5 Filter bar: The sound packs page has a filter bar below the header, see screenshot below:
Although not in the sketch file design, this should be kept for the folders page as well, with the same functionality as for the sound packs page.
The "back" button which is located next to the tittle in the sketch file, is already included in the filters bar, and thus is to ignore for the header section.
Comments
Pierre henri Seylan on January 10, 2018:
For the new version the folders will work like the sound packs, having a dedicated sub page.
This task is about creating the detail page for folders, based on the pack's details page.
We will use the same UI and only makes small adjustments to the folders detail page.
NOTE: All elements included in the design but not listed here should be ignored, feel free to ask me if you are not sure.
LINK TO SKETCH FILE: https://www.dropbox.com/s/v3ononbf74l2muf/Desktop%20app.sketch?dl=0
1. General:
The UI made by the designer for the folders page is very similar to the sound d packs details page.
We will make a few adjustments to be more consistent with the sound packs page.
Below is a screenshot of the folder's detail page:
2. Implementation details:
At first, we should plainly duplicate the sound packs page structure and apply it to the folders.
As for sound packs, when clicking on a folder, the detail page appears.
3. Differences with sound packs page:
3.1 Description:
The description in the header is no a text description like for packs, but only a summary of the files included in the folder.
For now we should structure it as follow:
3.2 Header background:
The header background is different as for the sound packs, it doesn't included the blurred background effect.
Also the title font color is different and is placed above the folder image.
3.3 Tags in header:
The row of tags displayed in the header is to ignore for now:
3.4 Actions list:
There is a row of actions which appear at the bottom of the header, this should be included (it has one option which is not included in the packs details page: "delete")
3.5 Filter bar:
The sound packs page has a filter bar below the header, see screenshot below:
Although not in the sketch file design, this should be kept for the folders page as well, with the same functionality as for the sound packs page.
The "back" button which is located next to the tittle in the sketch file, is already included in the filters bar, and thus is to ignore for the header section.
Karim Alabtakh on January 15, 2018: