10 Web-suunnitteluelementtejä, joita ei pidä unohtaa
Web-sivustojen suunnittelussa ja rakentamisessa se ei näytä tapahtuvan riittävän nopeasti.
Tämän nopean tahdon vuoksi monia pieniä yksityiskohtia, jotka lopulta edellyttävät verkkosivuston rakentamista, jäävät usein pois suunnitteluprosessista. Vaikka nämä yksityiskohdat saattavat olla vähäisiä, ne ovat mitä verkkosivuilla on mukava ja todella mahtava.
Nämä yksityiskohdat ovat usein helppoja jättää huomiotta, koska ne eivät aja sivuston yleistä ulkoasua. Ongelmana on, että kehitystiimisi toimii suunnittelun kautta, se joutuu suunnittelemaan ja luomaan nämä elementit sinulle joka tapauksessa.
Voit säätää tuotannon niin, että kehittäjillä on aikaa palauttaa nämä varat sinulle, mutta miksi ei vain saada kaikki valmiiksi edessä, jotta prosessi on niin paljon puhtaampaa?
Vielä pahempaa, kehitystiimi voi päätyä eteenpäin ja luoda varat vain niillä.
Vaikka monet kehittäjät ovat kiinnostuneita suunnittelusta, lopulta kyseiselle elementille suunniteltava luova käyttäjä, joka on vastuussa verkkosivuston suunnittelusta. Suunnittelu etukäteen hienovaraisimmista vivahteista voi vaikuttaa merkittävästi lopputuotteen laatuun.
Jokainen tässä artikkelissa käsitelty elementti perustuu kysymykseen, jonka mukaan kehittäjä kysyy suunnittelulta, jos elementti puuttuu suunnittelusta.
Karkaamme 10 tärkeintä elementtiä, kun pidät mielessäsi, kun puhdistat verkkosivustosi.
1. Linkit
Vaikka linkin eri tilojen muotoilu on todellakin varsin yksinkertaista, saatat yllättyä siitä, kuinka usein kaikki ylimääräiset yksityiskohdat jätetään huomiotta. Sisällytä seuraavat tilat sivun kaikkiin linkkeihin:
- normaali
Tämä on linkin oletustila; toisin sanoen sitä, jota ei ole liukuva tai napsautettu tai osoitettu URL-osoitteeseen, jonka käyttäjä on jo käynyt. Tämä on linkkimuoto, jonka suurin osa suunnittelijoista kattaa aina. - Käyty
Tämä on linkki, jota ei ole liikkunut yli tai napsautettu, mutta jonka kohde on käynyt käyttäjältä. - aktiivinen
Aktiivinen linkki on sellainen, jota käyttäjä napsauttaa. Useimmat kehittäjät jäljittävät lepotilaa tässä tilanteessa, jos heille ei anneta tyyliä. - häilyä
Lopuksi hover-tila on, mitä linkki näyttää, kun käyttäjä liikuttaa sitä. Tämä ja normaalit tilat ovat niitä, jotka suunnittelijat valmistautuvat.
Yksi yksityiskohti, jota usein unohdetaan, on se, että nämä eri valtiot on suunniteltava kaikille verkkosivujen alueille. Esimerkiksi monilla verkkosivustoilla on tumma ruumiin kopio vaaleasta taustasta, mutta kontrasti on päinvastainen alatunnisteessa. Sinun on suunniteltava kaikki sivun koko yhteyksien eri kontekstit.
Päällä Full Moon BBQ Esimerkiksi, näemme peruspunainen linkit sisältöalueella ja alapuoliset valkoiset linkit alatunnisteessa alla. Jälleen pieni yksityiskohta, mutta tärkeä kuitenkin.
2. Lomakkeet
Monien suunnittelijoiden muodot ovat kriittisiä ja mahdottomia jättää huomiotta. Silti monet muut näyttävät tulevan kaukaisiksi myöhemmäksi.
Viimeksi mainitun asenteen ongelma on se, että lomakkeet ovat usein ainoa todellinen tapa muuntaa kävijöitä asiakkaiksi. Ja ilman asianmukaista suunnittelua ja muotoilua, näiden lomakkeiden käytettävyys saattaisi pudota tasan, mikä heikensi verkkosivuston ainoaa muuntokohtaa. Näiden elementtien valmistelu on välttämätöntä, vaikka ne näyttäisivät asiakkailta paljon vähemmän painavia kuin väri, brändäys ja kuvat.
Kaksi tärkeintä näkökohtaa lomakkeen laatimisessa ovat:
- Lomakkeen etiketti
Lomakkeet keräävät tyypillisesti henkilötietoja, joita käyttäjät eivät halua antaa. Sellaisena on viisasta ilmoittaa käyttäjille täsmällisen lomakkeen tarkoituksesta. - Syöttökentät ja tarrat
Toiseksi suunnitelkaa, miten lomakkeen syöttökentät asetetaan sivulle ja miten näiden kenttien tarrat muotoillaan ja suuntautuvat kenttiin nähden.
Kun ne jätetään oletusarvoihin, lomakkeet voivat näyttää hankalalta. Mutta asianmukaisella valmistelulla verkkosivusto näyttää saumattomalta ja on paljon tehokkaampaa. Katsotaanpa hyvä esimerkki, joka on pitänyt aloittaa hyvällä suunnittelulla:
Tämä liiketoimintakriittinen muoto on Mahtava oli selvästi harkittu. Koko sivun tehtävä ja tarkoitus on tarkasteltu huolellisesti. Otsikoista ja johdanto-osasta kunkin kentän sarjan, niiden etikettien ja hallintatyyppien, tämä lomake on malli suunnittelua.
Suunnittelu muodoissa johtaa meitä useisiin muihin näkökohtiin ...
3. Painikkeiden käyttäytyminen
Painikkeita voidaan käyttää eri puolilla verkkosivustoa eri tarkoituksiin, mutta ne näyttävät usein laiminlyödästi, samoin kuin painikkeen eri tilat. Painikkeen neljä tilaa ovat:
- oletusarvo
Tämä on painikkeen oletustila, joka odottaa napsauttamista. Suurin osa suunnittelijoista kattaa tämän, mutta kaipaa muita. - häilyä
Hover-tila näkyy, kun käyttäjä liikuttaa näppäintä. Tämä tila on hyödyllinen ilmaista käyttäjälle, että painike on toimiva kohde. - Klikkaus
Kun käyttäjä napsauttaa painiketta, tämä tila näyttää heille, että he napsahtavat sitä. Tämän visuaalisen vihjeen tarjoaminen voi auttaa minimoimaan käyttäjien turhautumisen. - Liikuntarajoitteinen
Painikkeen käytöstä poistettu tila on ehkä vähiten käytetty, mutta voi olla erittäin hyödyllinen kehittäjille. Harvoin tämä tila on suunniteltu, ellei suunnittelija ole laatinut lomakkeen validointiprosessia (katso seuraava osio).
Paljon samoja kuin linkkien erilaiset tilat kannattaa ottaa huomioon eri verkkosivustosi painikkeiden eri tilat. Ponnahdusikkunan sisäänkirjautumissuunnitelmista hakukenttiin uutiskirjeen kirjautumislomakkeiksi, kaikki nämä painikkeet tarvitsevat vastaavia tyylejä.
4. Lomakkeen validointi
Tärkeä asiaan liittyvä yksityiskohta on lomakkeiden validointi. Tämä on kriittinen kohta, jossa verkkosivusto tiedottaa käyttäjävaatimuksista ja virheistä lomakkeessa. On tarkasteltava kolmea keskeistä asiaa:
- Pakolliset kentät
Kaikki vaaditut kentät on ilmoitettava. Useimmiten tämä tehdään tähdellä, kuten nähdään Aloita alusta alkaen :
- Reaaliaikainen validointi
Joitakin validointia voidaan tehdä reaaliajassa, kun käyttäjä täyttää lomakkeen. Tällainen validointi ilmoittaa käyttäjälle mahdollisimman nopeasti mahdollisista tiedoista, joita he ovat syöttäneet. Tämä voidaan saavuttaa erittäin hyvin tämän kanssa jQuery-validointi-laajennus :
- Palautuksen vahvistus
Tällainen validointi tapahtuu sen jälkeen, kun käyttäjä on toimittanut lomakkeen. Tosiaikaiseen validointiin käytetty tyyli toistetaan usein täällä, mutta toinen vaihtoehto on ryhmittää kaikki virheet yhteen viestiin, kuten ammuminen :
5. Tilaviestit: virheet, varoitukset, vahvistukset jne.
Käyttäjät tarvitsevat yleensä jonkinlaista palautetta sen jälkeen, kun olet tehnyt sivustosi toimintaa. Todennäköisin skenaario on lomakkeen lähettämisen jälkeen, mutta myös monia muita tapahtumia voi esiintyä. Tarkastele huolellisesti verkkosivustoasi ja toimia, joita käyttäjät voivat ottaa ja suunnitella viestit, jotka sivuston on toimitettava.
Päällä Elämä tänään , näemme validointiviestin, joka voisi helposti toimia virheilmoitusten globaalina tyyliinä. Ja hieman väriä ja kuvakkeita muutettaessa, sitä voitaisiin käyttää myös hienovaraisempaan varoitus- tai jopa vahvistusviesteihin:
6. Taustan laajentaminen suuremmille näytöille
Sivuston tyylistä riippuen taustaelementit saattavat olla hankaloitsija kehittäjille. Useimmat taustat ovat yksinkertaisia eivätkä vaadi paljon valmistelua, mutta jotkut ovat monimutkaisia kaltevuuksilla, kuvioilla ja kuvilla.
Koska suuret näytöt ovat yhä yleisempiä ja että useimmat mallit suunnitellaan 960 pikselin laajuiselle perusviivalle, runsaasti näytön kiinteistöjä jätetään avoimeksi. Jos taustasi sisältää jotain etäisyydeltä, sinun on suunniteltava, miten se laajenee täyttämään suuret näytöt.
Esimerkissä, jonka aloin rakentaa, minun täytyi mukautua puun rakenteeseen, joka ulottui kaikkiin suuntiin. Ei sellaista asiaa kuin haluat raskasta käsittelevää kehittäjää.
7. Base HTML -elementit
Kopio-raskas-sivustoille perus-HTML-elementtien suunnittelu ja muotoilu ovat perustavia, eikä niitä pidä unohtaa. Mutta monissa markkinointiin suuntautuneissa verkkosivustoissa, joissa on kiireinen asettelu ja erillinen visuaalinen tyyli, peruselementit unohdetaan. Ja tietenkin, kehittäjä ei koskaan pääse kovin paljon luomaan verkkosivustoa ennen kuin tarvitsee tuottaa tavallista sivumallia joka tapauksessa.
Tässä ovat peruselementit aina suunnitella: kappaleet, otsikot 1-6, järjestämättömät ja tilatut luettelot, taulukkolomakkeet, lomakekentät, kuvat ja lihavoitu ja kursivoitu teksti.
Monilla verkkosivustoilla työskentelen, laatinut tyyliohjeen kehittäjien auttamiseksi, jotain tällaista:
8. Verkkosivuston sähköpostit
Yksi asia, en näe mitään suunnittelija suunnitelma on verkkosivuilla luotu sähköposteja. Tällainen peruselementti on helppo jättää huomiotta, koska se ei yleensä ole verkkosivuston ydinpainopiste. Sähköposti on kuitenkin tehokas työkalu, joka voi edistää ja laajentaa palvelua.
Ehdotukseni on tarkastella tarkasti verkkosivuston sisältöä suunnitteluvaiheessa etsimään mahdollisesti lähetettyjä sähköposteja. Jotkut yleisimmistä ovat:
- Postituslistan vahvistus,
- Rekisteröinti vahvistus,
- Lomakkeen täyttö vahvistus (kuten yhteydenottolomakkeen),
- Tilaa tilaus ostoksen jälkeen.
Jos todella haluat puhaltaa asiakkaidesi ja kehittäjien mielestä, valmistakaa verkkosivustolle myös sähköposti markkinointimalli. Voit antaa käyttäjille saumattoman siirtymisen verkkosivustosta postilaatikkoon, ja sinä ylläpidät huolellisesti brändiä sen eri muodoissa.
9. Sivun venytys
Kysymys siitä, miten muotoilu ulottuu muuttuvan sisällön mukauttamiseksi, käsitellään harvoin, mutta se voi olla ratkaiseva, riippuen sivuston tyylistä. Katsotaanpa esimerkkiä, jossa tämä olisi voinut olla sekaisin:
Full Moon BBQ on tiukka kotisivu. Tämä rakenne ei salli paljon liikkumista tai sisällön muutosta. Kaikilla on erityinen koko ja sijoittelu. Joten mitä tapahtuu, jos omistajat päättävät todella pidentää tervetuliaisviestiä tai lisätä kuvaa? Onneksi he ovat suunnitelleet tämän. Kuten näet tässä mallissa, olen muokannut sivua kaksinkertaiseksi. Sivut ulottuvat täydellisesti ja niihin sopii:
Vaihtoehtoisten versioiden valmistaminen ulkoasusta, jossa on paljon enemmän sisältöä, voi olla äärimmäisen hyödyllinen osoittamaan tällaisen skenaarion suunnittelua.
10. Animaatiot: ponnahdusikkunat, työkaluvinkkejä, siirtymiä jne.
Tavallisissa HTML- ja CSS-verkkosivuilla (ts. Ilman Flashia) animaatiot ja siirtymät ovat niin helppoa unohtaa. Ja kun unohdetaan, heitä ei usein edes mahdu lainkaan. Joten jos animaatiot ovat kriittisiä, paras panos on antaa kehittäjille esimerkki siitä, miten heidän pitäisi toimia niin, että tuote toimii niin kuin pitäisi.
Jotkut tavallisimmista paikoista animaatioista ovat:
- työkaluvinkit
Ne pienet ponnahdusikkunat, kun käyttäjät hiirtävät elementtejä. - Kuvan kääntäjät
Kotisivun kuvaesitykset ovat raivoa ja siirtymisiin ja tyyleihin on tarjolla monenlaisia vaihtoehtoja. - Lightbox
Voit muotoilla paitsi itse lightboxia myös siirtymistä siihen.
Jokainen näistä animoiduista elementeistä on erillinen visuaalinen tyyli, joka on omaksuttava omalla tavallaan.
Miksi minun pitäisi välittää?
Monet tässä esitetyt elementit näyttävät hyödyllisiltä kehittäjille kuin suunnittelijoille. Ollut oikeudenmukaiset, tämä on osittain totta: jos valmistat kaikkia näitä elementtejä aika ajoin, kehittäjät rakastavat sinua. Nämä ovat sellaisia asioita, joita kehittäjät kyllästyvät pyytämään tai joutumasta selvittämään itsensä.
Edelleen, tekemällä kaiken tämän työn etukäteen, pidät kehittäjät arvaamasta, ja näin ylläpidät suunnittelun hallintaa. Ja ylläpitämällä suunnittelun hallintaa, sinulla on paljon suurempi mahdollisuus lisätä sellaista kiillotusta, joka muuttaa tavallisen verkkosivuston erinomaiseksi. Jotkut suunnittelijat viittaavat tähän salaiseen kastikkeeseen, joka tekee malleista laulavan.
Ja jos tämä ei ole tarpeeksi motivaatiota, harkitse tätä. Suunnittelijat, jotka suunnittelevat tätä hyvin ja toimittavat täydellisen paketin, ovat vain olennaisesti arvokkaampia. Ne eivät ainoastaan luo korkealaatuisempaa tuotetta, vaan ne vähentävät myös tuotantokustannuksia. Tämä tarkoittaa sitä, että voittoa on enemmän, mikä luonnollisesti tekee kaikille onnellisia.
Joten pitäkää kaikki nämä hienommat yksityiskohdat mielessä ja pidä hauskaa suunnitellessasi verkkosivustoasi. Suoraan sanottuna nämä yksityiskohdat ovat puoli hauskaa suunnitella verkkoa varten, jatkuvasti muuttuva väline, joka sopii käyttäjän vuorovaikutukseen ja sisällön muuttamiseen.
Patrick McNeil on freelance-kirjailija, kehittäjä ja suunnittelija. Erityisesti hän rakastaa kirjoittaa web-suunnittelusta, kouluttaa ihmisiä web-kehitykseen ja rakentaa verkkosivustoja. Patrickin uusin kirjaprojekti on Suunnittimen verkkokäsikirja ; se sisältää monia muita aiheita tämän artikkelin mukaisesti. Saat lisätietoja siitä TheWebDesignersIdeaBook.com . Seuraa Patrickia Twitterissä @designmeltdown .
Mitä suunnittelette, että kaikki muut näyttävät unohtavan? Oletko koskaan esittänyt tällaisia ekstroja asiakkaillesi? Millaisia asioita löydät kehittäjät aina pyytää sinua lisäämään suunnitteluun?