PW10 Design

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
Conţinut şi design în
Programarea Web.
Ciprian Dobre
ciprian.dobre@cs.pub.ro
Curs Programare Web, anul 4 C5 – Curs 10 1

Pentru început … stilul depinde de

contextul tehnologic (de acord)
* disclaimer
Curs Programare Web, anul 4 C5 – Curs 10 2

Ce este designul?
• Cum ceva arată

• Cum ceva e construit
• Cum ceva funcționează
• Artă
• Designul reprezintă decizii mici care
contează
3
Design rău in programare web

wateronwheels.com
4

gatesnfences.com
5

industrialpainter.com
6

citydeli.com
7

irishwrecksonline.net
8

ptbalirealestate.com
9

007museum.com
10

mamascheesies.com
11

rzent.co.nr
12
Test – Intrebarea nr. 1
• Ce caracteristici greșite ați văzut în paginile

de mai devreme?
• Nu exista răspunsuri greșite, dar există

răspunsuri care nu au legătură cu
întrebarea!
13
Designul e personal
14
Designul se schimbă în timp
15
Site-ul White House

(www.whitehouse.gov) - 1996
16
Site-ul White House

17
Site-ul White House

18
Site-ul White House

19
Site-ul White House

20
Site-ul White House

21
Site-ul White House

22
Site-ul White House

23
Site-ul White House

24
Site-ul White House

25
Google
(www.google.com) - 1997
26
Google
27
Google
28
Google
29
Google
30
Google
31
Google
32
Google
33
Google
34
Google
35
Google
(www.google.com) – 2007
36
Google
37
Google
38
Google
39
Ce tipuri de design exista în

programarea web?
40
Ce tipuri de design există în

programarea web?
• Arhitectural
• Funcțional
• Visual
• Structural
41
Ce trebuie sa facem înainte de

design?
42
Ce trebuie sa facem înainte de

design?
• Cât de mare este?
• Pentru cine este?
• Ce browser/dispozitiv va fi cel mai utilizat?
• Câți clienți vom avea?
• Ce fel de site e?
43
Ce fel de site e?
• Informativ
• Oferă un serviciu
• Marketing
• Un blog
• O pagină personală
44
Planificarea… proiect
Folosiți diverse modele pentru proiectarea site-ului….
45
Planificarea… structura
46
Planificarea… wireframes
47
Planificarea ….
Atenția utilizatorilor e întotdeauna atrasă la început de colțuri și mijloc
Dacă aveți multe imagini, sau pentru pagina Home, regula cadranului
este recomandată
Dacă pagina conține mult text, “reading gravity” – nu este o idee bună
să puneți headline-ul decât în partea de sus a paginii (cititorii nu pot
scana titlul, și apoi reveni, contra gravității, să înceapă de sus…)
48
Planificarea ….
Studii tip “eye-tracking” arată că cititorii se concentrează în primul rând pe informația
din colțul stânga sus, urmează un așa numit pattern Gutenberg Z, abia la final
scanează partea din dreapta a paginii
Un alt studiu arată că informația text este scanată conform unui tipar în F, fixarea
fiind inițial efectuată pe header, și apoi în special în stânga….
49
Planificarea
Există studii care arată
așteptările inconștiente ale
utilizatorilor în regăsirea
anumitor componente web
în pagină….
50
Prima regulă a stilului…

1. Întotdeauna porniți de la a) convenții Web și b) așteptările
utilizatorilor, când planificați la structura și designul paginii
51
Lucruri de care să ținem cont înainte

de design
• Nu trebuie sa reinventăm roata.
• Nobody cares about you or your site.
• Dacă site-ul e destul de important designeri
specializați ar trebui cel puțin consultați
• E indicat să folosim unelte existente
(youtube, etc.)
• Cum faceți să fiți recunoscuți?
• Cum puteți fi contactați?
52
Lucruri de care să ținem cont înainte

de design
• Nu trebuie sa creați inconveniențe
– Nimeni nu vrea sa facă conturi noi (use
OpenID).
– Nu fiți prea originali, folosiți standarde
existente.
• Un site nu e neapărat deajuns
• Dacă e stricat reparăl
• Chiar ai nevoie de un site?
53
Test – Intrebarea nr. 2
• Explicați cum ați desena un loading bar
54
Stilul înseamnă… evitarea unor

greşeli …
55
Ce înseamnă stil bun?

• Stilul corect, precum gustul corect, reprezintă
parţial – dar doar parţial – o problemă de opinie
este afectat de subiectivitate
• Stilul greşit este adesea mai uşor de definit
– O pagină web are un stil greşit dacă
• Pagina nu se poate încărca
• Pagina nu poate fi folosită în scopul pentru care a fost
construită
• Conţinutul paginii nu poate fi citit
• Pagina nu poate fi ajustată propriilor cerinţe
• Nu puteţi scăpa de respectiva pagină
• Nu puteţi parcurge site-ul conţinând respectiva pagina
56
Ce e rău în programarea web

• Load time mare
• Animații abuzive
• Pagina e prea diferită de cele existente,
butoanele devin greu de găsit
• URL-ul e lung și inutil, greu de dat
copy/paste
• Logo-ul nu e mereu vizibil
57

• Un buton către pagina de contact nu e
mereu vizibil
• Scrollbar-ul dispare sau e schimbat
• Link-uri către site-uri NSFW
• Nu suportați orice rezoluție
• Nu merge pe browsere vechi gen lynx
• Design-ul se schimbă
• Pagina arată prea diferit pe dispozitive
diferite.
58
ADA (Americans with Disabilities Act)

• În cazul “National Federation of the Blind v. Target”,
Judecătoarea Marilyn Hall Patel a dat următorul verdict:
“retailers can be sued if their websites are not
accessible to the blind”. În opinia ei “the ‘ordinary
meaning’ of the ADA’s prohibition against discrimination in
the enjoyment of goods, services, facilities or privileges, is
that whatever goods or services the place provides, it
cannot discriminate on the basis of disability in providing
enjoyment of those goods and services.”
• De exemplu, Target.com a declanşat un întreg scandal

pentru faptul că nu foloseşte tag-uri “alt”.
• Sursa: http://arstechnica.com/news.ars/post/20060910-
7705.html
59
Nu se pot folosi cu tehnologii noi

• Dacă sistemele utilizator nu suportă anumite
facilități HTML5 / CSS3 “la modă”?
– Nu toate browserele suportă de 3D Transform (un +
pentru Chrome)
– … nici nu încercați suportul în Internet Explorer…
• Pentru majoritatea site-urilor ce nu pot fi accesate

au apărut tot felul de site-uri alternative
60
Pagina nu poate fi citită

• Două exemple de background-uri (de altfel drăguţe):
• Ambele fundale conţin text – îl puteţi citi?

61
Încă nu puteţi citi pagina

• Aţi observat vreodată pagini ce vă spun ce browser ar trebui
să folosiţi şi cum să vă setaţi propria rezoluţie a ecranului?
– Aţi urmat vreodată sfaturile respective?
– Ce părere aveţi despre ego-ul persoanei ce a proiectat respectivul
site?
• This page was created by someone with perfect eyesight using a 21-inch monitor set to 1600 by 1200 resolution, using an 8-point serif font, and as a result nobody
but the original author has a clue what it actually says.
• Some people just like to use weird fonts

• 7% of white males are red-green colorblind
– Există tot felul de potriviri greşite de culori între fundal şi font
– Culoarea este adesea un bun diferenţiator, dar niciodată nu ar trebui
să fie singurul diferenţiator
• Există multe locuri unde puteţi folosi dimensiuni absolute în
HTML, dar puţine motive ca vreodată chiar să le folosiţi
62
Contrastul e important
• Contrastul este important
– Folosiţi fie text foarte închis la culoare pe un fundal foarte deschis la
culoare, fie un text foarte deschis la culoare pe un fundal foarte închis la
culoare
– Evidaţi contrastul în imaginea de fundal
• Chiar dacă ceva apare ca având un contrast potrivit pe propriul
monitor, nu înseamnă că tuturor li se va părea la fel
– Întotdeauna folosiţi mai multe contrast decât credeţi că este necesar
• Abilitatea de a putea citi un text depinde de posibilitatea depistării
marginilor
• Detecţia marginilor la oameni se bazează pe contrast – diference între
lumină şi întuneric – nu pe diferenţe de culoare
Aceasta este o diferenţă de contrast, nu de culoare

Aceasta este o diferenţă de culoare, nu de contrast
63
64
65
Nu puteţi ajusta o pagină

• Paginile ce folosesc dimensiuni absolute – de exemplu,
pentru a ajusta dimensiunea unei tabele pentru a se
încadra pe un ecran de 17’ – reprezintă o problemă
serioadă
– Scrolling-ul vertical este acceptabil deoarece nu trebuie prea des
să facem scroll în jos pentru a citi o coloană de text
– Dacă avem nevoie de scroll în lateral avem nevoie să facem scroll
pentru fiecare linie de text
• Dimensiunile relative nu funcţionează întotdeauna; am dat

peste pagini ce specificau că dimensiunea tabelei ar
trebui să fie 110% din lungimea paginii
• Chiar dacă monitorul vostru are o rezoluţie mare şi aveţi

vederea bună, s-ar putea să fie alte şi lucruri pe ecran pe
care utilizatorul doreşte să le vadă
66
Nu puteţi naviga prin site

• EPSON era unul dintre cele mai rele exemple
(acum însă site-ul arată mai bine)
• Aveam nevoie să downloadez un driver de
imprimantă; am mers pe www.epson.com şi mi-
au dat următoarele alternative:
– Imprimante & produse pentru procesarea imaginilor
(Printers & Imaging products)
– Dispozitive electronice (Electronic devices)
– Produse Vendabile (Point of Sale Products)
• Ce alternativă dintre acestea ar trebui să aleg
pentru a găsi driverul de imprimantă necesar?
• Propria pagină reprezintă organizaţia
– Ce mă interesează pe mine cum sunt ei organizaţi?
67
Soluţii de ocolire a design-ului prost

• Contrastul slab:
– Apăsaţi control-A pentru a selecta întregul text
al paginii
– Altfel, în Preferences, selectati “Use my
chosen colors” si/sau dezactivaţi încărcarea
imaginilor, apoi reîncărcaţi pagina
• Dimensiune greşită:
– Creşteţi sau micşoraţi rezoluţia ecranului
• Nu puteţi naviga prin site
– Folosiţi Google
68
http://www.webdesignfromscratch.com/why-most-sites-suck.php
69

• Scos funcționalități standardizate gen
bookmarks (Ajax can break it)
• Scroling text
• Lipsa de titlu
• Culoarea link-urilor non-standard
• Link-uri ce nu pot fi apăsate cu middle
mouse button
• Informații vechi
70

• Nu se vede clar din prima pagină despre ce
e site-ul
• Too much clutter
• O pagină care pornește pagina reală
• Butonul de back trebuie să funcționeze
mereu
• Blinking text
• Drop Down menus construite greșit
71

• Text normal colorat sau subliniat fără motiv
• Deschiderea de ferestre noi
• Link-uri cu JavaScript
• Scroling orizontal
• CAPTCHA mult prea greu de citit
• Gramatică greșită
• Cursor de mouse schimbat
• Background închis la culoare
72
Principii de design
73
Principii de design
• În The Non-Designer’s Design Book: Design and
Typographic Principles for the Visual Novice, Robin
Williams discută aceste patru principii:
1. Proximitate: Elementele înrudite ar trebui să fie grupate
împreună.
2. Aliniere: Nimic nu ar trebui plasat în pagină arbitrar --orice
element ar trebui să aibă o conexiune vizuală cu altceva din
pagină.
3. Repetiţie: Unele aspectele ale design-ului ar trebui să fie
repetate în pagină.
4. Contrast: Dacă două itemuri nu sunt exact la fel ele ar trebui să
fie reprezentate diferit – chiar diferit.
74
Proximitate
• Proximitate – apropriere – reprezintă instrumentul
util pentru organizarea lucrurilor în cadrul paginii
– Dacă lucrurile sunt apropiate ele apar ca fiind înrudite
– Prin urmare:
• Dacă lucrurile sunt înrudite, ele ar trebui să stea apropiat
• Dacă lucrurile nu sunt înrudite, ele nu ar trebui să stea apropiat
– Evitarea spaţierii egale a tuturor lucrurilor

– Nu se plasează lucruri în colţuri sau singure în mijlocul
paginii
– Evitarea introducerii prea multor grupuri în cadrul paginii
– Headerele trebuie să arate ca headere iar lucrurile ce nu
sunt headere ar trebui să nu arate ca headere
75
Proximitate
• De exemplu, coperta din dreapta
folosește o aranjare modulară, cu trei
module orizontale:
• Sus: informații privind revista: titlu,

data, frecvența de apariție, tipuri de
conținut (news, ideas, innovation,
careers).
• Centru: Spațiu pentru povestea

principală a ediției, deasupra unei
poze cu un urs polar.
• Jos: Spațiu pentru două sau mai multe

articole.
76
Alinierea
• Alinierea bună ajută la unificarea şi organizarea paginii
• Se doreşte evitarea impresiei de “împrăștiere”
Alinierea stânga tinde

să apară în mod natural
în paginile Web
Alinierea dreaptă nu
este în general de prea
mare ajutor
Alinierea pe centru tinde să fie
plictisitoare şi este mai ales urâtă
când linii sunt toate cam de aceeaşi
lungime
• Încercaţi să evitaţi mai mult de un singur tip de aliniament

în cadrul unei pagini
77
Alinierea
• Alinierea ajută și ochiul în depistarea
lucrurilor utile în cadrul paginii.
• Aproape orice element din pagină a

fost aliniat cu unul sau mai multe
elemente. Există 3 linii verticale și 3
orizontale – invizibile – ce au fost
folosite pentru alinierea elementelor
din pagină.
• Alinierea centrată este adesea privită
ca ‘plicticoasă’ dar în acest caz axele
de simetrie ale ursului polar sunt
folosite ca linie pentru centrarea
textului ce anunță articolul principal.
Centrarea leagă în mod evident
imaginea de text.
78
Repetiţia
• Scopul repetiţiei este:
– De a unifica pagina sau grupul de pagini
– De a adăuga interes vizual
• Puţine lucruri arată mai plictisitor decât pagini lungi, continue de text
• Lucrurile ce arată plictisitor cel mai adesea nu primesc o a doua privire
• Repetiţia e legată de consistenţă

– Deja aţi folosit-o probabil pentru consistenţa fonturilor, a headerelor,
etc.
– Unele elemente vizuale (elemente de fundal, icon-uri, bordere,
reguli orizontale) ar trebui să se repete în cadrul unei pagini Web
sau al unui grup de pagini Web înrudite
– Dacă paginile sunt grupate, ele ar trebui să apară ca fiind grupate
– Totuşi nu folosiţi prea multă repetiţie pentru că poate deveni de la
un punct supărătoare
79
Repetiția
• Aranjarea textului: toate
fonturile sunt de tip sans serif,
fonturi moderne, ce
demonstrează trendul modern,
la zi, chiar a conținutului.
• Culoarea: O notă asupra

repetiției culorilor: text de
culoare albastru închis și
orange; fundal în culoarea
turcoaz în partea dreapta-sus,
în cazul textului stânga-jos și în
imaginea din fundal.
80
Constrastul
• Contrastul apare atunci când două elemente sunt clar
diferite
• Se poate crea contrast prin folosirea de dimensiuni diferite
• Se poate crea contrast prin folosirea de fonturi diverite
• Se pot folosi linii subţiri şi groase
• Se pot folosi linii orizontale şi verticale
• Se pot folosi culori contrastante: culori reci vs. calde
• Se poate folosi text spaţiat larg sau strâns spaţiat
• Atenție însă: Nu e aşa mare contrastul între font de tip de
12 puncte şi cel de 14 puncte
81
Contrast
• Informația din revistă: titlul este
elementul textual vizibil cel mai mare
din partea de sus a paginii.
• Separarea zonelor poveștilor

importante ale ediției: zonele pentru
articolele importante sunt diferențiate
prin dimensiuni diferite ale font-urilor
și culorilor folosite.
• Module: modulele sus și jos au

elementele aliniate stânga și dreapta.
În zona centrală însă textul și
imaginea sunt aliniate centru.
82
Repetiţie!
• Contrastul apare atunci când două elemente
sunt clar diferite
• Se poate crea contrast prin:
– Folosirea de diverse dimensiuni de tip
– Folosirea de diverse fonturi
– Folosirea liniilor subţiri şi groase
– Folosirea liniilor orizontale şi verticale
– Folosirea culorilor contrastante: culori reci şi calde
– Folosirea de text spaţiat diferit
• Nu fiţi plângăreţi – faceţi lucrurile să

arate cu adevărat diferit
– Nu e prea mare contrastul între font de 12 şi font de 14!
83
Tipuri de fonturi
84
Alte câteva principii

• Stabilirea unei ierarhii vizuale
– Oamenii prima dată văd grafica şi pe urmă textul
– Balansarea, organizarea şi contrastul vizual sunt vitale
• Direcţionarea ochilor cititorului
– Oamenii scanează textul de la stânga la dreapta, de sus în jos
– Doar primii patru inchi cei mai de sus ar putea fi vizibili
– Folosiţi nuanţe pastel pentru fundal sau elemente minore
• Atenţie la elemente ce distrag atenţia
– Ilustraţiile bogate şi (în special) grafica animată sau textul animat distrag
atenţia utilizatorului de la conţinut
– Dacă totul este accentuat, nimic nu este accentuat
• Asigurarea consistenţei
– Nu se lasă lucrurile împrăştiate în toată pagina
– Lăsaţi stilul propriu să “evolueze” pe măsură ce îmbunătăţiţi pagina
85
Stabilirea unui look consistent

• Orice pagină din cadrul site-ului ar trebui să împartă unele
elemente de stil cu toate celelalte pagini
– Utilizatorul ar trebui să ştie, fără să se gândească la asta, că
navighează încă în cadrul aceluiaşi site
– Se foloseşte acelaşi logo sau acelaşi set de butoane de navigare
în fiecare pagină
– Se foloseşte o schemă de culori şi un set de fonturi consistente
• Paginile nu trebuie să arate toate identic, dar ele trebuie

să aibă acelaşi stil
• Style sheet-urile CSS pot fi de mare ajutor în definirea

stilului consistent
– Dar trebuie teste făcute pe o varietate de browsere
86
Intrebari
• Ce părere aveți de acest poster?
• Cum atrage atenția utilizatorului?
87
Corectitudinea stilului HTML
88
Ce spuneți de:
89
Ghiduri de stil
• Există multe ghiduri de stil HTML pe Web
• Unul dintre cele mai bune este cel de la Yale,
http://info.med.yale.edu/caim/manual/
• Un altul este cel de la W3C,
http://www.w3.org/Provider/Style/
• Unul dintre cele mai plăcute site-uri este
http://www.webpagesthatsuck.com/
– Motto: “Where you learn good Web design by looking at bad Web
design”
• O carte adecvată subiectului:
– Don't Make Me Think: A Common Sense Approach to Web
Usability, de Steve Krug, Roger Black
90
Cunoaşteţi pe cine încercaţi

• Care este audienţa ţintă? să impresionaţi
– Publicul general (Surferi Web)
• Precum o copertă de revistă, pagina home ar trebui să atragă oamenii
– Folosiţi grafică de calitate şi fraze scrise cu bold
– În cele mai puţine cuvinte posibil, spuneţi vizitatorilor ce aveţi de oferit
– Toate link-urile ar trebui să conducă direct la paginile site-ului
– Vizitatori ocazionali
• Navigarea ar trebui să fie simplă şi intuitivă
• Se folosesc pagini de sumar, icoane ajutătoare, secțiuni FAQs şi organizare
cât mai simplă
– Experţi şi vizitatori frecvenţi
• Furnizarea de informaţie bine organizată rapid cu un deranj minim
• Evitarea graficii pretenţioase, pagini greu de încărcat
• Furnizarea de “site maps” şi funcţii de căutare
– Utilizatori internaţionali
• Folosirea limbajului standard, uşor de înţeles
• Furnizarea de pagini în diverse limbi (suport internaţional)
• Evitarea formatelor de timp şi dată specific regionale, pecum 10-12-2002
91
Cunoaşteţi ce încercaţi să faceţi

• O pagină fără un scop este precum o prezentare
orală fără o topică
• Încercaţi să vindeţi ceva?
– Odorizante de cameră: folosiţi scene exterioare
(natură) cât mai frumoase
– Deodorant: oameni frumoşi (atât femei cât şi bărbaţi)
– Computere: fotografii atractive şi specificaţii tehnice
– Pe voi înşivă: vedeţi orice carte legată de scrierea unui
CV
• Încercaţi să transmiteţi informaţie?
– Folosiţi o organizare cât mai clară, chiar pe baza unui
cuprins (table of contents)
– Pentru multe topici este necesară şi o secţiune FAQ
92
Formate media
• Cărţile au existat chiar înainte de Biblia lui
Gutenberg din 1456
• Câteva dintre “standardele de interfaţă” pentru
cărţi:
– Cărţile au coperţi
– Cărţile sunt legate de-a lungul marginii stânga
– Titlul apare pe cotor sau pe copertă
– Cărţile au o pagină de titlu
– Paginile unei cărţi sunt numerotate
• Paginile impare sunt în dreapta
• Primele pagini sunt numerotate cu simboluri romane
– Cărţile au un cuprins şi un index
93
Paginile Web nu sunt cărţi
• Standardele evoluează rapid, dar nu sunt

“finalizate”
• Web-ul aduce noi capabilităţi:
– Publicarea este ieftină, orice o poate face
– Hiperlinkurile permit acces neliniar la informaţie
– Motoarele de căutare permit găsirea mai uşoară a
informaţiei
• Înainte oamenii lucrau cu sute de bookmarkuri; astăzi toată
lumea foloseşte Google
• Web-ul aduce şi noi situaţii:
– Utilizatorii se pot “pierde în hiperspaţiu”
• Sunt necesare instrumente adecvate de navigare
– Utilizatorii navighează pe Web rapid
• Aveţi la dispoziţie zece secunde pentru a vă face auzit mesajul
94
Câteva sugestii foarte generale

• Stilul bun de scris a fost, este şi va fi întotdeauna
important
– Tot ce aţi învăţat vreodată despre scrierea de compuneri bune se
aplică
• Folosiţi un spell checker

– Astăzi aproape orice aplicaţie software include un spell checker
• Faceţi ca fiecare pagină să iasă în evidenţă individual

– Nu ştiţi cum ajunge cineva să acceseze respectiva pagină
95
Întrebări
• Cititorul ar trebui să poată descoperi:
– Cine a scris pagina?
• Găsiţi o pagină despre cancerul la plămâni. Ea a fost scrisă de
(a) American Medical Association, (b) cineva care lucrează
pentru Philip Morris, sau (c) un instalator din Feteşti?
– Care este topicul abordat în pagină?
• Dacă nu aveţi nimic de spus, mai bine nu-l spuneţi
• Folosiţi un titlu clar, scurt – poate deveni un bookmark
– Când a fost pagina scrisă/actualizată?
• Descoperiţi o pagină despre un nou medicament disponibil “luna
viitoare”
• O altă pagină descrie “ultima versiune” a unui anumit software
– Unde este pagina?
• Cine a scris pagina? Cine a sponsorizat scrierea paginii?
• Dacă tipăresc pagina o voi mai putea regăsi pe Web din nou
vreodată în viitor?
96
Construirea de ajutor de navigaţie

• Când cineva vă accesează site-ul:
– Ce e cel mai probabil să caute?
– Cât de sofisticaţi sunt utilizatorii?
– Aproape nimeni nu întreprinde suficientă testare a uşurinţei de
navigare
• O problemă clasică: descoperiţi o pagină interesantă dar
nu ştiţi ce pagini se află “împrejurul” ei
– Sunt paginile organizate într-o manieră simplă şi consistentă?
– Poate vizitatorul să găsească calea către pagina home?
– Poate utilizatorul să spună dacă se mai află sau nu pe acelaşi
site?
– Barele de butoane sunt utile, dar nu omiteţi legăturile text
– Evitaţi paginile dead-end (acelea fără nici un link)
97
Ajutaţi vizitatorii să găsească pagini în

site
• Dacă aveţi multe pagini puteţi folosi meniuri pe nivele...
– Priviţi un cuprins dintr-o carte; de obicei există secţiuni principale
şi subsecţiuni
• ...dar utilizatorilor nu le plac multe meniuri mici
– Studiile arată că utilizatorii preferă meniuri dense cu multe
alternative în detrimentul meniurilor mici, gen one-step-at-a-time
– “Site maps” au devenit tot mai populare
• Nu toată lumea încarcă grafica implicit
– Hărţile grafice sunt frumoase, dar păstraţi totuşi şi legături text
– Gândiţi-vă să faceţi paginile disponibile şi persoanelor cu
disabilităţi
• Luaţi în considerare adăugarea unui motor de căutare în
cadrul site-ului
• Nu permiteţi părăsirea accidentală a site-ului
– Faceţi distincţie între link-urile locale şi link-urile ce dus vizitatorii
în afara site-ului
– Daţi paginilor un “look” consistent
98
Puneţi lucrurile importante la suprafaţă
• Paginile Web sunt de obicei mai mari decât fereastra în

care acestea sunt vizualizate
– Primul lucru pe care vizitatorii îl văd este partea de sus a paginilor
Web
– Mulţi vizitatori nu vor face niciodată scroll down
• Partea de sus a unei pagini ar trebui să spună vizitatorilor
tot ce trebuie aceştia să cunoască despre pagina
respectivă
– Dacă un vizitator este pierdut în site s-ar putea să nu remarce
legăturile puse în josul paginii
– Adesea, legăturile puse în susul şi josul paginii sunt o idee bună
– … mai ales în cazul unui şir liniar de pagini, în care link-urile
posibile sunt Previous, Next şi (poate) Home sau Table of
Contents
99
Organizaţi-vă paginile
• Orice organizare este mai bună decât nici o
organizare
• O ierarhie (arbore) de obicei funcţionează cel mai
bine
– Puneţi conceptele cele mai importante şi mai generale
în apropierea părţii de sus
– Paginile de mai jos sunt în general mai specifice
• Arborii nu ar trebui să fie prea adânci
– Utilizatorii nu apreciază să traverseze multe pagini
pentru găsirii acelei pagini de interes
• Arborii nu ar trebui să fie nici întinşi pe orizontală
– Utilizatorilor nu le place să traverseze o listă lungă de
legături pentru găsirea aceleia de care au nevoie
• Desenaţi o poză a organizării site-ului!
100
Alte organizări
• Grid:
HTML XML XSLT
Lecture http://... http://... http://...
Links http://... http://... http://...
Assignment http://... http://... http://...
• Liniar:
– Paginile puse în ordinea în care trebuie citite, cu
legături Previous şi Next
– Organizarea cea mai des întâlnită în tutoriale
101
Grafica în pagina principală

• Pagina principală (“home”) reprezintă punctul de
pornire pentru vizitatorii site-ului
– Grafica frumoasă face pagina să arate mai bine
– Grafica complexă face pagina să se încarce mai greu
• Care este audienţa ţintă?
– Clienţi potenţiali
• Modul de apariţie este important...
• ...dar majoritatea utilizatorilor nu vor aştepta mai mult de 7 sau
8 secunde pentru ca pagina să se încarce
– Clienţi existenţi, studenţi, angajaţi
• Obţinerea informaţiei rapid este de mare importanţă
102
Site-uri în continuă adaptare

• Multe site-uri trebuie actualizate frecvent
– Folosiţi o imagine sau text New! – poate ajuta
la indicarea modificărilor survenite
• Dar cât de mult rămâne un element “nou”?
• Datele ataşate elementelor sunt mai informative
– Dacă informaţia este împrăştiată de-a lungul
mai multor pagini s-ar putea să fie mai bine
folosirea unei pagini centrale What’s New
– Ex.: se pot pune anunţuri datate deasupra şi
adăuga materiale în josul paginii
103
FAQ
• Pentru multe site-uri o pagină FAQ (Frequently
Asked Questions) page, cu răspunsuri, se poate
dovedi deosebit de ajutătoare
– O pagină FAQ este mai ales ajutătoare începătorilor din
domeniu
– http://www.faqs.org/
• Cea mai mare problemă cu paginile FAQ este că
multe dintre ele sunt “false”
– O companie pune o pagină FAQ despre propriile produse
ce, în mod evident, nu răspunde la întrebări venind din
partea unor utilizatori reali
• “Care este cel mai mare beneficiu al utilizării şamponului XYZ?”
– Nu vă minţiţi clienţii!
104
Standarde de proiectare
• O companie ar trebui să păstreze standarde de
design pentru paginile Web ale companiei
– Ele dovedesc identitatea companiei
– Probleme:
• Grupuri şi indivizi şi-au stabilit propriile standarde şi nu sunt
dispuşi la schimbare
• Oamenii nepotriviţi pot fi puşi să definească standardele de
design
– Ar putea să cunoască puţin sau nimic despre standardele deja
existente
– Pot decide folosirea de “prea multe” standarde – lucruri ce arată
bine individual, dar care nu merg bine împreună
– Ar putea dura la nesfârşit finalizarea încât standardele să devină
“any day now”
– Ei au propriile idealuri şi ignoră sau uită utilizatorul
Tipuri de formate grafice

• Există trei formate grafice ce pot fi folosite pe
Web:
1. GIF (Graphics Interchange Format)
2. JPG sau JPEG (Joint Photographic Experts
Group)
3. PNG (Portable Network Graphics)
106
Formatul GIF
• Cel mai comun format
– Puteţi specifica câte culori se folosesc (2, 4, 8,
16, etc.)
• Cu cât mai puţine culori cu atât mai mic va fi fişierul
rezultat
– Fişiere fără pierderi de calitate – puteţi recrea
exact imaginea originală
– GIF-urile pot fi animate
– GIF-urile pot fi interlaced
• Proprietate ce permite afişarea rapidă a imaginilor
– GIF-urile suportă transparenţă
• Folositoare pentru conturarea de margini arbitrare
107
Formatul JPG
• Firşierele JPEG furnizează o schemă de
compresie superioară atunci când există gradienţi
de culoare în cadrul imaginii
– Adecvat deci pentru fotografii
– JPEG-uri au pierderi – unele informaţii sunt pierdute în
cadrul compresiei iar informaţia este interpolată
(trucată) atunci când se recrează imaginea
– Se poate seta rata de compresie – cu cât mai multă
compresie cu atât fişierul rezultat va fi mai mic, dar şi
mai multă informaţie va fi pierdută
108
Formatul PNG
• Fişierele PNG au câteva avantaje:
– Alpha channels: puteţi avea transparenţă
variabilă (parţială)
– Gamma correction, puteţi obţine aceleaşi
culoari pe diverse platforme
– Two-dimensional interlacing
• PNG mai furnizează:
– O mai bună compresie decât GIF
– O manieră mai puţin convenientă de a face
animaţii
109
Programare Web pentru Mobile
• Butoane de mărimea degetului

• Scroll e ușor de folosit și trebuie abuzat
• Navigarea trebuie simplificată
• Spațiu mic trebuie folosit tot
110
Ce fac după deployment?

• Statistici
• Customer journey
111
Intrebari
• Care considerați că este cea mai mare
greșeală când vine vorba de design?
• … abia acum puteți submite lucrarea…
112

PW10 Design

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

PW10 Design

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 – Curs 10 1

Pentru început … stilul depinde de

Curs Programare Web, anul 4 C5 – Curs 10 2

• Cum ceva arată

Design rău in programare web

Design rău in programare web

Design rău in programare web

Design rău in programare web

Design rău in programare web

Design rău in programare web

Design rău in programare web

Design rău in programare web

Design rău in programare web

Test – Intrebarea nr. 1

• Ce caracteristici greșite ați văzut în paginile

• Nu exista răspunsuri greșite, dar există

Designul se schimbă în timp

Site-ul White House

Site-ul White House

Site-ul White House

Site-ul White House

Site-ul White House

Site-ul White House

Site-ul White House

Site-ul White House

Site-ul White House

Site-ul White House

Ce tipuri de design exista în

Ce tipuri de design există în

Ce trebuie sa facem înainte de

Ce trebuie sa facem înainte de

Folosiți diverse modele pentru proiectarea site-ului….

Prima regulă a stilului…

Lucruri de care să ținem cont înainte

Lucruri de care să ținem cont înainte

Test – Intrebarea nr. 2

• Explicați cum ați desena un loading bar

Stilul înseamnă… evitarea unor

Ce înseamnă stil bun?

Ce e rău în programarea web

Ce e rău în programarea web

ADA (Americans with Disabilities Act)

• De exemplu, Target.com a declanşat un întreg scandal

Nu se pot folosi cu tehnologii noi

• Pentru majoritatea site-urilor ce nu pot fi accesate

Pagina nu poate fi citită

• Ambele fundale conţin text – îl puteţi citi?

Încă nu puteţi citi pagina

• Some people just like to use weird fonts

Aceasta este o diferenţă de contrast, nu de culoare

Nu puteţi ajusta o pagină

• Dimensiunile relative nu funcţionează întotdeauna; am dat

• Chiar dacă monitorul vostru are o rezoluţie mare şi aveţi

Nu puteţi naviga prin site

Soluţii de ocolire a design-ului prost

Ce e rău în programarea web

Ce e rău în programarea web

Ce e rău în programarea web

– Evitarea spaţierii egale a tuturor lucrurilor

• Sus: informații privind revista: titlu,

• Centru: Spațiu pentru povestea

• Jos: Spațiu pentru două sau mai multe

Alinierea stânga tinde