Web dizan za developere – osnovna uputstva

Ovde su određeni saveti koji mogu pomoći developerima prilikom izrade određenih stranica ili sekcija gde nemaju jasno definisan dizajn.

Saveti su izvučeni iz besplatnog kursa sa Udemy-ja – https://www.udemy.com/course/web-design-secrets/

Tipografija #

1. Budući da tekst zauzima najveći deo stranice kod nas, treba pažnju obratiti na tipografiju:
2. Veličina teksta u pasusima na stranici treba da bude između 15-25px.
3. Za glavne naslove koristiti veće veličine fontova (32-60px, možda i više, čak 90px..)
4. Line height treba da bude 120-150% kako bismo olakšali čitanje sadržaja
5. Koristiti 45-90 karaktera u jednom redu
6. Sans serif fontovi: Neutralni, moderni, čisti, jednostavni. 
7. Serifni fontovi: Story telling, tradicionalne svrhe, duže čitanje.
8. Predlozi dobrih Sans serif fontova: Open Sans, Lato, Raleway, Montserrat, PT Sans
9. Predlozi dobrih serifnih fontova: Cardo, Merriweather, PT Serif

Boje #

1. Primer lošeg sajta: lingscars.com
2. Koristiti samo jednu osnovnu boju (primere možemo pronaći na flat ui colors: https://flatuicolors.com/ )
3. CTA dugmići mogu odskakati što se boje tiče kako bi privukli pažnju (Koristite boje kako biste privukli pažnju)
4. Nikada se ne koristi čista crna boja ni za šta (#000)
5. Boje
   1. Crvena: moć, strast, snaga, uzbuđenje (svetliji tonovi energičniji, tamniji moćniji i elegantniji)
   2. Narandžasta: Privlači pažnju ali nije preterano jaka kao crvena. Vedra je. Asocira na prijateljstvo, poverenje, hrabrost. 
   3. Žuta: Energična, osećaj sreće i živosti. Asocira na radoznalost, inteligenciju, bistrinu …
   4. Zelena: Harmonija, priroda, život, zdravlje (associra na novac). Balansira boje na sajtu.
   5. Plava: Strpljenje, mir, poverenje, stabilnost. Jedna od omiljenijih boja muškaraca. Asocira na profesionalnost, poverenje, čast. Zato najveće drutšvene mreže koriste plavu. 
   6. Ljubičasta: Snaga, plemenitost, bogatstvo. Asocira na mudrost, lojalnost, luksuz, misteriju. 
   7. Roze (pink): Romansa, , pasivnost, briga, mir, care, peace, naklonost.
   8. Braon (kafena): Opuštenost, samopouzdanje. Asocira na prizemljenost, izdržljivost, komfort, pouzdanost. 

Slike #

1. Tekst preko slike: Samo ako je slika tamna, a tekst light, ili obrnuto. 
2. Overlay preko slike. Obično se koristi crni overlay. 
3. Tekst preko slike: Možemo staviti tekst u neki kvadrat koji ima blago transparentnu pozadinu koja daje kontrast. 
4. Blurovanje pozadinskih slika
5. The floor fade: Slika je potamnjena (zacrnjena) na nekom delu/kraju, i tu se dodaje tekst. (efekat može da se radi i kroz ::after element sa senkom) – http://jsfiddle.net/gRzPF/409/

Ikonice #

1. Unapređuju estetiku i omogućavaju bolji UX ukoliko se koriste na pravi način
2. Koristimo ikonice da prižemo features/benefits/steps na sajtu. 
3. Možemo koristiti ikonice za akcije ili linkove. (ikonice trebaju biti prepoznatljive, i ikonicama trebamo dodavati labele).
4. Ikonice trebaju biti sporedni element na sekciji/stranici. 
5. Koristimo icon font/vector kad god možemo. 

Razmaci i layout #

1. Svaki dobar web dizajn koristi dosta praznog prostora (white space). Koristimo dosta praznog prostora. (između elemenata, između grupe elemenata, između sekcija, ali bez preterivanja)
2. Prazan prostor treba da razdvoji određene sekcije i definiše povezanost određenih elemenata. 
3. Definicija hijerarhije: 
   1. Potrebno je definisati šta korisnici trebaju gledati prvo
   2. Potrebno je izgraditi tok (flow) gde će se korisnici kretati i koju ćemo im poruku preneti
   3. Koristiti prazan prostor da unapredimo flow

Uvod u UX  #

1. UI je prezentacija proizvoda. Kako on izgleda i kako se ponaša.
2. UX je iskustvo korisnika sa tim proizvodom. 
3. UX spaja ciljeve korisnika sa ciljevima biznisa. 

Web dizajn: #

1. Koristiti druge web sajtove koji su među prvima u industriji kako bismo pokupili dobre premiere.
2. Prikupite dizajne koji vam se sviđaju. Pokušaj da razumeš sve na njima. Zašto izgledaju tako dobro? Šta ovi sajtovi imaju zajedničko? Kako su napravljeni koristeći HTML i CSS? 
3. Kradite kao umetnik. 

Optimizacija procenta konverzija #

1. Izgraditi poverenje sa svojim kupcima/posetiocima
2. Ponavljajte akcije koje želite da korisnici preduzmu
3. Privucite pažnju korisnika (popup)
4. Prikažite korisnicima benefit vašeg proizvoda
5. Ne tražite previše informacija, samo osnovne. 
6. Koristiti social proof. (testimonials, druge kompanije koje koriste naš proizvod…)
7. Koristiti hitnost (ponuda važi još 2 dana…, još 1 proizvod na stanju…)