Hyvän Web-suunnittelun tekemät ja tekemät

Kun noudatetaan, tämä opas osoittautuu varsin arvokkaaksi web-suunnitteluresurssiksi, varsinkin jos aiot käyttää verkkosivujen kehitysohjelmisto tulevaisuudessa. Tästä oppaasta löytyy jokaiselle jotakin kokemattomista kokeneisiin.

Suuren web-suunnittelun prosessi Varmistaaksemme, että olemme kaikki samalla sivulla, aloitetaan "verkkosuunnittelun" perusmääritelmällä. Wikipedian mukaan web-suunnittelu on:

"Internetin kautta tapahtuvan sähköisen median konseptointi-, suunnittelu-, mallintamis- ja toteutusprosessi Web-selaimen tulkittavaksi ja graafisena käyttöliittymänä näytettäväksi sopivan merkintäkielen muodossa" .

Web-suunnitteluprosessia voidaan verrata tutkimuspaperin kirjoittamiseen. Konseptointi-/suunnitteluvaiheessa luodaan vuokaaviot (ääriviivat), jotka kuvaavat verkkosivustosi navigointirakennetta. Mallinnusvaiheessa luodaan staattiset rautalankakehykset (karkea luonnos), jotka kuvaavat verkkosivustosi kunkin osion luurankoa. Kun lankakehykset on luotu, grafiikkaa, värejä ja tekstiä käytetään verkkosivujesi suunnitteluun lankakehysten asettelun perusteella. Toteutusvaiheessa suunnitelmasi muunnetaan verkkoselaimien tukemaan muotoon, tekstiä ja sisältöä lisätään ja lopuksi verkkosivustosi julkaistaan ​​livenä Internetiin maailman nähtäväksi (lopullinen luonnos).

Kaikki kolme suunnitteluprosessin vaihetta ovat yhtä tärkeitä. Monet web-suunnittelijat ohittavat vaiheen säästääkseen aikaa tai koska he eivät pidä sitä tarpeellisena. Kaikki kolme vaihetta ovat kuitenkin välttämättömiä, jos tavoitteenasi on luoda onnistunut muotoilu ja kunnioitettava verkkosivusto. Vaikka kolmea vaihetta käytettäisiin, verkkosuunnittelijat voivat tehdä monia virheitä, jotka johtavat huonolaatuisiin, ei-käyttäjäystävällisiin verkkosivustoihin. On aika puhdistaa kaappi huonoista verkkosuunnittelukäytännöistä ja täydentää sitä hyvillä.

Vaihe 1: Konseptointi ja suunnittelu
Tämä vaihe ohitetaan useammin kuin kaksi muuta vaihetta. Useimmat kirjoittajat eivät pidä ääriviivojen luomisesta tutkimuspapereille, eivätkä useimmat verkkosuunnittelijat myöskään pidä vuokaavioiden luomisesta. Älä ole laiska. Jos teet työtä ja suunnittelet verkkosivustosi, web-suunnitteluprosessi sujuu sujuvasti ja vähemmän virheitä matkan varrella.

Tarvitset muutamia asioita, jotta voit luoda ja suunnitella verkkosivustosi tehokkaasti:

• aivot
• kynä ja paperi
• (valinnainen) vuokaavioohjelmisto
• yleinen käsitys verkkosivustosi eri osioista

Aloita tarttumalla kynään ja paperiin tai käynnistämällä suosikki vuokaavioohjelmistosi. Käytämme OmniGraffle Professionaa Mac OS X:lle, joka maksaa 150 $ per lisenssi, mutta on sen arvoista, jos luot verkkosivustoja säännöllisesti. Jos käytät tietokonetta, SmartDraw on loistava ILMAINEN vuokaavioohjelmisto, jota voit käyttää. Kynä ja paperi toimivat kuitenkin hyvin.

Vuokaavioiden luomiseen on monia tapoja. Näytämme sinulle yksinkertaisimman tavan tehdä se ajan ja tämän artikkelin pituuden vuoksi. Jos haluat lisätietoja vuokaavioista, etsi vuokaavioita Googlesta tai Yahoosta.

Tarkastele vuokaaviota, jonka loimme käsitellessämme kromaattisia sivustoja. (1) Vuokaavion yläosassa on verkkosivustomme nimi. (2) Seuraavaksi sisällytämme kaikki verkkosivustomme ensisijaiset osiot: Etusivu, Tietoja ja Palvelut. Nämä osiot ovat verkkosivustosi päänavigointi. Kunkin osion nimet ovat täysin riippuvaisia ​​verkkosivustosi sisällöstä. Yritä käyttää mahdollisimman vähän osioita, jotta vierailijasi eivät hukkuisi navigoidessaan verkkosivustollasi.

(3) Lisää seuraavaksi kaikki toissijaiset sivut (alaosastot), jotka luetellaan jokaisella ensisijaisella sivulla. Kotiin olemme sisällyttäneet ammattimaisen web-suunnittelun, verkkokehityksen ja hakukoneoptimoinnin. Toissijaisen navigoinnin on oltava kuvaavampi kuin ensisijaisen navigoinnin. Mitä syvemmälle verkkosivustojesi navigointihierarkia menee, sitä kuvaavampi kunkin tunnisteen tulee olla.

Dos

• Vähemmän on enemmän; pidä ensisijaisten osien määrä mahdollisimman pienenä. Käytämme verkkosivustollamme 6 osiota, mikä on enemmän kuin tarpeeksi
• Käytätpä sitten kynää ja paperia tai vuokaavioohjelmistoa, pidä asiat mahdollisimman puhtaina ja järjestyksessä. Vaikka sinä (ja kaikki kanssasi työskentelevät) olette ainoita, jotka käyttävät vuokaaviota, siinä on silti oltava järkeä - Ensisijaisissa osioissa tulisi käyttää laajempia termejä, kun taas toissijaisten ja kolmannen asteen termien tulisi olla kuvaavampia.

Lahjoitukset
Vuokaavion luominen on melko suoraviivaista; on kuitenkin muutamia virheitä, jotka voidaan tehdä helposti:

• Älä käytä erittäin kuvaavia termejä ensisijaisessa navigoinnissasi, ellei koko verkkosivustosi keskity yhteen kapeaan aiheeseen - Älä yritä yhdistää useita aiheita samalle sivulle. Luo näille aiheille yleinen osio ja luo siitä alaosastot. Tämä tekee alaosastoista (kuvaavista) verkkosivuista paremmat sijoitukset hakukoneissa (Google, Yahoo, MSN, Ask). Kun olet luonut tiiviin ja kuvaavan vuokaavion, olet valmis siirtymään toiseen vaiheeseen web-suunnitteluprosessista:

Vaihe 2: Mallintaminen
Mallinnusvaiheessa luodaan staattisia "wireframe" -malleja. Jokainen malli kuvastaa jokaisen verkkosivustollesi sisällytettävän web-sivun ulkoasua. Tämä vaihe on tärkeä, koska se antaa meille käsityksen siitä, mihin eri elementit sijoitetaan suunnittelussamme. Jotkut näistä elementeistä ovat:

• logo
• navigointivalikko
• pitoisuus
• kuvia, videoita

Näiden mallien luomiseen voit käyttää kynää ja paperia tai haluamaasi malliohjelmistoa. Aiemmin olemme käyttäneet Photoshopia, mutta viime aikoina olemme käyttäneet OmniGraffle Professionalia. OmniGraffle ei ole niin resurssiintensiivinen kuin Photoshop, ja sen avulla voimme koota rautalankamallimme paljon nopeammin.

Varmista lisäksi, että luomasi vuokaavio(t) on lähellä, sillä sinun on viitattava niihin aika ajoin varmistaaksesi, että pilkkaat kaikkia verkkosivustollasi näkyviä sivuja.

Tässä on esimerkkimme siitä, miltä rautalankamallin pitäisi näyttää. Kuten näet, mukana ei ole värejä tai grafiikkaa. Juuri tällainen rautalankamallin tulee olla – suunnitelmasi luuranko. Tarkoituksena on saada yleinen käsitys siitä, mihin kukin web-sivun elementti sijoitetaan.

Aloitamme yleensä vasemmasta yläkulmasta ja jatkamme alaspäin. Ei ole olemassa mitään erityistä tapaa, jolla rautalankakehyksen pitäisi näyttää. Käytä mielikuvitustasi. Varmista kuitenkin, että kun luot rautakehyksiä, et unohda sisällyttää verkkosivuston tärkeimpiä elementtejä (logo, navigointivalikko, sisällön sijoittelu, kuvat/videosijoittelu).

Jos jotkin sivuistasi käyttävät samaa asettelua, ei ole tarpeen pilkata kaikkia sivuja ylös (vaikka voit varmasti tehdä sen). Muista vain mallintaa mikä tahansa ainutlaatuinen asettelu, joka verkkosivustollasi on. Kiität itseäsi myöhemmin.

Tehtävät

• mallia kaikki ainutlaatuiset sivut
• sisällytä tärkeitä elementtejä (logo, navigointi, sisällön sijoittelu, kuvat/videon sijoittelu) -aloita ylhäältä ja jatka alaspäin - viittaa vaiheessa 1 luotuun vuokaavioosi, jotta et unohda mallintaa sivuja -tallenna, tallenna, tallenna – kuten mitä tahansa tietokoneessa olevaa, tallenna mallisi noin 10 minuutin välein
• keskittyä puhtaisiin, käyttäjäystävällisiin asetteluihin - merkitse elementit, jotta et unohda, mitä ne ovat, kun viittaat niihin vaiheessa 3, toteutus - käytä muita web-sivustoja inspiraationa; ei ole mitään väärää ottaa elementtejä muilta sivustoilta ja tehdä niistä omia (katso "ei")

Dont's

• älä sisällytä grafiikkaa tai värejä (se on seuraavaa vaihetta varten) -älä tee malleistasi liian "kiireitä"; keskittyä puhtaisiin, hyvin järjestettyihin, käyttäjäystävällisiin asetteluihin - älä ohita tätä vaihetta; se on yhtä tärkeä kuin ensimmäinen ja viimeinen - jos otat elementtejä muilta verkkosivustoilta, varmista, että et plagioi; on ero sen välillä, että olet inspiroitunut toisesta verkkosivustosta luomaan tiettyjä elementtejä suunnittelustasi ja repimään niiden ulkoasun ja värit räikeästi

Vaihe 3: Toteutus
Kolmannessa ja viimeisessä vaiheessa, toteutuksessa, vaiheiden 1 ja 2 suunnittelu yhdistetään auttamaan elävän, interaktiivisen verkkosivuston luomisessa.
Kolmas vaihe on ylivoimaisesti aikaintensiivisin, koska sinun tulee 1) luoda grafiikkaa 2) luoda sisältöä ja lopuksi 3) muuntaa web-suunnittelu kuvista koodiksi, jota verkkoselaimet käyttävät esitelläkseen verkkosivustosi maailmalle.

Kun saavut kolmanteen vaiheeseen, sinulla pitäisi olla selkeä käsitys seuraavista:

• kuinka vierailijasi pääsevät paikasta toiseen (vaihe 1, vuokaavio) - kuinka verkkosivusi asetetaan (vaihe 2, rautalankamallit)

Jos sinulla ei ole selkeää käsitystä näistä kahdesta asiasta, palaa ensimmäiseen ja toiseen vaiheeseen ja jatka niiden kehittämistä. Huomaat, että kolmas vaihe on helpoin, kun olet laatinut selkeän, ytimekkään taistelusuunnitelman verkkosivustosi suunnitteluun.

Irrota kynä ja paperi
Vaiheessa 3 sinun on käytettävä Photoshopia tai muuta kuvankäsittelyohjelmaa, koska käytät värejä ja grafiikkaa verkkosivustosi asettelun luomiseen.

Aloitamme yleensä ensin "kotisivun" (hakemiston) luomisen. Käytä vaiheessa 2 luomiasi lankakehyksiä mallina jokaiselle luomillesi sivuille. Kiinteiden laatikoiden sijaan käytä kuitenkin grafiikkaa, värejä ja tekstiä. Jokaisen sivun tulee näyttää täsmälleen siltä, ​​miltä haluat niiden näyttävän Internetissä, koska tämä on suunnitteluprosessin viimeinen vaihe.

Muista sisällyttää navigoinnin tausta (mutta älä itse lisää tekstiä kuvaasi). Kun se muunnetaan CSS:llä (Cascading style sheets), navigoinnin tulee olla tekstin eikä kuvien muodossa. Hakukoneet eivät voi indeksoida kuvia (navigaatiossasi käytettyjä avainsanoja ei indeksoida hakukoneiden tulossivuilla, mikä tarkoittaa, että harvemmat ihmiset voivat löytää verkkosivustosi).

Kun olet tyytyväinen suunnitelmiisi ja tunnet, että ne ovat valmiita laitettaviksi Internetiin, on aika purkaa mallit osiin, jotta voit luoda CSS-pohjaisen ulkoasun. Lisätietoja asettelujen muuntamisesta CSS-muotoon tai verkkosivustosi merkitsemisestä CSS:ssä on osoitteessa w3schools.com. Internetissä katsellemme emme löytäneet kunnollista kuva-CSS-opetusohjelmaa – joten odota sellaista meiltä tulevina viikkoina. Suunnitelmien muuntaminen CSS:ksi on erittäin tärkeää, koska taulukkoasettelut ovat menneisyyttä.

Tässä on esimerkki melkein valmiista verkkosivustosta, jonka ulkoasu me pilkkaamme vaiheessa 2. Tämä otettiin suoraan verkkoselaimestamme, ja kuten näet, siellä on nyt logo, värit, kaunis navigointijärjestelmä, alatunniste, ja mikä tärkeintä, puhdas, järjestetty asettelu.
Vaiheiden 1 ja 2 suunnittelun ansiosta ulkoasumme on hyvin organisoitu ja helppokäyttöinen.

Dos

• viitata vaiheessa 2 luotuihin malleihisi; vaikka on hienoa poiketa alkuperäisestä asettelusta, sinun ei pitäisi tehdä niin
• tee tutkimusta ennen varsinaisen suunnittelun luomista; saada ideoita muilta sivustoilta ja tehdä niistä omia (ilman plagiointia)
• sisällytä värit ja grafiikat verkkosivujesi lopullisen ulkoasun luomiseen -Käytä CSS:ää (Cascading style sheets) muuttaaksesi mallisi kuvista verkkoselaimien ymmärtämäksi merkinnöiksi - viittaa vuokaavioosi vaiheesta 1, kun koodaat sivusi hyperlinkeillä; on parempi käyttää pudotusvalikkoa, joka sisältää kaikki (tai suurimman osan) verkkosivustosi linkeistä jokaisella sivulla; tämä helpottaa navigointia ja tekee myös sivuistasi helpompia indeksoida, kun hakukoneen hämähäkit pysähtyvät; hyvä paikka saada CSS-pudotusvalikot on DynamicDrive.com -viimeistele suunnittelu työskennellessäsi Photoshopissa tai millä tahansa käyttämäsi kuvankäsittelyohjelmistolla; voi olla tuskaa tehdä muutoksia malliin, kun se on muutettu merkinnöiksi (koodiksi)

Lahjoitukset

• älä sisällytä tekstiä navigointivalikoihin muuntaessasi CSS:ksi; kuvatekstin sijaan käytä tavallista tekstiä, jota hakukoneiden robotit voivat lukea
• älä käytä taulukoita muuntaessasi; vaikka sinun pitäisi ostaa kirja CSS:stä, se on sen arvoista; pöydät ovat kuolleet
• älä ohita kahta ensimmäistä vaihetta vain säästääksesi aikaa; verkkosivustosi ON parempi, jos aloitat web-suunnitteluprosessin alusta (eikä sen lopusta)
• älä unohda pakata kuviasi, kun ne leikataan CSS:ää varten; ei ole mitään pahempaa kuin hitaasti latautuva verkkosivusto suurten kuvatiedostojen vuoksi; Photoshopissa on "Save Optimized For Web" -vaihtoehto (CS3 - "Save for Web and Devices")

Prosessi tekee täydellisen
Noudattamalla tässä artikkelissa kuvatun kaltaista web-suunnitteluprosessia lisäät mahdollisuuksia luoda verkkosivusto, joka on hyvin järjestetty, helposti navigoitava ja erittäin käyttäjäystävällinen. Katsotaanpa suoraan – jos vierailijat eksyvät tai hämmentyvät yrittäessään selata verkkosivustoasi, he saattavat painaa Takaisin-painiketta ja etsiä käyttäjäystävällisemmän verkkosivuston. Ihmiset eivät halua ajatella, kun se tulee löytääkseen tiensä verkkosivustoilla. Älä pakota heitä ajattelemaan. Teet ajattelun suunnittelemalla verkkosivustosi vaiheesta 1 vaiheeseen 3 ja huomaat, että useammat ihmiset nauttivat verkkosivustostasi.