Arhitektonski, ne dekorativan
Hairline mreže, kote i mono oznake umesto ukrasa. Bez glassmorphism-a, gradijenata i velikih radijusa.
UI/UX i web dizajn · predlog
Kumrić Plus
redizajn sajta
Katalog materijala, B2C prodavnica sa checkout-om, B2B portal za profesionalne kupce, usluge obrade i prezentacija enterijera - 39 template-a u jednom dizajn sistemu.
01Dizajn pravac
Tehnički list: preciznost crteža, toplina drveta.
Jedan sistem koji podjednako dobro nosi katalog od hiljadu artikala i editorial prezentaciju enterijera.
Materijal u prvom planu
Velike teksture dekora, detalji kantovanja i realne fotografije pogona - fotografije klijenta zamenjuju privremene.
Katalog ostaje brz
Filteri, pretraga po šifri i checkout rade bez suvišnih koraka; animacije ne usporavaju listu.
B2B je alat, ne kopija naloga
Poseban radni prostor: rabat, limit, brza porudžbina, liste po projektima i krojne liste.
Paleta
Off-white#F6F5F2papir
Charcoal#171A1Ctekst i tamne sekcije
Dark gray#34383Asekundarno
Warm wood#A57B55akcenat
Tipografija
Archivo
Variable · wdth 62–125 · naslovi 450–500, prošireno 112%
IBM Plex Mono - H1145 ST10 · 2800 × 2070 × 18
Šifre, mere, oznake sekcija i tabelarni brojevi · lokalno hostovano
02Template-i
Svih 39 ekrana, po grupama.
Svaki template je klikabilan HTML - filteri, pretraga, korpa i forme rade kao u finalnoj implementaciji.
01Prodaja13
- PočetnaHero sa hotspotovima materijala, globalna pretraga, dekori, usluge, proces, B2B blok, krojna lista.index.html
- Materijali - landingUlaz u katalog: grupe ploča, proizvođači, alati (dekor, kant po šifri).materijali.html
- Kategorija / listingListing sa svim filterima iz brifa, sortiranjem, skeletonom i SEO blokom.katalog.html
- Okov - landing + listingLanding sa kategorijama okova + listing sa filterima prilagođenim okovu.okov.html
- Kant trake - landing + listingTraka po šifri ploče, presek debljina i listing.kant-trake.html
- Single proizvodGalerija sa zumom, varijante, obrada uz porudžbinu, odgovarajuće kant trake, dokumentacija.proizvod.html
- Search autocompleteAutocomplete sa sličicom, šifrom, proizvođačem i cenom.index.html#pretraga
- Rezultati pretrageRezultati sa tabovima Sve / Proizvodi / Kategorije / Saveti.pretraga.html
- Pretraga - nema rezultataStanje bez rezultata sa predlozima i resetom.pretraga-nema-rezultata.html
- KorpaIzmena količina, uparena kant traka, sticky rezime, B2B cene.korpa.html
- CheckoutSedam koraka u jednoj koloni, guest checkout, sticky pregled porudžbine.checkout.html
- Thank youPotvrda sa brojem porudžbine i sledećim koracima.porudzbina-uspesna.html
- Brend stranicaSEO ulazna stranica proizvođača sa filterabilnim listingom.brend.html
02Nalog i B2B11
- Prijava (B2C / B2B)Prijava kupca i B2B kupca + zaboravljena lozinka.prijava.html
- My Account B2CB2C nalog: pregled, porudžbine, favoriti, adrese, lični podaci.nalog.html
- B2B landingLanding za profesionalce: prednosti, rabat, tok odobrenja.b2b.html
- B2B registracijaZahtev sa podacima firme, PIB/MB validacijom i dokumentima.b2b-registracija.html
- B2B status zahtevaStanja zahteva: u proveri, odobren, potrebna dopuna.b2b-status.html
- B2B dashboardPregled naloga: limit, rabat, porudžbine, liste, krojne liste.b2b-dashboard.html
- B2B quick orderUnos po šifri, uvoz iz Excela, sve u korpu.b2b-brza-porudzbina.html
- B2B porudžbineIstorija sa statusima, dokumentima i ponavljanjem.b2b-porudzbine.html
- B2B single porudžbinaJedna porudžbina: tok statusa, stavke, dokumenti.b2b-porudzbina.html
- B2B sačuvane listeListe po projektima → korpa ili upit.b2b-liste.html
- B2B krojne listePoslate krojne liste, ponude i statusi.b2b-krojne-liste.html
03Usluge i enterijeri6
- Krojna lista / zahtevNalog za obradu: fajl ili ručni unos, usluge, povezivanje sa korpom.krojna-lista.html
- Usluge - landingSve usluge obrade sa rokovima i logikom cene.usluge.html
- Single uslugaSingle usluga (kantovanje) kao SEO ulazna stranica.usluga.html
- Enterijeri - landingEditorial prezentacija enterijera po meri.enterijeri.html
- Projekti / referenceReference sa filterima po tipu prostora.projekti.html
- Single projekatProjekat sa pričom, galerijom i korišćenim materijalima.projekat.html
04Sadržaj5
- O namaPriča, pogon, mašine, tim i partneri.o-nama.html
- KontaktOdvojeni kontakti po odeljenjima, mapa i radno vreme.kontakt.html
- Blog listingEditorial listing članaka po kategorijama.saveti.html
- Blog singleČlanak sa povezanim proizvodima u tekstu.clanak.html
- Pravne stranicePravne stranice sa sadržajem sa strane.uslovi.html
05Sistem5
- UI kit / komponenteSve komponente, tokeni i stanja dizajn sistema.ui-kit.html
- System / empty / error stanjaLoading, prazna stanja, greške i potvrde.stanja.html
- 404Greška 404 sa karakterom brenda i pretragom.404.html
- 500 / održavanjeOdržavanje / 500 sa procenom povratka.500.html
- Pregled svih template-aOva stranica.pregled.html
03Korisnički tokovi
Pet tokova koje dizajn mora da drži.
B2C kupovina
Profesionalni kupac koji zna šifru
Krojna lista
Pronalaženje dekora
Enterijer
04Sitemap
Struktura sajta
Prema predlogu iz brifa (§31). URL struktura je logična i skalabilna, breadcrumbs su obavezni na svim dubinama.
- POČETNAindex
- MATERIJALImaterijalikatalogokovkant-trake
- BRENDOVIbrend
- USLUGEuslugeuslugakrojna-lista
- ENTERIJERIenterijeriprojektiprojekat
- B2Bb2bb2b-registracijab2b-statusb2b-dashboardb2b-brza-porudzbinab2b-listeb2b-porudzbineb2b-krojne-liste
- SHOPpretragakatalogproizvodkorpacheckoutporudzbina-uspesnanalog
- INSPIRACIJA I SAVETIsaveticlanak
- O NAMA · KONTAKT · PRAVNEo-namakontaktuslovi
Sledeći korak
Šta je potrebno pre implementacije.
- Originalni logotip i eventualni brand fajlprivremeni wordmark je u prototipu
- Fotografije realizovanih enterijera, pogona i dekorastock je označen kao privremen
- Potvrda brojki o firmi, adrese i kontakatatrenutno stoje kao placeholder
- Spisak usluga, kategorija i realna baza artikalakatalog koristi demo podatke
- Metode plaćanja, dostave i pravila rabatacheckout je modularno pripremljen
Prototip
Sve stranice su statički HTML sa jednim dizajn sistemom (assets/css/kumric.css) - spremne za prenos u WordPress/WooCommerce temu.
Otvorite UI kit Sistemska stanja