Zurui Design Technique - English version

In less time, less effort, less know-how...
Easy and convenient design tips with Sass and Compass.

Zurui-design gem for Rails by @mah_lab
https://github.com/mahm/zurui-sass-rails
(sample) http://zurui-sample.herokuapp.com/

Japanese version => https://speakerdeck.com/ken_c_lo/zurui-design

Transcript

1. In less time, less effort, less know-how... Zurui Design Technique " z u r u i " m e a n s s l y i n J a p a n e s e @ken_c_lo TAEKO AKATSUKA Zur ui De s i g n En g l i s h Ver s i o n
2. 1 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese freelance, web designer, graphic designer Taeko Akatsuka ＠ ken_c_lo https://twitter.com/ken_c_lo/ https://twitter.com/ken_c_loE/ http://d.hatena.ne.jp/ken_c_lo/ https://github.com/taea/ http://crow.ly/ ・ Designed "Receibo" http://receibo.heroku.com/ ・ Joined "Forkwell" http://forkwell.com/ ・I ♥ Haml + Sass(.sass syntax) + compass ・I ♥ Dogs , I hope to launch web service about dogs. About me
3. 2 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Essential "zurui" means sly in Japanese. These design tips for web programmers not good at web design. It's so easy, simple and convenient...
4. 3 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese USE Sass is more familiar than CSS for web programmers Easy! DRY! Zurui! Essential
5. 4 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 1 Zurui Line Zurui Design 1 Zurui Line （© @machida）
6. 5 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese What' s "zurui Line"? Zurui Design 1 Zurui Line It seems like engraved to background image. This is "zurui line" (called by @machida) border-bottom: 1px solid rgba(0, 0, 0, .2); Upper: Brack / alpha 0.2 / 1px Line @include box-shadow(rgba(255, 255, 255, .3) 0 1px 0); Lower: White / alpha 0.3 / 1px Line Yeah! I've seen it.
7. 6 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Essential - Color : use only brack (rgba(0,0,0,x)) and white(rgba(255,255,255,x)) - Adjust alpha according to background color - line width : 1px - blur : 0 - Not too strong Zurui Design 1 Zurui Line
8. 7 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese How to use "zurui line" under line of headings, compartment between sections... Zurui Design 1 Zurui Line
9. 8 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese top bottom left right border-bottom: 1px solid rgba(0, 0, 0, .2); @include box-shadow(rgba(255, 255, 255, .3)0 1px 0); border-top: 1px solid rgba(0, 0, 0, .2); @include box-shadow(rgba(255, 255, 255, .3) 0 1px 0 inset); border-left: 1px solid rgba(0, 0, 0, .2); @include box-shadow (rgba(255, 255, 255, .3) -1px 0 0); border-left: 1px solid rgba(0, 0, 0, .2); @include box-shadow(rgba(255, 255, 255, .3) -1px 0 0 inset); light source Zurui Design 1 Zurui Line Varied angle of zurui lines
10. 9 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Adjust alpha according to background color background-color: #333 white: alpha 0.1 @include box-shadow(rgba(255, 255, 255, .1) 0 1px 0); Black: alpha 1.0 border-bottom: 1px solid rgba(0, 0, 0, 1); background-color: #EEE White: alpha 1.0 @include box-shadow(rgba(255, 255, 255, 1) 0 1px 0); Black: alpha 0.1 border-bottom: 1px solid rgba(0, 0, 0, .1); background-color: #B0430B white: alpha 0.2 @include box-shadow(rgba(255, 255, 255, .1) 0 1px .2); Black: alpha 0.2 border-bottom: 1px solid rgba(0, 0, 0, .2); background-color: #FFC300 White: alpha 0.3 @include box-shadow(rgba(255, 255, 255, .3) 0 1px 0); Black: alpha 0.1 border-bottom: 1px solid rgba(0, 0, 0, .1); Zurui Design 1 Zurui Line
11. 10 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese @mixin line-left($op1: .2, $op2: .3){ border-left: 1px solid rgba(0, 0, 0, $op1); @include box-shadow (rgba(255, 255, 255, $op2) -1px 0 0); } @mixin line-right($op1: .2, $op: .3){ border-left: 1px solid rgba(0, 0, 0, $op1); @include box-shadow(rgba(255, 255, 255, $op2) -1px 0 0 inset); } Use mixin top right left bottom @mixin line-top($op1: .2, $op2: .3){ border-top: 1px solid rgba(0, 0, 0, $op1); @include box-shadow(rgba(255, 255, 255, $op2) 0 1px 0 inset); @mixin line-bottom($op1: .2, $op2: .3){ border-bottom: 1px solid rgba(0, 0, 0, $op1); @include box-shadow(rgba(255, 255, 255, $op2)0 1px 0); } Zurui Design 1 Zurui Line
12. 11 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 2 Zurui text-shadow Zurui Design 2 Zurui text-shadow
13. 12 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese text seems like engraved to background background: #333 text-shadow: 1px -1px 0 rgba(0,0,0,1); Upper Right（against light source） black alpha 1.0 / 1px / blur 0 background: #B0430B text-shadow: 1px -1px 0 rgba(0,0,0,.5); Upper Right（against light source） black alpha 0.5 / 1px / blur 0 In case, dark background + white text　 Zurui Design 2 Zurui text-shadow
14. 13 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese In case, light (nearly white) background + dark text　 text seems like engraved to background background: #333 background: #FFC300 text-shadow: -1px 1px 0 rgba(255, 255, 255, 1); text-shadow: -1px 1px 0 rgba(255, 255, 255, .4); lower left（forward light source） white alpha 1.0 / 1px / blur 0 lower left（forward light source） white alpha 4.0 / 1px / blur 0 Zurui Design 2 Zurui text-shadow
15. 14 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Essential - Color : use only brack and white - Adjust alpha according to background color - dark background + white text -> brack shadow against light ↗ - light background + dark text -> white shadow forward light ↙ - line width : 1px - blur : 0 - Not too strong Zurui Design 2 Zurui text-shadow
16. 15 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Use mixin @mixin ts-000($op : .4){ text-shadow: 1px -1px rgba(0, 0, 0, $op); } @mixin ts-fff($op : .7){ text-shadow: -1px 1px rgba(0, 0, 0, $op); } Zurui Design 2 Zurui text-shadow
17. 16 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 3 Zurui background Zurui Design 3 Zurui background
18. 17 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui background patterns Noise Wood Paper Cloth Dot Zurui ! Zurui Design 3 Zurui background
19. 18 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese ◯ Zurui Design 3 Zurui background Features of useful background patterns - Light colors (nearly white) : light gray, ivory ... - Dark colors (nearly black) : dark gray, dark navy ... - Fine Patterns - Natural materials
20. 19 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese × Features of useless background patterns - Too large patterns - Too high chroma satulation (too vivid) - Too much difference of brightness between background and pattern They often colide with contents.... Zurui Design 3 Zurui background so difficult to use 'em well
21. 20 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese The Famous site has many zurui patterns http://subtlepatterns.com/ Zurui Design 3 Zurui background
22. 21 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese And... you must know... Yes, also this slide design is zurui design. Zurui Design 3 Zurui background text-shadow ! wooden background
23. 22 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui gray is too light gray nearly white lighter than #EEE #EEE #F8F8F8 Zurui Design 3 Zurui background - Too light gray can be used as white. - Use them with "zurui line" and "zurui text-shadow". - They'll look solid and high-grade, more than real white. #FFF (real white)
24. 23 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 4 Zurui gradient(gradation) Zurui Design 4 Zurui gradient (gradation)
25. 24 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese #434343 #2d9fee #48b1f2 #222222 Gradations less difference of brightness. Feels of real materials. Zurui Design 4 Zurui gradient(gradation)
26. 25 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese × Zurui Design 4 Zurui gradient(gradation) They are useless. gradations too much difference of brightness. so difficult to use 'em well
27. 26 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese You can make CSS of gradient easy on this site http://www.colorzilla.com/gradient-editor/ Zurui Design 4 Zurui gradient(gradation)
28. 27 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese switch Sass(SCSS) Zurui Design 4 Zurui gradient(gradation)
29. 28 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese mixin of gradient : less difference of brightness. @mixin gradient-top-lighten($color : #666, $lighten: 10%){ background-color: $color; @include filter-gradient(lighten($color, $lighten), $color, vertical); @include background-image(linear-gradient(lighten($color, $lighten) 0%, $color 100%)); } - Use like this @include gradient-top-lighten(#222); Gradation lighten top a little Zurui Design 4 Zurui gradient(gradation)
30. 29 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese mixin of gradient : less difference of brightness. Zurui Design 4 Zurui gradient(gradation) @mixin gradient-top-darken($color : #666, $darken: 10%){ background-color: $color; @include filter-gradient(darken($color, $darken), $color, vertical); @include background-image(linear-gradient(darken($color, $darken) 0%, $color 100%)); } - Use like this @include gradient-top-lighten(#48B1F2); Gradation darken top a little
31. 30 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 5 Zurui border-radius (rounded corner) Zurui Design 5 Zurui border-radius (rounded corner)
32. 31 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 5 Zurui border-radius (rounded corner) If only to be rouded corner, they'll be stylish ! But it needs some tricks to use 'em well... Zurui !
33. 32 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Not to be too large border-radius. less than 6px for example, a boxes of a section. border-radius: 5px - 6px good looking radius size. Zurui Design 5 Zurui border-radius (rounded corner)
34. 33 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 5 Zurui border-radius (rounded corner) border-radius: 4px border-radius: 2px - 3px Buttons Icons
35. 34 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese × If you're begginer designer, you'd better do not use too large border-radius. Zurui Design 4 Zurui border-radius (rounded corner) so difficult to use 'em well
36. 35 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Use Compass. Zurui Design 5 Zurui border-radius (rounded corner) .hoge{ -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .hoge{ @include border-radius(6px); } Zurui !
37. 36 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 6 Zurui box-shadow Zurui Design 6 Zurui box-shadow
38. 37 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese × ×Too strong ×Too wide blur ×Colored shadow They are useless box-shadow Zurui Design 6 Zurui box-shadow so difficult to use 'em well Use box-shadow delicately.
39. 38 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 6 Zurui box-shadow Zurui box-shadow 1 : substitute line - No angle / alpha 0.15 box-shadow - It's useful when both box and background colors are so light color nearly white. @include box-shadow(rgba(0, 0, 0, .15) 0 0 2px);
40. 39 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 6 Zurui box-shadow Zurui box-shadow 2 : blur inset - No angle / inset / wide blur / light shadow - Feels real materials - Use with "zurui background-patterns" - Ribbons, buttons @include box-shadow(rgba(0, 0, 0, .2) 0 0 0 20px inset);
41. 40 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 6 Zurui box-shadow Zurui box-shadow 3 : deboss box border: 1px solid rgba(0, 0, 0, .1); @include box-shadow(rgba(0, 0, 0, .1) -1px 1px 2px inset, rgba(255, 255, 255, 1) -1px 1px 0);
42. 41 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese @mixin box-deboss($border: .1, $shadow: .1, $highlight: 1){ border: 1px solid rgba(0,0,0,$border); @include box-shadow(rgba(0,0,0,$shadow) -1px 1px 2px inset, rgba(255,255,255,$highlight) -1px 1px 0); } - Use like this @include box-deboss(.15, .2, .7) Zurui box-shadow 3 : deboss box -> mixin Zurui Design 6 Zurui box-shadow
43. 42 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 6 Zurui box-shadow Zurui box-shadow 4 : emboss box border: 1px solid rgba(0, 0, 0, .15); @include box-shadow(rgba(0, 0, 0, .5) -1px 1px 0, rgba(255, 255, 255, 1) -1px 1px 0 inset);
44. 43 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese @mixin box-emboss($border: .15, $shadow: .05, $highlight: 1){ border: 1px solid rgba(0,0,0,$border); @include box-shadow(rgba(0,0,0,$shadow) -1px 1px 0, rgba(255,255,255,$highlight) -1px 1px 0 inset); } - Use like this @include box-emboss(.15, .2, .7) Zurui box-shadow 4 : emboss box -> mixin Zurui Design 6 Zurui box-shadow
45. 44 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 7 Zurui button Zurui Design 7 Zurui button
46. 45 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Make buttons, full use of zurui solutions you knows Zurui Design 7 Zurui button
47. 46 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 7 Zurui button .button-zurui { a $button_color: #48B1F2; display: block; @include ts-000; @include gradient-top-lighten($button_color); @include border-radius(4px); @include box-emboss(.2, .1, .3); color: rgba(255,255,255,.9); text-align: center; padding: 10px; font-size: 20px; line-height: 1em; font-weight: bold; margin: 50px 30px; &:hover @include gradient-top-lighten($button_color, 15%); text-decoration: none; color: rgba(255,255,255,1); } zurui text-shadow zurui border-radius zurui gradient zurui box-shadow hover : gradient -top more lighten 10% -> 15%
48. 47 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 7 Zurui button .button-red{ @extend .button-zurui; $button_color: #b0430a; a @include gradient-top-lighten($button_color); &:hover @include gradient-top-lighten($button_color, 15%); } Change color so easy.
49. 48 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Zurui Design 7 Zurui button Nice Rails gem http://jaredhardy.com/sassy-buttons/
50. 49 In less time, less effort, less know-how... Zurui Design Technique - "zurui" means sly in Japanese Thank you :)