design site-gaming

salutare, am nevoie de pareri insa pentru inceput mentionez ca am folosit si bootstrap.Am facut un site pentru atestat si am intampinat o problema cu design-ul, site-ul este despre jocuri(mai exact un fel de gamedebate-sysreq mai prost, ideea e ca utilizatorul isi selecteaza componentele si apoi cauta un joc) pe partea grafica am 2 div-uri  (side by side) In primul isi selecteaza datele, in cel de-al doilea cauta jocul urmand ca pagina sa se extinda si sa-i afiseze numele,poza jocului,procentajul de randament al fiecarei componente,un procentaj final si un buton ce deschide un modal (pentru cerinte minime si recomandate).
Voi ce culori ati folosi intr-un astfel de site?Pentru bg am 2 posibilitati #222 sau #f0f0f0.
Daca utilizez prima culoare pentru scris as utiliza #ea0062 insa pentru a doua culoare as utiliza negru.
Problema ar fi ca numele jocului daca il las asa in a doua varianta de bg se vede nasol...
Ceva recomandari?

poti sa folosesti si #ffb6c1, e proiectul tau.

Pe ideea ca la cei cu jurnal casa le recomandam orice, ca doar ei o sa locuiasca in casa lor.

honeymik, on 17 aprilie 2018 - 22:10, said:

Altfel ar fi totul gri, uniform.
Hai sa lasam oamenii sa se "exprime".

Pune niste screenshots cu diversele variante.

dani.user, on 17 aprilie 2018 - 22:38, said:

Salut, Cristian!

În primul rând îți recomand să folosești ceva offwhite pentru text, pentru că e greu de citit. Contrastul dintre orice background și text trebuie să fie mare, ia în calcul că site-ul tău poate fi accesat de afară, unde luminozitatea este scăzută. Încearcă pentru text orice alb alterat, ca #eee sau #e5e5e5.

Poți să te joci cu acest tool de la Adobe: https://color.adobe....te/color-wheel/

Experimentează cu fonturi ca Roboto, Roboto Slab sau Open Sans. Pe toate le găsești pe Google Fonts.

De asemenea, aș sugera să reduci din border-radius pe list groups. Pentru UX cred  că ai mai putea adăuga niște simboluri ușor de recunoscut pentru specificațiile care corespund și care nu corespund.

Pentru a-ți ușura munca în viitor, îți recomand să încerci SASS, LESS, Stylus sau orice alt compiler de CSS care-ți place. Astfel culorile vor fi declarate în variabile și vei putea să interschimbi culori ușor.

Nu stiu cum ar da text pe galben sau ceva din zona aia.Altfel tot un alb sau ceva apropiat.Negru e periculos cand pui text pe el...Trebuie sa te gandesti ca nu toate display-urile au contrast mare sau pot reda cat de cat culoarea pusa de tine(albastru de regula e redat cel mai bine de ex,e doar un ex, nu e cazul tau sa pui albastru, alte culori sunt redate chiar prost rau de unele display-uri) si ca pe unele se poate sa fie foarte greu sa distingi literele.

Edited by ionutz_joe2009, 18 April 2018 - 00:34.

Ignorand pentru moment problema culorilor, siteul are o alta mai grava: prezinta informatia intr-un mod foarte neintuitiv. Intinzi textul prea mult pe verticala.

S-o luam de la inceput. E o pagina unde introduci niste date (alegi componentele & jocul) si astepti sa primesti niste informatii in baza lor.

Inserarea datelor

Uitandu-ma la pagina ta, daca n-ar fi acel mic chenar in dreapta elementelor, n-as zice (fara sa citesc o buna parte din text) ca acolo e o zona unde trebuie sa modific ceva. Utilizarea unei culori de fundal diferite si a unor forme geometrice specifice duce la o separare mult mai buna a zonei unde te astepti ca utilizatorul sa ofere informatii de zona unde i se vor oferi informatii.

Specificarea rezultatelor

Daca sunt o persoana mai putin tehnica, singurul lucru ce vreau sa-l aflu este daca imi merge jocul sau nu. Prezentarea unui rezumat ii ajuta mult pe cei neinteresati de diversele valori.

Cand vad "specificatii minime" ma astept sa vad imediat valori pentru acele specificatii; nu le vad insa niciunde. In schimb zici ca procesorul are un randament de 414% din cerinta jocului. Cam inutila informatia fiindca lucrurile sunt mult mai complexe cand vine vorba de comparat performate.

De ce sa nu folosesti un tabel pentru a prezenta intr-un mod compact toate informatiile cerute? Aici poti folosi in mod practic culorile pentru a indica rezultatul fara a mai fi necesar mult text.

Decat sa vad "Specificatii minime" cu verde, fapt ce ma face sa cred ca sunt promovate insa e doar o culoare aleasa pentru text, verdele sta mai bine pe valori numeric concrete unde imi sugereaza din prima ca e ok, acea valoare nu-mi creaza probleme.

Rezultatul, dupa mine, ar arata cam asa:

 Untitled.png   38.8K   16 downloads

Edited by dani.user, 18 April 2018 - 20:31.

dani.user, on 18 aprilie 2018 - 20:24, said:

Salutare si multumesc pentru raspuns, acele date concrete sunt disponibile atunci cand apesi pe butonul de informatii , asa am gandit treaba... Ar fi trebuit  invers?Oricum multumesc pentru schema, o sa ma orientez dupa schema propusa de tine.

Edited by cristianz999, 18 April 2018 - 20:35.

Cat timp am loc sa afisez date, le afisez direct.

ionutz_joe2009, on 18 aprilie 2018 - 00:20, said:

A10Warthog, on 18 aprilie 2018 - 00:09, said:

Va multumesc pentru raspunsuri. O sa tin cont !