10 veebidisaini käsku iga projekti jaoks
Kas teil on veebisaidi kujundamisel reegleid? Mõned reeglid kehtivad peaaegu iga veebidisaini projekti puhul - nimetagem neid veebidisaini käskudeks.
Pole tähtis, kui suur või väike veebisait on, need reeglid on hea disaini aluseks. Kui järgite neid põhijuhiseid ja muudate need iga oma alustatava projekti jaoks oma mõtteks, väldite paljusid riske, kuhu disainerid võivad takerduda!
1. Sa pead olema järjekindel
Tehke kujundus kasutajatele võimalikult hõlpsaks suhtlemiseks Järjepidevat disaini on lihtne kasutada ja disainist aru saada. Kasutajate kaasamised ja toimingud, aga ka visuaalid, peaksid oma kujunduse välimuse ja kasutamise osas olema sarnased.
See tähendab, et nupud on sama värvi ja kasutavad sama hõljumisolekut, et aidata kasutajatel suhelda, pealkirjad on sama suurusega ja kogu kujunduses sama kirjatüüp ning elemendid, näiteks värvid, järgivad tuvastatavat ja seostatavat paletti bränd.
Ka muud visuaalsed elemendid peaksid järgima ühtlast stiili, samuti elementide, näiteks ikoonide või fotograafia, video või illustratsioonide, stiili ja kasutuskava. Kujundusel peaks olema üldise esteetikaga koopiaplokkide jaoks kasutatav hääl.
Kõik need järjepidevuse elemendid aitavad kaasa üldisele kasutatavusele, muutes kujunduse kasutajatega suhtlemiseks võimalikult lihtsaks.
2. Kasutage tühikut
Lisaruum elementide ümber võib aidata eraldada ja muuta need hõlpsamaks. Iga elementi pole vaja kerimise kohal kosmosesse laduda. Kasutage tühikut, et määrata rütm ja voog, luua visuaalne hierarhia ja aidata kasutajatel liikuda kujunduse kaudu.
Kui sisu on hea, keritakse neid.
Ja tühik võib tegelikult aidata kasutajal seda tegevust ergutada, tõmmates silma ekraanilt alla.
Valge ruum on veelgi olulisem, kuna ekraanisuurused muutuvad väiksemaks. Lisaruum elementide ümber võib aidata eraldada ja muuta need hõlpsamaks. (Mõelge, kui kasulik võiks olla väike lisaruum nuppude hõlpsaks koputamiseks.)
Kas pole kindel, kuhu lisada tühiku kujundus? Alusta siit:
- Nuppude või muude interaktiivsete elementide ümber
- Tüüpiliste ridade reavahena lugemise hõlbustamiseks
- Elementide vahel, nii et tekstid on itta, et eristada neid, näiteks tekstiplokkidesse manustatud fotode mähkimine
- Vormi väljadel, nii et neid on mobiiliekraanidel lihtne puudutada
- Umbes mis tahes element, millele soovite, et kasutajad keskenduksid
3. Sa pead kasutama võrku
Võrk on kasutajakogemuse alus. Võrgustiku kujundamisel on lõplik veebisait täpsem, järjepidevam ja elemendid paigutatakse visuaalset mõistmist omavasse järjekorda.
Ruudustik on nii horisontaalne kui ka vertikaalne, ehkki kõige tuntum veebidisaini ruudustik võib olla elementide joondamiseks veergude vertikaalne 12-ruutvõrk.
Ruudustik on midagi, mida näete ainult projekteerimisprotsessis ja kui teil on raskusi elementide paigutuste otsimisega või korraldatud kontuuri loomisega, võib võrk olla täielik elupäästja.
4. Sa ei tohi unustada kasutajamustrit
Kasutajad teevad asju teatud viisil ja ootavad teie disainilt konkreetseid asju. Võimalikult suure edu saavutamiseks peaks kujundus kasutama üldtunnustatud kasutajamudeleid (korduvad lahendused disainiprobleemidele), et inimesed teaksid täpselt, kuidas disain funktsioneerib.
Tavaliste kasutajamustrite hulka kuuluvad:
- Teabe järjekord vormides, alustades nimest või e-postist ja lõpetades „esitama”
- Navigeerimismenüüde paigutamine
- Poodide ostukorvi ikooni asukoht ja klõpsatav olemus
- Kuidas teavitused toimivad?
- Muu hulgas otsingu ja vestluse ikoonid
UI kujundusmustrites on pikk nimekiri kasutajamustritest igat tüüpi kujundusolukordade jaoks.
5. Kasutage kasutajaliidese toimingutes sarnasust
Iga veebisaidi kujunduse element peaks toimima nagu iga teine sama tüüpi element. Nendel elementidel peaks olema ka visuaalne identiteet, et kasutajad teaksid lühidalt, mis nad on ja mida nad teevad.
Kasutajaliidese toiminguid on nii palju, et neid saaks konstruktsiooni sisse ehitada, et Gestaltti sarnasuse põhimõtte järgimine on kohustuslik. Visuaalsete elementide ja toimingute rühmitamine visuaalselt tuvastatavaks aitab luua kasutajatele parema üldise kogemuse.
6. Kasutage tüpograafiat hästi
Astuge disainilahendusest tagasi ja vaadake, kas kirju on eemalt lihtne lugeda. Te ei pea olema meisterkirjutaja, kuid see aitab kindlasti.
Nii palju sellest, mis moodustab hea disainilahenduse, juured on loetavus ja loetavus. Ja need mõisted sõltuvad sellest, kuidas kirjatüüpe valida ja kasutada.
Kui kahtlete, valige lihtsad kirjatüüpide paarid, näiteks serif ja sans serif. Astuge disainilahendusest tagasi ja vaadake, kas kirju on eemalt lihtne lugeda. Seejärel vaadake väikesel lõuendil, näiteks telefoniekraanil olevaid kirju, et ka seal oleks seda hõlpsalt loetav.
Proovige kasutada tüüpi kontrastses keskkonnas, näiteks heledat tüüpi tumedal taustal või tumedat tüüpi heledal taustal, et iga sõna oleks hõlpsasti loetav.
7. Te ei tohi unustada võrkkesta ekraane
Isegi väikseimad ekraanid suudavad rentida elemente ja pilte peaaegu täpsete pikslitega.
Peate kaaluma, kuidas käsitlete pilte, ikoone ja muid elemente, nii et kõik kuvataks ilusti, olenemata ekraani suurusest. Võimaluse korral võib ideaalseks lahenduseks olla vektorvormingu kasutamine, mis on üks põhjus, miks SVG populaarsus kasvab kogu aeg.
Kui teil pole pilti, mille eraldusvõime vastaks tavalistele ekraanisuurustele, siis ärge seda kasutage. Ükski pilt pole üldse parem kui halb või pikslitega pilt.
8. Sa pead olema aus
Teie kujundus peaks olema tõeline teie väikeettevõtte, teabe või kaubamärgi jaoks ja läbipaistev selles, mida teete. Ärge varastage kujundust või pilti, ärge lisage liikluse suurendamiseks valede märksõnadega asju ja olge truuduses sellele, kes ja mida teie sisu puudutab.
Nii palju veebi segadusi, kasutajad tahavad suhelda autentsed kujundused. Kasutajate petmine midagi tegema või toote või teenuse kasutajaks registreerumine või lihtsalt teema või teabe eksitamine peaks olema vastuolus teie isikliku eetikakoodeksiga. Ärge võtke ette projekte, mis eeldavad seda kujundusest.
9. Te ei tohi juurdepääsetavust eirata
Veeb peaks olema kasutatav võimalikult paljudele inimestele. Ja kuigi disaini juurdepääsetavuse tagamine võib tunduda keeruline, pole see siiski nii keeruline, kui võite arvata.
Google'il on suurepärane juhend veebisaitide juurdepääsetavuse kohta, mida ta määratleb järgmiselt:
Laias laastus tähendab see, et kui me ütleme, et sait on juurdepääsetav, siis peame selle sisu kättesaadavaks ja selle funktsioone saab kasutada sõna otseses mõttes igaüks. Arendajatena on lihtne eeldada, et kõik kasutajad näevad ja kasutavad klaviatuuri, hiirt või puutetundlikku ekraani ning saavad teie lehe sisuga suhelda samamoodi nagu teie. See võib viia kogemuseni, mis sobib mõnele inimesele hästi, kuid tekitab probleeme, mis ulatuvad lihtsatest tüütustest kuni teiste jaoks show-stopperiteni.
Juurdepääsetavus viitab siis nende kasutajate kogemustele, kes võivad olla väljaspool „tüüpilise” kasutaja kitsamat ringi ja kes võivad asjadele juurde pääseda või nendega suhelda teistmoodi, kui võite oodata. Täpsemalt puudutab see kasutajaid, kellel on teatud tüüpi puue või puue - ja pidage meeles, et see kogemus võib olla mittefüüsiline või ajutine.
Paljud hea disaini põhimõtted, nagu suurus, kontrast ja ruum, aitavad kaasa üldisele juurdepääsetavusele.
WebAIMil on kontroll-leht ja muud tööriistad, mis aitavad teil kindlaks teha, kas teie kujundus on juurdepääsetav. Kontrollnimekiri hõlmab ligipääsetavuse osas nelja valdkonda: Kas konstruktsioon on tajutav, kasutatav, arusaadav ja vastupidav?
10. Sa pead olema reageeriv
See peaks 2018. aastal üsna palju ütlema, kuid teie veebisait peab olema reageeriv. See hõlmab kõiki elemente, tekstist piltide ja nuppude vahel, kuni üldise raamistikuni.
Iga disain peab töötama igas seadmes. Periood.
Järeldus
Kindel reeglistik aitab teil kiiremini disainiprojekti sattuda ja järjepidevamalt töötada. Pange tähele, et ükski neist käskudest ei ütle teile, kuidas projekt peaks välja nägema; nende juured on teoorias, kuidas saate iga veebisaidi visandada ja luua.
Kas teil on täiendavaid veebikujunduseeskirju nende käskude lisamiseks? Andke meile teada, mis need on sotsiaalmeedias. Lihtsalt märkige Design Shack!
