Introducere in design
Smaranda Cãlinstudents.infoiasi.ro/~smaranda.calin/portofoliu_cme
216/01/06
Intr
od
uce
reDo you speak DTP?
VAZUL este cel mai dezvoltat simt al omului90% 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.
VIPDon’t be a
visually
illiterate
person
316/01/06
Des
pre
DT
PDo 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
Des
pre
DT
PPrograme 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
Des
pre
DT
PAplicabilitate
Cu toate ca este o disciplina specializata, principiile de baza ale DTP au aplicabilitate peste tot in domeniul vizual.
designul (aspectul) unei pagini webdesignul unei reclame designul unei eticheteinterfata 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.
616/01/06
Des
pre
DT
PExemplu
Respectarea catorva principii simple cu aplicabilitate imediata pot face orice pagina mai eficienta, mai atragatoare, mai usor de citit.
716/01/06
Mac
het
are
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:
ContrastulRepetitiaAliniereaProximitatea
Pot fi tinute minte usor datorita acronimului CRAP
816/01/06
Mac
het
are
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 liberpagina pare neorganizata, fiind posibil ca informatia sa fie mai greu accesiblia cititorului.
Trebuie sa se grupeze componenetele aflate in legaturaacestea trebuie mutate mai aproape unele de altele => vor fi percepute ca un grup unitarcomponentele 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 »
916/01/06
Mac
het
are
Proximitatea
5 componente separateunde 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
Mac
het
are
Proximitatea
tip:
Exercitiu pentru a determina eficienta aplicarii proximitaii pe o pagina :priveste printre gene si misca-ti privireanumara elementele vizuale intalnite pe paginafii atent la numarul de « opriri » ale ochiuluiin principiu 3-5 componente (variaza in functie de lucrare)
1116/01/06
Mac
het
are
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
Mac
het
are
Alinierea
nici un element ne este aliniat cu altullucrurile arata de parca le-ar fi trantit cineva cu furcatextul 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
Mac
het
are
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
Mac
het
are
Alinierea
1516/01/06
Mac
het
are
Alinierea
este bine ca intr-o pagina sa folosesti un singur fel de aliniere daca esti neinitiatdaca 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
Mac
het
are
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 etcexemple folosite in mod frecvent de oricine: titlurile toate de acelasi tip si marime de font, marcajele folosite in liste, numerele de pagina etc.-> trebuie insistatasigura 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
Mac
het
are
Repetitia
Adaugarea de elemente care se repeta pe cartea de vizita
initial ochii iti hoinaresc pe cartea de vizita dupa ce ai terminat de cititacum, dupa ce ai citit tot ce scrie, ochii ti se plimba intre cele doua elemente de recurentaatunci 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
Mac
het
are
Repetitia
1916/01/06
Mac
het
are
Repetitia
2016/01/06
Mac
het
are
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
Mac
het
are
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 puternicNu 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 micun font elegant/ un font ingrosat, fara serifeo linie subtire/ una una groasao culoare calda/ una receun element orizontal (ex : un rand lung de text) cu unul vretical (ex : o coloana inalta de text)
2216/01/06
Mac
het
are
Contrastul
Daca urmatoarele 2 cvuri ajung la tine pe bioru pe care l-ai citi mai intai ?
2316/01/06
Mac
het
are folosirea contrastului face pagina mai atractiva
clarifica scopul si organizarea documentuluiochilor nostrii le palce contrastul, el atrage atentia asupra unei paginidar : 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
Fon
turi
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 machetariicu toate acestea, fontul nu trebuie sa impiedice intelegerea mesajului
2516/01/06
Fon
turi
Machetare cu ajutorul fonturilor
O pagina poate fi machetata cu 1 sau mai multe fonturi in functie de contextcel mai usor se folosesc douaeste foarte important ca acestea sa arate bine impreuna -> revenimlimbajul 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
Fon
turi
Tipurile de fonturi
Categorii de fonturise disting 6 categorii principale, universal recunoscute
Oldstyle
ModernSlab Serif
Sans SerifScriptDecorative
deriva si alte subcategorii in functie de criteriul ales (inaltimea corpului literei, inaltimea superioara, marimea serifelor, marimea accentului etc)
2716/01/06
Fon
turi
Oldstyle
au la baza literele facute cu mana de catre scribi folosind o pana de scrissunt « usoare », potrivite pentru corpuri mai mari de text -> atentie monitor.
Font Oldstyleaccent
serife
trecere gros/subtire
2816/01/06
Fon
turi
Modern
aparute in 1700, cand datorita hartiei mai netede, a tehnicilor de tiparire mai sofisticate fonturile au capatat un aspect mai geometricaspect frapant mai ales la dimensiuni mari
Font Modern
2916/01/06
Fon
turi
Slab Serif
« slab » = dala, lespededezvoltate odata cu revolutia industriala si publicitatea (modern -> slab serif)(Clarendon) -> perioada in care era la moda cultura egipteana in Europamule fonturi au nume egiptene : Memphis, Cairo, Scarabaspect intunecat in blosuri mari de text, desi sunt lizibile
Font Slab Serif
3016/01/06
Fon
turi
Sans Serif
Font Sans Serif« sans » (franceza) = fara ideea a aparut destul de tarziu si a avut succes abia in prima parte a secolului XXfoarte buna in crearea de contraste foarte bune pentru monitor -> Windows, Machintosh
3116/01/06
Fon
turi
Script
imita scrisul de mana cu o pensula sau o penita pentru caligrafietrebuie folosite cu cumpatarecele fanteziste niciodata pentru blocuri mari de text, niciodata cu majuscule
Font Script
3216/01/06
Fon
turi
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
Fon
turi
Alegerea familiilor de fonturi
in primul rand, trebuie avut in minte publicul care le va citiapoi 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 concordatarelatie conflictualarelatie contrastanta
3416/01/06
Fon
turi
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 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.
3516/01/06
Fon
turi
Conflictul
apare atunci cand fonturile combinate sunt similare ca stil marime, grosimederanjeaza 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.
3616/01/06
Fon
turi
Contrastul
apare atunci cand se combina familii de fonturi si elemente separate, diferenta dintre ele fiind clara, vizibila imediateste 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.
3716/01/06
Fon
turi
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
Cu
loar
eDespre culoare
Trebuie folosita intr-un mod potrivit, intodeauna cu un scop : pentru a insufla o stare de spiritca element de brandingpentru a accentua o paleta de culori deja existenta in documentnu trebuie folosita doar de dragul de a o folosi ! (combinatia de alb cu negru poate fi la fel de sofisticata)
3916/01/06
Cu
loar
eCulorile 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
Cu
loar
eCulorile reci
Culorile reci resping ochiul este nevoie de mai mult dintr-o culoare rece pentru a crea un contrast eficient
4116/01/06
Des
pre
DT
PSfaturi la final :
gandeste-te la cum merg ochii tai pe paginanu lasa lucruile la voia intamplariinu te crampona de idei preconceputedaca nu poti exprima in cuvinte exact motivele pentru care faci un lucru, mai bine nu il mai faci!
4216/01/06
Des
pre
DT
PRecapitulare
Ce inseamna DTPAplicabiliatea in viata de zi cu ziCele 4 principii de machetare fundamentala (CRAP)
• Contrast• Repetitie• Aliniere• Proximitate
Despre fonturiCele 6 tipuri fundamentale Cele 3 relatii posibile intre ele
• Concordanta• Conflict• Contrast
Despre culoare• Culori reci • Culori calde
Sfaturi la final
4316/01/06
Des
pre
DT
PBilbiografie principala
Robin Williams – The Non-Designer’s Design BookChris Lumgair – Teach Yourself Desktop Publishing
4416/01/06
Des
pre
DT
P
Intrebari?