#↓

O tej spletni strani ...

Logo - simbol, dejavnosti in koraki (sklopi), tipografija, barvni sistem, velikosti in razmerja ...

Logo - simbol

Črka "M" je del prepoznavnega napisa MASARU. 
Uporabljena je, kot osnovni prepoznavni znak - simbol.

Mnenje o detajlu v črki "M", prepuščamo opazovalcu:
- lahko je "nepopolnost", 
- možnost za izboljšavo,
- ustvarjalska svoboda, ... ali
- You name it! :-)

Dejavnost in priporočeni koraki 1, 2, 3 — na tej spletni strani

Design & podoba

Prvi korak, preden naredimo spletno stran, reklamne materiale
in se promoviramo, je:
urediti vizualno podobo.

Spletne strani ...

Drugi korak je:
izdelava reklamnih materialov,
kot so: spletne strani (spletna vizitka, katalog ali trgovina) ...

Promocija

Tretji korak je:
narediti izdelke in storitve znane.  Usmerjeno v ciljno skupino s poznavanjem potreb. 
Ali (reverse engineering):
3. Vsako dejavnost je potrebno promovirati (narediti znano).
2. Pred tem moramo imeti reklamne materiale.
1. Ped tem moramo imeti urejeno vizualno podobo.
Najbolj optimalno (in najceneje) je lepo po vrsti: 1, 2 in 3.

Tipografija na teh straneh

Spletna stran uporablja štiri glavne velikosti (odebeljeno), vzete iz Fibonaccijevega zaporedja. 
Hierarhija podajanja informacij na tej spletni strani je:

Naslov

h1; velikost: 55px oz. "responsive" s clamp() funkcijo.
HelveticaNow Text, 200 in 700.

Podnaslov

h2; velikost: 34px oz. "responsive" s clamp() funkcijo.
HelveticaNow Text, 200.

"Mali naslov"

h3; velikost: 27px oz. "responsive" s clamp() funkcijo.
HelveticaNow Text, 200.

"Rezerva"

h4; velikost: 24px oz. "responsive" s clamp() funkcijo.
HelveticaNow Text, 400.
Običajni tekst
Splošni tekst (body); velikost: 21px oz. "responsive" s clamp() funkcijo. 
HelveticaNow Text, 400 in 700.
"Pomožni tekst"
h5; velikost: 18px oz. "responsive" s clamp() funkcijo.
HelveticaNow Text, 400.
Drobni tekst
h6; velikost: 13px oz. "responsive" s clamp() funkcijo.
HelveticaNow Text, 400.

Barvni sistem

Posamezne dejavnosti so "barvno kodirane". Glavne barve posamezne dejavnosti so izpostavljene (bold). 
Odtenki barv se uporabljajo redkeje ali izjemoma.

DESIGN, BRANDING, CELOSTNA GRAFIČNA PODOBA

 

BLUE 120
#004218

 

BLUE 100
#005eb8

PANTONE 300C
RGB 0 94 184
CMYK 100 56 0 3

 

BLUE 80
#337ec6

 

BLUE 60
#669ed4

 

BLUE 40
#99bfe3

 

BLUE 20
#ccdff1

 

BLUE 10
#e6edf3

SPLETNE STRANI, REKLAMNI MATERIALI

 

GREEN 120
#00736b

 

GREEN 100
#00a499

PANTONE 3272 C
RGB 0 164 153
CMYK 100 0 51 0

 

GREEN 80
#33b6ad

 

GREEN 60
#66c8c2

 

GREEN 40
#99dbd6

 

GREEN 20
#ccedeb

 

GREEN 10
#e6f6f5

PROMOCIJA, VIDEO

 

RED 120
#a7242d

 

RED 100
#ef3340

PANTONE Red 032 C
RGB 239 51 64
CMYK 0 90 76 0

 

RED 80
#f25c66

 

RED 60
#f5858c

 

RED 40
#f9adb3

 

RED 20
#fcd6d9

 

RED 10
#fdebec

Splošno — odtenki sivine

 

BLACK
#000000

 

Gray 80
#53565a

 

Gray 60
#97999b

 

Gray 40
#bbbcbc

 

GRAY 30
#e1e2e0

 

GRAY 20
#eeeeeb

 

GRAY 10
#f8f9f6

Posebne barve

 

GOLD 5
#926415

 

WHITE
#ffffff

 

YELLOW 5
#ffff7f

 

YES
#008800

 

Attention
#ee9922

 

NO
#bb0000

Velikosti in razmerja: zlati rez in Fibonaccijevo zaporedje

Vodilo za določitev velikosti in razmerij sta nam bila zlati rez in Fibonaccijevo zaporedje:
1 — 2 — 3 — 5 — 8 — 13 — 21 — 34 — 55 — 89 — 144 — 233 — 377 — 610 ...
Fibonaccijevo zaporedje in zlati rez sta tesno povezana in zelo podobna (več o tem si lahko preberete na Wikipediji).

Nikakor pa ni vse v zlatem rezu (in tudi ne more biti: že vaše ekran, s katerim gledate to spletno stran zelo verjetno ni). 
"Mati narava ga uporablja", podoba te spletne strani mu sledi — kjer je le mogoče in smiselno.
Je vodilo za kontinuiteto naše vizualne podobe.