Jos haluat suunnitella ja luoda verkkosivuja, tämä prosessi on paljon helpompi, jos suunnittelet eteenpäin. Suunnitteluvaiheessa suunnittelija ja asiakas voivat yhdessä löytää tarpeisiinsa sopivan muodon ja ulkoasun. Suunnitteluprosessi vaikuttaa sivuston tyyliin tai tyyliin, voit sanoa, että tämä on web -suunnittelun tärkein osa, varsinkin jos se on liiketoimintatarkoituksiin.
Vaihe
Osa 1/4: Perusrakenteen luominen
Vaihe 1. Määritä verkkosivuston toiminta
Jos luot henkilökohtaisen sivuston, tiedät todennäköisesti jo vastauksen. Jos kuitenkin luot sivustoa toiselle organisaatiolle, yritykselle tai henkilölle, sinun on selvitettävä, mitä he haluavat ja sivuston toiminnot. Kaikki tässä määrittämäsi tulee voimaan, kun verkkosivu on valmis.
- Tarvitseeko sivusto Storefrontin? Pitäisikö käyttäjä kommentoida? Tarvitseeko käyttäjän luoda tilin myöhemmin? Onko verkkosivuston artikkeli suunnattu? Vai imagokeskeistä? Kaikki nämä ja muut kysymykset auttavat sinua sivuston suunnittelussa.
- Tämä suunnitteluprosessi voidaan piirtää piirustukseksi, varsinkin jos se koskee suurta yritystä ja monet ihmiset ovat mukana tämän projektin luomisessa.
Vaihe 2. Luo sivustokarttakaavio (sivustokartta)
Sivustokarttakaavio on samanlainen kuin vuokaavio, joka näyttää, miten käyttäjät siirtyvät sivulta toiselle. Et tarvitse verkkosivua tässä vaiheessa, vain yleinen käsitteiden virta. Voit luoda kaavioita tietokoneella tai luoda omia paperille. Käytä tätä kaaviota demonstroidaksesi hierarkkisen järjestelyn ja verkkosivujen liitettävyyden käsitteet.
Vaihe 3. Kokeile kortin laatimismenetelmää
Yksi suosittu tapa kehittää ryhmäverkkoja on käyttää useita kortteja kaikkien odotusten selvittämiseksi. Ota useita muistikortteja ja kirjoita verkkosivun perussisältö jokaiselle erikseen. Järjestä nämä kortit yhdessä tiimisi kanssa löytääksesi paras idea. Tämä menetelmä sopii käytettäväksi, kun teet yhteistyötä muiden kanssa verkkosivujen luomisessa.
Vaihe 4. Käytä paperia ja ilmoitustaulua tai valkotaulua
Tämä on alkuperäinen suunnittelumenetelmä pienellä budjetilla. Voit nopeasti poistaa tai siirtää sisältöä ja muuttaa kulkua. Piirrä verkkosivustosi paperille, yhdistä paperit langalla tai piirrä viivat taululle. Tämä menetelmä sopii hyvin aivoriihi -istuntoihin.
Vaihe 5. Luo sisältöluettelo
Itse asiassa se on yleensä sopivampaa käyttää verkkojen uudelleensuunnittelussa kuin uusissa verkkosuunnitelmissa. Lisää jokainen valmis sisältö tai verkkosivu laskentataulukkoon. Kirjoita muistiin kunkin sisällön tai sivun tarkoitus ja määritä tämän luettelon avulla, mitä haluat poistaa ja mitä säilyttää. Voit yksinkertaistaa verkon rakennetta ja yksinkertaistaa uudelleensuunnitteluprosessia myöhemmin.
Osa 2/4: Perus HTML -ääriviivan luominen
Vaihe 1. Luo kehys verkkosivun hierarkian luomiseksi
Perus -HTML -malli on rakennetun sivuston suunnitelma, joka käyttää vain yksinkertaisimpia tunnisteita ja esimerkkisisältöä (lohkot/mallit). Tämä kehys vastaa kysymykseen "Mitä näkyy verkossa ja missä?" Muotoilua ja muotoilua ei tarvita tämän ääriviivan luomisessa.
- Voit tarkastella sisällön rakennetta ja vuokaaviota perushahmotella ennen tyyli -asetuksen valitsemista.
- Perus -HTML -mallit eivät ole staattisia, kuten PDF -tiedostot tai kuvat. Voit luoda uusia rakenteita nopeasti pyyhkäisemällä näytesisältöä.
- Peruskehys on interaktiivinen, josta hyötyvät sekä web -kehittäjät että asiakkaat. Koska tämä peruskehys on kirjoitettu yksinkertaisella HTML -koodilla, voit silti selata sitä ja tietää, miten verkkosivujen vaihto toimii. Tätä ei voi tehdä PDF: llä.
Vaihe 2. Kokeile Grey Box -menetelmää
Estä tai korosta verkkosivusi sisältö Grey Boxissa, tärkein sisältö on ylhäällä. Lajittele sisältö yhteen sarakkeeseen. Jos esimerkiksi sivu on "Tietoja yrityksestä", sen yläosassa on yksityiskohtaiset tiedot yrityksestä, jota seuraa henkilöstöluettelo ja sitten yhteystiedot jne.
Tämä ei sisällä otsikoita ja alatunnisteita. Harmaa laatikko on visuaalinen esitys verkossa näkyvästä sisällöstä
Vaihe 3. Kokeile ääriviivojen perusohjelmaa
On olemassa erilaisia ohjelmia, joita voit käyttää perusverkkokehyksen luomisessa. Hallittavan web -ohjelmointikoodin (kielen) määrä on erilainen jokaiselle ohjelmalle. Joitakin suosittuja ohjelmia ovat:
- Pattern Lab. Tämä sivusto on omistettu "atomisuunnittelulle", jokaista sisältöä pidetään "molekyylinä", joka muodostaa suuremman verkkosivun.
- Jumpcharts. Tämä verkkosivu tarjoaa web-pohjaisia suunnittelu- ja kehystyspalveluja. Nämä sivustot ovat maksullisia ja vaativat tilauksen, mutta voit rakentaa verkkokehyksiä nopeasti tarvitsematta hallita paljon web -ohjelmointikoodia.
- Wirefy. Wirefy on toinen sivusto, joka tarjoaa "atomisuunnittelua". Verkkokehittäjät voivat hankkia työkalun ilmaiseksi.
Vaihe 4. Käytä yksinkertaista HTML -merkintää
Hyvä perusmalli muuttuu helposti alkuperäiseksi. Älä ajattele liikaa web -tyylistä tämän mallin luomisprosessin aikana. Käytä merkintöjä, jotka on helppo ymmärtää ja muuttaa.
Yksinkertainen peruskehys on paljon parempi. Merkinnän luomisen tarkoitus on rakentaa rakenne. Visuaalista ulkonäköä voidaan säätää myöhemmin CSS: llä ja edistyneellä merkinnällä
Vaihe 5. Luo perushahmotelma kullekin verkkosivulle
Sinulla saattaa olla houkutusta rinnastaa jokainen verkkosivu yhteen perusperiaatteeseen. Itse asiassa tämä tekee sivustostasi vain selkeän ja tylsän. Luo jokaiselle sivulle erilainen ääriviiva, niin ymmärrät, että jokainen sivu tarvitsee oman suunnittelunsa.
Osa 3/4: Sisällön luominen
Vaihe 1. Valmistele sisältö ennen verkkosivun luomista
Web -katselun esikatselu on paljon helpompaa, jos sinulla on jo todellista sisältöä näytteiden tai paikkamerkkien käytön sijaan. Sinun ei tarvitse sisältää liikaa sisältöä, mutta mallisi näyttää paljon paremmalta, jos käytät kopiota alkuperäisestä kuvasta.
Sinun ei tarvitse olla koko artikkelin materiaalia, mutta ainakin sen pitäisi olla varsinainen otsikko
Vaihe 2. Muista, että loistava sisältö ei ole vain tekstiä
Internet on paljon monimutkaisempi kuin yksinkertainen tekstisivu. Tarvitset erilaisia sisältöjä, jotta voit luoda upean verkkosivuston, joka houkuttelee ja kutsuu kävijöitä. Esimerkiksi:
- Kuva.
- Ääni.
- Videot.
- Web -siirto tai verkkovirta (Twitter)
- Facebook -integraatio
- RSS
- Web -syöte
Vaihe 3. Pyydä apua ammattivalokuvaajalta
Jos haluat sisällyttää valokuvia sivustoosi, ensimmäinen vaikutelma, jonka saat verkkosivustostasi, on paljon parempi, jos se on täynnä ammattivalokuvausta. Yksi hyvä kuva on arvoltaan yli kaksikymmentä huonolaatuista valokuvaa.
Etsi vastavalmistunut valokuvaustaide halvemmaksi ratkaisuksi kuin ammattivalokuvaaja, joka on ollut alalla pitkään
Vaihe 4. Kirjoita laadukkaita artikkeleita
Verkkosivun kirjoitettu sisältö määrittää verkkoliikenteen määrän. Vaikka sinun ei tarvitse huolehtia liikaa sisällön luomisesta tässä suunnitteluprosessissa, ei ole haittaa alkaa miettiä sitä, koska tarvitset myös sisältöä säännöllisesti, kun sivustosi on käynnissä.
Artikkelin sisällön lisäksi on olemassa kirjallista materiaalia, joka sinulla on oltava myös verkkosivun kokoamisprosessissa. Esimerkiksi yhteystiedot, yrityksen nimi tai kaikki muu, jota käytetään useita kertoja sivustolla
Osa 4/4: Käsitteiden muuttaminen verkkosivustoiksi
Vaihe 1. Järjestä peruselementit
Tämä elementtien järjestely koskee kaikkia sivustosi sivuja, kuten otsikoita, alaviitteitä ja navigointivalikoita. Aseta se hyvin yksinkertaiseen tyyliin, jotta voit tarkistaa, miltä kaikki sivut näyttävät. Tämä on erityisen hyödyllistä edetessäsi web -asetteluprosessiin.
Älä huolehdi liikaa yksityiskohdista, yritä esikatsella (esikatsella) otsikon ulkoasua
Vaihe 2. Luo yksinkertainen asettelu
Aloita siirtämällä kellon asentoa ääriviivan sarakkeesta sivun todelliseen sijaintiin. Haluat esimerkiksi siirtää esimerkkinavigointivalikon sivun vasemmalle puolelle ja otsikkoluettelon oikealle.
Jatka kokeilua useiden sivujen verkkoasettelujen kanssa, ennen kuin siirryt seuraavaan vaiheeseen. Anna muiden katsoa sitä nähdäksesi, tuntuuko luomasi asettelu elävältä
Vaihe 3. Luo malli
Käytä Photoshopin kaltaista ohjelmaa verkkosivustosi mallien tai näytesivujen luomiseen. Käytä opastamaasi asettelua. Voit tehdä mallit nopeammin ja saada haluamasi tulokset kuvankäsittelyohjelmalla. Näiden kuvien tuloksia voidaan myöhemmin käyttää viitteenä web -ohjelmointikoodin kirjoittamisessa.
Laita todellinen sisältö malliin, jotta se näyttää hyvältä
Vaihe 4. Korvaa näytekonsepti alkuperäisellä sisällöllä
Lisää sisältöä ja elementtejä verkkosivuille. Älä hikoile nyt web -tyylin asetuksia, vaan pinoa kaikki oikeaan paikkaan. Tämä auttaa sinua tarkistamaan myöhemmin tekemäsi web -tyylimuutokset.
Vaihe 5. Luo Web -tyylinen opas
On erittäin tärkeää säilyttää tyylien yhdistelmä, etenkin suurissa sivustoissa. Jos sivusto on tarkoitettu liiketoimintatarkoituksiin ja sillä on jo oma tuotemerkki tai tyyli, se tulee sisällyttää sivuston suunnitteluun. Verkkosivun tyylioppaan luomisessa huomioitavia asioita:
- Navigointi
- Päähuomautus
- Kohta
- Kursivoitu merkki
- Rohkea hahmo
- Linkit (aktiivinen, passiivinen, hover)
- Kuvan käyttö
- Kuvake
- Nuppi
- lista
Vaihe 6. Käytä web -tyyliä
Kun olet löytänyt oikean tyylin ja suunnittelun, ota se käyttöön. CSS on yksi helpoimmista tavoista toteuttaa tyylejä verkkosivulla tai koko sivustolla. Seuraavat ohjeet ymmärtävät paremmin CSS: n käytön yksityiskohdat.
