Ako želite dizajnirati i stvarati web stranice, ovaj će proces biti mnogo lakši ako planirate unaprijed. U fazi planiranja, dizajner i klijent mogu raditi zajedno kako bi pronašli format i izgled koji odgovaraju njihovim potrebama. Proces planiranja utječe na stil ili stil web stranice, mogli biste reći da je ovo najvažniji aspekt u web dizajnu, posebno ako je u poslovne svrhe.
Korak
1. dio od 4: Stvaranje osnovne strukture
Korak 1. Odredite funkciju web stranice
Ako kreirate ličnu web lokaciju, vjerojatno već znate odgovor. Međutim, ako kreirate web lokaciju za drugu organizaciju, kompaniju ili osobu, morate saznati što oni žele i funkcionalnost web lokacije. Sve što ovdje navedete stupit će na snagu kada web stranica završi.
- Zahtijeva li web stranica Storefront? Treba li davati komentare korisnika? Hoće li korisnik kasnije morati stvoriti račun? Je li članak web stranice orijentiran? Ili slika orijentisana? Sva ova i druga pitanja pomoći će vam u dizajnu i dizajnu web stranice.
- Ovaj proces planiranja može se ucrtati u crtež, posebno ako se radi o velikoj kompaniji i mnogi ljudi su uključeni u kreiranje ovog projekta.
Korak 2. Kreirajte dijagram karte web lokacije (mapu lokacije)
Dijagram karte web stranice sličan je dijagramu toka koji prikazuje kako se korisnici kreću s jedne stranice na drugu. U ovoj fazi ne trebate web stranicu, samo opći tok koncepata. Možete koristiti računarski program za kreiranje dijagrama ili skiciranje vlastitog na papiru. Pomoću ovog dijagrama demonstrirajte koncepte hijerarhijskog uređenja i povezivanja web stranica.
Korak 3. Isprobajte način izrade kartice
Jedna od popularnih metoda grupnog web razvoja je korištenje određenog broja kartica kako bi se otkrila svačija očekivanja. Uzmite nekoliko kartica s bilješkama i na svaku pojedinačno zapišite osnovni sadržaj web stranice. Rasporedite ove kartice zajedno sa svojim timom kako biste pronašli najbolji koncept. Ova metoda je prikladna za upotrebu kada surađujete s drugima na izradi web stranica.
Korak 4. Koristite papir i oglasnu ploču ili bijelu ploču
Ovo je originalna metoda planiranja uz mali budžet, možete brzo izbrisati ili premjestiti sadržaj i promijeniti tok. Nacrtajte svoj web dizajn na papiru, zatim povežite papire koncem ili nacrtajte linije na ploči. Ova metoda je vrlo pogodna za korištenje u brainstormingu.
Korak 5. Kreirajte inventar sadržaja
U stvari, tendencija je da bude prikladnija za upotrebu pri redizajniranju web stranica nego za nove web dizajne. Svaki gotov sadržaj ili web stranicu umetnite u proračunsku tablicu. Zabilježite svrhu svakog dijela sadržaja ili stranice koristeći ovu listu da odredite šta ćete ukloniti, a šta zadržati. Možete pojednostaviti strukturu weba i kasnije pojednostaviti proces redizajniranja.
Dio 2 od 4: Stvaranje osnovne HTML strukture
Korak 1. Kreirajte žičani okvir za uspostavljanje hijerarhije web stranica
Osnovni HTML predložak je nacrt web stranice koju ćete izgraditi, koristeći samo najosnovnije oznake i uzorak (blokovi/predlošci) sadržaja. Ovaj okvir odgovara na pitanje "Šta je vidljivo na webu i gdje?" Oblikovanje i oblikovanje nisu potrebni za izradu ovog nacrta.
- Prije odabira postavke stila možete vidjeti strukturu i dijagram toka sadržaja s osnovnim crtama.
- Osnovni HTML predlošci nisu statični, poput PDF -ova ili slika, možete brzo prelaziti prstom po uzorku sadržaja za stvaranje novih struktura.
- Osnovni okvir je interaktivan što koristi i web programerima i klijentima. Budući da je ovaj osnovni okvir napisan jednostavnim HTML kodom, i dalje se možete kretati po njemu i znati kako funkcionira prebacivanje web stranica. To se ne može učiniti s PDF -om.
Korak 2. Isprobajte metodu Grey Box
Blokirajte ili istaknite sadržaj svoje web stranice u Sivoj kutiji, najvažniji sadržaj je na vrhu. Sortirajte sadržaj u jednu kolonu. Na primjer, ako je stranica "O kompaniji", tada se pri vrhu nalaze detaljne informacije o kompaniji, nakon čega slijedi popis osoblja, zatim kontakt informacije itd.
Ovo ne uključuje zaglavlja i podnožja. Siva kutija je vizualni prikaz sadržaja koji će se pojaviti na webu
Korak 3. Isprobajte osnovni program za izradu Outlinea
Postoje različiti programi koje možete koristiti u procesu stvaranja osnovnog web okvira. Količina programskog koda (jezika) za web koji morate savladati je različita za svaki program. Neki od prilično popularnih programa uključuju:
- Pattern Lab. Ova je stranica posvećena „atomskom dizajnu“, svaki sadržaj se smatra „molekulom“koji čini veću web stranicu.
- Jumpcharts. Ova web stranica nudi usluge planiranja i uokvirivanja zasnovane na webu. Ove web stranice su plaćene i zahtijevaju pretplatu, ali web stranice možete brzo izgraditi bez savladavanja velikog programskog koda za web.
- Wirefy. Wirefy je još jedno mjesto koje nudi „atomski dizajn“. Web programeri mogu dobiti alat besplatno.
Korak 4. Koristite jednostavno HTML označavanje
Dobar osnovni predložak lako će se pretvoriti u originalnu web lokaciju. Ne razmišljajte previše o stilovima weba tokom procesa stvaranja ovog predloška. Koristite oznake koje se mogu lako razumjeti i promijeniti.
Jednostavan osnovni okvir je mnogo bolji. Svrha stvaranja oznaka je izgradnja strukture. Vizuelni izgled kasnije se može prilagoditi pomoću CSS -a i naprednog označavanja
Korak 5. Napravite osnovni okvir za svaku web stranicu
Možda ćete doći u iskušenje da svaku web stranicu izjednačite s jednim osnovnim pregledom. Zapravo, ovo će vašu web stranicu učiniti samo običnom i dosadnom. Napravite drugačiji nacrt za svaku stranicu, shvatit ćete da svaka stranica treba svoj dizajn.
Dio 3 od 4: Kreiranje sadržaja
Korak 1. Pripremite sadržaj prije kreiranja web stranice
Bit će vam mnogo lakše pregledati pregled vašeg weba ako već imate stvarni sadržaj umjesto korištenja uzoraka ili rezerviranih mjesta. Ne morate imati previše sadržaja, ali vaš će model izgledati mnogo bolje ako koristite kopiju izvorne slike.
Ne morate imati sav materijal za članak, ali barem bi trebao imati stvarni naslov
Korak 2. Zapamtite da sjajan sadržaj nije samo tekst
Internet je mnogo složeniji od jednostavne web stranice s tekstom. Potreban vam je niz različitih sadržaja kako biste stvorili sjajnu web stranicu koja će privući i pozvati posjetitelje. Na primjer:
- Slika.
- Glas.
- Videos.
- Web prijenos ili webstream (Twitter)
- Facebook integracija
- RSS
- Web feed
Korak 3. Zatražite pomoć od profesionalnog fotografa
Ako želite na svoju web lokaciju uvrstiti fotografije, prvi dojam koji ćete ostaviti s vaše web stranice bit će mnogo bolji ako bude ispunjena profesionalnom fotografijom. Jedna dobra fotografija vrijedi više od dvadeset fotografija lošeg kvaliteta.
Potražite svježeg studenta umjetnosti fotografije kao jeftinije rješenje od profesionalnog fotografa koji se dugo bavi ovim poslom
Korak 4. Napišite kvalitetne članke
Pisani sadržaj na web stranici će odrediti količinu vašeg web prometa. Iako ne morate previše brinuti o stvaranju sadržaja u ovom procesu dizajna, ne šteti početi razmišljati o tome jer će vam i sadržaj biti potreban redovito kada vaša web stranica bude pokrenuta.
Osim sadržaja članka, postoji i pisani materijal koji također trebate imati u procesu sastavljanja web stranice. Na primjer, podaci za kontakt, naziv kompanije ili bilo što drugo što će se koristiti više puta na web lokaciji
Dio 4 od 4: Pretvaranje koncepata u web stranice
Korak 1. Rasporedite osnovne elemente
Ovaj raspored elemenata primjenjuje se na svaku stranicu na vašoj web lokaciji, poput zaglavlja, fusnota i navigacijskih izbornika. Postavite ga u vrlo jednostavnom stilu tako da možete provjeriti kako sve stranice izgledaju. Ovo je posebno korisno kako napredujete u procesu web izgleda.
Ne brinite previše o detaljima, pokušajte pregledati (pregledati) kako zaglavlje izgleda
Korak 2. Kreirajte jednostavan izgled
Počnite pomicanjem položaja sata sa stupca osnovne linije na stvarnu lokaciju na stranici. Na primjer, možda ćete htjeti premjestiti ogledni navigacijski meni s lijeve strane stranice, a listu naslova s desne strane.
Eksperimentirajte s izgledima weba za više stranica, prije nego prijeđete na sljedeći korak. Dopustite drugima da ga pogledaju kako bi provjerili osjeća li se izgled koji kreirate
Korak 3. Kreirajte maketu
Koristite program poput Photoshopa za kreiranje maketa ili uzoraka stranica vaše web stranice. Koristite izgled koji ste sastavili kao vodič. Pomoću programa za obradu slika možete brže napraviti makete i postići željene rezultate. Rezultati ovih slika kasnije se mogu koristiti kao referenca u procesu pisanja programskog koda za web.
Stavite stvarni sadržaj u maketu kako bi izgledao dobro
Korak 4. Zamijenite koncept uzorka originalnim sadržajem
Dodajte sadržaj i elemente na web stranice. Ne zamarajte se zasad postavkama web stila, samo složite sve na ispravnu lokaciju. Ovo će vam pomoći da pregledate kasnije promijenjene web stilove.
Korak 5. Napravite vodič za web stil
Vrlo je važno održavati mješavinu stilova, posebno za velike web stranice. Ako je web mjesto namijenjeno poslovnim svrhama i već ima vlastitu marku ili stil, to bi trebalo integrirati u dizajn web stranice. Stvari koje treba uzeti u obzir pri izradi vodiča za stil web stranice:
- Navigacija
- Napomena o glavi
- Paragraf
- Kurzivni znak
- Hrabar karakter
- Veze (aktivne, neaktivne, lebdenje)
- Upotreba slike
- Ikona
- Knob
- lista
Korak 6. Primijenite web stil
Nakon što pronađete pravi stil i dizajn, implementirajte ga. CSS je jedan od najjednostavnijih načina za implementaciju stilova na web stranici ili na cijeloj web lokaciji. Pogledajte sljedeće upute kako biste bolje razumjeli detalje korištenja CSS -a.
