Introducere

in design

Smaranda Cãlin
students.infoiasi.ro/~smaranda.calin/portofoliu_cme
 Do you speak DTP?
Introducere ™ VAZUL este cel mai dezvoltat simt al omului
™ 90% din informatia pe care o percepem este pe cale vizuala.

Don’t be a

VIP
visually
illiterate
person

™ Atunci cand esti constient de principiile de design aplicate in lumea

care te inconjoara, le poti folosi la randul tau pentru propriile scopuri.
™ Atunci cand o pagina este atractiva dpdv vizual este mult mai probabil
ca ea sa fie citita.

16/01/06 2
 Do you speak DTP?
Despre DTP Ce inseamna Desktop Publishing?
™ este tehnologia de baza pentru producerea de publicatii de orice fel.
™ DTP insumeaza o serie de discipline tehnice si creative, iar tehnologiile
care sunt implicate in DTP se inmultesc pe zi ce trece.
™ termeul DTP se foloseste pentru a denumi atat disciplina (profesia) in
sine, cat si tehnologiile de care acestea face uz.
™ la modul practic : editarea profesionista a oricarui document printat
implica ceea ce se numeste desktop publishing.
™ carti, reviste, newsletter-uri, flyere, brosuri, carti de vizita, carti
postale, scrisori....
™ programele special concepute pentru DTP sunt specializate pe
machetare:
• QuarkXPress
• Adobe Page Maker, Adobe InDesign, Adobe FrameMaker
• Scribus
• MS Puslisher etc.
16/01/06 3
 Programe specializate
Despre DTP

Programele din acesta categorie folosesc ca spatiu de lucru o metafora a

plansetei unui desingner sau publicist care lucreaza in maniera traditionala:
fiecare “lucru” inserat in pagina este tratat ca un obiect separat
™ blocurile de text, imaginile, liniile, graficele etc.
a nu se confunda cu procesoarele de text (ex : MS Word)
™oricat de avansate ar fi, acestea trateaza pagina ca fiind implicit o
succesiune de linii de text, ceea ce ingrauneaza machetarea variabila.
16/01/06 4
 Aplicabilitate
Despre DTP Cu toate ca este o disciplina specializata, principiile de baza ale DTP au
aplicabilitate peste tot in domeniul vizual.
™ designul (aspectul) unei pagini web
™ designul unei reclame
™ designul unei etichete
™ interfata grafica a unui program etc
se conformeaza invariabil regulilor de baza ale DTP.

Principiile designului de pagini reale sau virtuale au un rol mai important decat
s-ar crede initial.

16/01/06 5
 Exemplu
Despre DTP

Respectarea catorva principii simple cu aplicabilitate imediata pot face orice

pagina mai eficienta, mai atragatoare, mai usor de citit.

16/01/06 6
 4 principii universale
Machetare Machetarea se refera la tot ceea ce inseamna lookul paginii:
™ pozitia textului, fontul, schema de culori, marimea imaginilor etc.

Machetarea elementara include 4 principii de baza care se aplica in orice

situatii:
™ Contrastul
™ Repetitia
™ Alinierea
™ Proximitatea
Pot fi tinute minte usor datorita acronimului CRAP

16/01/06 7
 Proximitatea
Machetare Tendinta generala este aceea de a insira cuvintele, propozitiile si imaginile pe
cate o pagina intreaga, umpland colturile si ocupand mult loc
™ lipsa spatiului liber
™ pagina pare neorganizata, fiind posibil ca informatia sa fie mai greu
accesiblia cititorului.
Trebuie sa se grupeze componenetele aflate in legatura
™ acestea trebuie mutate mai aproape unele de altele => vor fi percepute
ca un grup unitar
™ componentele si grupurile de informatii care nu sunt conectate ca
inteles si mesaj nu trebuie sa se afle in proximitate.
™ => cititorul va avea o informatie vizuala imediata despre ceea ce
contine pagina
Ideea de baza:
™ trebuie sa constientizam modul in care ochii nostri se plimba pe o
pagina;
™ intereseaza: traseul si numarul de « opriri »

16/01/06 8
 Proximitatea
Machetare
ƒ 5 componente separate
ƒ unde incepi sa citesti ?
ƒ in centru ?
ƒ ce citesti in continuare ? de la
drepta la stanga sau invers ?
ƒ ce se intampla cand ajungi in
coltul din dreapta jos ?
ƒ se plimba ochii de jur imprejur,
asigurandu-se ca nu au scapat nici
un colt ?
16/01/06
ƒ se mai pune acum problema de
unde incepi si unde ai treminat ?
ƒ acum se urma o progresie logica
pe pagina : de sus in jos.
ƒ folosind acest concept simplu,
cartea de vizita este organizata
dpdv vizual si al informatiei.
9
 Proximitatea
Machetare
tip :

Exercitiu pentru a determina eficienta aplicarii proximitaii pe o pagina :

™ priveste printre gene si misca-ti privirea
™ numara elementele vizuale intalnite pe pagina
™ fii atent la numarul de « opriri » ale ochiului
™ in principiu 3-5 componente (variaza in functie de lucrare)

16/01/06 10
 Alinierea
Machetare Tendinta de a aseza desene, imagini, tot felul de simboluri si text acolo unde
exista spatiu liber pe pagina, deseori ignorand alte componente prezente
™ dezordine (comparatie bucatarie)
Nimic nu trebuie asezat pe pagina in mod arbitrar : fiecare
componenta trebuie sa aiba o legatura vizuala cu altceva de pe
pagina.
™ forteaza la constiinciozitate : elementele nu pot fi pur si simplu
aruncate pe pagina;
™ trebuie gandit ce se alinieaza cu cine.
™ este creata o unitate, coeziune
™ exista o linie invizibila care leaga chiar si elementele care nu sunt in
legatura directa si asta face pagina mai ordonata, mai legata si in mintea
privitorului.
Ideea de baza :
™ pagina este un intreg.
™ linia de baza = linia invizibila pe care sunt asezate literele.
16/01/06 11
 Alinierea
Machetare

ƒ nici un element ne este aliniat ƒ textul are o alinere frumoasa

cu altul care il face ordonat.
ƒ lucrurile arata de parca le-ar fi
trantit cineva cu furca
ƒ textul din cele 4 colturi nu este
aliniat nici cu nici o linie de
baza, nici fata de marginile din
stanga sau din dreapta.
ƒ Alinierea la dreapta care uneste
liniile de text este mai puternica
decat alinierea centrata.
16/01/06 12
 Alinierea
Machetare
tip :

Feriti-va de alinierea centrata... acesta este folosita cel mai adesea de catre
incepatori
™ da un aspect oficial, serios... dar si obisnuit si plictisitor.
™ paginile sofisticate nu au o aliniere centrata

Exemplu->
™ alinierea stanga confera paginii de garda un aspect mai sofisticat -> linia
invizibila conecteaza cele doua blocuri de text.

16/01/06 13
 Alinierea
Machetare

16/01/06 14
 Alinierea
Machetare ™ este bine ca intr-o pagina sa
folosesti un singur fel de
aliniere daca esti neinitiat
™ daca ai experienta, este
obligatoriu sa gaseti liniile
puternice si sa aliniezi dupa
ele.

™ fotografiile, elementele
grafice, alte bocuri de text
dau linii puternice

16/01/06 15
 Repetitia
Machetare Anumite parti ale machetarii trebuie repetate in intreaga lucrare.
Elemenutul repetat poate fi :
™ un font ingrosat, o linie, un marcaj de un anumit fel, o culoare, un
element de design, de format, de relatie spatiala etc
™ exemple folosite in mod frecvent de oricine: titlurile toate de acelasi
tip si marime de font, marcajele folosite in liste, numerele de pagina
etc.-> trebuie insistat
™ asigura valoarea vizuala si unifica obiectele altfel disparate.
™ este tributara tot conceptului de unitate si asigura un liant intre
elementele, paginile, sectiunile aceluiasi document sau al lucrarilor care
au legatura intre ele.
™ utila pentru lucrarile de o singura pagina si vitala pentru cele de mai
multe pagini (carti, situri web etc)

16/01/06 16
 Repetitia
Machetare Adaugarea de elemente care se repeta pe cartea de vizita

™ initial ochii iti hoinaresc pe cartea de vizita dupa ce ai terminat de

citit
™ acum, dupa ce ai citit tot ce scrie, ochii ti se plimba intre cele doua
elemente de recurenta
™ atunci cand e vorba de mai multe pagini cititrul trebuie sa stie
imediat ca acestea fac parte din acelasi document, indiferent de
modul in care difera continutul paginilor
16/01/06 17
 Repetitia
Machetare

16/01/06 18
 Repetitia
Machetare

16/01/06 19
 Repetitia T
Machetare
tip :

Pentru cei mai experimentati, repetitia se poate materaliza in cateva elemente

T
care au o legatura intre ele aruncate de-a lungul paginii: litere, imagini mici,
figurine etc
™ ideea este ca acestea sa aiba ceva in comun dpdv al formei, culorii etc.
™ este un truc amuzant si de efect

T
T

16/01/06 20
 Contrastul
Machetare Unul dintre cele mai eficiente cai de a adauga culoare vizuala paginii si de a crea
o ierarhie de organizare a elementelor
™ contrastul trebuie sa fie puternic
™ Nu umbla cu jumatati de masura!
™ exista doar intre 2 elemente diferite, nu aproximativ diferite
Daca 2 elemente nu sunt exact la fel, ele trebuie sa fie complet
diferite.
™ creare:
ƒ un font mare/ unul mic
ƒ un font elegant/ un font ingrosat, fara serife
ƒ o linie subtire/ una una groasa
ƒ o culoare calda/ una rece
ƒ un element orizontal (ex : un rand lung de text) cu unul vretical
(ex : o coloana inalta de text)

16/01/06 21
 Contrastul
Machetare Daca urmatoarele 2 cvuri ajung la tine pe bioru pe care l-ai citi mai intai ?

16/01/06 22
 Machetare ™ folosirea contrastului face pagina mai atractiva
™ clarifica scopul si organizarea documentului
™ ochilor nostrii le palce contrastul, el atrage atentia asupra unei pagini
™ dar : este ca si cum ai potrivi culoarea de var pentru o bucata de
perete care trebuie revaruit.

tip :

Nu te teme sa faci cuvintele foarte mari sau foarte mici.

Nu te teme sa faci desene foarte ingrosate sau abia schitate.
™ in viata cateodata soptim, cateodata tipam… ambele tonalitati sunt
eficiente daca sunt folosite la momentul potrivit.

16/01/06 23
 Machetare cu ajutorul fonturilor
« Literele reprezinta mijlocul de exprimare cel mai elocvent in orice epoca. In
Fonturi
afara de arhitectura, literele ofera portretul ce caracterizeaza cel mai bine o
perioada si marturia cea mai sobra a starii intelectuale a unei natiuni. »
Peter Behrens

™ fontul este sufletul machetarii

™ cu toate acestea, fontul nu trebuie sa impiedice intelegerea mesajului

16/01/06 24
 Machetare cu ajutorul fonturilor
O pagina poate fi machetata cu 1 sau mai multe fonturi in functie de context
Fonturi
™ cel mai usor se folosesc doua
™ este foarte important ca acestea sa arate bine impreuna -> revenim
™ limbajul tehnic :
ƒ font (limbaj natural) = familie de fonturi sau fontface (lb
specialitate)
ƒ font (lb specialitate) = formatarea unui anumit cuvant/ bloc de
text (se refera la familia de fonturi cu care este scris, dimensiune,
spatiere si alte atribute)
ƒ in prezentare, atunci cand nu exista confuzie voi folosi limbajul
natural

16/01/06 25
 Tipurile de fonturi
Categorii de fonturi
Fonturi
™ se disting 6 categorii principale, universal recunoscute
ƒ Oldstyle
ƒ Modern
ƒ Slab Serif
ƒ Sans Serif
ƒ Script
ƒ Decorative
™ deriva si alte subcategorii in functie de criteriul ales (inaltimea corpului
literei, inaltimea superioara, marimea serifelor, marimea accentului etc)

16/01/06 26
 Oldstyle
Fonturi
serife
accent

Font Oldstyle
trecere
gros/subtire
™ au la baza literele facute cu mana de catre scribi folosind o pana de scris
™ sunt « usoare », potrivite pentru corpuri mai mari de text -> atentie monitor.

16/01/06 27
 Modern
Fonturi

Font Modern
™ aparute in 1700, cand datorita hartiei mai netede, a tehnicilor de
tiparire mai sofisticate fonturile au capatat un aspect mai geometric
™ aspect frapant mai ales la dimensiuni mari

16/01/06 28
 Slab Serif
Fonturi

Font Slab Serif

™ « slab » = dala, lespede
™ dezvoltate odata cu revolutia industriala si publicitatea (modern -> slab
serif)
™ (Clarendon) -> perioada in care era la moda cultura egipteana in Europa
™ mule fonturi au nume egiptene : Memphis, Cairo, Scarab
™ aspect intunecat in blosuri mari de text, desi sunt lizibile

16/01/06 29
 Sans Serif
Fonturi

Font Sans Serif

™ « sans » (franceza) = fara
™ ideea a aparut destul de tarziu si a avut succes abia in prima parte a
secolului XX
™ foarte buna in crearea de contraste
™ foarte bune pentru monitor -> Windows, Machintosh

16/01/06 30
 Script
Fonturi

Font Script
™ imita scrisul de mana cu o pensula sau o penita pentru caligrafie
™ trebuie folosite cu cumpatare
™ cele fanteziste niciodata pentru blocuri mari de text, niciodata cu
majuscule

16/01/06 31
 Decorative
Fonturi

Decorative
™ cel mai usor de identificat :
ƒ « daca gandul de a citi o carte scrisa numai cu acel font te face sa
vomiti atunci ai dat peste un font decorativ » (Robin Williams)
™ pot exprima in mod direct si rapid idei sau pot induce stari de spirit

16/01/06 32
 Alegerea familiilor de fonturi
™ in primul rand, trebuie avut in minte publicul care le va citi
Fonturi
™ apoi genul de document pe care il producem: (va fi printat sau nu, este
un manual tehnic, o lucrare de licenta, o carte de vizita, un site web, un
chestionar etc )
™ familiile de fonturi folosite sunt « vocea » textului tau

Combinearea :
™ Exista 3 relatii posibile intre 2 fonturi :
ƒ relatie de concordata
ƒ relatie conflictuala
ƒ relatie contrastanta

16/01/06 33
 Concordanta
™ apare atunci cand se foloseste o singura familie de fonturi, fara mare
Fonturi
diversitate de stil, marime, grosime, culoare etc.
™ exista tendinta de a rezulta o machetare calma si formala

... acolo unde se gãseau natura si pãmântul, viata si apa,

eu am vãzut un peisaj desertic nesfârsit, ceva ca un fel de
crater, atât de lipsit de ratiune, de luminã, de spirit incât
mintea nu îl putea cuprinde la nici un nivel al constiintei.

16/01/06 34
 Conflictul
™ apare atunci cand fonturile combinate sunt similare ca stil marime,
Fonturi
grosime
™ deranjeaza pentru ca atractia vizuala nu este aceeasi, dar nici nu difera

... acolo unde se gãseau natura si pãmântul, viata si apa,

eu am vãzut un peisaj desertic nesfârsit, ceva ca un
fel de crater, atât de lipsit de ratiune, de luminã, de spirit
incât mintea nu îl putea cuprinde la nici un nivel al
constiintei.

16/01/06 35
 Contrastul
™ apare atunci cand se combina familii de fonturi si elemente separate,
Fonturi
diferenta dintre ele fiind clara, vizibila imediat
™ este de dorit in amjoritatea cazurilor

... acolo unde se gãseau natura si pãmântul, viata si apa,

eu am vãzut un peisaj desertic nesfârsit, ceva ca un
fel de crater, atât de lipsit de ratiune, de luminã, de spirit
incât mintea nu îl putea cuprinde la nici un nivel al
constiintei.

16/01/06 36
 Combinatii

tip
Fonturi
:

Nu este recomandat sa foloseti pe aceeasi pagina doua fonturi din categoria

Sans Serif sau doua fonturi cu serife, decat daca ai o anumita instruire in
domeniul tipografic.

Poti utiliza doua fonturi cu serife daca acestea fac parte din familii diferite
(oldstyle cu Modern sau cu Slab Serif), dar trebuie accentuate contrastele

16/01/06 37
 Despre culoare
Culoare Trebuie folosita intr-un mod potrivit, intodeauna cu un scop :
™ pentru a insufla o stare de spirit
™ ca element de branding
™ pentru a accentua o paleta de culori deja existenta in document
™ nu trebuie folosita doar de dragul de a o folosi ! (combinatia de alb cu
negru poate fi la fel de sofisticata)

16/01/06 38
 Culorile calde
Culoare Culorile calde ies in
evidenta si ne atrag atentia
™ ochiul e foarte atras
de ele
™ trebuie doar putin
rosu pentru a crea
un contrast

16/01/06 39
 Culorile reci
Culoare Culorile reci resping ochiul
™ este nevoie de mai
mult dintr-o
culoare rece
pentru a crea un
contrast eficient

16/01/06 40
 Sfaturi la final :
Despre DTP ™ gandeste-te la cum merg ochii tai pe pagina
™ nu lasa lucruile la voia intamplarii
™ nu te crampona de idei preconcepute
™ daca nu poti exprima in cuvinte exact motivele pentru care
faci un lucru, mai bine nu il mai faci!

16/01/06 41
 Recapitulare
Despre DTP ™ Ce inseamna DTP
™ Aplicabiliatea in viata de zi cu zi
™ Cele 4 principii de machetare fundamentala (CRAP)
• Contrast
• Repetitie
• Aliniere
• Proximitate
™ Despre fonturi
™ Cele 6 tipuri fundamentale
™ Cele 3 relatii posibile intre ele
• Concordanta
• Conflict
• Contrast
™ Despre culoare
• Culori reci
• Culori calde
™ Sfaturi la final

16/01/06 42
 Bilbiografie principala
Despre DTP ™ Robin Williams – The Non-Designer’s Design Book
™ Chris Lumgair – Teach Yourself Desktop Publishing

16/01/06 43
 Despre DTP

Intrebari?

16/01/06 44