Introducere in design

Smaranda Clinstudents.infoiasi.ro/~smaranda.calin/portofoliu_cme

216/01/06

I

n

t

r

o

d

u

c

e

r

e

Do you speak DTP? VAZUL este cel mai dezvoltat simt al omului 90% din informatia pe care o percepem este pe cale vizuala.

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.

VIPDont be a

visually

illiterate

person

316/01/06

D

e

s

p

r

e

D

T

P

Do you speak 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.

416/01/06

D

e

s

p

r

e

D

T

P

Programe specializate

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.

516/01/06

D

e

s

p

r

e

D

T

P

Aplicabilitate

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 etcse conformeaza invariabil regulilor de baza ale DTP.

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

616/01/06

D

e

s

p

r

e

D

T

P

Exemplu

Respectarea catorva principii simple cu aplicabilitate imediata pot face orice pagina mai eficienta, mai atragatoare, mai usor de citit.

716/01/06

M

a

c

h

e

t

a

r

e

4 principii universale

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

816/01/06

M

a

c

h

e

t

a

r

e

Proximitatea

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 paginaIdeea de baza: trebuie sa constientizam modul in care ochii nostri se plimba pe o

pagina; intereseaza: traseul si numarul de opriri

916/01/06

M

a

c

h

e

t

a

r

e

Proximitatea

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 ?

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.

1016/01/06

M

a

c

h

e

t

a

r

e

Proximitatea

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)

1116/01/06

M

a

c

h

e

t

a

r

e

Alinierea

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.

1216/01/06

M

a

c

h

e

t

a

r

e

Alinierea

nici un element ne este aliniat cu altul 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.

textul are o alinere frumoasa care il face ordonat.

Alinierea la dreapta care uneste liniile de text este mai puternica decat alinierea centrata.

1316/01/06

M

a

c

h

e

t

a

r

e

Alinierea

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.

1416/01/06

M

a

c

h

e

t

a

r

e

Alinierea

1516/01/06

M

a

c

h

e

t

a

r

e

Alinierea

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

1616/01/06

M

a

c

h

e

t

a

r

e

Repetitia

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)

1716/01/06

M

a

c

h

e

t

a

r

e

Repetitia

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 stieimediat ca acestea fac parte din acelasi document, indiferent demodul in care difera continutul paginilor

1816/01/06

M

a

c

h

e

t

a

r

e

Repetitia

1916/01/06

M

a

c

h

e

t

a

r

e

Repetitia

2016/01/06

M

a

c

h

e

t

a

r

e

Repetitia

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

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

TT

T

T

2116/01/06

M

a

c

h

e

t

a

r

e

Contrastul

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 completdiferite. 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)

2216/01/06

M

a

c

h

e

t

a

r

e

Contrastul

Daca urmatoarele 2 cvuri ajung la tine pe bioru pe care l-ai citi mai intai ?

2316/01/06

M

a

c

h

e

t

a

r

e

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.

2416/01/06

F

o

n

t

u

r

i

Machetare cu ajutorul fonturilor

Literele reprezinta mijlocul de exprimare cel mai elocvent in orice epoca. In 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

2516/01/06

F

o

n

t

u

r

i

Machetare cu ajutorul fonturilor

O pagina poate fi machetata cu 1 sau mai multe fonturi in functie de context 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

2616/01/06

F

o

n

t

u

r

i

Tipurile de fonturi

Categorii de 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)

2716/01/06

F

o

n

t

u

r

i

Oldstyle

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.

Font Oldstyleaccent

serife

trecere gros/subtire

2816/01/06

F

o

n

t

u

r

i

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

Font Modern

2916/01/06

F

o

n

t

u

r

i

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

Font Slab Serif

3016/01/06

F

o

n

t

u

r

i

Sans Serif

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

3116/01/06

F

o

n

t

u

r

i

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

Font Script

3216/01/06

F

o

n

t

u

r

i

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

Decorative

3316/01/06

F

o

n

t

u

r

i

Alegerea familiilor de fonturi

in primul rand, trebuie avut in minte publicul care le va citi 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

3416/01/06

F

o

n

t

u

r

i

Concordanta

apare atunci cand se foloseste o singura familie de fonturi, fara mare diversitate de stil, marime, grosime, culoare etc.

exista tendinta de a rezulta o machetare calma si formala

... acolo unde se gseau natura si pmntul, viata si apa, eu am vzut un peisaj desertic nesfrsit, ceva ca un fel de crater, att de lipsit de ratiune, de lumin, de spirit inct mintea nu l putea cuprinde la nici un nivel al constiintei.

3516/01/06

F

o

n

t

u

r

i

Conflictul

apare atunci cand fonturile combinate sunt similare ca stil marime, grosime

deranjeaza pentru ca atractia vizuala nu este aceeasi, dar nici nu difera

... acolo unde se gseau natura si pmntul, viata si apa,

eu am vzut un peisaj desertic nesfrsit, ceva ca un fel de crater, att de lipsit de ratiune, de lumin, de spirit inct mintea nu l putea cuprinde la nici un nivel al constiintei.

3616/01/06

F

o

n

t

u

r

i

Contrastul

apare atunci cand se combina familii de fonturi si elemente separate, diferenta dintre ele fiind clara, vizibila imediat

este de dorit in amjoritatea cazurilor

... acolo unde se gseau natura si pmntul, viata si apa,

eu am vzut un peisaj desertic nesfrsit, ceva ca un fel de crater, att de lipsit de ratiune, de lumin, de spirit inct mintea nu l putea cuprinde la nici un nivel al constiintei.

3716/01/06

F

o

n

t

u

r

i

Combinatii

tip: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

3816/01/06

C

u

l

o

a

r

e

Despre 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)

3916/01/06

C

u

l

o

a

r

e

Culorile calde

Culorile calde ies in evidenta si ne atrag atentia ochiul e foarte atras

de ele trebuie doar putin

rosu pentru a crea un contrast

4016/01/06

C

u

l

o

a

r

e

Culorile reci

Culorile reci resping ochiul este nevoie de mai

mult dintr-o culoare rece pentru a crea un contrast eficient

4116/01/06

D

e

s

p

r

e

D

T

P

Sfaturi la final :

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!

4216/01/06

D

e

s

p

r

e

D

T

P

Recapitulare

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

4316/01/06

D

e

s

p

r

e

D

T

P

Bilbiografie principala

Robin Williams The Non-Designers Design Book Chris Lumgair Teach Yourself Desktop Publishing

4416/01/06

D

e

s

p

r

e

D

T

P

Intrebari?

Introducere in designDo you speak DTP?Do you speak DTP?Programe specializateAplicabilitateExemplu4 principii universaleProximitateaProximitateaProximitateaAliniereaAliniereaAliniereaAliniereaAliniereaRepetitiaRepetitiaRepetitia Repetitia RepetitiaContrastulContrastul Machetare cu ajutorul fonturilorMachetare cu ajutorul fonturilorTipurile de fonturiOldstyle ModernSlab SerifSans SerifScriptDecorativeAlegerea familiilor de fonturiConcordantaConflictulContrastulCombinatiiDespre culoareCulorile caldeCulorile reciSfaturi la final:Recapitulare Bilbiografie principala