Theme Pack Design Tips

Size: px

Start display at page:

Download "Theme Pack Design Tips"

Scott Holmes
6 years ago
Views:

1 Theme Pack Design Tips ASUS ZenUI Designer Community 19 August 2016

2 Instruction / Theme Pack Design Tips This guideline allows you to: 1. Know the basic principles and elements in theme pack designs used in app store. 2. Understand the notices before creating theme pack designs. 3. Review designs in accordance to the requirements stated in this guideline. Contents A Design specification notes C Design consistency A01 File Version 01 C01 Icon and overall design consistency 07 A02 Element can not be edited 02 C02 Relevant elements with the theme 08 B Design usability B01 Visual disturbance of wallpaper 03 C03 Third-party app icon C04 Third-party shortcut icon B02 Icon visibility B03 Icon intuitive association B04 Intuitive design button D Finalize the task D01 Fill in the color code in the excel file D02 Finalze the task D03 The quality of the cut image 13 D04 Completed files 14

3 A Design specification notes A01 File Version Make sure the file version is the latest version Theme Pack Design Tips 0 1/1 4

4 A Design specification notes A02 Element can not be edited You can't edit the elements with no marked layers. 2. Theme Pack -- How to Use the Photoshop Template Orange box area are uneditable layers. Theme Pack Design Tips 0 2/1 4

The blue circle and the blue speaker are too similar, they can be confusing.

5 B Design usability B01 Visual disturbance of wallpaper Avoid overlapping the main visual wallpaper icon and weather, the time zone, and the text area, to be able to highlight the icon. The blue circle and the blue speaker are too similar, they can be confusing. Change the speaker color to black The colors of the shortcut and the wallpaper are too similar. Theme Pack Design Tips 0 3/1 4

6 B Design usability B02 Icon visibility Refer to the following methods for improving icon visibility: 1. Adjust the contrast between the wallpaper and icon 2. Add color block, borders, shadows, etc on the bottom of the icon. 3. Strengthen the contrast icon itself 4. Add a transparent/opacity layer on the wallpaper (e x.35% Black) Avoid desigining white-colored icons because they may be difficult to find when searching for apps. Icon color is too light, it has no enough contrast to wallpaper. Theme Pack Design Tips 0 4/1 4

7 B Design usability B03 Icon intuitive association Use common tools when designing icons. Avoid using text. The design should be intuitively associated to its function. If you want to create a calendar icon. show the day on the icon and use 30. Convey the original concept of the icons you are designing for to avoid confusion. Theme Photocollage Minimovie ZenCircle ASUS Support Splendid Calendar icon: the date of calendar is incorrect. Browser icon: the design is not intuitively associated to its function. Theme Pack Design Tips 0 5/1 4

8 B Design usability B04 Intuitive design button Use high saturation for button colors. Use gray shades for button off Quick Settings Page(Quick Settings) The button for on/off is not clear enough. Theme Pack Design Tips 0 6/1 4

C Design consistency C01 Icon and overall design consistency Here are some tips to help you improve consistency in designing icons: 1. Be consistent with your displayed styles. 2.

9 C Design consistency C01 Icon and overall design consistency Here are some tips to help you improve consistency in designing icons: 1. Be consistent with your displayed styles. 2. Be consistent with the line thickness and rounded corners. 3. Follow the color rules. 4. Be consistent with size and proportions. 5. Follow the same style of simplicity or complexity. The icon colors are not consistent. Theme Pack Design Tips 0 7/1 4

C Design consistency C02 Relevant elements with the theme You can put

In Quicksetting: on-off button header image background function button

The elements in the orange columns should be more obvious. 5.

10 C Design consistency C02 Relevant elements with the theme You can put relevant elements and enhance the effect. For example: 1. In Quicksetting: on-off button header image background function button control button. 2. Launcher: all app. The elements in the orange columns should be more obvious Quick Settings Page(Quick Settings) You can put relevant elements and enhance the effect. Theme Pack Design Tips 0 8/1 4

11 C Design consistency C03 Third-party app icon Third-party app icons should have the same layout and material as the other icons. Try to display a large range of dimensions for icons to help make it easier for users to identify Image Elements on the Launcher Material/icon layout are not the same as other icons. The display area is too small to identify. Theme Pack Design Tips 0 9/1 4

Third-party app icons should be placed The icon is not consistent. in the middle of the app icon.

12 C Design consistency C04 Third-party shortcut icon Third-party app icons should have a consistent layout and materials as other icons. The shortcut should be in the middle of app icon zone. Third-party app icons should be placed The icon is not consistent. in the middle of the app icon. The third party app icon is not in within the right alignment Image Elements on the Lock Screen Theme Pack Design Tips 1 0/1 4

13 D Finalize the task D01 Fill in the color code in the excel file The yellow marked columns are mandatory to fill in. Please fill in the color code for fonts, quick setting button, 9patch 7.Theme Name and Text Color Code Tables Theme Pack Design Tips 1 1/1 4

14 D Finalize the task D02 Finalze the task You need to manually synchronize the third-party icon ( previews/as-sets/ com.asus.launcher.jpg ) Please resize and shrink your preview shortcut to less than 500 KB. 3.Table of Design Content You need to manually synchronize the third-party icon. Theme Pack Design Tips 1 2/1 4

D Finalize the task D03 The quality of the cut image Refer

Is the image complete? Are there any cut 1. 2. 3. 4. corners?

Are the file name and image name the same? 4.

15 D Finalize the task D03 The quality of the cut image Refer to the following tips when doing an image preview: 1. Is the image complete? Are there any cut corners? 2. Does the image blur at the edges? 3. Are the file name and image name the same? 4. Does the icon have a background? 6.3 Verifying the Cropped Image Files Theme Pack Design Tips 1 3/1 4

16 D Finalize the task D04 Completed files Theme_Folder assets res previews > 4 pieces Launcher drawable-nodpi > 37 pieces Check the file structure at the right hand side. Make sure the quantities are correct in each file folder. Lock Screen drawable-xxhdpi > 3 pieces drawable-nodpi > 1 pieces drawable-sw320dp-hdpi > 11 pieces drawable-sw320dp-xhdpi > 11 pieces drawable-sw320dp-xxhdpi > 11 pieces drawable-sw600dp-mdpi > 11 pieces drawable-sw600dp-tvdpi > 11 pieces drawable-sw600dp-xdpi > 11 pieces QuickSettings drawable-hdpi > 23 pieces drawable-mdpi > 23 pieces drawable-nodpi > 3 pieces drawable-sw360dp-xhdpi > 23 pieces drawable-sw360dp-xxhdpi > 23 pieces drawable-sw540dp-xhdpi > 17 pieces drawable-sw600dp-mhdpi > 17 pieces drawable-sw600dp-tvhdpi > 17 pieces drawable-sw600dp-xhdpi > 17 pieces rro Weather drawable-hdpi > 77 pieces drawable-xhdpi > 77 pieces drawable-xxhdpi > 77 pieces 6.3 Verifying the Cropped Image Files Theme Pack Design Tips 1 4/1 4

Preview from Notesale.co.uk Page 2 of 61

Preview from Notesale.co.uk Page 2 of 61 Modify a table Applying styles to tables; banding rows and columns; inserting total rows; removing styles from tables Filter and sort a table Filtering records; sorting data on multiple columns; changing