Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bear Lee
2006-2009
60
Woody Lee
/UI
Vitals ESP 2015
2015
2014
2013
UI Kit
GSS FED
2016
Rebranding1 Cloud Services Rebranding
Visual Identity
17 cm
5 cm
0.125 cm
0.2 cm
20151 Cloud Services Rebranding
Visual Identity
17 cm
5 cm
0.125 cm
0.2 cm
Payroll
00B4FF RGB 0 180 255
555555 RGB 85 85 85
0040BF RGB 0 64 191
RGB 0 195 255
RGB 0 236 24...
4 cm
4 cm
4 cm
0.75 cm 0.5 cm
0.75 cm
Shree Devanagari 714 Regular
size : 27 pt
kerning : optical
tracking : 10
stroke : 0...
17 cm
5 cm
0.125 cm
0.2 cm
1 Cloud Services Rebranding
Visual Identity
1 Cloud Services Rebranding
Visual Identity
UI1 Cloud Services Rebranding
Visual Identity
1 Cloud Services Rebranding
Visual Identity
UI kit
2 How to start
UI kit
General Ledger
CRM
Payroll
VAT
Official Document
Knowledge
FormDoc
Task & Meet
UI kit
2 How to start
UI kit
UI kit
UI kit
2 How to start
UI kit
UI
2 How to start
UI kit
1.
2. UI / UX
3.
2 How to start
UI kit
#00B4FF
#0040BF
#006A7C
#EB5000
#555555
#00C3FF
#35D4C3
#FFB400
#00ECF6
#95F7C8
#FFE815
Vital Productivity Tools colors
Vi...
#00B4FF
#0040BF
#006A7C
#EB5000
#555555
#00C3FF
#35D4C3
#FFB400
#00ECF6
#95F7C8
#FFE815
Vital Productivity Tools colors
Vi...
#00B4FF
#0040BF
#006A7C
#EB5000
#555555
#00C3FF
#35D4C3
#FFB400
#00ECF6
#95F7C8
#FFE815
Vital Productivity Tools colors
Vi...
#00B4FF
#0040BF
#006A7C
#EB5000
#555555
#00C3FF
#35D4C3
#FFB400
#00ECF6
#95F7C8
#FFE815
Vital Productivity Tools colors
Vi...
#00B4FF
#0040BF
#006A7C
#EB5000
#555555
#00C3FF
#35D4C3
#FFB400
#00ECF6
#95F7C8
#FFE815
Vital Productivity Tools colors
Vi...
#00B4FF
#0040BF
#006A7C
#EB5000
#555555
#00C3FF
#35D4C3
#FFB400
#00ECF6
#95F7C8
#FFE815
Vital Productivity Tools colors
Vi...
#0E86FE
#555555#333333#0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8
#EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6...
Basic Basic
light-background dark-background
Links
With dropdown / Tree / Accordion
Links
With dropdown / Tree / Accordion...
Image Image
Round Square
Users without profile pictures have their initials as avatars. Users without profile pictures have ...
Image Image
Round Square
Users without profile pictures have their initials as avatars. Users without profile pictures have ...
—
Avatar
Check list Check list
Check Box Input (default) Check Box Input (default)
Check Box Input (active) Check Box Inpu...
Inputs
dramsign
• • • • • • •
dieterams@gmsil.com.tw
+0 Ext
Year
Dieter Rams
Example: James Allen
Username is available
Th...
Inputs
align-right align-left
Enter Email… Enter Email…
Enter telephone number… Enter telephone number…
Enter mobile phone...
Table
Basic
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table D...
Table
Basic
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table D...
Basic
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Ta...
Basic
Table Data Table Data Table Data
Table Header 01 Table Header 02 Table Header 03
Table Data Table Data Table Data
Ta...
( )
Let’s Get Started
Ŏ
Congrats!
Account locked out
You have entered an incorrect password 5 times,
cannot be log on to i...
Let’s Get Started
Ŏ
Congrats!
Account locked out
You have entered an incorrect password 5 times,
cannot be log on to in 15...
3 Product application
- Official Document
UI Kit
15 20
2016.04
UI UI kit
3 Product application
#EEF2FC
#F7F9FD
#D8E2F5
#95ABD3
#C3D1EB
#7189B6
#456296
#2A4880
#1E3868
#00C3FF
#0E86FE
#555555
#333333
#0D0D0D
#888888
#a...
#EEF2FC
#F7F9FD
#D8E2F5
#95ABD3
#C3D1EB
#7189B6
#456296
#2A4880
#1E3868
#00C3FF
#0E86FE
#555555
#333333
#0D0D0D
#888888
#a...
#EEF2FC
#F7F9FD
#D8E2F5
#95ABD3
#C3D1EB
#7189B6
#456296
#2A4880
#1E3868
#00C3FF
#0E86FE
#555555
#333333
#0D0D0D
#888888
#a...
#EEF2FC
#F7F9FD
#D8E2F5
#95ABD3
#C3D1EB
#7189B6
#456296
#2A4880
#1E3868
#00C3FF
#0E86FE
#555555
#333333
#0D0D0D
#888888
#a...
#EEF2FC
#F7F9FD
#D8E2F5
#95ABD3
#C3D1EB
#7189B6
#456296
#2A4880
#1E3868
#00C3FF
#0E86FE
#555555
#333333
#0D0D0D
#888888
#a...
#EEF2FC
#F7F9FD
#D8E2F5
#95ABD3
#C3D1EB
#7189B6
#456296
#2A4880
#1E3868
#00C3FF
#0E86FE
#555555
#333333
#0D0D0D
#888888
#a...
1 -
ƻ
3 Product application
ƻ
1 -
ƻ ƻ
3 Product application
1 -
Hover Active
ƻ
Hover
Active
3 Product application
2 -
3 Product application
2 -
( )
1 - 13 131 2 3
3 Product application
2 -
( )
UI
3 Product application
2 -
( )
Pill tab
Secondary
3 Product application
2 -
( )
Tab Tab Tab
Header pill
3 Product application
2 -
( )
Tab Tab Tab
Header pill
3 Product application
Tab
Tab
2 -
( )
3 Product application
3 - Table
Table Grid
3 Product application
( )
1020001029 104/04/271
1020001029 104/04/274
1020001029 104/04/273
102000102...
3 - Table
( )
Table
10200027464
10300007419
10200010298
10010000277
10200010296
10010000275
10200036383
1020007412
1020001...
3 - Table
( )
Table
10200027464
10300007419
10200010298
10010000277
10200010296
10010000275
10200036383
1020007412
1020001...
UI UI Kit
QA
3 Product application
3 Product application
3 Product application
3 Product application
3 Product application
3 Product application
3 Product application
3 Product application
3 Product application
3 Product application
3 Product application
3 Product application
3 Product application
3 Product application
3 Product application
3 Product application
3 Product application
PS.
3 Product application
3 Product application
4 Extensibility
UI kit
UI kit
4 Extensibility
UI kit
CMS
2016
4 Extensibility
UI kit
UI kit
4 Extensibility
UI kit
Primary
4 Extensibility
UI kit
Alarm
color:
#ffffff
background:
$c-alarm-500
Warning
color:
#ffffff
background:
$c-warning-500
Inf...
4 Extensibility
UI kit
Secondary
Grayscale


#EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868
color-Secon...
4 Extensibility
UI kit


#EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868
color-Secondary
#555555#333333#...
4 Extensibility
UI kit
Pinterest
alarm


#EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868
color-Secondary...
4 Extensibility
UI kit
#EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868
color-Secondary
4 Extensibility
UI kit
#EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868
color-Secondary
4 Extensibility
UI kit
#EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868
color-Secondary
4 Extensibility
UI kit
#EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868
color-Secondary
4 Extensibility
UI kit
#EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868
color-Secondary
2016-10-13
•
Dec....
PMPM
PM PM
PMPM
PMPM
Design Kickoff
&
PM
FEDFront-End Design Department
UWILLyou will experience
X
Government Project
Taipei City
Government Project
Taipei City
Government Project
Taipei City
Government Project
Department of Executive
https://dribbble.com/gss
https://www.instagram.com/uwillx/
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Vital UI kit
Upcoming SlideShare
Loading in …5
×

Vital UI kit

7,188 views

Published on

share with RGBA and Taiwan FEE group

Published in: Design
  • How can I improve my memory before an exam? How can I improve my study skills? learn more... ♥♥♥ https://bit.ly/2GEWG9T
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Memory Improvement: How To Improve Your Memory In Just 30 Days, click here.. ●●● https://tinyurl.com/brainpill101
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Vital UI kit

  1. 1. Bear Lee 2006-2009 60
  2. 2. Woody Lee /UI Vitals ESP 2015 2015 2014 2013
  3. 3. UI Kit GSS FED 2016
  4. 4. Rebranding1 Cloud Services Rebranding Visual Identity
  5. 5. 17 cm 5 cm 0.125 cm 0.2 cm 20151 Cloud Services Rebranding Visual Identity
  6. 6. 17 cm 5 cm 0.125 cm 0.2 cm Payroll 00B4FF RGB 0 180 255 555555 RGB 85 85 85 0040BF RGB 0 64 191 RGB 0 195 255 RGB 0 236 246 00C3FF 00ECF6 EB5000 RGB 235 80 0 RGB 255 180 0 RGB 255 232 21 FFB400 FFE815 006A7C RGB 0 106 124 RGB 53 212 195 RGB 149 247 200 35D4C3 95F7C8 0.5 cm 0.5 cm Shree Devanagari 714 Regular size : 27 pt kerning : optical tracking : 10 stroke : 0.75 pt (round corner) Shree Devanagari 714 Regular size : 27 pt kerning : optical tracking : 10 stroke : 0.75 pt (round corner) 3 cm 2 cm 1 cm 1 cm 0.5 cm 0.5 cm Shree Devanagari 714 Regular size : 44 pt kerning : optical tracking : 0 stroke : 0.75 pt (round corner) Special Symbols Shree Devanagari 714 Regular size : 33 pt stroke : 0.75 pt + 0.25 pt (round corner) 2 cm 0.75 cm 2 cm 0.5 cm icon 字型 / 橫向直立規範 icon 橫向文字稍大規範 General Ledger General Ledger General Ledger Task & Meet 4 cm 6 cm 積木概念大小比例 10 cm 15 cm 2.5 cm 2 cm 1 Cloud Services Rebranding Visual Identity
  7. 7. 4 cm 4 cm 4 cm 0.75 cm 0.5 cm 0.75 cm Shree Devanagari 714 Regular size : 27 pt kerning : optical tracking : 10 stroke : 0.75 pt (round corner) 0.75 cm 4 cm 0.75 cm 0.3 cm 0.3 cm Special Symbols (resize based on the middle line) Shree Devanagari 714 Regular size : 20 pt stroke : 0.75 pt + 0.25 pt (round corner) Shree Devanagari 714 Regular size : 27 pt kerning : optical tracking : 75 stroke : 0.75 pt (round corner) 1234567890!@#$%^&*()_+ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Shree Devanagari 714 Regular (size 27pt, stroke 0.75pt) Payroll Payroll General Ledger CRM Task & Meet 00B4FF RGB 0 180 255 555555 RGB 85 85 85 Payroll Payroll PayrollKnowledge General Ledger CRM FormDoc Official Document 目前產品 呈現方式 Payroll Task & Meet A B C D E F G H R S T U V W X Y Z I J K L M N O P Q 1 Cloud Services Rebranding Visual Identity
  8. 8. 17 cm 5 cm 0.125 cm 0.2 cm 1 Cloud Services Rebranding Visual Identity
  9. 9. 1 Cloud Services Rebranding Visual Identity
  10. 10. UI1 Cloud Services Rebranding Visual Identity
  11. 11. 1 Cloud Services Rebranding Visual Identity
  12. 12. UI kit
  13. 13. 2 How to start UI kit General Ledger CRM Payroll VAT Official Document Knowledge FormDoc Task & Meet
  14. 14. UI kit 2 How to start UI kit
  15. 15. UI kit UI kit 2 How to start UI kit
  16. 16. UI 2 How to start UI kit
  17. 17. 1. 2. UI / UX 3. 2 How to start UI kit
  18. 18. #00B4FF #0040BF #006A7C #EB5000 #555555 #00C3FF #35D4C3 #FFB400 #00ECF6 #95F7C8 #FFE815 Vital Productivity Tools colors Vital Management Tools colors Vital CRM Tools colors Payroll 2 Basic elements
  19. 19. #00B4FF #0040BF #006A7C #EB5000 #555555 #00C3FF #35D4C3 #FFB400 #00ECF6 #95F7C8 #FFE815 Vital Productivity Tools colors Vital Management Tools colors Vital CRM Tools colors #0E86FE #555555#333333#0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8 #EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868 color-Secondary Sooge Blue = color-primary color-Grayscale color-Tertiary #676F80 #99A0B2 #E0E5F0 color-primary color-success color--info color--alarm Medium 500 dark 600 darker 700 darkest 800 deepest-dark 900 light 400 lighter 300 lightest 200 deepest-light 100 #A6D2FF #A5ECCD #D9ECFF #CFF5E4 #73B9FE #7BE3B5 #0E86FE #2BCD86 #419FFE #51DA9E #016DD8 #22A36A #0153A5 #19794F #003A73 #104F33 #002040 #082518 #99E7FF #CCF3FF#66DBFF#00C3FF #33CFFF#009CCC#007599#004E66#002733 #FFAE85 #FFD0B8#FF8D52#EB5000 #FF6B1F#B83F00#852D00#521C00#1F0B00 color--warning #FFDC99 #FFEDCC#FFCA66#FFA700 #FFB933#CC8600#996400#664300#332200 2 Basic elements
  20. 20. #00B4FF #0040BF #006A7C #EB5000 #555555 #00C3FF #35D4C3 #FFB400 #00ECF6 #95F7C8 #FFE815 Vital Productivity Tools colors Vital Management Tools colors Vital CRM Tools colors color-primary color-success color--info color--alarm Medium 500 dark 600 darker 700 darkest 800 deepest-dark 900 light 400 lighter 300 lightest 200 deepest-light 100 #A6D2FF #A5ECCD #D9ECFF #CFF5E4 #73B9FE #7BE3B5 #0E86FE #2BCD86 #419FFE #51DA9E #016DD8 #22A36A #0153A5 #19794F #003A73 #104F33 #002040 #082518 #99E7FF #CCF3FF#66DBFF#00C3FF #33CFFF#009CCC#007599#004E66#002733 #FFAE85 #FFD0B8#FF8D52#EB5000 #FF6B1F#B83F00#852D00#521C00#1F0B00 color--warning #FFDC99 #FFEDCC#FFCA66#FFA700 #FFB933#CC8600#996400#664300#332200 #0E86FE #555555#333333#0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8 #EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868 color-Secondary Sooge Blue = color-primary color-Grayscale color-Tertiary #676F80 #99A0B2 #E0E5F0 #00B4FF Primary 2 Basic elements
  21. 21. #00B4FF #0040BF #006A7C #EB5000 #555555 #00C3FF #35D4C3 #FFB400 #00ECF6 #95F7C8 #FFE815 Vital Productivity Tools colors Vital Management Tools colors Vital CRM Tools colors color-primary color-success color--info color--alarm Medium 500 dark 600 darker 700 darkest 800 deepest-dark 900 light 400 lighter 300 lightest 200 deepest-light 100 #A6D2FF #A5ECCD #D9ECFF #CFF5E4 #73B9FE #7BE3B5 #0E86FE #2BCD86 #419FFE #51DA9E #016DD8 #22A36A #0153A5 #19794F #003A73 #104F33 #002040 #082518 #99E7FF #CCF3FF#66DBFF#00C3FF #33CFFF#009CCC#007599#004E66#002733 #FFAE85 #FFD0B8#FF8D52#EB5000 #FF6B1F#B83F00#852D00#521C00#1F0B00 color--warning #FFDC99 #FFEDCC#FFCA66#FFA700 #FFB933#CC8600#996400#664300#332200 #0E86FE #555555#333333#0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8 #EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868 color-Secondary Sooge Blue = color-primary color-Grayscale color-Tertiary #676F80 #99A0B2 #E0E5F0 - Secondary - Grayscale 
 -Tertiary 2 Basic elements
  22. 22. #00B4FF #0040BF #006A7C #EB5000 #555555 #00C3FF #35D4C3 #FFB400 #00ECF6 #95F7C8 #FFE815 Vital Productivity Tools colors Vital Management Tools colors Vital CRM Tools colors #0E86FE #555555#333333#0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8 #EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868 color-Secondary Sooge Blue = color-primary color-Grayscale color-Tertiary #676F80 #99A0B2 #E0E5F0 color-primary color-success color--info color--alarm Medium 500 dark 600 darker 700 darkest 800 deepest-dark 900 light 400 lighter 300 lightest 200 deepest-light 100 #A6D2FF #A5ECCD #D9ECFF #CFF5E4 #73B9FE #7BE3B5 #0E86FE #2BCD86 #419FFE #51DA9E #016DD8 #22A36A #0153A5 #19794F #003A73 #104F33 #002040 #082518 #99E7FF #CCF3FF#66DBFF#00C3FF #33CFFF#009CCC#007599#004E66#002733 #FFAE85 #FFD0B8#FF8D52#EB5000 #FF6B1F#B83F00#852D00#521C00#1F0B00 color--warning #FFDC99 #FFEDCC#FFCA66#FFA700 #FFB933#CC8600#996400#664300#332200 Material design Bootstrap Primary, Success, Info, Warning, Alarm 2 Basic elements
  23. 23. #00B4FF #0040BF #006A7C #EB5000 #555555 #00C3FF #35D4C3 #FFB400 #00ECF6 #95F7C8 #FFE815 Vital Productivity Tools colors Vital Management Tools colors Vital CRM Tools colors #0E86FE #555555#333333#0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8 #EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868 color-Secondary Sooge Blue = color-primary color-Grayscale color-Tertiary #676F80 #99A0B2 #E0E5F0 color-primary color-success color--info color--alarm Medium 500 dark 600 darker 700 darkest 800 deepest-dark 900 light 400 lighter 300 lightest 200 deepest-light 100 #A6D2FF #A5ECCD #D9ECFF #CFF5E4 #73B9FE #7BE3B5 #0E86FE #2BCD86 #419FFE #51DA9E #016DD8 #22A36A #0153A5 #19794F #003A73 #104F33 #002040 #082518 #99E7FF #CCF3FF#66DBFF#00C3FF #33CFFF#009CCC#007599#004E66#002733 #FFAE85 #FFD0B8#FF8D52#EB5000 #FF6B1F#B83F00#852D00#521C00#1F0B00 color--warning #FFDC99 #FFEDCC#FFCA66#FFA700 #FFB933#CC8600#996400#664300#332200 Alarm color: #ffffff background: $c-alarm-500 Warning color: #ffffff background: $c-warning-500 Info color: #ffffff background: $c-info-500 Success color: #ffffff background: $c-success-500 Primary color: #ffffff background: $c-primary-500 Default color: $c-tertiary-700 background: $c-tertiary-200 Inverse color: #ffffff background: $c-secondary-800 2 Basic elements
  24. 24. #0E86FE #555555#333333#0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8 #EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868 color-Secondary Sooge Blue = color-primary color-Grayscale color-Tertiary #676F80 #99A0B2 #E0E5F0 Download Delete Print Search Prev With icon Icon Next Attached Attached on top One Two FourThree Attached on bottom HoverActive Inputs placeholder… placeholder… placeholder… placeholder… Default Focus Disabled Error Not editable Error Editable http://semantic-ui.com/elements/input.html Basic background: $color-alarm-100 border: 1px solid $color-alarm-500 User Account Inbox Schedule Editorials Setting Hover Group 001 Group 002 Group 003 User 001 User 002User 002 User 003 Hover Active Buttons, Inputs, Menu ( ) 2 Basic elements
  25. 25. Basic Basic light-background dark-background Links With dropdown / Tree / Accordion Links With dropdown / Tree / Accordion Item 01 Item 01 Item 01 Item 01 Item 01 Item 02 Item 02 Item 02 Item 02 Item 02 - 1 Item 02 - 2 Item 02 - 3 Item 02 Item 03 Item 03 Item 03 Item 03 Item 03 Item 01 Item 02 Item 02 - 1 Item 02 - 2 Item 02 - 3 Item 03 Collapse Styled Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Question 01 Item 02 Question 03 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Question 01 Question 02 Question 03 Question BasicBasic Inverted Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Question 01 Question 02 Question 03 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Question 01 Question 02 Question 03 Lists, Collapse 2 Basic elements
  26. 26. Image Image Round Square Users without profile pictures have their initials as avatars. Users without profile pictures have their initials as avatars. xl xl xl 4px l 4px m 3px s 2px xs 2px xl 4px l 4px m 3px s 2px xs 2px xl 3px l 2px m 2px s 1px xs 1px xl 3px l 2px m 2px s 1px xs 1px 64px 64px l l 48px 48px m m 32px 32px s s 24px 24px xs xs 16px 16px No-image - user-initials - light-background xl RF KL 64px l 48px m 32px s 24px xs 16px No-image - user-initials - light-background xl RF KL 64px l 48px m 32px s 24px xs 16px border-radius Guide border-radius Guideborder-width Guideborder-width Guide Primary button active color Success button active color Info button active color Warming button active color Danger button active color Color Guide Primary button active color Success button active color Info button active color Warming button active color Danger button active color Color Guide With badge Badge position Badge position Only shape Only shapeValues in the badge With badge 99+ 99+ Avatar UI 2 Basic elements
  27. 27. Image Image Round Square Users without profile pictures have their initials as avatars. Users without profile pictures have their initials as avatars. xl xl xl 4px l 4px m 3px s 2px xs 2px xl 4px l 4px m 3px s 2px xs 2px xl 3px l 2px m 2px s 1px xs 1px xl 3px l 2px m 2px s 1px xs 1px 64px 64px l l 48px 48px m m 32px 32px s s 24px 24px xs xs 16px 16px No-image - user-initials - light-background xl RF KL 64px l 48px m 32px s 24px xs 16px No-image - user-initials - light-background xl RF KL 64px l 48px m 32px s 24px xs 16px border-radius Guide border-radius Guideborder-width Guideborder-width Guide Primary button active color Success button active color Info button active color Warming button active color Danger button active color Color Guide Primary button active color Success button active color Info button active color Warming button active color Danger button active color Color Guide With badge Badge position Badge position Only shape Only shapeValues in the badge With badge 99+ 99+ Avatar 2 Basic elements
  28. 28. — Avatar Check list Check list Check Box Input (default) Check Box Input (default) Check Box Input (active) Check Box Input (active) Check Box Input (selected) Check Box Input (selected) Check Box Input (hover) Check Box Input (hover) Check Box Input (disable) Check Box Input (disable) Check Box Input (always selected) Check Box Input (always selected) Check Box RoundSquare Option list Radio Input (default) Radio Input (hover) Radio Input (active) Radio Input (disable) Radio Input (selected) Radio Input (always selected) Radio Switch On Active Selected Selected Selected Active Selected Active Disable Off Round Basic With icon With text OnOff Active Disable Square Basic With icon With text 2 Basic elements
  29. 29. Inputs dramsign • • • • • • • dieterams@gmsil.com.tw +0 Ext Year Dieter Rams Example: James Allen Username is available This is a alternate name for your account, used by some network services. Enter 8 lowercase characters or fewer with no spaces. Example: jallen Your account has been locked because you have reached the maximum number of invalid logon attempts. Please enter a valid email address Required YYYY Month Taiwan(+886) 20 Year phone number… MM Enter the Area code After “0” please omit if there is no extension number User Name Email Birthday Telephone Full Name Password Password • • • • • Password strength: weak • • • • • • • Password strength: Fair • • • • • • • • • Password strength: Good • • • • • • • • • • • Password strength: Great Password • • • • • Password strength: weak • • • • • • • Password strength: Fair • • • • • • • • • Password strength: Good • • • • • • • • • • • Password strength: Great Ŏ Input table 2 Basic elements
  30. 30. Inputs align-right align-left Enter Email… Enter Email… Enter telephone number… Enter telephone number… Enter mobile phone number… Enter mobile phone number… Male Male Australia Australia Last-NameFitst-Name Last-NameFitst-Name Introduce youself… Introduce youself… Email Email Tele Tele Mobile phone Mobile phone Gender Gender Country Country Full Name Full Name Brief Intro Brief Intro labels on the Left Side 2 Basic elements
  31. 31. Table Basic Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Bordered Striped Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover Table Align With checkboxs, inputs | list selected background color Resize 16.0 2.0 30.5 Table Data 200,000,000 86% Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05 Table Data 16,500 Aug. 5, 2015 6% Table Data 500,000 Dec. 12, 2015 18% Oct. 23, 2015 Table Data 16.0 200,000,000 Oct. 23, 2015 86% Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05 Table Data 2.0 16,500 Aug. 5, 2015 6% Table Data 30.5 500,000 Dec. 12, 2015 18% 16.0 2.0 30.5 Table Data 200,000,000 86% Table Data 16,500 Aug. 5, 2015 6% Table Data 500,000 Dec. 12, 2015 18% Oct. 23, 2015 Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05 2 Basic elements
  32. 32. Table Basic Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Bordered Striped Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover table input content Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Placeholder… Value Value Label Label Label Align With checkboxs, inputs | list selected background color Resize 16.0 2.0 30.5 Table Data 200,000,000 86% Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05 Table Data 16,500 Aug. 5, 2015 6% Table Data 500,000 Dec. 12, 2015 18% Oct. 23, 2015 Table Data 16.0 200,000,000 Oct. 23, 2015 86% Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05 Table Data 2.0 16,500 Aug. 5, 2015 6% Table Data 30.5 500,000 Dec. 12, 2015 18% 16.0 2.0 30.5 Table Data 200,000,000 86% Table Data 16,500 Aug. 5, 2015 6% Table Data 500,000 Dec. 12, 2015 18% Oct. 23, 2015 Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05 2 Basic elements
  33. 33. Basic Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Bordered Striped Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover Align With checkboxs, inputs | list selected background color Resize 16.0 2.0 30.5 Table Data 200,000,000 86% Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05 Table Data 16,500 Aug. 5, 2015 6% Table Data 500,000 Dec. 12, 2015 18% Oct. 23, 2015 Table Data 16.0 200,000,000 Oct. 23, 2015 86% Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05 Table Data 2.0 16,500 Aug. 5, 2015 6% Table Data 30.5 500,000 Dec. 12, 2015 18% 16.0 2.0 30.5 Table Data 200,000,000 86% Table Data 16,500 Aug. 5, 2015 6% Table Data 500,000 Dec. 12, 2015 18% Oct. 23, 2015 Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05 Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Placeholder… Value Value Label Label Label 2 Basic elements
  34. 34. Basic Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Bordered Striped Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Hover Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Placeholder… Value Value Label Label Label Align With checkboxs, inputs | list selected background color Resize 16.0 2.0 30.5 Table Data 200,000,000 86% Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05 Table Data 16,500 Aug. 5, 2015 6% Table Data 500,000 Dec. 12, 2015 18% Oct. 23, 2015 Table Data 16.0 200,000,000 Oct. 23, 2015 86% Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05 Table Data 2.0 16,500 Aug. 5, 2015 6% Table Data 30.5 500,000 Dec. 12, 2015 18% 16.0 2.0 30.5 Table Data 200,000,000 86% Table Data 16,500 Aug. 5, 2015 6% Table Data 500,000 Dec. 12, 2015 18% Oct. 23, 2015 Table Header 01 Table Header 02 Table Header 03 Table Header 04 Table Header 05 Table Data Table Data Table Data Table Header 01 Table Header 02 Table Header 03 Table Data Table Data Table Data Table Data Table Data Table Data Placeholder… Value Value Label Label Label 2 Basic elements
  35. 35. ( ) Let’s Get Started Ŏ Congrats! Account locked out You have entered an incorrect password 5 times, cannot be log on to in 15 minutes Confirm Upload Finished Confirm New update available version 1.2.8 Confirm Update now Oops! Check your connection Confirm Confirm Title Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. An facer ponderum usu, ornatus phaedrum nam at… Link 99+ Default Primary Default Primary Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. An facer ponderum usu, ornatus phaedrum nam… Link Title Subtitle 2 Basic elements
  36. 36. Let’s Get Started Ŏ Congrats! Account locked out You have entered an incorrect password 5 times, cannot be log on to in 15 minutes Confirm Upload Finished Confirm New update available version 1.2.8 Confirm Update now Oops! Check your connection Confirm Confirm Title Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. An facer ponderum usu, ornatus phaedrum nam at… Link 99+ Default Primary Default Primary Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. An facer ponderum usu, ornatus phaedrum nam… Link Title Subtitle 2 Basic elements
  37. 37. 3 Product application
  38. 38. - Official Document UI Kit 15 20 2016.04 UI UI kit 3 Product application
  39. 39. #EEF2FC #F7F9FD #D8E2F5 #95ABD3 #C3D1EB #7189B6 #456296 #2A4880 #1E3868 #00C3FF #0E86FE #555555 #333333 #0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8 3 Product application
  40. 40. #EEF2FC #F7F9FD #D8E2F5 #95ABD3 #C3D1EB #7189B6 #456296 #2A4880 #1E3868 #00C3FF #0E86FE #555555 #333333 #0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8 Secondary Dom tree list level Hover, Active, Current 3 Product application
  41. 41. #EEF2FC #F7F9FD #D8E2F5 #95ABD3 #C3D1EB #7189B6 #456296 #2A4880 #1E3868 #00C3FF #0E86FE #555555 #333333 #0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8 Grayscale ( ) 
 Placeholder… Value General information Label Label Label 3 Product application
  42. 42. #EEF2FC #F7F9FD #D8E2F5 #95ABD3 #C3D1EB #7189B6 #456296 #2A4880 #1E3868 #00C3FF #0E86FE #555555 #333333 #0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8 info Badge Badge ( ) 3 Product application
  43. 43. #EEF2FC #F7F9FD #D8E2F5 #95ABD3 #C3D1EB #7189B6 #456296 #2A4880 #1E3868 #00C3FF #0E86FE #555555 #333333 #0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8 Primary 3 Product application
  44. 44. #EEF2FC #F7F9FD #D8E2F5 #95ABD3 #C3D1EB #7189B6 #456296 #2A4880 #1E3868 #00C3FF #0E86FE #555555 #333333 #0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8 3 Product application
  45. 45. 1 - ƻ 3 Product application
  46. 46. ƻ 1 - ƻ ƻ 3 Product application
  47. 47. 1 - Hover Active ƻ Hover Active 3 Product application
  48. 48. 2 - 3 Product application
  49. 49. 2 - ( ) 1 - 13 131 2 3 3 Product application
  50. 50. 2 - ( ) UI 3 Product application
  51. 51. 2 - ( ) Pill tab Secondary 3 Product application
  52. 52. 2 - ( ) Tab Tab Tab Header pill 3 Product application
  53. 53. 2 - ( ) Tab Tab Tab Header pill 3 Product application Tab Tab
  54. 54. 2 - ( ) 3 Product application
  55. 55. 3 - Table Table Grid 3 Product application ( ) 1020001029 104/04/271 1020001029 104/04/274 1020001029 104/04/273 1020001029 104/04/275 1020001029 104/04/276 1020001029 104/04/277 1020001029 104/04/278 1020001029 104/04/279 1020001029 104/04/272
  56. 56. 3 - Table ( ) Table 10200027464 10300007419 10200010298 10010000277 10200010296 10010000275 10200036383 1020007412 10200010291 3 Product application
  57. 57. 3 - Table ( ) Table 10200027464 10300007419 10200010298 10010000277 10200010296 10010000275 10200036383 1020007412 10200010291 Icon fontIcon font Speed icon gi-type icon table grid 3 Product application
  58. 58. UI UI Kit QA 3 Product application
  59. 59. 3 Product application
  60. 60. 3 Product application
  61. 61. 3 Product application
  62. 62. 3 Product application
  63. 63. 3 Product application
  64. 64. 3 Product application
  65. 65. 3 Product application
  66. 66. 3 Product application
  67. 67. 3 Product application
  68. 68. 3 Product application
  69. 69. 3 Product application
  70. 70. 3 Product application
  71. 71. 3 Product application
  72. 72. 3 Product application
  73. 73. 3 Product application
  74. 74. 3 Product application PS.
  75. 75. 3 Product application
  76. 76. 3 Product application
  77. 77. 4 Extensibility UI kit UI kit
  78. 78. 4 Extensibility UI kit CMS 2016
  79. 79. 4 Extensibility UI kit UI kit
  80. 80. 4 Extensibility UI kit Primary
  81. 81. 4 Extensibility UI kit Alarm color: #ffffff background: $c-alarm-500 Warning color: #ffffff background: $c-warning-500 Info color: #ffffff background: $c-info-500 Success color: #ffffff background: $c-success-500 Primary color: #ffffff background: $c-primary-500 Default color: $c-tertiary-700 background: $c-tertiary-200 Inverse color: #ffffff background: $c-secondary-800
  82. 82. 4 Extensibility UI kit Secondary Grayscale 
 #EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868 color-Secondary #555555#333333#0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8 color-Grayscale
  83. 83. 4 Extensibility UI kit 
 #EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868 color-Secondary #555555#333333#0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8 color-Grayscal #2BCD86
  84. 84. 4 Extensibility UI kit Pinterest alarm 
 #EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868 color-Secondary #555555#333333#0D0D0D #888888 #aaaaaa #cccccc #dddddd #F0F0F0 #F8F8F8 color-Grayscal #2BCD86
  85. 85. 4 Extensibility UI kit #EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868 color-Secondary
  86. 86. 4 Extensibility UI kit #EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868 color-Secondary
  87. 87. 4 Extensibility UI kit #EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868 color-Secondary
  88. 88. 4 Extensibility UI kit #EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868 color-Secondary
  89. 89. 4 Extensibility UI kit #EEF2FC #F7F9FD#D8E2F5#95ABD3 #C3D1EB#7189B6#456296#2A4880#1E3868 color-Secondary 2016-10-13 • Dec. 20, 2016 08:30 Inputs inputs Material design 
 
 UI kit
  90. 90. PMPM
  91. 91. PM PM
  92. 92. PMPM
  93. 93. PMPM
  94. 94. Design Kickoff
  95. 95. & PM
  96. 96. FEDFront-End Design Department
  97. 97. UWILLyou will experience X
  98. 98. Government Project Taipei City
  99. 99. Government Project Taipei City
  100. 100. Government Project Taipei City
  101. 101. Government Project Department of Executive
  102. 102. https://dribbble.com/gss https://www.instagram.com/uwillx/

×