Proiect

la P.I.U.G.

Nume: Șișcanu Cristina

Anul universitar: 2021-2022
Site pentru o scoala care ofera cursuri de engleza

Descrierea tematicii alese si argumentarea

Site-ul serveste drept instrument de promovare a unei scoli care ofera cursuri de
limba engleza. Motivul alegerii temei este dorinta de a afla cum se realizeaza un
site de promovare a unei institutii/organizatii si care sunt paginile, sectiunile,
functionalitatile care trebuie sa fie prezente intr-un astfel de site. Tema aleasa este
destul de ofertanta avand in vedere faptul ca in prezent sunt foarte multe scoli care
ofera cursuri de limbi straine si am avut ca punct de reper site-uri asemanatoare,
dar am avut posibilitatea sa le analizez si sa aduc imbunatatiri pentru ca experienta
utilizatorului sa fie mai placuta.

Site-ul respecta principiul Asigurarea vizibilității stării în care se află sistemul. La

introducerea datelor in formularul din cadrul paginii Contact sau in formularul din
cadrul paginii de inscriere, in cazul in care utilizatorul a introdus date gresite vor fi
afisate mesaje specifice care sa le indice greselile comise pentru ca acestia sa le
poata rezolva cat mai repede posibil, oferind astfel un feedback, iar in cazul in care
acestea sunt corecte vor fi afisate mesaje care sa comunice ca datele au fost
transmise cu succes comunicand astfel utilizatorului ca procesul a avut loc cu
succes. Acest aspect joaca un rol important deoarece ii ofera utilizatorului
increderea ca formularul a fost transmis si previne transmiterea repetata a aceluiasi
formular deoarece utilizatorul ar putea fi nesigur ca formularul a fost transmis
prima data. Acest principiu este respectat si in cazul butoanelor care isi schimba
culoarea atunci cand utilizatorul da click pe el.
Exemplu buton care isi modifica aspectul in momentul in care se da click pe el:

Exemplu afisarea erorilor:

Crearea unui model al sistemului care să fie compatibil cu realitatea
Fiecare sectiune din pagini respecta o anumita structura si anume: titlu urmat de
informatia specifica fiecarei sectiuni. Mesajele de eroare sunt exprimate pe
intelesul utilizatorului si sunt afisate sub campul care a produs eroarea.

Controlul și libertatea utilizatorului

In cadrul paginii “Personalizare site” exista 2 butoane: Salveaza si Restabileste. In
cazul in care utilizatorul a dat click din greseala pe butonul Salveaza si doreste sa
revina la starea precedenta, butonul Restabileste realizeaza aceasta operatie si vor
fi resetate valorile anterioare. Utilizatorul are libertatea sa navigheteze printer
pagini cu ajutorul meniului.

Prevenirea erorilor
Formularul din cadrul paginii Inscrie-te la un nou curs contine campuri formatate
care indica utilizatorului ce optiuni trebuie sa aleaga. In cadrul paginii Inscriere la
curs avem campul Curs care reprezinta un dropdown cu optiunile existente in baza
de date, astfel utilizatorul nu trebuie sa memoreze numele cursului deoarece are
deja la dispozitie optiunile.
Flexibilitate și eficiență în utilizare
Site-ul pune la dispozitia utilizatorilor functionalitatea personalizarii content-ului
de pe site (titluri, paragrafe, fundal), astfel incat fiecare utilizator poate sa-l
personalizeze dupa propriile dorinte.

Proiectare estetică și minimalist

Site-ul contine elementele esentiale si nu cuprinde informatii, sectiuni sau obiecte
irelevante care sa distraga atentia utilizatorului de la informatia de baza.
Design-ul site-ului pune accent pe functionalitate si simplitate astfel incat
experienta utilizatorului sa fie cat mai intuitiva si rapida.

Erorile specifice formularelor sunt afisate sub campul care a produs eroarea si sunt
vizibile utilizatorului datorita culorii cuvintelor si fundalului(rosu). Mesajele de
eroare sunt exprimate in romana la fel ca si intregul site, iar utilizatorul are
posibilitatea sa reintroduca informatiile in formular astfel respectandu-se principiul
9 a lui Nielsen.

Suport (Help) și documentare

Butonul Help este prezent in cadrul paginii de inscriere. In momentul in care se da
click pe acest buton apar niste pasi care trebuie urmati de utilizator pentru a realiza
inscrierea cu success la cursul de engleza selectat.
Principii de proiectare vizuala
Cele 2 culori care se evidentiaza in cadrul site-ului sunt: negru si rosu.
Culoarea negru este folosita pentru a evidentia titlurile sectiunilor.

Fiecare sectiune respecta aceste 2 culori pentru a-i oferi site-ului o continuitate si
pentru ca utilizatorul sa poata delimita si interpreta mai usor informatia. Culoarea
rosu este folosita pentru a evidentia butoanele si alte informatii esentiale (pret). S-a
aplicat culoarea rosu in raport cu aceasta tema deoarece reprezinta o culoare vie,
care denota energie. Toate elementele site-ului sunt pozitionata la centru (imagini,
texte) si echilibrate.

Reguli de proiectare a interfetelor:

Initial s-a realizat un wireframe, o structura alb-negru cu ajutorul platformei

Figma, in care au fost structurate elementele in pagina, fara a tine cont de culoare
si design.

In cadrul acestei structuti s-au delimitat sectiunile, s-au amplasat continutul,

imaginile, butoanele, formularele. Aceasta structura a fost utila pentru gasirea unui
template potrivit.
S-au folosit 4 culori pentru intreaga interfata( negru, 2 nuante de gri si rosu)
Culoarea negru s-a folosit pentru a scoate in evidenta titlul sectiunilor.
Pentru fundal s-a folosit culorea alb pentru pagina Home, iar pentru celelelate
pagini s-a folosit o nuanta deschisa de gri pentru a evidentia formularele si
celelalte elemente.

Principii de prezentare a informatiei pe ecran

 Gruparea informaţiei –Informatia de acelasi tip a fost organizata in ferestre

diferite astfel avem urmatoarele pagini: Home, Contact, Cursuri, Echipa,
Inscriere.
 Reducerea cantităţii de informaţie pentru a evita supraîncărcarea –
respectarea principiului poate fi observata in cadrul paginii Cursuri, unde
informatia despre fiecare curs este foarte concisa, sunt prezente doar cele
mai importante informatii despre curs: pret, durata si nivel;

 Afişarea informaţiei într-un format standard –fiecare sectiune respecta o

forma standart: titlu, informatia propriu-zisa.
 Evidenţierea informaţiei – sublinierea titlurilor cu o linie de culoare rosie,
aplicarea umbrelor pentru evidentierea formularelor.
 Utilizarea elementelor de grafică – s-a folosit un tabel pentru reprezentarea
cursurilor.

Pagina Home:

Pagina Home (Desktop & Mobile)

Butonul “Incepe curs” directioneaza utilizatorul catre pagina de inscriere. Este
plasat in prima sectiune deoarece prima sectiune capteaza atentia utilizatorului.
Meniul este alcatuit din 4 elemente: Acasa, Contact, Cursuri si Echipa + butonul de
personalizare care directioneaza utilizatorul catre pagina de modificare a textului si
fundalului.

Prima sectiune:
In versiunea mobila meniul se modifica si in locul lui apare un meniu de tip burger.
Elementele meniului apar cand se da click pe acest meniu-burger sub forma unei
liste.

Sectiunea Despre noi

Butonul “Cursurile noastre ” directioneaza utilizatorul catre pagina Cursuri.
Butonul Up reprezentat printr-un patrat de culoare rosie cu o sageata alba
directioneaza utilizatorul catre prima sectiune din pagina fara a fi nevoie ca
utilizatorul sa dea scroll manual.

In versiunea mobila imaginea este plasata pe un rand nou si aliniata la centru

Sectiunea Fotografii:
In momentul in care se da click pe una dintre bulinele rosii, caruselul de imagini
avanseaza cu o pozitie si este afisata urmatoarea imagine din lista. Numarul de
buline afisate este egal cu numarul de imagini din carusel.

In versiunea mobila se va afisa o singura imagine pe ecran

Sectiunea Videoclip

Butonul “Incepe curs” directioneaza utilizatorul catre pagina “Inscriere” in

momentul in care se da click pe el. Videoclipul ruleaza doar daca se da play
manual de catre utilizator si contine si controale de setarea a volumului, a vitezei
de redare precum si posibilitatea de a reda videoclipul in modul ecran complet.
In versiunea mobile cele 2 sectiuni sunt amplasate una dupa alta. Videoclipul la fel
se adapteaza pentru ca lungimea lui este setat ca fiind 93% din lungimea
elementului parinte.

Sectiunea Recenzii
Recenziile sunt afisate sub forma unui carusel.
In momentul in care se da click pe una dintre bulinele rosii, caruselul de recenzii
avanseaza cu o pozitie si este afisata urmatoarea recenzie.
In varianta mobila se afiseaza o singura recenzie pe ecran , aliniata la centru.

Pagina Cursuri (Desktop & Mobile)

Funcionalitatile din cadrul acestei pagini sunt:

 Bara de cautare - permite cautarea unui curs dupa nume.

 Afisarea cursurilor dintr-o anumita categorie (nivel). In paranteze este
specificat numarul de cursuri din acea categorie.
Pentru afisarea mai multor informatii exista butonul Mai mult>> care deschide
o noua pagina cu mai multe detalii despre curs.
Pozele 2 si 3 din cadrul paginii “Cursuri” reprezinta pagina in varianta mobila la
diferite dimensiuni ale ecranului.
Pagina respectiva ofera informatii suplimentare despre curs si posibilitatea de a
rezerva un loc pentru cursul respectiv. In momentul in care se da click pe butonul
rezerva loc, se deschide pagina de inscriere, iar campul “Curs” se completeaza
automat cu numele cursului ales.
Pagina Echipa:

Pentru versiunile cu o dimensiune a ecranului mai mica decat 992 px lista de

membri va fi afisata a cate 2 persoane per rand, iar pentru versiunile cu
dimensiunea mai mica decat 768, a cate o persoana per rand.
Pagina Contact:
Formularul permite transmiterea unui mesaj. In momentul in care se da click pe
butonul Trimite mesaj, campurile sunt mai intai validate. In cazul in care exista
erori acestea vor fi afisate, in caz contrar se va afisa un mesaj care sa comunice
utilizatorului ca datele au fost transmise cu succes.
Pentru versiunea cu dimensiunea cuprinsa in intervalul : 992-768px, pagina va
arata precum in a 2-a poza de mai sus, iar pentru intervalul:<768, pagina va arata
precum in poza 3 de mai sus. In poza 2 Datele de contact si formularul vor fi
afisate pe aceeasi coloana, iar in poza 3 datele de contact: adresa, email si telefon
vor fi afisate toate intr-o singura coloana.

Pagina Inscriere

Pagina de inscriere ofera functionalitatea de transmitere a unei cereri de inscriere la

un curs. In tabelul de mai jos sunt specificate cursurile si data cand acestea incep.
Datele sunt validate in momentul in care se da click pe butonul Trimite si se
afiseaza erori in cazul in care datele nu au fost validate. Butonul Help, in
momentul in care se da click pe el, va afisa pasii care trebuie urmati de utilizator
pentru inscriere si ofera informatii suplimentare. Lista de pasi dispare in momentul
in care se da click din nou pe butonul Help.
Pagina Personalizare site
Pagina pentru personalizare ofera utilizatorului posibilitatea de a selecta culorile
titlurilor si a paragrafelor, dar si setarea culorii de fundal. Campurile contin ca
elemente optiunile valabile din care utilizatorul poate alege. Butonul salveaza
implementeza optiunile alese de utilizator. In cazul in care utilizatorul a schimbat
din greseala culorile, butonul restabileste reseteaza valorile precedente.

In versiunea mobila, campurile se ajusteaza deoarece lungimea lor a fost setata ca

fiind 70% din lungimea elementului parinte.
Site-ul este construit pe baza template-ului descarcat de pe urmatorul link:
https://bootstrapmade.com/presento-bootstrap-corporate-template/download/

Tehnologiilor folosite în crearea site-ului

Pentru realizarea structurii monocramatice: platforma Figma
Pentru partea de front s-au folosit urmatoarele tehnologii: HTML, CSS, JavaScript,
Bootstrap 5.
Pentru implementarea functionalitatilor s-a folosit: PHP, MySQL, Laravel.