Web stranica

Ovdje možete pronaći smjernice koje predstavljaju osnovu za izradu funkcionalne web stranice.
Dizajn mora sadržavati nekoliko glavnih komponenta i cjelina kao što su:

1. Styleguide

Uključuje osnovne stvari za izradu kao što su

• Logotip
• Popis korištenih boja
• Fontovi (i njihove varijante)
• Tipografija (naslov, podnaslov, tekst,…)
• Gumbi (i njihove varijante)
• WYSIWYG elementi (h2, h3, h4, h5, h6, p, a, img, ul, blockquote,…)
• Gutenberg blokovi (u styleguideu prikazat svaki blok!)
• Kartice (opcionalno/u dogovoru s frontendašem)

2. Naslovnica

Dizajn za desktop (1024px +) i mobilnu (320px) varijantu

3. Inner page

Generička stranica. Opširnije

4. Inner page listing

Stranica za prikaz popisa vijesti, kategorija ili nešto slično. Opširnije

5. Single post

Stranica za prikaz pojedinačne novosti, članka, proizvoda,… Opširnije

6. Contact

Stranica za prikaz podataka i obrazac za kontakt.

7. 404

Stranica za prikaz informacija kada tražena stranica nije pronađena ili ista ne postoji. Opširnije

8. Sitemap

Prikaz linkova (stranica) koje sadrži web-stranica. Također služi za organizaciju koda, kreiranje menija i slično.

---

Opcionalni dizajnovi

Ponekad određeni projekti zahtijevaju više predložaka (dizajnova) s obzirom na njihovu kompleksnost. Ukoliko je to slučaj, također ćete morati izraditi (po potrebi) sljedeće predloške:

Search (tražilica)

• Prikaz rezultata traženog pojma.
• Prikaz informacije u slučaju da traženi pojam nije pronađen.
• Opširnije

Korisničke stranice

• Prijava – stranica sa obrascem za prijavu
• Registracija – stranica sa obrascem za registraciju
• Profil – stranica sa prikazom korisničkih informacija. Osim pregleda, potrebno je predvidjeti i mogućnost uređivanja istih.
• Zaboravljena lozinka – stranica s obrascem za slanje postojeće (zaboravljene) lozinke
• Resetiranje lozinke – stranica s obrascem za resetiranje lozinke

Web shop (WooCommerce)

• Popis proizvoda (archive-product.php) – prikazuje “n” proizvoda u obliku liste
• Popis kategorija proizvoda (taxonomy-product_cat.php) – prikazuje “n” kategorija proizvoda u obliku liste. Primjer URL-a: http://webshop.com/product-category/poklon/
• Košarica + varijante (prazna, puna, izmjena,…)
• Naplata (Checkout)
• Notifikacije (succes, error, info) – prikaz poruke na određeni događaj

---

Breakpoints

U svim predlošcima, kodiranje front-enda se radi na način da koristimo tzv. prijelomne točke (breakpoints). Kod se piše po principu mobile-first strategije, te su kao osnovne definirane sljedeće točke:

• mobile: 479px;
• mobile landscape: 480px;
• tablet: 768px;
• desktop: 980px;
• desktop large: 1200px;
• desktop extra-large: 1600px;

NAPOMENA: Prije crtanja dizajna, prijelomne točke (i njihov broj) se definiraju dogovorom između dizajnera i frontendaša.