Ako želite razviti i stvoriti web mjesto, onda će sve ići mnogo lakše ako provedete neko vrijeme na svom planiranju. Faza planiranja omogućava programeru i klijentu da rade zajedno dok ne pronađu format i izgled koji odgovara njihovim potrebama. Proces planiranja utječe na izbor stila stranice i, možda je najvažniji aspekt web dizajna, posebno za posao.

Korake

Dio 1 od 4:

Stvaranje osnovne strukture

jedan. Odredite funkcionalnost stranice. Ako stvorite web stranicu za sebe, vjerovatno već znate odgovor na ovu stavku. Ako kreirate web mjesto za drugu osobu, kompaniju ili organizaciju, potrebno je saznati šta očekuju od mjesta i njegove funkcionalnosti. Sve što ovdje odlučite imati će utjecaj na završnu web lokaciju.

Trebate elektroničku trgovinu? Potrebni su vam komentari korisnika? Treba li korisnici koristiti račun? Potrebna vam je web lokacija orijentirana na web stranicu? Slika orijentirana? Sva ova i mnoga druga pitanja pomoći će u ispunjavanju dizajna i strukture web mjesta.
To može biti dug proces, posebno za velike kompanije sa velikim brojem ljudi koji su uključeni u projekat.

Slika pod nazivom Plan web stranice korak 2

2. Stvorite shemu mape web stranice. Shema karte - kao blok dijagram, prikazuje kako se korisnici prelaze s jedne na drugu stranicu. U ovom trenutku ne trebaju vam ni stranice, samo ukupni protok ideja. Možete koristiti računarski program za kreiranje dijagrama ili ocrtajte sami na listu papira. Upotrijebite shemu mape stranice da biste prikazali kako zamišljate hijerarhiju web stranica i komunikacije (priključci).

Slika pod nazivom Plan web stranica Korak 3

3. Pokušajte s razvrstavanjem kartica. Popularna metoda za grupu je upotreba hrpa kartica kako biste saznali savršen pristup svakog. Uzmite snop kartica za bilješke i pošaljite glavni sadržaj jedne stranice na svakom od njih. Neka vaš tim organizira kartice tako da se smatraju najkorisnijim. Najbolje je za situacije kada sarađujete s drugima da biste stvorili web stranicu.

4. Koristite papir i oglasnu ploču ili ploču. Ovo je originalni način planiranja niskog budžeta, omogućava vam brzo izbrisavanje ili premještanje sadržaja i preusmjeriti ga. Nacrtajte dizajn na papiru i povežite ih u niz ili nacrtajte krug na ploči. Odlično za brainstorming.

Slika pod nazivom Plan web stranice korak 5

pet. Napravite sadržaj zaliha. Mnogo je lakše ponoviti od novih web lokacija. Unesite svaki dio sadržaja ili postojećih stranica u proračunsku tablicu. Zabilježite imenovanje svakog od njih, a zatim pomoću ove liste utvrdite šta se događa i šta ostaje. Ovo će pomoći u smanjenju najboljeg dijela i pojednostaviti proces redizajna.

2. dio 4:

Stvaranje HTML okvira

jedan. Kreirajte okvir (sheme strukturnih stranica) kako biste pomogli sigurnom hijerarhiji. HTML-okvir je bonecloth buduće mjesto koje koristi samo najosnovnije oznake i blokove za predstavljanje sadržaja. Odgovara na pitanje: "Šta se nalazi na ekranu i gde?". Formatiranje i stil su u okviru potpuno zanemareni.

Okvir vam omogućava da vidite strukturu sadržaja i protok do odabira stila.
HTML okviri nisu statični kao PDF datoteke ili slike, omogućavaju vam da brzo premjestite blokove sadržaja da biste stvorili novu strukturu.
Okvir je interaktivan, koji je koristan i za programeru i klijenta. Budući da je okvir napisan u jednostavnom HTML-u, onda se i dalje možete premjestiti na njega i osjetiti kako traje između stranica. To se ne može izraziti kroz koncept PDF-a.

Slika pod nazivom Plan web stranice korak 7

2. Isprobajte metodu sive kutije (sivo polje). Stavite sadržaj stranice u sivu polje sa najvažnijim sadržajem na samom vrhu. Blokovi se nalaze u jednom stupcu, s najvažnijim dijelom sadržaja na stranici na vrhu. Na primjer, ako je stranica stranica o kompaniji (OC.), detalje o kompaniji mogli bi otići u gornji blok nakon čega slijedi popis osoblja, a zatim kontakt informacije i tako dalje.

Ne uključuje gornju i podnožju. Siva polja samo su vizualni prikaz sadržaja koji će se naći na stranici.

Slika pod nazivom Plan web stranice 8. korak 8

3. Pokušajte koristiti program žičare. Postoji nekoliko programa koji vam mogu pomoći u procesu stvaranja interaktivnog dizajnerskog prototipa (žica). Iznos znanja izvornog koda varira od programa u programu. Evo nekih od najpopularnijih programa:

Laboratorija uzorka.Ova se stranica specijalizirala za "Atomski dizajn", Tamo gdje se čini svaki dio sadržaja "molekula", što čini veliku stranicu.

Jompcharts. Ovo je web mjesto planiranja planiranja web mjesta za interaktivni prototip dizajna.Zahtijeva plaćenu pretplatu, ali omogućava vam brzo izgraditi stranice blok dijagrama, bez previše brige o radu sa kodom.

Wirefy. Wirefy drugi sistem"Atomski projekat". Svi alati dostupni su besplatni za programere.

Slika pod nazivom Plan web stranice korak 9

4. Koristite jednostavnu HTML markup. Dobar okvir se može lako pretvoriti u stvarnu stranicu kasnije. Ne brinite općenito o stilu u procesu kreiranja interaktivnog dizajna prototipa. Umjesto toga, koristite oznaku koja se može lako razumljivati i promijeniti s malo napora.

"Manje" znači "više" sa okvirom. Cilj je jednostavno izgraditi strukturu. Izgled se može prilagoditi kasnije sa CSS-om i proširenom marku.

Slika pod nazivom Plan web stranice korak 10

pet. Napravite okvir za svaku stranicu na vašoj web lokaciji. Može biti primamljivo napraviti jednostavan okvir i reći: "Super, mogu ga primijeniti na svaku stranicu, odgovara mi". U stvari, to će dovesti do stvaranja običnog i dosadnog mesta. Provedite vrijeme za kreiranje interaktivnog prototipa svake stranice, a uskoro ćete pronaći da svaka stranica ima svoj organizacijski "potrebe".

3. dio 4:

Stvaranje sadržaja

jedan. Pripremite neki sadržaj prije nego što započnete s kreiranjem web stranice. Bit će mnogo lakše vidjeti kako izgleda stil web lokacije ako imate pravi sadržaj umjesto praznih polja. Ne trebaju vam previše informacija, ali sve će izgledati mnogo bolje u rasporedu ako imate neki materijal za članke i originalne slike.

Ne treba vam rasuti dio članka, ali morate barem imati pravi naslove.

Slika pod nazivom Plan web stranice korak 12

2. Zapamtite da je dobar sadržaj više od teksta. Internet - Mnogo je više od jednostavnih web stranica za tekst. Da biste se istakli u vašoj niši, trebat će vam mnogo različitih vrsta sadržaja za privlačenje i posjetitelje. Neki mogući sadržaj za memorisanje:

Fotografije.

Audio

Video

Teme ili stream (Twitter)

Facebook integracija

RSS (sa engleskog jezika). Stvarno jednostavan sindikat - standardizirani sadržajni sistem)

Vijesti o sadržaju kanala

Slika pod nazivom Plan web stranice korak 13

3. Odaberite profesionalni fotograf. Ako dodate fotografije na svoju web lokaciju, a zatim s profesionalnom fotografijom prvi dojmovi o tome bit će mnogo bolji. Jedna dobra fotografija je više od 20 loših.

Rad novak fotografa bit će mnogo jeftiniji od djela iskusnih profesionalaca.

Slika pod nazivom Plan web stranice korak 14

4. Kvalitetni članci pisanja. Pismeni sadržaj na vašoj stranici odredit će ogromnu količinu web prometa. Iako se ne morate previše brinuti o stvaranju sadržaja u ovoj fazi dizajnerskog procesa, nećete povrijediti i razmišljati o tome, jer će sadržaj trebati redovno kreirati kada se treba pravilno stvoriti kada "Vijek inspiracije" na sajtu.

Nakon što će članci biti napisani puno stvari koje ćete najvjerovatnije koristiti u procesu kreiranja web stranice. Ovo može uključivati kontakt informacije, imena kompanija ili nešto treće koje će se koristiti na nekoliko mjesta na web mjestu.

Dio 4 od 4:

Pretvaranje ideja na web mjestu

jedan. Razviti zajedničke elemente. To su one stvari koje su vidljive na svakom Pheetteu, kao što su: gornja i stopala, navigacijski meni. Stvorite vrlo jednostavan stil, tako da možete vidjeti kako će sve vaše stranice pogledati na licu mjesta. Bit će vrlo koristan prilikom prelaska na proces stvaranja izgleda.

Ne brinite previše o detaljima, ali pokušajte ih napraviti gotovo isto kao i sve krajnje trebale pogledati.

2. Stvoriti osnovni plan (smještaj). Započnite premještanje vodiča iz jednog stupca u njihovim općenito prihvaćenim mjestima na stranici. Na primjer, mogli biste pomaknuti navigacijski blok na lijevu stranu stranice, a popis zaglavlja - u pravu.

Nastavite eksperimentirati s plasmanom na više stranica prije nego što krenete. Neka ih drugi provjere da vide kako su on-onganizirani.

Slika pod nazivom Plan web stranice korak 17

3. Stvoriti izgled. Koristite program (poput Photoshopa) da biste stvorili izgled nekoliko stranica stranica. Koristite izgled koji ste odabrali kao vodič. Možete raditi mnogo brže u programu da biste uredili slike i dobili sve u ovom obliku kao što vam treba. To će vam omogućiti da ove slike koristite kao reference kada će doći stvarni kod doći.

Dodajte ovaj sadržaj na izgled kako biste bili sigurni da sve zajedno izgleda dobro.

Slika pod nazivom Plan web stranice Korak 18

4. Zamijenite sadržaj blokova. Počnite dodavati sistem i stavke na stranicu. Ne brinite se za stil, samo stavite sve na pravo mjesto. Ovo će vam pomoći da saznate da li će vaši promjene stila raditi.

Slika pod nazivom Plan web stranice korak 19

pet. Kreirajte vodič u stilu. Veoma je važno održavati vezivni stil, posebno za velike web lokacije. Ako je web mjesto za posao koji već ima vizualno brendiranje, mora biti uključeno u dizajn web mjesta. Stvari koje treba uzeti u obzir u priručniku će objaviti:

Navigacija

Zaglavlja (

,

, Itd.)

Stavovi

Italics (kurziv)

Boldring (podebljano)

Reference (aktivna, neaktivna, plutajuća)

Koristeći sliku

Ikone

Gumbe

Liste

Slika pod nazivom Plan web stranice korak 20

6. Primijenite svoj stil. Čim stil i dizajn za web mjesto, dođe vrijeme za implementaciju. CSS je jedan od najlakših načina za prodaju stila za cijelu stranicu ili cijelu stranicu. Pročitajte ovaj vodič za više detalja o korištenju CSS-a.