Če želite oblikovati in ustvarjati spletne strani, bo ta postopek veliko lažji, če načrtujete vnaprej. V fazi načrtovanja lahko oblikovalec in naročnik skupaj poiščeta obliko in postavitev, ki ustreza njihovim potrebam. Proces načrtovanja vpliva na slog ali slog spletnega mesta, lahko bi rekli, da je to najpomembnejši vidik spletnega oblikovanja, še posebej, če gre za poslovne namene.
Korak
1. del od 4: Ustvarjanje osnovne strukture
Korak 1. Določite funkcijo spletnega mesta
Če ustvarjate osebno spletno mesto, odgovor verjetno že poznate. Če pa ustvarjate spletno mesto za drugo organizacijo, podjetje ali osebo, morate ugotoviti, kaj si želijo in funkcionalnost spletnega mesta. Vse, kar navedete tukaj, bo začelo veljati, ko bo spletna stran končana.
- Ali spletno mesto zahteva Storefront? Ali je treba dati komentarje uporabnikov? Ali bo moral uporabnik kasneje ustvariti račun? Ali je članek na spletnem mestu usmerjen? Ali slikovno usmerjen? Vsa ta in druga vprašanja vam bodo v pomoč pri oblikovanju in oblikovanju spletnega mesta.
- Ta postopek načrtovanja je mogoče potegniti v risbo, še posebej, če gre za veliko podjetje in je pri ustvarjanju tega projekta vključenih veliko ljudi.
Korak 2. Ustvarite diagram zemljevida mesta (zemljevid mesta)
Diagram zemljevida mesta je podoben diagramu poteka, ki prikazuje, kako se uporabniki premikajo z ene strani na drugo. Na tej stopnji ne potrebujete spletne strani, samo splošen tok konceptov. Z računalniškim programom lahko ustvarite diagrame ali skicirate svoje na papirju. S tem diagramom pokažite koncepte hierarhične ureditve in povezljivosti spletnih strani.
Korak 3. Preizkusite način priprave kartice
Ena izmed priljubljenih metod skupinskega spletnega razvoja je uporaba številnih kartic za ugotavljanje pričakovanj vseh. Vzemite več kartic z zapiski in na vsako posebej zapišite osnovno vsebino spletne strani. Razporedite te kartice skupaj s svojo ekipo, da poiščete najboljši koncept. Ta metoda je primerna za uporabo, ko pri ustvarjanju spletnih strani sodelujete z drugimi.
Korak 4. Uporabite papir in oglasno desko ali belo tablo
To je izvirna metoda načrtovanja z majhnim proračunom, lahko hitro izbrišete ali premaknete vsebino in spremenite tok. Narišite spletno oblikovanje na papir, nato papir povežite z nitjo ali na desko narišite črte. Ta metoda je zelo primerna za uporabo pri sestankih možganov.
Korak 5. Ustvarite popis vsebine
Pravzaprav je ponavadi bolj primerna za uporabo pri preoblikovanju spletnih strani kot pri novih spletnih oblikah. Vsako končano vsebino ali spletno stran vstavite v preglednico. Zapišite si namen vsake vsebine ali strani in na tem seznamu določite, kaj odstraniti in kaj obdržati. Lahko poenostavite strukturo spleta in kasneje poenostavite postopek prenove.
2. del od 4: Ustvarjanje osnovnega orisa HTML
Korak 1. Ustvarite žični okvir za vzpostavitev hierarhije spletnih strani
Osnovna predloga HTML je načrt spletnega mesta, ki ga boste zgradili, z uporabo samo najosnovnejših oznak in vzorčne (bloki/predloge) vsebine. Ta okvir odgovarja na vprašanje: "Kaj je vidno na spletu in kje?" Oblikovanje in oblikovanje pri ustvarjanju tega orisa nista potrebna.
- Preden izberete nastavitev sloga, si lahko ogledate strukturo in diagram poteka vsebine z osnovnim orisom.
- Osnovne predloge HTML niso statične, kot so datoteke PDF ali slike, lahko hitro povlečete po vzorčni vsebini in ustvarite nove strukture.
- Osnovni okvir je interaktiven, kar koristi tako spletnim razvijalcem kot odjemalcem. Ker je ta osnovni okvir napisan s preprosto kodo HTML, ga lahko še vedno krmarite in veste, kako deluje preklapljanje spletnih strani. Tega ni mogoče narediti s PDF -jem.
Korak 2. Preizkusite metodo Grey Box
Blokirajte ali označite vsebino svoje spletne strani v Grey Boxu, najpomembnejša vsebina je na vrhu. Razvrstite vsebino v en stolpec. Na primer, če je stran »O podjetju«, so na vrhu podrobne informacije o podjetju, ki jim sledi seznam zaposlenih, nato kontaktni podatki itd.
To ne vključuje glave in noge. Grey Box je vizualni prikaz vsebine, ki se bo pojavila na spletu
Korak 3. Preizkusite osnovni program za izdelavo orisov
Obstajajo različni programi, ki jih lahko uporabite pri ustvarjanju osnovnega spletnega okvira. Količina spletne programske kode (jezika), ki jo morate obvladati, je za vsak program drugačna. Nekateri zelo priljubljeni programi vključujejo:
- Laboratorij za vzorce. Ta stran je namenjena "atomski zasnovi", vsaka vsebina velja za "molekulo", ki sestavlja večjo spletno stran.
- Skoki. Ta spletna stran ponuja storitve spletnega načrtovanja in oblikovanja okvirjev. Ta spletna mesta so plačljiva in zahtevajo naročnino, vendar lahko hitro ustvarite spletne okvire, ne da bi morali obvladati veliko kode za spletno programiranje.
- Wirefy. Wirefy je še eno spletno mesto, ki ponuja "atomsko zasnovo". Spletni razvijalci lahko orodje dobijo brezplačno.
Korak 4. Uporabite preprosto označevanje HTML
Dobra osnovna predloga se zlahka pretvori v prvotno spletno mesto. Med ustvarjanjem te predloge ne razmišljajte preveč o spletnem oblikovanju. Uporabite oznake, ki jih je mogoče enostavno razumeti in spremeniti.
Preprost osnovni okvir je veliko boljši. Namen ustvarjanja oznake je izgradnja strukture. Vizualni videz lahko kasneje prilagodite s CSS in naprednimi oznakami
Korak 5. Ustvarite osnovni oris za vsako spletno stran
Morda vas bo zamikalo, da bi vsako spletno stran enačili z enim osnovnim orisom. Pravzaprav bo tako vaše spletno mesto preprosto in dolgočasno. Za vsako stran ustvarite drugačen oris, razumeli boste, da vsaka stran potrebuje svojo zasnovo.
3. del od 4: Ustvarjanje vsebine
Korak 1. Pripravite vsebino, preden ustvarite spletno stran
Predogled spletnega pogleda bo veliko lažji, če že imate dejansko vsebino, namesto da uporabite vzorce ali nadomestne znake. Ni vam treba imeti preveč vsebine, vendar bo vaš model videti bolje, če uporabite kopijo izvirne slike.
Ni vam treba imeti celotnega gradiva za članek, vendar mora imeti vsaj dejanski naslov
Korak 2. Ne pozabite, da odlična vsebina ni samo besedilo
Internet je veliko bolj zapleten kot preprosta spletna stran z besedilom. Za ustvarjanje odlične spletne strani, ki bo pritegnila in povabila obiskovalce, potrebujete različne vsebine. Na primer:
- Slika.
- Glas.
- Video posnetki.
- Spletni prenos ali spletni tok (Twitter)
- Integracija s Facebookom
- RSS
- Spletni vir
Korak 3. Za pomoč se obrnite na profesionalnega fotografa
Če želite na svoje spletno mesto vključiti fotografije, bo prvi vtis, ki ga boste dobili s svojega spletnega mesta, veliko boljši, če bo napolnjen s profesionalno fotografijo. Ena dobra fotografija je vredna več kot dvajset fotografij nizke kakovosti.
Poiščite svežega diplomantka fotografske umetnosti kot cenejšo rešitev kot profesionalni fotograf, ki se že dolgo ukvarja s tem poslom
Korak 4. Napišite kakovostne članke
Pisana vsebina na spletni strani bo določila količino vašega spletnega prometa. Čeprav vam v tem procesu oblikovanja ni treba preveč skrbeti za ustvarjanje vsebine, ne škodi, da o tem začnete razmišljati, saj boste vsebino redno potrebovali tudi, ko bo vaše spletno mesto zagnano.
Poleg vsebine članka obstaja tudi pisno gradivo, ki ga morate imeti tudi pri sestavljanju spletne strani. Na primer kontaktni podatki, ime podjetja ali karkoli drugega, kar bo na spletnem mestu uporabljeno večkrat
4. del 4: Pretvarjanje konceptov v spletna mesta
Korak 1. Razporedite osnovne elemente
Ta razporeditev elementov velja za vsako stran vašega spletnega mesta, na primer glave, opombe in navigacijske menije. Nastavite ga v zelo preprostem slogu, tako da lahko preverite, kako izgledajo vse strani. To je še posebej uporabno, ko napredujete v procesu postavitve spleta.
Ne skrbite preveč glede podrobnosti, poskusite predogledati (predogled), kako izgleda glava
Korak 2. Ustvarite preprosto postavitev
Začnite s premikanjem ure z stolpca osnovnega orisa na dejansko lokacijo na strani. Na primer, vzorčni navigacijski meni lahko premaknete na levo strani, seznam naslovov pa na desno.
Še naprej eksperimentirajte s spletnimi postavitvami za več strani, preden nadaljujete z naslednjim korakom. Dovolite drugim, da si jo ogledajo in preverijo, ali je postavitev, ki jo ustvarite, živa
Korak 3. Ustvarite maketo
S programom, kot je Photoshop, ustvarite makete ali vzorčne strani svojega spletnega mesta. Za pripravo uporabite postavitev, ki ste jo sestavili. S programom za obdelavo slik lahko makete naredite hitreje in dosežete želene rezultate. Rezultati teh slik se lahko kasneje uporabijo kot referenca pri pisanju kode za spletno programiranje.
Vstavite dejansko vsebino v maketo, da bo videti dobro
Korak 4. Zamenjajte vzorčni koncept z izvirno vsebino
Dodajte vsebino in elemente na spletne strani. Zaenkrat ne pretiravajte z nastavitvami spletnega sloga, samo zložite vse na pravo mesto. To vam bo pomagalo pregledati poznejše spremembe spletnega sloga.
Korak 5. Ustvarite vodnik po spletnem slogu
Zelo pomembno je ohraniti mešanico slogov, zlasti za velika spletna mesta. Če je spletno mesto namenjeno poslovnim namenom in že ima svojo blagovno znamko ali slog, ga je treba vključiti v zasnovo spletnega mesta. Pri ustvarjanju vodnika po slogu spletne strani morate upoštevati:
- Navigacija
- Opomba glave
- Odstavek
- Kurzivni znak
- Drzen lik
- Povezave (aktivne, neaktivne, lebdenje)
- Uporaba slike
- Ikona
- Gumb
- seznam
Korak 6. Uporabite spletni slog
Ko najdete pravi slog in oblikovanje, ga izvedite. CSS je eden najlažjih načinov za izvajanje slogov na spletni strani ali na celotnem spletnem mestu. Če želite bolje razumeti podrobnosti uporabe CSS, glejte naslednja navodila.
