Web dizajn i Wordpress

Naučna otkrića, edukacija, školstvo, univerziteti, fakulteti...
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#1 Web dizajn i Wordpress

Post by kiligonzales »

Na ovoj temi cu da se malo raspisem o web dizajnu i wordpressu i onome sto je elementarno znati da bi se profilirali u tome smjeru, ali isto tako
bavicemo se i srodnim smjerovima gdje bi vas rad na webu mogao odvesti vremenom.

Zamolio bih sve koji ne zele da doprinesu ucenju, da nam ne smetaju suvisnim raspravama.
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#2 Re: Web dizajn i Wordpress

Post by kiligonzales »

1. lekcija - Ponešto o internetu

Internet je prije svega medij koji je sveprisutan u nasim zivotima i najveca je zivuca enciklopedija savremenog covjecanstva.

Ujutro kada uzmete vas telefon u ruke, prvo upalite wifi bezicnu konekciju, tada vas telefon putem internet protokola stupa u kontakt sa providerom ili pruzateljem internet usluga. Potom cete otvoriti svoj browser ili pretrazivac, poci na google trazilicu i unjeti neki tekst. Tada dobijate rezultate pretrage ili liste web stranica kojim pristupanje klikanjem na neki od prikazanih rezultata pojedinacno. Tada pristupate klikom na link vezu odredjene web stranice koji vas vodi na njenu adresu ili url web stranice. Taj url stranice je jedinstven i naziva se jos domenom. Domenu smatrajte putokazom prema mjestu gdje je smjestena neka web stranica, sto nazivamo jos hostingom, a hosting je dio memorije tj. dodjeljeni prostor na nekome serveru. Server je racunar koji je umrezen u jedan kompleksan informaticki sistem. Zvuci komplikovano? Zvuci, ali brzo cete o tome nauciti vise.

Neke od pojmova koje sam spomenuo ste vjerovatno i sami prepoznali.
Više o internetu, njegovoj historiji i pojmovima na internetu saznajte na ova dva linka:
https://sh.wikipedia.org/wiki/Internet
https://tehnoklik.medium.ba/sta-znace-i ... efinicije/

Koliko je internet prisutan, vidimo u svijetu oko nas, u nasim je kucama, kaficima, sopinzima i drugim mjestima koje posjecujemo. Za vas je to ulaznica za profil na socijalnim mrezama ili do ovoga foruma, ali za nekoga on je esencijalni alat s kojim zivi i prihodi za zivot.
Last edited by kiligonzales on 08/05/2021 15:26, edited 2 times in total.
User avatar
Hame_
Posts: 5424
Joined: 31/08/2007 21:42
Location: Soba, Srebrnik, Županija tuzlanska, HiB, Evropa, Svjeverna strana Zemlje, Mjesec, Sunce, odosmo u PM
Contact:

#3 Re: Web dizajn i Wordpress

Post by Hame_ »

Čuj kinga "Web dizajn i Wordpress" + piši Interet + ne znaš utipkati šđžčć kad već predaješ nešto + zakasnio si 20 godina :-)
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#4 Re: Web dizajn i Wordpress

Post by kiligonzales »

2. Sta su to web stranice i u kojim jezicima ih razvijamo?

Web stranice su internet stranice ispisane nekim serverskim programskim jezikom koji generisu HTML/CSS koji sadrze tekst, sliku, video, kojim pristupamo putem browsera ili pretrazivaca i smjestene su na nekom od servera uvezanih u kompleksniji mrezni sistem racunara.

Na svome pocetku web stranice su spajanjem dva jezika kodiranja, jedan je HTML koji je strukturalni jezik svake web stranice ili jezik markiranja njenog sadrzaja, drugi jezik je jezik stila stranice kojeg nazivamo css. Zasto ih nisam nazvao programskim jezicima niti skriptnim? Zato sto u sebi ne sadrze dinamiku niti mogucnost da se njima rjesava odredjeni problem. Programski jezici za razliku od jezika kodiranja imaju svoju uvjetovanu dinamiku, logiku, mogucnost opisivanja i rjesavanje izvjesnih problema, kao i mogucnost izvrsavanja koda i generisanje novog.

HTML ce vam biti dovoljan da napravite najobicniju web stranicu, a CSS da je uljepsate. Sve to cini staticki dizajn jedne stranice. Ta stranica bi u vremenu iza nas bila hit. Takvu web stranicu nazivamo staticnom web stranicom. U danasnjoj eri ona bi bila nefunkcionalnom jer se razvoj web stranica unaprijedio. Kod takvih stranica svaku stranicu bi morali posebno da izradjujete i pri izmjenama uredjujete, ukoliko biste htijeli da kreirate novi sadrzaj ili da je manipulisete. Na njima je onemogucena svaka interakcija izmedju njenih korisnika.

Savremene web stranice su dinamicke web stranice, najcesce ispisane u PHP i ASP serverskim programskim jezicima, koji komuniciraju sa bazom koja je ispisana u SQL jeziku, sve to je smjesteno na serveru sa okruzenjem u kome je moguce da se izvrsi pomenuti jezik. Dinamicke web stranice su napisane tako da optimuzuju svu robusnost koju bi imali kada bi iskljucivo sajtove pisali u html i css. Sistemi koji su razvijeni na ovaj nacin kako bi lakse upravljali sadrzajem nazivaju se CMS sistemima, jedan od njih je i wordpress kojeg cemo se dotaci kasnije. Oni su napisani u nekom od spomenutih programskih jezika tako da generisu html i css dokumente i sadrzaj iz baze sajta.

Postoje mnogi jezici u kojima mozemo programirati web stranice pored php i asp, tu su jos python,java, ruby, perl i td.

Pored ovih jezika postoji i jedan jezik koji se izvrsava na nivou browsera ili pretrazivaca, poznatiji kao javascript, iako mu je prvenstven zadatak bio da dinamiku stilu jedne stranice i ucini je interaktivnom na nivou browsera, danas je taj jezik dozivio preobrazbu i sa mnogo aktivnih biblioteka postao neizostavan jezik u razvoju web stranica.

Ova kratka prezentacija ce vam pokazati razlike izmedju staticnih i dinamickih web stranica, te su ispod linkovi o jezicima posebno
https://slideplayer.rs/slide/17311968/
https://sr.wikipedia.org/wiki/HTML
https://sh.wikipedia.org/wiki/CSS
https://sr.wikipedia.org/wiki/PHP
https://sh.wikipedia.org/wiki/SQL
Last edited by kiligonzales on 08/05/2021 15:28, edited 1 time in total.
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#5 Re: Web dizajn i Wordpress

Post by kiligonzales »

Hame_ wrote: 28/04/2021 16:25 Čuj kinga "Web dizajn i Wordpress" + piši Interet + ne znaš utipkati šđžčć kad već predaješ nešto + zakasnio si 20 godina :-)
Pa nemam pripremljen sadrzaj, vec pisem iz glave. Posto si ti sveznalica, ti uradi drugacije. Ko hoce nek cita, ako ti se ne svidja, zaobidji, nemam se namjeru raspravljati s tobom.
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#6 Re: Web dizajn i Wordpress

Post by kiligonzales »

3. Web stranice - iz cega se sastoje

Rekli smo da web stranice dijelimo na staticke i dinamicke web stranice i naveli razlike.

Image

Nas zanimaju dinamicke web stranice. One se sastoje iz prezentacijskog dijela kojeg nazivamo frontendom i pozadinskog ili administracijskog dijela kojeg nazivamo backendom, pored toga imamo i bazu i serversko okruzenje u kome se jezici stranice izvrsavaju, kao i baze.

Prezentacijski dio podrazumijeva onaj vidljivi dio stranice kada pristupimo nekoj web adresi i koji komunicira sa korisnicima. Pozadinski dio cini onaj dio koji je skriven od korisnika i njime developeri ili programeri koji su razvili i odrzavaju stranicu i administratori koji upravljaju i manipulisu njenim sadrzajem.

Iz svega navedenog do sada, moze izvesti i podijela poslova koja je prisutna u IT kompanijama pri razvoju web stranica, prema poslu koju obavljaju pojedinci, pa tako imate podjelu na web dizajnere (sada UI/UX dizajnere), full stack developere, frontend developere, backend developere.

Web dizajneri su ti koji dizajniraju izgled stranice, odlicno poznaju njenu strukturu, te osnove html, css i js u koji ce poslje svoj dizajn implementirati. Oni su preteca frontend developera.

Frontend developeri su programeri koji imaju posao da dizajn implementiraju sto efikasnije i ucine ga sto jednostavnijim za koristenje korisnicima, ali isto tako dovoljno interaktivnim i zanimljivim da privuku paznju korisnika. Oni brinu da se sajt ili aplikacija jednako kvalitetno prikazuje na svim mogucim uredjajima od racunara, telefona, do tableta. Nemaju kontakt sa pozadinskim programskim kodom i njihova uloga je da sajt ucine fluidnim i dinamicnim. Oni poznaju html, css i javascript ili neki od frameworka, baziranih na nekim od frameworka. Framework je mozemo nazvati konceptualnim okruzenjem okvirom koji nam sluzi za sto laksi razvoj isprogramiranim u nekom od programskih jezika.

Backend developeri su programeri koji se bave strukturom sajta, sigurnoscu, bazom podataka i upravljanjem sadrzaja i administratori upravljaju sajtom ali nuzno ne moraju znati ono sto znaju backend developeri i ne moraju biti programeri, vec prema uputstvu koji im sprave backendasi, unose i manipulisu sadrzajem sajta. Oni primjerice poznaju html, css, js, php i mysql ili neke druge programske jezike.

Fullstack developeri su programeri koji su upuceni u sve procese nastanka sajta, tako da mogu sami osmisliti dizajn, implementirati ga u prezentacijski dio, te razviti kompletnu pozadinsku strukturu stranice koja bi upravljala tim dijelom sajta i njegovim sadrzajem. Oni po pravilu su sposobni odraditi posao svih gore navedenih.

UI/UX dizajneri su dizajneri su grubo receno, profinjeniji web ili graficki dizajneri, osobe koje brinu o vizuelnom dijelu svakog sajta ili mobilne aplikacije, kreiraju atmosferu na web sajtu, te obezbjeduju izgled tematski prikladan, atraktivan i korisnicki prijateljski nastrojen, sto podrazumjeva da mora imati jasnu strukturu i funkcionalnost.
Last edited by kiligonzales on 08/05/2021 15:29, edited 1 time in total.
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#7 Re: Web dizajn i Wordpress

Post by kiligonzales »

4. Odakle krenuti sa ucenjem?

Sigurno ste se zapitali odakle da pocnete put u namjeri da kreirate svoju funkcionalnu web stranicu. Htijeli ste uciti, a niste imali pitati koga ili niste znali, tu sam da vam olaksam put i podjelim svoje (ne)iskustvo. Zasto kazem (ne)iskustvo? Zato sto je ovo proces koji trazi da mu se posvetite, svijet razvoja web stranica i aplikacija uvijek ima da ponudi nesto novo, te generira nove procese i saznanja, te najbolje prakse kako i na koji nacin razvijati web stranice.

Posveticu se onome sto najbolje znam i sto se naucite kroz rad. Provescu vas kroz ono sto svaki web dizajner mora da zna procese, alate, najbolje prakse, trendove u industriji, te kroz wordpress cms, najpoznatiji i najrasireniji CMS ili cjelokupan sistem za upravljanje sadrzajem, koji ce nam posluziti da napravimo zajedno vasu prvu dinamicku web stranicu.
Last edited by kiligonzales on 08/05/2021 15:30, edited 1 time in total.
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#8 Re: Web dizajn i Wordpress

Post by kiligonzales »

5. Koraci u izradi web stranica

Da bi krenuli u izradu web stranice, moramo krenuti od ideje klijenta ili nas samih da napravimo web stranicu. Ono sto moramo uraditi jeste sljedece:
- definisati nasu ideju i projekat,
- odrediti granice nasim mogucnostima i samog projekta,
- istraziti konkurenciju i utvrditi model razvoja,
- napraviti wireframe (skicu) web stranice ( mozemo je nacrtati na papiru ili u nekom od alata),
- kreirati vizuelni dizajn stranice ili prototip,
- utvrditi u cemu cemo je razvijati tj. kojem programskom jeziku, da li cemo kod stranice pisati sami razvijajuci njenu strukturu i funkcionalnost ili cemo se posluziti nekim od CMS i time sebi olaksati razvoj dinamicke web stranice,
- kada razvijemo web stranicu, istu treba istestirati i isporuciti klijentu.


Svaki od ovih koraka cemo detaljnije objasniti u nastavku.
Last edited by kiligonzales on 08/05/2021 15:31, edited 2 times in total.
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#9 Re: Web dizajn i Wordpress

Post by kiligonzales »

6. Definicija i opseg projekta

Advokat ste i zelite svoje znanje i posao predstaviti drugima, zelite da napravite web stranicu.

Prvo sto cete uraditi odgovoriti sebi na sljedeca pitanja:

-Koje informacije zelide podijeliti sa drugima?
-Koje usluge zelite promovirati?
-Koje usluge zelite i nezelite prodavati?

- Sta zelite postici pomocu web stranice?

- Koja je vasa idealna grupa koja ce posjecivati vasu stranicu i pomoci da ostvarite svoje ciljeve?
- Koja je njihova dob, spol, interesi?
- Kakvi su sadrzaji/usluge koje najradije potrazuju?

Smatrajte ovaj pocetak prikupljanjem podataka koji su vam nuzni da bi postigli zeljene ciljeve.


Opseg projekta je nesto sto je najteze odrediti u web dizajnu. Na pocetku mozete imati jedan cilj, a sa saznavanjima se on mjenja i prosiruje tokom procesa dizajna. S toga morate realno sagledati nase mogucnosti i postaviti granice sta je to sto bas zelimo i koliko bi takvo sto moglo da kosta.
Last edited by kiligonzales on 08/05/2021 15:31, edited 1 time in total.
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#10 Re: Web dizajn i Wordpress

Post by kiligonzales »

7. Istrazite konkurenciju i utvrdite model

Posto ste advokat, na googlu cete proguglati sve advokatske kancelarije u vasem gradu. Napraviti mini istrazivanje. Ukoliko vam se ne svidja vidjeno, mozete pogledati kako to rade u drugim gradovima ili drzavama. U tome procesu mozda cete vidjeti na vise stranica nesto sto ce vam se dopasti i nastojacete implementirati na svojoj stranici ili cete slijediti primjer samo jedne stranice uzimajuci nju za model koji cete slijediti. To je do vas sta cete da uradite. Samo zapamtite da u tome ne trebate pretjerivati i uklopiti u savrsen web sajt, sa otmjenim izgledom, kvalitetnim sadrzajem i sto jednostavnijom funkcionalnoscu.
Last edited by kiligonzales on 08/05/2021 15:32, edited 1 time in total.
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#11 Re: Web dizajn i Wordpress

Post by kiligonzales »

8. Kako napraviti prototip web stranice -1 dio

Da biste naucili da radite prototipe web stranica morate saznati nesto o njenoj strukturi i sta je cini. Strukturu svake web stranice cine:
- header,
- navigaciju ili meni,
- footer,
- aside ili sidebar,
- conteiner u kome je smjesten section,
- article.


Kako to izgleda na slici?

Image

Header ili zaglavlje stranice se nalazi u vrhu stranice i mozemo je smatrati glavom ili licem sajta, to je uz footer najcesce dio na stranici koji ne trpi izmjene i statican je. On ostvaruje prvi kontakt sa korisnicima sajta i ostavlja prvi dojam. U njemu najcesce imamo sliku loga, navigacijski meni, polje pretrage i linkov ka socijalnim mrezama.

Image

Navijacijski meni je skup linkova koji nam olaksava pristup razlicitim dijelovima stranice te povratak na pocetnu stranu stranice i oslikava dio arhitekture web stranice i njenog sajt mapa.

Footer ili podnozje stranice je dio sajta koji se nalazi na dnu stranice, mozemo ga i nazvati cvrstim tlom naseg sajta i u njega najscesce stavljamo informacije koje ce koristiti nasim korisnicima i po odlasku sa stranice, stavljajuci tu informacije o vlasniku sajta, krace navigacijske menije sa bitnim linkovima na sajtu, linkove socijalnih mreza.

Image

Aside ili sidebar cine jednu od dvije bocne strane, u kojima najcesce pozicioniramo linkove kategorija sajta, kratke tekstualne opise, slikovne i video opise.

Image

Conteiner ili section je dio sajta u kome cemo smjestiti sadrzaj stranice, tekstove, slike, video sadrzaj, organizovan grupno ili pojedinacno u jednu izgledom lijepu i funkcionalnu sredinu.

Image

Article kako sama rijec kaze podrazumjeva dinamicki dio sajta koji ce se mjenjati primjerice clanke.
Last edited by kiligonzales on 08/05/2021 15:33, edited 1 time in total.
User avatar
Hame_
Posts: 5424
Joined: 31/08/2007 21:42
Location: Soba, Srebrnik, Županija tuzlanska, HiB, Evropa, Svjeverna strana Zemlje, Mjesec, Sunce, odosmo u PM
Contact:

#12 Re: Web dizajn i Wordpress

Post by Hame_ »

Kreativnost dugoročno će ostaviti traga, ovo iznad je kratkoročno krampanje.

Pregledati šta se novo servira i samostalno istražiti šta se može dodatno ponuditi - imati dara, volje i hrabrosti oprostiti se od normalnog života - zasukat rukave i početi nešto novo (nadogradnja). Naravno i vremenom u svemu tome upoznati saradnike entuzijaste i posložiti šta je ko i ko šta ima talenta i znanja.

Inače ide ovo single učenje "heder vs. futer", gotovi templejti i klikovi da neke pare legnu.
Last edited by Hame_ on 01/05/2021 09:49, edited 1 time in total.
User avatar
Casual's
Posts: 5713
Joined: 19/01/2012 00:08
Location: 44°12′N 17°56′E / 44.2°N 17.933°

#13 Re: Web dizajn i Wordpress

Post by Casual's »

Tačno sam znao da je IT Akademija thread. Najveće sranje koje postoji, i porez na budale. Sam sam nasjeo na njihov marketing.
User avatar
Hame_
Posts: 5424
Joined: 31/08/2007 21:42
Location: Soba, Srebrnik, Županija tuzlanska, HiB, Evropa, Svjeverna strana Zemlje, Mjesec, Sunce, odosmo u PM
Contact:

#14 Re: Web dizajn i Wordpress

Post by Hame_ »

kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#15 Re: Web dizajn i Wordpress

Post by kiligonzales »

Hame_ wrote: 29/04/2021 23:43 Kreativnost dugoročno će ostaviti traga, ovo iznad je kratkoročno krampanje.

Pregledati šta se novo servira i samostalno istražiti šta se može dodatno ponuditi - imati dara, volje i hrabrosti oprostiti se od normalnog života - zasukat rukave i početi nešto novo (nadogradnja). Naravno i vremenom u svemu tome upoznati saradnike entuzijaste i posložiti šta je ko i ko šta ima talenta i znanja.

Inače ide ovo single učenje "heder vs. futer", gotovi templejti i klikovi da neke pare legnu.
Kreativnost bez elementarnog znanja je samo balon. Ne mogu se uciti dizajnu, a ne znati elemente stranice. Jos gore je kad se uhvate WP, da bi izradjivali web stranice, a ne znaju sta je header, futer, navigacija, sidebar. Ono svi bi u izradu web stranica i aplikacija, a ne znaju od 0 napisati izrezati jedan psd file i integrirati ga u html/css.

Za mnoge je WP podcjenjen iako se danas glavnina internet stranica vrti na njegovom CMS. Bave se njime, ali ne znaju napraviti osnovnu wordpress temu ili skinuti kakvu blank temu poput Underscores i od nje napraviti vlastitu temu prema svome dizajnu jer ne znaju html ni css, a kamoli php, a tek napisati neku funkciju. Mogu ljude uciti odmah najsavremenijim alatima builderima i temama koje su hit trenutno, da im nista od toga ne treba, ali koja je svrha skociti na njih, a ne znati sta je u WP index.php ili function.php. , sta je sidebar u kome se nalazi neki widget dodatak i pored toga nauciti raditi u Elementoru ili WP Bakery bilderu, a imati rupe u znanju i negdje unutar teme kroz editor ubaciti dio koda jer im free verzija Elementora nece dati da odredjuju stil ID ili davati mogucnost promjene headera ili footera neke teme.

Bezveze spamas temu. WP je itekako koristan alat svakome developeru i nema se potrebe danas iznova praviti sopstveni CMS, kada je u WP bukvalno inkorporirano mnogo sto sta i iza njega stoji na desetine miliona ljudi koji aktivno rade na njegovim poboljsanjima, na hiljade i hiljade tema, plugina, oko 50 hiljada ih je besplatno.

Niko ne kaze da je lose znati programirati sam vlastiti cms, znati sta je mvc model, kako napisati modul sam, kako napisati crud u bilo kojem programskom jeziku, manipulisati pazom, ali treba razumjeti da svakome to ne treba i da nekome i poznavanje WP pravi novac.
User avatar
Hame_
Posts: 5424
Joined: 31/08/2007 21:42
Location: Soba, Srebrnik, Županija tuzlanska, HiB, Evropa, Svjeverna strana Zemlje, Mjesec, Sunce, odosmo u PM
Contact:

#16 Re: Web dizajn i Wordpress

Post by Hame_ »

Ma znam drug, ali Wordpress i postoji da ne bi postojale ovakve teme. Trebao si staviti "Vlastiti web dizajn vs. Wordpress".

Kome nije do gotovih tuđih rješenja, naći će svoj put do uspjeha.


*Možda me opet ne razumiješ - Svako može danas naučiti svirati gitaru preko YouTube škole, ali niko tamburanjem tuđe muzike neće napraviti nešto svoje i ostaviti traga.
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#17 Re: Web dizajn i Wordpress

Post by kiligonzales »

Hame_ wrote: 02/05/2021 19:13 Ma znam drug, ali Wordpress i postoji da ne bi postojale ovakve teme. Trebao si staviti "Vlastiti web dizajn vs. Wordpress".

Kome nije do gotovih tuđih rješenja, naći će svoj put do uspjeha.


*Možda me opet ne razumiješ - Svako može danas naučiti svirati gitaru preko YouTube škole, ali niko tamburanjem tuđe muzike neće napraviti nešto svoje i ostaviti traga.
Slazem se sa tobom, sto se tice ostavljanja traga, WP sigurno nije put ka tome, osim ako covjek ne izmisli nesto revolucionarno u njemu, poput neki od bildera ili tema zasnovanih na nekom od php, js ili css frameworka koji su sada hit.

Meni nije cilj da potaknem raspravu, vec eto da nekoga nesto konkretno naucim vremenom zato dadoh taj naziv. Nama koji znamo malo vise, znamo i kako skratiti proces i u ucenju i u radu, isto tako koristiti gotova rjesenja i raditi na svome. Udrobicu ovdje svega, mozda cu i zbuniti nekoga svime sto napisem, ali cilj je da se neko potakne da krene da uci nesto sto nije nesvladivo i eto dobije kakve smjernice ka tome.
User avatar
Hame_
Posts: 5424
Joined: 31/08/2007 21:42
Location: Soba, Srebrnik, Županija tuzlanska, HiB, Evropa, Svjeverna strana Zemlje, Mjesec, Sunce, odosmo u PM
Contact:

#18 Re: Web dizajn i Wordpress

Post by Hame_ »

kiligonzales wrote: 02/05/2021 19:28Udrobicu ovdje svega, mozda cu i zbuniti nekoga svime sto napisem, ali cilj je da se neko potakne da krene da uci nesto sto nije nesvladivo i eto dobije kakve smjernice ka tome.
:thumbup:
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#19 Re: Web dizajn i Wordpress

Post by kiligonzales »

9. Kako napraviti prototip web stranice -2 dio

Naucili ste sta cine elemente web stranice u prethodnom postu "Kako napraviti prototip web stranice" , sada cemo vas upoznati sa jednim kreativnim alatom koji ce vam pomoci da osmislite svoj prvi wireframe pa potom prototip web stranice.

Wireframe izgleda ovako:

na papiru
Image
na racunaru
Image

Prototip je vec stepen vise u razvoju dizajna, te je prvi korak ka dizajniranju finalnog dizajna neke web stranice ili aplikacije i izgleda ovako

Image

Mnogo je alata koji mozete koristiti za ovo, nasa preporuka je da pocnete koristiti neki od ovih:
https://app.moqups.com/
https://www.figma.com/

Postoje jos uxpin, axure, proto.io, invisionapp, framer i drugi.

Ukoliko poznajete osnove photoshopa, onda ovaj proces sebi mozete prekratiti skidanjem nekog od wireframe i prototipa web stranice, html/css template sa stranica ciji su resursi besplatni poput sljedecih:

https://freebiesbug.com/

Posto zivimo u BiH, pa i na Balkanu, mnogi ovi koraci su vam bitni samo da bi ih znali jer sa ozbiljnim klijentima cete ih morati proci, sa neozbiljnim mnoge od ovih koraka cete morati preskociti po sistemu koliko para toliko muzike.


Photoshop je stari graficki alat, ali uvijek upotrebljiv za rastersku grafiku, staro je sredstvo za dizajniranje web stranica, pa cete vremenom morati potraziti adobe xd koji je namjenski razvijen da bi se brze i bolje razvijao dizajn ili Sketch koji je njegov pandan.

Nasa preporuka je app.moqups.com

Na samome sajtu cete naci tutorijale koji ce vam biti od pomoci. Naravno i drugi spomenuti online alati su odlicni poput Framera ili Figme, ali za pocetak ovo ce vam biti dovoljno dobar alat dok se ne priucite osnovama web dizajna i barem koristenjem nekog od grafickih alata poput Photoshopa. Mozete skinuti Photoshop cs2 posve free i koristiti ga ili skinuti neku od naprednijih verzija koje su krekovane.
Last edited by kiligonzales on 08/05/2021 15:35, edited 1 time in total.
User avatar
vaučer
Posts: 8902
Joined: 04/08/2009 15:22
Location: Living in the past

#20 Re: Web dizajn i Wordpress

Post by vaučer »

Photoshop koristiti za web dizajn danas je suvišno. Ps je kao alat prepuhan, pun funkcija koje ne služe web dizajnu i puno je lakše koristiti alate koji su dizajnirani za to.

Tri glavna su Figma, Sketch i Xd. Svi obavljaju jednako dobro osnovne funkcije - određivanje osnovnog grida, stvaranje tipografskih skala, kreiranje elemenata koje možete iznova koristiti i elemenata koji će se presložiti pri izmjeni širine objekta.

Xd je dobar ako već imate pretplatu na Adobe, Sketch je mislim oko 100Usd godišnje (ostaje ti na korištenje zadnji update koji si imao kad istekne pretplata) a Figma je besplatan i naplaćuju članove tima koji mogu raditi zajedno. Trenutno radim u Figmi i kao potpuno cloud-based aplikacija iz koji ujedno mozeš djeliti clickable prototipove na uvid klijentima - mislim da je najbolje na tržištu za web dizajn.

U osnovi svaki dizajn bi trebao imati minimalno desktop, tablet i mobilnu verziju te riješenu tipografiju, boje i osnovne elemente stranice te njihovo ponašanje u raznim rezolucijama.
belfy
Posts: 7563
Joined: 06/08/2007 09:00

#21 Re: Web dizajn i Wordpress

Post by belfy »

uhvati me sjeta... ja sam nesto prije 15 godina tako naletio na joomla -u... igrao se sa php-om i javasciptom... napravio finih par sajtova za bagatelu i kada sam vidio da u tome kod nas nema para odustao. isto kao i od Flasha koji je u to doba bio jako popularan...
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#22 Re: Web dizajn i Wordpress

Post by kiligonzales »

vaučer wrote: 02/05/2021 21:06 Photoshop koristiti za web dizajn danas je suvišno. Ps je kao alat prepuhan, pun funkcija koje ne služe web dizajnu i puno je lakše koristiti alate koji su dizajnirani za to.

Tri glavna su Figma, Sketch i Xd. Svi obavljaju jednako dobro osnovne funkcije - određivanje osnovnog grida, stvaranje tipografskih skala, kreiranje elemenata koje možete iznova koristiti i elemenata koji će se presložiti pri izmjeni širine objekta.

Xd je dobar ako već imate pretplatu na Adobe, Sketch je mislim oko 100Usd godišnje (ostaje ti na korištenje zadnji update koji si imao kad istekne pretplata) a Figma je besplatan i naplaćuju članove tima koji mogu raditi zajedno. Trenutno radim u Figmi i kao potpuno cloud-based aplikacija iz koji ujedno mozeš djeliti clickable prototipove na uvid klijentima - mislim da je najbolje na tržištu za web dizajn.

U osnovi svaki dizajn bi trebao imati minimalno desktop, tablet i mobilnu verziju te riješenu tipografiju, boje i osnovne elemente stranice te njihovo ponašanje u raznim rezolucijama.
Sve ok, samo ljude se treba uciti korak po korak. Ne moze se preko noci nauciti nista od ovoga. app.moqups.com ce im biti dovoljan da naprave prvi wireframe i neki mockup dizajna stranice.
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#23 Re: Web dizajn i Wordpress

Post by kiligonzales »

belfy wrote: 02/05/2021 22:27 uhvati me sjeta... ja sam nesto prije 15 godina tako naletio na joomla -u... igrao se sa php-om i javasciptom... napravio finih par sajtova za bagatelu i kada sam vidio da u tome kod nas nema para odustao. isto kao i od Flasha koji je u to doba bio jako popularan...
wordpress ti je izmislio svijet za joomlu i vjeruj mi dosta ljudi dobro zivi od njega ukoliko rade za strano trziste. sto se tice posla kao posla, raditi bilo sto za domace trziste je obezvrijedjeno dosta jer nasi ljudi imaju misljenje o razvoju web stranica bilo koristeci gotova rijesenja ili razvijajuci svoja to je tebi 3 klika posla :D

Ali da ne trolamo temu, moze se napraviti posebna gdje svi zbirno mozemo pricati o temi i uopste o trendovima u dizajnu i razvoju web stranica i mobilnih aplikacija.
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#24 Re: Web dizajn i Wordpress

Post by kiligonzales »

10. Kako napraviti prototip web stranice - 3.dio

Bukvalno se opustite i vidjecete da nije nista strasno, pa ni kreirati wireframe za web stranicu.
Sve sto zelite mozete skicirati na papiru, posve detaljno, crtajuci izgled pocetne stranice i podstranica.
Image

Image

Onda cete otvoriti neki od online alata koje smo u prethodnom postu spomenuli i u njima to preslikati. Moj savjet je app.moqups.com ,
na ovome linku cete moci pogledati tutorijale o tome kako da nacrtate svoj prvi wireframe, naravno u njemu mozete i odraditi svoj prvi dizajn, ali nema potrebe jer cemo se time pozabaviti kroz drugi alat.

Uvijek postoji bolji alati od boljih, ali ovo ce vam biti lijepa osnova da razumijete same procese faze pri izradi web stranice, sto vam je za pocetak dovoljno. Kao sto rekoh ovaj korak ce vam u praksi biti neophodan ukoliko radite sa nekim ko zaista poznaje posao, profesionalac je, zna sta zeli i od vas ocekuje da prodjete kroz sve faze razvoja web stranice.

ovdje pogledajte tutorijale o tome
https://resources.moqups.com/
https://www.youtube.com/watch?v=esXgN7gUTFc

Ovo vam je sluzbeni kanal, pa ovdje mozete ovaj alat upoznati jos bolje.
https://www.youtube.com/channel/UCCg-E1 ... N7CrSSSxqA
Last edited by kiligonzales on 08/05/2021 15:35, edited 1 time in total.
kiligonzales
Posts: 5436
Joined: 01/12/2016 10:32
Contact:

#25 Re: Web dizajn i Wordpress

Post by kiligonzales »

10. Kako napraviti prototip web stranice - 4.dio

Ono sto je jos bitno istaci u razvoju wireframe, jeste odredjivanje hijerarhije sajtu, to jest pravljenje mape sajta. Mapu sajta zamislite kao rodoslov ili porodicno stablo iz koga su izvedeni ostali clanovi porodice, samo cemo ga u nasem slucaju okrenuti naopacke.

Image

Sad cemo prikazati mapu sajta, to jest hijerarhiju stranica i linkova na njemu.

Image

Vidite da svaka mapa sajta pocinje od pocetne ili index stranice, ona je povezana i grana se prema stranicama o nama, zasto mi, usluge, portfolio, karijera, kontakt, to je prvi nivo grananja sajta, da bi onda vidjeli da nase usluge granaju dalje, kao i nas portfolio.

Mape sajta mogu imati tri tipa, linearni, mjesoviti i hijerarhijski, to vam nije mnogo bitno da poznajete, ali svakako nije steta znati.

Image
Last edited by kiligonzales on 08/05/2021 15:36, edited 1 time in total.
Post Reply