Ako želite dizajnirati i izraditi web stranice, ovaj će postupak biti mnogo lakši ako planirate unaprijed. U fazi planiranja dizajner i klijent mogu zajedno raditi na pronalaženju formata i izgleda koji odgovaraju njihovim potrebama. Proces planiranja utječe na stil ili stil web stranice, mogli biste reći da je to 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 osobnu web lokaciju, vjerojatno već znate odgovor. Međutim, ako stvarate web mjesto za drugu organizaciju, tvrtku ili osobu, morate saznati što žele i funkcionalnost web mjesta. 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 orijentirana? Sva ova i druga pitanja pomoći će vam u dizajnu i dizajnu web stranice.
- Ovaj se proces planiranja može uvući u crtež, osobito ako se radi o velikoj tvrtki i u stvaranju ovog projekta uključeno je mnogo ljudi.
Korak 2. Izradite shemu karte web stranice (kartu web 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. Računalnim programom možete izraditi dijagrame ili skicirati vlastite 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 brojnih kartica kako bi se doznala 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 je metoda prikladna za uporabu kada surađujete s drugima na izradi web stranica.
Korak 4. Koristite papir i oglasnu ploču ili bijelu ploču
Ovo je izvorna metoda planiranja uz mali proračun, možete brzo izbrisati ili premjestiti sadržaj i promijeniti tijek. Nacrtajte svoj web dizajn na papiru, zatim povežite papire koncem ili nacrtajte linije na ploči. Ova je metoda vrlo prikladna za uporabu u brainstormingu.
Korak 5. Izradite inventar sadržaja
Zapravo, 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 ovaj popis da odredite što ćete ukloniti, a što zadržati. Možete pojednostaviti strukturu weba i kasnije pojednostaviti proces redizajniranja.
Dio 2 od 4: Izrada osnovnog HTML prikaza
Korak 1. Izradite žičani okvir za uspostavu 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: "Što je vidljivo na webu i gdje?" Oblikovanje i oblikovanje nisu potrebni za izradu ovog obrisa.
- 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 prijeći 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, još uvijek se možete njime kretati 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 Sivom okviru, najvažniji sadržaj nalazi se pri vrhu. Poredajte sadržaj u jedan stupac. Na primjer, ako je stranica "O tvrtki", pri vrhu se nalaze detaljne informacije o tvrtki, zatim popis osoblja, zatim podaci za kontakt itd.
To ne uključuje zaglavlja i podnožja. Siva kutija vizualni je prikaz sadržaja koji će se pojaviti na webu
Korak 3. Isprobajte osnovni program za izradu obrisa
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:
- Laboratorij za uzorke. Ova je stranica posvećena "atomskom dizajnu", svaki se sadržaj smatra "molekulom" koja čini veću web stranicu.
- Skokovi. Ova web stranica nudi usluge planiranja i uokvirivanja temeljene na webu. Ove web stranice su plaćene i zahtijevaju pretplatu, ali web stranice možete brzo izgraditi bez savladavanja mnogo programskog koda za web.
- Wirefy. Wirefy je još jedno mjesto koje nudi "atomski dizajn". Web programeri mogu dobiti alat besplatno.
Korak 4. Upotrijebite jednostavno HTML označavanje
Dobar osnovni predložak lako će se pretvoriti u izvornu web lokaciju. Ne razmišljajte previše o web stilu tijekom 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. Vizualni izgled kasnije se može prilagoditi pomoću CSS -a i naprednog označavanja
Korak 5. Izradite osnovni okvir za svaku web stranicu
Možda ćete doći u napast da svaku web stranicu izjednačite s jednim osnovnim pregledom. Zapravo, ovo će vašu stranicu učiniti samo običnom i dosadnom. Napravite drugačiji okvir za svaku stranicu, shvatit ćete da svaka stranica treba svoj dizajn.
3. dio od 4: Stvaranje sadržaja
Korak 1. Pripremite sadržaj prije izrade web stranice
Bit će vam mnogo lakše pregledati svoj web pregled ako već imate stvarni sadržaj umjesto da koristite uzorke ili rezervirana mjesta. Ne morate imati previše sadržaja, ali vaš će model izgledati puno 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 izvrsnu web stranicu koja će privući i pozvati posjetitelje. Na primjer:
- Slika.
- Glas.
- Videozapisi.
- Web prijenos ili webstream (Twitter)
- Facebook integracija
- RSS
- Web feed
Korak 3. Zatražite pomoć od profesionalnog fotografa
Ako želite uvrstiti fotografije na svoju web stranicu, 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 niske kvalitete.
Potražite svježeg diplomanta 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 odredit će količinu vašeg web prometa. Iako se ne morate previše brinuti oko stvaranja sadržaja u ovom procesu dizajna, ne šteti početi razmišljati o tome jer će vam i sadržaj biti potreban redovito kad vaša web stranica bude pokrenuta.
Osim sadržaja članka, postoji i pisani materijal koji također morate imati u procesu sastavljanja web stranice. Na primjer, podaci za kontakt, naziv tvrtke ili bilo što drugo što će se više puta koristiti na web mjestu
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, kao što su zaglavlja, fusnote i navigacijski izbornici. Postavite ga u vrlo jednostavnom stilu kako biste mogli provjeriti kako sve stranice izgledaju. To je osobito korisno kako napredujete u procesu web izgleda.
Ne brinite previše o detaljima, pokušajte pregledati (pregledati) kako zaglavlje izgleda
Korak 2. Izradite jednostavan izgled
Započnite pomicanjem sata sa stupca osnovnog okvira na stvarno mjesto na stranici. Na primjer, možda biste htjeli premjestiti ogledni navigacijski izbornik s lijeve strane stranice, a popis naslova s desne strane.
Eksperimentirajte s web izgledima za više stranica prije nego prijeđete na sljedeći korak. Dopustite drugima da ga pogledaju kako bi vidjeli da li se izgled koji kreirate osjeća živim
Korak 3. Izradite maketu
Pomoću programa poput Photoshopa stvorite makete ili uzorke stranica svoje web stranice. Koristite izgled koji ste sastavili kao vodič. Pomoću programa za obradu slika možete makete učiniti bržim 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 izvornim sadržajem
Dodajte sadržaj i elemente na web stranice. Ne zamarajte se zasad postavkama web stila, samo složite sve na točno mjesto. To će vam pomoći da pregledate kasnije promijenjene web stilove.
Korak 5. Izradite vodič za web stil
Vrlo je važno održavati mješavinu stilova, posebno za velika web mjesta. Ako je web mjesto namijenjeno poslovnim svrhama i već ima vlastitu marku ili stil, to bi trebalo biti integrirano u dizajn web stranice. Stvari koje treba uzeti u obzir pri izradi vodiča za stil web stranice:
- Navigacija
- Napomena o glavi
- Stavak
- Kurzivni znak
- Hrabar lik
- Veze (aktivne, neaktivne, lebdenje)
- Upotreba slike
- Ikona
- Ručica
- popis
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 stranici. Pogledajte sljedeće upute za bolje razumijevanje pojedinosti o korištenju CSS -a.
