Tomal Rafal - Osnovy Web-Dizayna - 2015

Web-
Web-
Photoshop.

Web-
1.0
2015
www.RafalTomal.com
Samigg Skladchik.com
.
.
.
-,

Web-.
,
.
, ,
-,
-. , , ,
-.
- ,
. , ,
,
.
. ,
.
. ,
.
, , .
, , , ,
, .
,
-. , , -,
.
- , Twitter, LinkedIn, Google+,
.
!
Web-. . Samigg. Skladchik.com

1:
........................................................... 5
2:
.................................................. 12
3:
......................................... 25
4:
.............................................. 44
5:
..................................................... 63
6:
................................................................... 98
7:
..................................... 126
8:
.....................................163
9:
.......... 202
Web-. . Samigg. Skladchik.com
!
2002 .
-: , ,
, , ,
, , ,
, , ,
.
10 , .
5-
. , ,
(
).
, , ,
.
.
, ,
.
:
. ,
.
, .
,
, ,
.
,
-, :
, . ,
, -
, . ,
, , !
.
.
, ,
?

-. .
- ,
, ,
.
WordPress
ThemeForest.net CreativeMarket.com.
, -
.
,
.
. ,

.
.
, .

. ,

.

Adobe Photoshop.
,

-.

Photoshop..
,
. ,
,

.

, .
.
, ,
. ?
?
,
, ,
. -
,
, .
,
. ,
.
, ,
, .

.
, ,
: . . , .
, -
, .
,
- . .
,
.
, , ,
. ,
, , ,
.

?
,

, ,
,
.
, -
. , .
- ,
, .
.
?
Adobe
Photoshop,
.

CC (14.0),
CS 4.0+,
.
PS
,
. ,

.
,
Photoshop , .

Adobe.
!
- .
, ,

.

,
. ,
Designers Area .
, !
Web-. . Samigg Skladchik.com
10
,
(UX-, , )
,

.
,
.
,
. ,
.

-. ,

.
,
-, .
:
12
( )
, , ,
,
. , ,
, ,
.

.
, ,
.
. ( 3)
, , ,
,
. ,
, .
. ( 5)
,
-. .
,
.
,
.
,
.
. ( 6)
, ,
. ,
, ,
.
. ( 7)
-
, -
.
. ( 8)

, ,
.
13
.
, ..
.
-
. ,

. , ;-)
, , , .
, Photoshop.
,
, ,
.
, , .
, ,

. .
- , -
.
. , .. ,
.
,
. ,
.
:
.
.

.
.
.
14
,
.

: ?.
, .
? ? ? .
.
, - .
.
, ,
. .
, . ,
, .
?
, ,
.
- , , ,
. -
.
,
, . ,
, .
-
.
, .
15
- , ,
, , . -,
.
, , ,
. - ,
.

.

- .
, . ,
, .
, ,
. ,
: ?
,
. ,
. . ,
.
.
, :
1. -,
.
2. , , ,
/, ( )
.
3. , .
,
, , ,
.
16

.. .
- , . - ,
- .
, ? ,
? ? ?
()
/.
.
, , , -,
, , .
, 16+. ,
, , .
..
. ,
, -. ,

- , .

,
. ,
A Project Guide to UX Design.

- .
, -,
,
.
, , ,
, .
, ,
.
,
, . PSD-
( , , ..)
( -), .
17
.
,
.

, , .
, .
, .. ,
, !
, :

:

:

:

PSD
, ,
.
.

,
. , ,
, .
,
:
18
Basecamp.com
Basecamp - .
, ,
.
Trello.com
Basecamp, Trello .
( ),
.
.
19
InVisionApp.com
InVision ,

. ,
.
Viewflux.com
Viewflux - ,
. , ,
.
20
-.
,
, .
.
,
.
-.
, - ,
.
, .
-, ,
, .
. ,
, -..
:
,
. , ,
.
21
-.
,
, , .
, ,
. .
. :
Slickplan.com
Lucidchart.com
22
Gliffy.com
OmniGraffle.com
23

. ,

.
-
, .
,
.
. . ,
,
- . , .
, :
.
. ,
. ,
, , . ,
, , , ,
.
, .
, .
, ,
, .
. ,
.
,
, .
,
.
25
.

.
.
,
, , .
.
. .
, .
,
.
,
.
.
.
.
.
.
15 . , , ,
, , .
26
.
. ,
, .
, , .
.
.
, ,

. ,

.

.

.
.
Evernote Google Drive

, ,
. ,
, -
.
, .
, ,
- - -.
,
.
.
,
.
your.
, : !
, , .
.
27
, .
, .
. , - .
, ,
.
-
Photoshop . ,
, ,
.
28
, ():
.
, ,
. , .
.
,
. .
.
,
. ,
. .
.
.
, ,
. . .
, ,
,

.
, :
..

.
. ,
,
.
,
, ,

.

, Faber-Castell
(fabercastell.com).
29
,

.
Action
. ,

,
Method.
,

.

.
.

Designers Area -.
,
.
,
.

- .
,

, .
, . ,
,
.
30
, - -
.
. - .
,
, .
.
, .
,
. , ,
. ,
, .
.
, .
:

Dribbble.com
Dribbble ,
, .
. 400300
( 800600 retina),
, ,
, , , ,
...
31
Gridspiration.com
,
Dribble.
designspiration.net
.
, ,
.
CSS
CSS ,
. CSS galleries,
,
HTML/CSS flash..
CSSRemix.com
CSSMania.com
Awwwards.com
Fltdsgn.com
33

, ? - ,
:
color.adobe.com
colourlovers.com
34

-
:
typespiration.com
typecache.com/fonts-in-use
justmytype.co
35
-
- ?
, . ,
.
.
.
, .
.

.
Offscreen
magazine
(offscreenmag.com)
.
, ,
. , .
.
.

,

.
, ,
.

, ,
.
, .

, , ,
.

.
37

.
,
- .

, .
, , ,
.
, , , ,
,
. ,
.
?
, - .
, ,
. ,
.
-.
, .
.

,

.
.

.

,
..
38
,

.

-,
,
,
, ..
,
,
,

.
,
.
, ,
.
, .
.
, .
: ,
, .
4 :
39
.
, .
- ..
, ,
.
,
.
, ,
.
: , .
.
.
. , Photoshop..
40
. ,
, +
.
, .
, .
, e-mail.
, . ,
.
41
.
, .
. , ,
.
, .
, , ,
,
. ,
,
.
,
,
.
.

42

.

,
.

,

.
,
.
, .
, , , -
,
. .
.

.

.
, , .
,
.
44
, ..
, .
:
::
Project Name.
. ,
. - .
.
, , client folder.
, .
.

: Logo Design, Print Design ..
Assets.
,
. , -
-.
45
, ,
, , , , .
- -
,
.
Web Design.
-,
( ).
, :
_Archive !
- , ,
_Archive. ,
. ,
. , .
PSD ,
, , ..
PSD-,
.
Preview ,
. PNG, PDF JPG.
, .
Sketches -
. - ,
, .

, .
, , - PSD ,
. ?
:
.
.
.
.
46
CompanyName_HomePage.psd
CompanyName_LandingPage-rev3.psd
ProjectName_IntroPage-John-rev1.psd
, , .
, ,
.
,

PSD .
, .
,
, .
,
.

,
,
, ,
.
Photoshop , ,
Photoshop, .. .
,
. ,
-, ,
.
- ,
, . ,
, ,
, ,
.
47
, ,
( 2015 )
,
(RafalTomal.com).
.
,
:
Adobe Photoshop.

. , .
.
, ,
. ,
, , ..
Photoshop ,
.
-. Adobe
Adobe Edge Reflow.
PSD
.
, .
48
Adobe Fireworks.

Photoshop. , Adobe
Fireworks; ,
.
Adobe , ,
Fireworks,
Fireworks.
Sketch.
Sketch - Photohop,
-. Photohop
, Sketch
.
, Sketch ,
Retina.
, , ,
..
Sketch ,
Photoshop..
49
Webflow and Easel.

,
.
. , ,
.
,
HTML CSS.
. ,
, .
Designing in the browser.

, .. ,
Photoshop -.
, HTML CSS.
, -, ..
50
Adobe Photoshop (
2015) , , .
, , ,
.. , ,
.
Photoshop
.
,
.
Photoshop -.

- PSD .
,
Photoshop, , (Slicy)
HTML CSS (Cut&Slice).
Adobe Photoshop -.
Photoshop
Adobe Photoshop
, -.
.
, Photoshop
-.

.. ,
.
- .
, .
2 :
RGB (Red, Green, Blue).

, .
51
CMYK (Cyan, Magenta, Yellow, Black).

, .
, RGB ,
-. ? ,
... , ,
RGB; sRGB, Adobe RGB ..
,
RGB .
, Adobe RGB (1998) ..
, sRGB. , Adobe RGB
, - .
sRGB,
HP Microsoft 1996 .
sRGB , , ,
Photoshop , .
sRGB .
, 100% ,
, .. . ,
, , .
,

Photoshop.
, Edit -> Color
Settings (Shift+Command+K
Shift-Ctrl+K). , Adobe

North America General Purpose 2.
,
. ,
OK.
sRGB
IEC61966-2.1
PSD ..

- ,
.
52

,
.
.
- 1140 150
, .
72 DPI (Dots Per Inch - ) PPI (Pixel Per Inch - )

, . ,
..
DPI/PPI .
. DPI/PPI ,
, . print.
, , PNG GIF
DPI/PPI. , , .
, . ,
, , Retina Apple. ,
, ,
.
Retina.
2x ...
...
,

.
, :
: 1x size ( ) 2x ( retina).

,
.
, Photoshop ,
:
1x.

-.
,
, Retina.
Retina, Photoshop .
, .
2x.
, ,
. , ( ,
) 2 .
, .
.
Retina , .
, 50%.
54
, .
. 2, ..
Retina Photoshop. -
.
,
.

, CSS HTML.
,
-. , ,
assets .

- Photoshop.
, .
Photoshop - ,
.
.
Adobe Photoshop .
,
. ,
.
, , ,
. Window .
, , -:
Navigator
Info
.

.
55
Character
Paragraph
,
, ..
History
Layers

,

, .
Paragraph Styles
,
,

.
,
.
Character Styles
character.

.
Window.
,
Window -> Workspace -> New Workspace ,
, .
, Window -> Workspace
.
.
, 15 .
56
, , Styles, Adjustments,
Properties, .. ,
.
:
57

- PSD-,

.
, ,
.
.
PSD Designers Area

-.
.
Photoshop, File -> New.

:
2280x2400 72 DPI, ,
, Retina (,
1 1140x1200 ). ,
RGB OK.
58
, :
, .
, . Image -> Canvas Size 600
, 2880 :
59
, 300 ,
.
.
,
.
:
,
.
, // .
- Colors and Trash,
. * ,
.
* Colors , *
Trash , , .
60
* Trash
. , .
:
.
, ,
-, , ,
.
61
?
- ,
.
:

(leading) (tracking).
..
. - ,
.
,
. .
.
,
.
, , (leading),
(tracking) ..
63

, .
- . ,
.
.
. ,

,
:
The Elements of Typographic St yle.

?
-?
, .
?
- Copyblogger.com .
, ,
-. , - 90%
. , ,
,
- .
, -.
, ,
.
-
.
, ,
.
,
. , :
.

-.
Photoshop, - ,

. , -
.
,
@font-face CSS, ,
.
, , ,
.
@font-face, . ,
, .
, .
, ,
-,
.
,
.
65
Google Fonts.
Google . Google Fonts

,
Photoshop
.
Adobe Typekit.
The Essential Web Design Handbook
66
, -.
Typekit
, Google.
Adobe Cloud,
Typekit Photoshop Adobe.
.
-. PSD
Photoshop Mac Windows,
HTML/CSS,
. Safari, Google, Firefox Internet Explorer
. Mac OS, Windows Vista, Windows 7/8.
, , ..
Photoshop,
.

. ,
.
,
. , ,
, .
.
,

.
67
(StudioPress.com),
.
.
,
, -
.
- . -
. ,
, , -.
, -
.
,
? ,
, ,
. , , ,
.
68
.
.
:
Serif ( ).
- .
,
. ,
. ,
.
.
Sans serif ( ).
, .
, ,
. ,
.
.
.
69
Slab serif ( ).
.
, , ,
, .
,
.
Script ().
. ,

, , .. .
Blackletter ( ).
-
.
.
70
Handwriting ( ).

. .
- ,
. , - ,
.
Decorative ().
.
.
, .
, .
,
. ,

.
-, ,
.
71
, . ,
(
).
, , ,
, , , ..
.
, , ,
..
.

.
72
-, . -
, .
. ,
, , ,
.

, .
.
,
.
.
.
-, ,
- .
.
.. .
73
:
.
,
, . ,
: ,
. ,
,
. ,
.
vs.
( ),
( ).
, ,
.
;
,
-
,
,
, .

..
,
,

.
- .
, , .. . Star Jedi ,
.
, , .
74
.
I 3- (
, )
.
:
1. , Google Fonts
Typekit,
.
2. ,
.
3.
.
.
, ,
.

. ,
,
. .
-
, .
Merriweather

,
-
.
75
.

.
Typekit.com
Futura PT Heavy
,
.

31Three.com
:
Sentinel (serif slab)
:
Gotham Narrow (sans-serif)
,

,

,

..
. ,
,
.
76
avclark.com
:
Freight Text Pro (serif )
:
Freight Sans Pro (sans-serif)
-,

. , ..

,
.

,

.
FocusLabLLC.com
:
PMN Caecilia (slab serif)
:
Gill Sans (sans-serif)
Focus
Lab

.

.

.
CirclesConference.com
:
Proxima Nova (sans-serif)
:
FF Tisa Pro (serif )

, .

.

,

ElliotJayStocks.com
:
Skolar (serif )
Elliot

. ,

-
,
.
LiftUX.com
:
Brandon Grotesque (sans-serif)
:
Freight Text Pro (serif )

.
,
.
,
.
.

, ,
,
.
, .
. ,
.
.
,
. :
.
-
. : ,
. , ,
( ), , ,
, .
.
,
, ,
. -
,
.
79
.
,
- , .
, . , ,
.
Letterspace ( ).
,
. , ,

.
80
Leading ( ).
- ,
. ,
. , ,

.
Space ().

.
.
81

- ,
.
,

.
.
,
.
,

. .
, - ,
:
, ,
- .
82
-. ,
,
.
, ?
. ,
,
, .
, , , ,
.
. , 1 6
. (
, 1 )
.
83
.
H1.
, ,
:

, ,
: 16 , 18 H4/H5/H6, 21
H3, 24 h2 48 H1
/
. ,
.
,
. :

1.5. , 18 pt
84
26-28 pt.
, . ,
30 pt, 1.25
. .
,
. ,
,
. ,

.
.
, , ,
. ,
.
, . ,
.
, , .
.

. ,
.

55 100 .
100 .
, , ,
, 100 .
85
, 600 ,
16 ,
85 . ,
1.5.
16 24 ,

. 600 ,
25 26 .

.
,
(16 - 20 )
Golden Ratio Typography Calculator ,
,

CPL (Characters Per Line - ).
.
, ,
.
?
. .
, :
,
, ,
.
86
24
:
-, ..
.

. ,
, , .. , .
,
:
1. , 24 .
2. ,
, - .
48 24
. ,
, 12 .
3. ,
, , 16 24 32
, 48 (2 24 ) ..
87
4.
.
.
.
- . ,
, ,
.
,
. ,
-.
.
- , ,
.
, .
,
, ..
, .
,
,
.
88
..

. ,
.
,
.
,
.
, , :
89

-
- -
,
,
-.
-
, .
, , ,
.
..
.
, .

Designers Area -.
.
-,
.
.
.
.

. ..
.
Google 5 5
, :
, Photoshop, 10 ,
. 25 , 5
5 .
, . 5
, :
,
, ,
:
Merriweather
() + Open Sans
( ).
,

Merriweather.

Open
Sans,
.
91
-
. -, ,
special, .. .
-, , ,
, .
, ,
, .
-,
. ,
. ,
.
1 ,
6- , , . ,
, , (
)..
( 84)
: 48 (1), 36 (H2), 24 (H3), 22 (H4 -
21 ), 18 (), 16 ( ),
14 (H6).
1 4 ,
. . , 1.33
1.5 .
, .
92
, .
, .
5 6 .
.
5 , ,
, 6 ,
.
. Open Sans 18
.
. , 1.66
30 .
93
1.5, ,
.
. ,
.
Merriweather. .
, . .
,
. .
. -
Photoshop.
Photoshop, Window -> Paragraph Styles.

-. ,
,
, ,
Paragraph Styles.
- ,
, Redefine
paragraph style by merging Overrides. ,
.
94
, .
, .
.
Adobe
Photoshop, Adobe,
.
,
PS-
project files .
! .
-. , ,
,
. ,

.
-
. , .
, .
, -.
95
16
,
,
,
.
.
.
,

. ,
,
.
,
. ,
.
,
-. ...

-
: ,
( ).
1706
, , ,
. ,
, :
, :
.
:
?

.
, .
.
99
,
:
100
101

, .
: .

. ,
..
.

, .
.

, ,
, .

, , ,

. ,

..
,

.

,
,
.

.. ,

.
102
,
,
.
.

. , ,
.
,
.
, .
:

.
.
. .

- . ,
.
.
103
.
, ,
. , ,
, . ,
.

- ,
.
- .
,
.
, 5
. , ,
.
104
3 4 . ,
, :
.
, ,
. , ,
.

. .
, , ,
. .
,
, , .

.
.
.
.
, .
,
.
.
105
,
. ,
,
. , - .
, ,
.
, -,
. ,
. .
.
.
.
.. , . ,
.
.
, .
.
..
. ,
.
..
. ,
-, .
106
.
,
. , ,
.
.
-.
, .
, ,
, -. ,
, -.
.
-
. ,
- .
. ,
- , ,
.
, ,
.

. , , ,
.
, . ,
.
107
-
, .
.
. .
teamtreehouse.com
teamtreehouse.com

.
-
.

.

,
.
sachagreif.com
- sacha
. ,
,
. ,

.
-

.
108
greyp-bikes.com
.

.

,
.
, ,
.
InVisionApp.com
InVisionApp.com

.
.
..

. ,

,

.

,

.
getnarrative.com
-

.

.
,
.
,
.

.
109

,
.
.
, .
COLOURlovers.com
Colourlovers -
. ,

.
: , , , , , , .
, .
color.adobe.com
Adobe Color . Adobe Color

Adobe,
. ,
,
, ,
.
110
Google Images
, ?
red color schemes Google Images ,
.
, ..
.
Nature
Nature - .
. , ,
.
-..
111

,
. ,
.
,
. -

, .
- , , ..
.
,
.
- ,
, .

, . ,

.
, , , .
,
. .
.
-
. .

,
.
, .
, ,
.
112
- , , , , , .
, .
,
.
,
.
. ,
/ .
moresleep.net
wufoo.com
thedesigncubicle.com
- , , , , , .
. -
.
.
..
.
113
.
,
.
newrainmaker.com
briandelaney.com
nl-recruitment.com
- , , , , , .
- .

..
.
-.
,
.
radicaltesta.com
semplicelabs.com
vangoghmuseum.nl
114
- , , , , ,
, .
, , .
.
,
.
, /
/.
presidentti3d.paulig.fi
alectia.com
clementgrellier.fr
- , , , , .
- , .
. , .
, , . -
.
115
.
,
.
,
.
designawatch.mijlo.com
getdonedone.com
tastecreative.com
- , , , , ..
,
, , .
-, , ,
.
.
vseonet
nunomen.co
gomistrip.com
demo.bootstraptor.com/blocks.html
116
- , , , .
.
, .

.
.. -
.
mediatemple.net
thenothingapp.com
iphone.artsy.net
- , , , .
, ,
,
, .
-, , ,
, ..
.color.
gosquared.com
cactusformac.com
serious-studio.com
117

, ,
. ,
-.

, , , .
hex RGB.
, CMYK Pantone.
,
. , ,
.
. , , ,
.

.

from Designers Area -.
..
.
, . ,
, , .
, - .
, ,
. ?
Color Picker Photoshop. .
PSD
* Change colors here. ,
primary - double click. -,
.
Color Picker.
- Photoshop,
.
118
Make , H .
,
. ,
..
, .
.
,
, . , ,
. ?
,

,
.
.
,

.
,
.
119
, , , .
.
, ,
.
. ,
. - .
, , ,
. ,
, .
. ,
,
. ,
secondary.
, -
, . ,
, -.
-
. :
120
.
( ), .
.
( ) .
,
.
Adobe Color ( Adobe Kuler).
, :
121
,
.
,
-. hex-,
Adobe Color
Photoshop color picker.
,
, ,
/ -
.
.
3 , .
122

.
.
.
,
.

.
, ,
Color Picker .
,
, .

.
, .
( ).
,
. , .
.
,
. ,
, .
,
. , ,
.
, , , ,
. ,
, , , ,
.
,
.
, -.
.
,
, .
.

. .
123
-.
-
,
.

.
-, ,
, , - .

.
:
126
?
,
:
.
,
.
,
.
,
.
, ,
, , .
.
-.
,
.
.
.
.
.

. ,

.
.

-.
- .
.
, ,
.
, . ,
,
.
127
?
, :
.
- .
-, ,
, .

..
.
,
( ). ,
.
Call To Action,
, .
.
,
.
-. , ,
,
-.
.
,
.
-.
, -, .
.
.
- -
. ,
, ..

, .
. ,
.
128
, :
Adobe Photoshop.
,
Photoshop. ,
Adobe
Photoshop. Adobe Photoshop

. ,
,

.
free web
design resources -.

Adobe Photoshop.
Wireframe.cc
. . - ,
.
. ,
- URL.
.
129
Creatly.com
- Creatly .
,
, .
. ,
.
Balsamiq.com
Balsamiq Creatly.
, . .
, , .
.
130
Mockflow.com
,
, .
Basic.
Solidifyapp.com
,
.

. ,
.
,
. ,
-
.
131
,
.
.
.
-?
- , -
.
.
,
. ,
, .
.
, -
,
-.
, , .
132
- - . , ,
-. ..
-,
.
, ,
:
.
- , .
, .
.
,
.
.
,
(- ).
,
.
, , , 4- (
) -
. 4
1 .
.
133
, , 100%
.
.
- ,
.
,

(100% ) .
, ,
- ,
.
,
Photoshop (
Adobe Edge Reflow).
.
.
, -
,
. , , ,
.
134
.
.
,
, .
- ,
.
. , ,
.
,
(
, ),
, ( )
.
.
.
- ,
.
.
,
.
135
: .
,
:
, ,

:
,
.
, .
136
.

.

. - ,
.
,
Photoshop Snap to Guides View.
.
, .
137

- ,
. ..
:
,
. ,
.
-.
-.
-.
138
, ,
.
, ,
, - .
:
.
. ,
, ,
.
. ,
.
,
. ,
,
.
139

, ,
, .
.
- .

.
,
.
, .
50 ,
50 :
,
, .

. ,
2
.
.
, . 2
3, .
, .
. ,
. , .
.
,
.
.
141
- .
, , -
.
, .
.
. .

. .
142
, ,

.
.
. , ,
1920-. ,
.
, -, ..
. ,
, :
.
- ,
, -
,

.
HTML/CSS,
,
.

.
.

.

..
143
.
-,

.
,
.
.
, , .
, , , ,
.
, .
.
144
, 12 , . 12
, 4 , .
, 16 , ,
. , 8-
, 3 .
12 - , ,
.
, - ,
, .
, Photoshop, .
, ?
,
.
,
.
, 1140 , ,
12 , 11 .
, 12 :
11 x 12px = 132px
132 -
1140px - 132px = 1008px

1008px / 12 = 84px

, 12 84 11
12 . 1140 .
, ,
.
Photoshop .
Photoshop CC 2014, ,
Guide Layout. View -> New Guide Layout.
.
Photoshop, ,
GuideGuide .
Photoshop
free web design resources -.
, 12
.
, , .
, , ,
, -
.
, 12 , ,
, .. CSS .
146
CSS -
. ,
,
.
CSS ,
, PSD : Foundation, Bootstrap,
960.gs, YAML.
,
-. .
,
, .
, ,
- .
-
, ,
- , .
, 12 - wallpaper.com
, 8 -22.com
, 16 - pulseapp.com
148
, 12 - fontsinuse.com
149
.
..
,
.
, .
, , .
Adobe Photoshop :
Photoshop Wireframe Kit Photoshop Starter Template.
Photoshop Wireframe Kit

Photoshop Starter Template Designers Area -.
,
, .
.
.
Wireframes ProjectName-Home.psd.
. (command + ; Mac, ctrl + ; Windows)..
150
12 ,
. ,
.
"*Trash" "*Colors" .. . ,
.. .
PSD- .
.
, ,
. Photoshop Wireframe Kit .
, ,
, ..
151
Rectangle Tool
, .
. Wireframe Kit,
: , , . :
, .
, 75%, 30%.
.
, . ,
12 , (3 4)
, , ,
.
. , 3
. .
.
, 4
. 4 (4 3). ,
12 , 3 4 .
153
, ,
:
. ,
.
wireframe kit .
, "*Notes",

:
154
. ,
. ,
, .
-. ,
.
- , , , .
:
, ,
. , (8 + 1 + 3).
.
, .

. -
. !
157
:
. . ,
,
.
.
, ,
.
. ,
.
:
159
160

, Photoshop. . ,
,
, .
,
. ,
. , ,
. !
, , ,
, .. !
161
?

-.
,
-.
, ,
Photoshop .
, .
,
.
, ? ?
. - .
, .
,
CSS/HTML . ,
: , ,

.

.
.
.
-.
163
, . ,
.
.
, - ( -, ,
) ,
.
.
,
,
164
, , , ,
.. ,
, . ,
.
-, .
,
. .

, .

. ,
, .
,
.
, .
, :
, , ,
.
.
-.
165
.
. ,
.
.
,
.
,
, .
.
.
,
. (,
!) , ,
. ,
, . ,
.
, !
1
,
Photoshop , PSD-.
ProjectName-Home.psd. .
. .
.
,
. ,
,
:
,
Photoshop. , ,
- .
, ,
. , Load Paragraph Styles Paragraph
Styles.
PSD-.
,
.

.
, .
.
. ,
.
,

. ,
.
167
PSD- ,
, ,
. ,
.
, .
. Rectangular Marquee Tool

. 700 (, ,
700pt 1400 ,
144dpi), .
Rectangle Tool
(10 ) .
.
168
, , ,
. .
PSD- clipping mask,
.

Unsplash.com. Unsplash
Creative Commons Zero. ,
, ,
.
clipping mask ,
Create clipping mask.
, , .
opacity: 30%, ,
. ..
.
..
, ,
. . 100
169
: 100
50 (
).
-, .
, 24pt .
..
. -,
: Home, About, Services, Blog, Contact.
, Heading 5
12pt, .
, , ,
.
170
, opacity: 30% ,
home 100% .
.
( 350 ). ,
. Heading 1 ,
.
Title.
250 . .
Heading 5 .
Subtitle. ,
, .
171
, - . :
. ,
. ,
.
.
( ? )
,
.
( Heading 5)
.
, (
,
).
172
.
. , .
. 100
. 50
. ,
. Heading 2
Subheading . , .
Heading 2.
, , ,
. ,
.
- .
173
. ,
3 .
,
. Heading 3
.
,
. 1 , 2
3 .
4 5.
50 .
174

.

. ,
. ,
(
).:-)
. ,
, . ,
.
Learn More, Find Out More, Read More, Get Started
.
50 .
Small Paragraph ,
30% , .
. . ,
, .
175
, .
.
. .
, 100 .
. :
176
, .
, :
. ,
, .
, 3 .
,
Paragraph . -,
. , ( clipping mask,
)
, Heading 3. (Small
Paragraph) Twitter ( Subheading ).
177
,
.
, read more.
Character Style ( )
. , .
, .
, :
, 100 100 .
. 8
, 4 .
, , border 1
.

12
.
0,75,
4:3..
178
See More Projects

50 100 .
,
. ,
.
, ,
. - ,
.
.
Clipping Mask, .

.
179
: .
. ,
:
, .
Blockquote .
,
, .
Heading 4 Small

180
Paragraph.
.
, ,
.
.
.
50
. ,
.
..
, .
.
. ,
,
.

. ,
. .
, ,
. , 20%
100% .
181
. ,
Contact Me
Contact .
- , , .
.
- opacity: 95%. ,
, ,
, ,
- .
, .
. -
.
// CONTACT FORM .
-
- , .
182
,
, ,
.
. ,
,
.

,
. ,
. , .
.
, .
183
184
, ,
, .
,
.
.
,
.
. ,
,
, .
. ,
.
, , ,
, .

.
,

. , ,
-.
, - .

. PSD-

.
, , ,
.
, . ,
- , -.
, ,
.
, , .
, .
186
- PSD- -Page.psd.
, ,
.
, .
, . * Trash, // HEADER, //
INTRO, // CTA, // FOOTER and // MAIN BG.
, .. .
.
. ,
.
50
100 . ,
. - , clipping mask,
. .
187
, Home About.
, ,
.
.

//MAIN CONTENT.
(Heading 3) . ,
. , ,
.
18 8
,
. ,
.
,
. ,
. :
189
! .
// MAIN CONTENT
// CONTENT - ABOUT // CONTENT - SERVICE ..
.
, .

:
.
,
,
, .
, , .
.
PSD-
ProjectName-Blog.psd. ,
,
.
PSD- // MAIN CONTENT.

My Blog .
190
100
. .
. .
.
-, .
8 , 4
.
,
50 .
,
clipping mask. (Heading 2),
Continue Reading. 50
100 ,
, .
191
, .
.
, .
.
, .
192
:
Merriweather Open Sans.

,
-.

,
.

.
, ,

. ,

. :: Post
1 :: Post 2.
100
.

100
..
193
, - .
.
.
100 ,
.
, .
, 4 . ,
,

.
Email
Newsletter.

.
194
(Heading 4), email,

Sign Up. e-mail:
,
(Heading 5) (Small Paragraph).
, ,
, . -
, -
, .
195
196
: .
PSD- ProjectName-Blog-Post.psd.
, .
, // INTRO . ,
. PSD-. ,
.
.
,
. .
, , .

.
, ,
,
.
,

.
,

.
,

.
197
, .
100 . (Heading 2)
.
Small Paragraph Heading 4
.
199
!
Web-.
.
, !
, .
, .
, , ,

. ,
.
,
. ,
Designers Area - .
201
!
. .

, ,
.
, , -.
: Web-. .
.
,
, . , ,
. , ( !).
, , -
. - .
, .
-, . ,
, .
, , ,
, .
, . ,
. . ,
, , , , .
203

99u.com , .
abduzeedo.com Design inspiration.
alistapart.com , -.
boxesandarrows.com , , ,
.
designmodo.com , .
informationisbeautiful.net , , , .
smashingmagazine.com -
.
speckyboy.com -, -,
.
A Practical Guide to Designing for the Web : Mark Boulton

A Project Guide to UX Design : Russ Unger and Carolyn Chandler
Disciplined Dreaming: A Proven System to Drive Breakthrough Creativity
: Josh Linkner
Dont Make Me Think, Revisited: A Common Sense Approach to Web Usability
: Steve Krug
Creative You: Using Your Personality Type to Thrive : Otto Kroeger
Manage Your Day-to-Day: Build Your Routine, Find Your Focus, and Sharpen
Your Creative Mind : Jocelyn K. Glei
204
Maximize Your Potential: Grow Your Expertise, Take Bold Risks & Build an
Incredible Career : Jocelyn K. Glei
The Accidental Creative: How to Be Brilliant at a Moments Notice : Todd
Henry
The War of Art: Break Through the Blocks and Win Your Inner Creative Battles
: Steven Pressfield
Universal Principles of Design : William Lidwell, Kritina Holden, Jill
Butler
Creating Style Guides : Susan Robertson
How We Read : Jason Santa Maria

The Importance of Designing for Readability : Carrie Cousins
When Typography Speaks Louder Than Words : C. Knight, J. Glaser
Setting Type on the Web to a Baseline Grid : Wilson Miner
Typography Matters : Erin Kissane

The Elements of Typographic Style Applied to the Web : Richard Rutter
How Typography Affects Conversions : Ankit Oberoi
Web Design is 95% Typography
Designing with Type : James Craig Irene Korol Scala

On Web Typography : Jason Santa Maria
205
The Anatomy of Type : Stephen Coles

The Elements of Typographic Style : Robert Bringhurst
Thinking with Type : Ellen Lupton
Type on Screen: A Critical Guide for Designers, Writers, Developers, and
Students : Ellen Lupton
An Introduction to Color Theory for Web Designers : Thomas

Cannon
How Colors Help Make Websites Successful
How Color Theory Affects Landing Page Conversion : Josh Pigford
How to Use the Psychology of Color to Increase Website Conversions :
Jeremy Smith
Usability Tip: Dont Rely on Color to Convey Your Message : Tammy Guy
Which Color Converts The Best? : Ott Niggulis
Color Design Workbook: A Real World Guide to Using Color in Graphic Design
: Adams Morioka
Color Inspirations: More than 3,000 Innovative Palettes from the Colourlovers.
Com Community : Darius A. Monsef IV
Design Elements, Color Fundamentals: A Graphic Style Manual for
Understanding How Color Affects Design : Aaris Sherin
206
The Secret Language of Color: Science, Nature, History, Culture, Beauty of

Red, Orange, Yellow, Green, Blue, & Violet : Joann Eckstut and Arielle
Eckstut
Content-out Layout : Nathan Ford

Ditching the Grid: Alternative Layout Strategies and Tips : Joshua
Johnson
Grid-Based Layouts 101 : James George
Original And Innovative Web Layouts : Shavaughn Haack Understanding
the F-Layout in Web Design : Brandon Jones
Understanding the Z-Layout in Web Design : Brandon Jones
Whitespace : Mark Boulton
Whitespace in Web Design: What It Is and Why You Should Use It : Gisele
Muller
Layout Essentials: 100 Design Principles for Using Grids : Beth Tondreau
Making and Breaking the Grid: A Graphic Design Layout Workshop :
Timothy Samara
Grid Systems in Graphic Design : Josef Muller-Brockmann
207

agiledesigners.com
.
creativemarket.com , , .
fontastic.me .
freevectormaps.com .
graphicburger.com .
.
gratisography.com .
iconmonstr.com Free icons.
littlevisuals.co .
pixeden.com -.
premiumpixels.com PSD-.
unsplash.com .
208

-,
, Magda, ,
,

. .
, ESL
, Laurie Jezuit
.
, ,
1000 ,
. Laurie
. Laurie LinkedIn.
,
- Bartek Kregiel.

Starbucks. Bartek
, .
Bartek -.
Web-
Web-.
,
, , WordPress
...
www.RafalTomal.com
210

Tomal Rafal - Osnovy Web-Dizayna - 2015

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Tomal Rafal - Osnovy Web-Dizayna - 2015

Загружено:

Авторское право:

Доступные форматы

Web-

Web-. . Samigg. Skladchik.com

Web-. . Samigg. Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Evernote Google Drive

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Webflow and Easel.

Designing in the browser.

Web-. . Samigg Skladchik.com

RGB (Red, Green, Blue).

Web-. . Samigg Skladchik.com

CMYK (Cyan, Magenta, Yellow, Black).

72 DPI (Dots Per Inch - ) PPI (Pixel Per Inch - )

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

PSD Designers Area

Photoshop, File -> New.

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Google . Google Fonts

The Essential Web Design Handbook

The Essential Web Design Handbook

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com

Web-. . Samigg Skladchik.com