Roboteam - Styleguide for UI Project
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
294
On Slideshare
294
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO roboteam / Styleguide 24.04.2013
  • 2. 'me' icon 'video' icon 'UVA' icon 'soldier' icon RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO main icons / Source icons, off position Source icons, on position - color: green, #00a550 width: 2 pix
  • 3. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO main icons / ????? Fill1: 255 , 255 , 255 Pattern: Lines Fill 2 : 44 , 131 , 212 / 44 , 131 , 212 / 41 , 80 , 139 Opacity: 100% Gradient: Type: Radial Aspect Ratio: 148.1% 44 , 131 , 212: Opacity: 80% Location: 0% 44 , 131 , 212: Opacity: 100% Location: 50% 41 , 80 , 139: Opacity: 100% Location: 100% Left Color: Stroke: Weight: 2.098 px Color: 44 , 131 , 212 Icon: 35 , 31 , 32 Effect: Drop Shadow Pin: 44 , 131 , 212 Center Color: Right Color: Left circle: 255 , 255 , 255 Center circle: 0 , 173 , 238 Right circle: 253 , 200 , 18 Myriad Pro Regular 14 px 255 , 255 , 255 Effect: Drop Shadow
  • 4. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO main icons / ????? Fill 1: 255 , 255 , 255 / 249 , 249 , 249 / 209 , 209 , 209 / 153 , 153 , 153 / 153 , 153 , 153 Opacity: 100% Gradient: Type: Linear Angle: -55 209 , 209 , 209 Opacity: 100% Location: 50.98% 153 , 153 , 153 Opacity: 100% Location: 68.62% 153 , 153 , 153 Opacity: 100% Location: 100% 249 , 249 , 249 Opacity: 100% Location: 22.29% 255 , 255 , 255 Opacity: 100% Location: 0% 255 , 255 , 255 Opacity: 100%
  • 5. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO main icons / ????? Fill 1: 255 , 255 , 255 / 249 , 249 , 249 / 209 , 209 , 209 / 153 , 153 , 153 / 153 , 153 , 153 Opacity: 100% Gradient: Type: Linear Angle: -55 209 , 209 , 209 Opacity: 100% Location: 52.24% 153 , 153 , 153 Opacity: 100% Location: 100% 249 , 249 , 249 Opacity: 100% Location: 22.29% 255 , 255 , 255 Opacity: 100% Location: 0% 35 , 31 , 32 Opacity: 70%
  • 6. 'telestration' icon 'soldier' icon 'home' icon 'settings' icon RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO system icons / System icons, off position System icons, on position OK and Cancel buttons, off position OK and Cancel buttons, on position red: 161, 4, 4 orange: 215, 119, 16 angle: 90˚ green: 81, 175, 52 green: 130, 211, 68 angle: 90˚ red: 145, 5, 5 green: 69, 135, 6
  • 7. N REC COM 21 GTS12 TK34 GTS12 TK34 GTS12 TK34 GTS12 TK34 GTS12 TK34 RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO Master page / with Back Home icon 25 px25 px 25 px 25 px 159 px 25 px 25 px 300.5 px 25 px25 px 40 px Myriad Pro Bold 28 px 255 , 255 , 255 Effect: Drop Shadow Text: Myriad Pro Regular 26 px 255 , 255 , 255
  • 8. N REC COM 21 GTS12 TK34 GTS12 TK34 GTS12 TK34 GTS12 TK34 GTS12 TK34 RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO Master page / with settings icon 25 px25 px 25 px 25 px 159 px 25 px 25 px 300.5 px 25 px25 px 40 px Myriad Pro Bold 28 px 255 , 255 , 255 Effect: Drop Shadow Text: Myriad Pro Regular 26 px 255 , 255 , 255
  • 9. REC COM 21 Team Al_ Select group color RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO group creation screen / colors Text on text field. Font: Myriad Pro, 48 px color: 35, 31, 32 Font: Myriad Pro, 25 px color: 35, 31, 32 390 px 22 px32 px 125 px
  • 10. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO group creation screen / colors Colors for 'Group screen' color: green, #00a550 width: 2 px gray: 152, 162, 152 white: 255, 255, 255 angle: 90˚ red: 255, 0, 0 orange: 247, 146, 3 angle: 90˚ red: 225, 0, 25 green: 0, 96, 27 angle: 90˚ blue: 28, 63, 122 blue: 61, 133, 237 angle: 90˚ green: 22, 123, 19 green: 16, 202, 86 angle: 90˚ purple: 94, 31, 180 purple: 172, 41, 233 angle: 90˚
  • 11. N REC COM 21 GTS12 TK34 GTS12 TK34 GTS12 TK34 GTS12 TK34 GTS12 TK34 New Contact / GroupNew Contact / Group YKKY64465YKKY64465 YKKY64465YKKY64465 YKKY64465YKKY64465 YKKY64465YKKY64465 YKKY64465YKKY64465 YKKY64465YKKY64465 YKKY64465YKKY64465 RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO Members / 511 px 130 px 130 px 67 px 80 px 80 px 2 px 25 px
  • 12. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO Fill1: 35 , 31 , 32 Gradient: 255 , 255 , 255 / 35 , 31 , 32 Angle: -90 Members /
  • 13. 80 px 511 px RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO Members button / Members icons, on position Fill4: 35 , 31 , 32 Opacity: 30% Fill1: 194 , 195 , 197 Opacity: 70% Fill2: 255 , 255 , 255 Opacity: 60% Gradient: Type: Linear Opacity: 70% Location: 98% Fill3: 35 , 31 , 32 Opacity: 40% Gradient: Type: Linear 255 , 255 , 255 : Opacity: 50% Location: 55% 35 , 31 , 32 : Opacity: 100% Location: 55% Left Color: Center Color: Right Color: Myriad Pro Regular 31 pt 255 , 255 , 255 Effect: Drop Shadow
  • 14. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO Members button / Members icons, Selected Sourse Fill3: 252 , 147 , 21 Opacity: 100% Fill1: 253 , 200 , 18 / 253 , 210 , 18 / 253 , 200 , 18 Opacity: 60% Gradient: Type: Radial 253 , 200 , 18: Opacity: 70% Location: 0% 253 , 210 , 18: Opacity: 100% Location: 50% 253 , 200 , 18: Opacity: 100% Location: 100% Fill2: 253 , 200 , 18 / 253 , 210 , 18 / 253 , 200 , 18 Opy: 100% Gradient: Type: Linear 253 , 200 , 18: Opacity: 80% Location: 0% 253 , 210 , 18: Opacity: 100% Location: 49% 253 , 200 , 18: Opacity: 0% Location: 53% Left Color: Center Color: Right Color:
  • 15. N REC COM 21 GTS12 TK34 GTS12 TK34 GTS12 TK34 GTS12 TK34 GTS12 TK34 FriendsFriends TerrainTerrain I.S.I.S. EnemyEnemy NewNew RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO Telestration / 25 px 213 px 46 px 80 px 67 px67 px 2 px 25 px 130 px
  • 16. 40°26’47’’N 079°58’36’’W40°26’47’’N 079°58’36’’W REC COM 21 RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO Video / Myriad Pro Regular 31 px 255 , 255 , 255 Effect: Drop Shadow 55 px 55 px 640 px 52.5 px 400 px 25 px 25 px 25 px 25 px25 px 25 px 25 px
  • 17. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO slider / Slider base Slider button off Slider button on
  • 18. REC COM 21 NewNew ReceivedReceived SizeSize SubjectSubject CoordinateCoordinate SearchSearch Ipsum controlles estas de level de papas? 40˚26'47"N 079˚58'47"W (14:45)40˚26'47"N 079˚58'47"W (14:45) GTS12TK34GTS12TK34 Ipsum controlles estas de level de papas? 40˚26'47"N 079˚58'47"W (14:45)40˚26'47"N 079˚58'47"W (14:45) GTS12TK34GTS12TK34 SendSend RGRRGR SPOT...SPOT... !! New...New... @PLY@PLY ACE...ACE...New...New... @VDO@VDO SSE...SSE...New...New... New...New... New...New... returnreturnKBRDKBRD !!KJPTKJPT RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO Myriad Pro Regular 31 px 255 , 255 , 255 Effect: Drop Shadow PPM keyboard / 25 px 187 px 25 px 80 px 80 px 80 px 80 px 60 px 187 px 345 px 345 px 54 px 20 px 10 px 10 px 10 px 1116 px 103 px
  • 19. REC COM 21 NewNew ReceivedReceived SizeSize SubjectSubject CoordinateCoordinate SearchSearch Ipsum controlles estas de level de papas? 40˚26'47"N 079˚58'47"W (14:45)40˚26'47"N 079˚58'47"W (14:45) GTS12TK34GTS12TK34 Ipsum controlles estas de level de papas? 40˚26'47"N 079˚58'47"W (14:45)40˚26'47"N 079˚58'47"W (14:45) GTS12TK34GTS12TK34 SendSend RGRRGR SPOT...SPOT... !! New...New... @PLY@PLY ACE...ACE...New...New... @VDO@VDO SSE...SSE...New...New... New...New... New...New... returnreturnKBRDKBRD !!KJPTKJPT RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO PPM keyboard / Myriad Pro Regular 18 px 35 , 31 , 32 Effect: Drop Shadow 1010 PX 103 px 50 PX 332 PX 757 px 757 px 98 px 25 px 80 px 80 px
  • 20. REC COM 21 NewNew ReceivedReceived SizeSize SubjectSubject CoordinateCoordinate SearchSearch Ipsum controlles estas de level de papas? 40˚26'47"N 079˚58'47"W (14:45)40˚26'47"N 079˚58'47"W (14:45) GTS12TK34GTS12TK34 Ipsum controlles estas de level de papas?. Lorem ipsum Robo enema de las papas introgalactic superdome. 40˚26'47"N 079˚58'47"W (14:45)40˚26'47"N 079˚58'47"W (14:45) GTS12TK34GTS12TK34 GTS12TK34GTS12TK34 Ipsum controlles estas de level de papas? 40˚26'47"N 079˚58'47"W (14:45)40˚26'47"N 079˚58'47"W (14:45) GTS12TK34GTS12TK34 Ipsum controlles estas de level de papas? 40˚26'47"N 079˚58'47"W (14:45)40˚26'47"N 079˚58'47"W (14:45) SendSend RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO chat / Myriad Pro Regular 23 px 35 , 31 , 32 Myriad Pro Regular 18 px 35 , 31 , 32 Effect: Drop Shadow 1010 PX 50 PX 98 px57 PX 80 px
  • 21. REC COM 21 NewNew ReceivedReceived SizeSize SubjectSubject CoordinateCoordinate SearchSearch Ipsum controlles estas de level de papas? 40˚26'47"N 079˚58'47"W (14:45)40˚26'47"N 079˚58'47"W (14:45) GTS12TK34GTS12TK34 Ipsum controlles estas de level de papas? 40˚26'47"N 079˚58'47"W (14:45)40˚26'47"N 079˚58'47"W (14:45) GTS12TK34GTS12TK34 .?123.?123 PPOOIIUUYYTTRREEWWQQ KKJJHHGGFFDDSSAA LL returnreturn PPM/PCRPPM/PCR ,,MMNNBBVVCCXXZZ .. ::// --spacespace !! SendSend RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO chat keyboard / Myriad Pro Regular 31 px 255 , 255 , 255 Effect: Drop Shadow 25 px 187 px 25 px 60 px 187 px 345 px 345 px 54 px 20 px 10 px 10 px 10 px 25 px 1116 px 103 px 80 px 80 px
  • 22. REC COM 21 Team Al_ Select group color .?123.?123 PPOOIIUUYYTTRREEWWQQ KKJJHHGGFFDDSSAA LL returnreturn PPM/PCRPPM/PCR ,,MMNNBBVVCCXXZZ .. ::// --spacespace !! SendSend RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO main icons / Text on text field. Font: Myriad Pro, 48 px color: 35, 31, 32 Font: Myriad Pro, 25 px color: 35, 31, 32 1010 PX 1010 PX 1119 PX 50 PX 98 px 103 px 25 px 25 px 25 px 80 px 80 px
  • 23. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO main icons / 87px 87px 83px 83px 39px 112px 48px41px 39px 24px Vertical 29px Stroke: 2 pt 44 , 131 , 212 Opacity: 100% Fill: Gradient Aspect Ratio: 148% Left: 58 , 129, 195 Opacity: 80% Center: 58 , 129, 195 Opacity: 100% Location: 50% Right: 43 , 81, 140 Opacity: 100% Circle size: 87px x 83px Point: move down 29px Circle size: 9px x 9px Circle Space: 4px Myriad Pro Regular 14px
  • 24. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO main icons / 138px 28px Fill: Gradient Type: Radial Aspect Ratio: 24% Left: 47 , 42, 43 Opacity: 89% Location: 4% Right: 35 , 31, 32 Opacity: 0% Location: 76% Shadow size: 138px x 83px 35px 29px 26px 32px
  • 25. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO icon / nodes icon / control panel and contact
  • 26. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO icon / contacts
  • 27. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO icon / contacts icon / chat
  • 28. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO icon /TELESTRATION
  • 29. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO icon / SYMBOLS icon / MAP
  • 30. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO icon / normal kEYBOARD
  • 31. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO icon / normal kEYBOARD
  • 32. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO icon / ppm-pcr kEYBOARD
  • 33. RoboTeam - Styleguide / 21.04.2013 DESIGN BY STRATIGO icon / VIDEO CHAT