Designul paginilor

1. Standardul minim

Pentru un site (de prezentare de exemplu) care nu are conținut dinamic sau alte necesități speciale se vor livra următoarele PSD-uri:

  • Un model pentru homepage;
  • O pagină adițională de conținut în care se vor specifica stilul și poziția textului, imaginilor și a oricărui alt element care nu apare în home-page (devreme ce site-ul este considerat standard minim înseamnă că toate paginile vor fi realizate în acest stil);
  • Opțional se livrează și un PSD cu o pagină de contact (se înțelege afișarea datelor de contact în text static). Aici se va desena poziția textului pentru datele de contact în pagină.

2. Site cu pagină de intro

În cazul unui site în care prima pagină accesată este diferită de restul siteului se vor livra următoarele PSD-uri:

  • Modelul pentru pagina de intro;
  • Apoi se vor urma indicațiile de la Standard Minim (vezi mai sus secțiunea 1. Standardul minim).

3. Site cu formulare

Dacă site-ul are nevoie de diferite formulare pentru acestea se vor preciza stiluri (vezi mai sus secțiunea 2. Site cu pagină de intro).

Dacă este nevoie de pagini cu formulare (contact, rezervări, etc…) se va realiza un PSD în care vor fi desenate acestea.
Se va desena poziția formularului în pagină, poziția și stilul diverselor câmpuri, stilul etichetelor.

4. Site cu galerie foto

Dacă site-ul are nevoie de o galerie foto se va realiza un PSD cu această pagină.

  • Se va desena poziția galeriei în pagină.
  • Se va desena stilul și poziția thumbnail-urilor.
  • Se va preciza numărul de coloane.
  • Se vor livra thumbnail-urile și imaginile mari în formatul stabilit.
  • Dacă există text se va desena stilul și poziția acestuia.

5. Site cu pagini de informație și imagini

Dacă site-ul conține pagini informative care conțin și imagini, se va realiza un PSD pentru asemenea pagini.

  • Se va desena poziția imaginii/imaginilor și se va desena și stilul acestora.Se va preciza dacă imaginii/imaginile sunt sau nu thumbnailuri.Dacă imaginea/imaginile au un label se va preciza poziția și stilul acestuia.
  • Se va desena modul de curgere a textului în jurul pozei.

6. Site cu portofoliu

Dacă site-ul va conține un portofoliu se vor realiza 2 PSD-uri.

Un PSD va conține pagina de meniu portofoliu, unde vor fi afișate eventualele lucrări sau elementele de portofoliu.

  • Se va preciza dacă se vor folosi poze, dacă da, se va desena stilul lor, se va preciza dacă acestea sunt thumbnailuri sau linnkuri la pagina de lucrare/element.
  • Se va preciza poziția textului descriptiv și stilul său.

PSD-ul pt lucrare/element (în caz că acestea au o pagină propie cu detalii adiționale față de meniu).

  • Se va desena poziția și stilul elementelor.
  • Se va desena poziția și stilul textului descriptiv.
  • Dacă există imagini se va preciza dacă sunt thumbnail sau imagini inline.
  • Dacă este o galerie foto se vor urma pașii de la secțiunea Site cu galerie foto.

5. Site cu catalog de produse

Dacă siteul va conține un catalog de produse se vor livra minim 2 PSD-uri.

PSD cu pagină de meniu catalog

  • Se va desena poziția și stilul textului și imaginilor/imaginii.
  • Se va preciza dacă imaginile sunt thumbnail sau inline.

PSD cu pagină de produs

  • Se va desena pozitia si stilul textului si imaginilor.
  • Dacă exista galerie foto se vor urma pașii de la secțiunea Site cu galerie foto.

În cazul în care catalogul de produse este realizat pe categorii se va realiza și un PSD cu pagina de meniu pentru categorii în aceeași manieră.

Se va folosi tehnica Bread-crumbing detaliată în articolul  de  Navigabilitate.

6. Pagini generate prin opțiuni PHP

  1. Se va ține cont de paginile care pot afișa mai multe mesaje/templaturi în funcție de structurile condiționale PHP folosite. În acest caz pagina va trebui creat un alt PSD care să afișeze stilul elementelor prezente în noua formă a paginii generate.
    Spre exemplu după trimiterea unui email de contact, se poate afișa un mesaj că mailul a fost trimis sau un mesaj că au fost erori. În acest caz pe langa PSD-ul cu modelul paginii de contact, se vor desena 2 PSD-uri adiționale. Unul va afișa modelul mesajului de succes trimitere (stil, pozitțonare), iar celălalt va afișa mesajul de eroare (stil, poziționare).
  2. În cazul validarii unui formular dacă acesta conține erori fișierul PHP se poate reîncărca și poate afișa câmpurile care conțin erori sau nu au fost completate. În cazul acesta se va desena pe lângă PSD-ul care afișează stilul și poziția în pagină a formularului și câmpurilor încă un PSD.
    Acesta va conține stilul câmpurilor care conțin erori, sau mesaje care să explice erorile. Pentru aceste mesaje se va desena stilul și poziția textului.
  3. Dacă formularul este validat prin Ajax atunci se va proceda similar ca la punctul anterior.

7. Considerații adiționale, efecte.

În cazul în care o pagină dintr-un site conține diverse efecte, animații, stări de hover pe elemente care nu sunt linkuri. Acestea vor fi specificate ori grafic ori prin descrieri text.

Exemple:

  1. Spre exemplu în cazul unui meniu drop-down, se pot realiza două PSD-uri, unul va conține starea inițială a meniului, iar celălalt va conține starea meniului după ce s-a afișat submeniul.
    Ambele stări vor fi descrise ca stil și poziție. Atat pentru meniu cât și pentru submeniu. Adițional, în cazul unei animații, se poate descrie efectul într-un fișier text.
  2. În alte cazuri alte porțiuni din site pot fi ascunse, acestea fiind afișate la o actiune a utilizatorului (paragrafe ascunse, blocuri de informatii, structuri arborescente, detalii aditionale, detalii ce apar la prezenta mouse-ului). In toate aceste cazuri se va specifica stilul, pozitia si eventuala animatie pentru elementele care nu sunt afisate intr-un alt PSD.
  3. Pentru alte efecte se va discuta cu developerii.