7 lihtsa kujunduse loomise reeglid
Hoidke see lihtne, loll. See kontseptsioon pärineb 1960. aastast, kui USA merevägi rakendas KISS-i põhimõtet, mille kohaselt töötab enamik süsteeme kõige paremini, kui need on lihtsad, mitte keerulised. Sama kehtib ka peaaegu kõigi disainiprojektide kohta.
Enamik graafilisi disainereid õpib KISS-i tundma juba karjääri alguses. Kuidas saate seda teha? Lihtsa kujunduse loomine on natuke keerulisem, kui võite arvata. Siin on seitse reeglit, mille järgi peaksite kujundama ja mis aitavad teil kõigist segadustest lahti saada ja luua ilusti lihtsa konto.
Tutvuge disainiressurssidega
1. Seadke üks eesmärk lehele
Lihtsa kujunduse algus algab projekti eesmärgi ja konkreetsete eesmärkidega iga veebisaidi lehe jaoks. Iga leht peaks suunama kasutajad ühe toiminguni, välja arvatud navigeerimine ja jalus.
See võib hõlmata linki klõpsamist, vormi sisestamist, video vaatamist või mängu mängimist. Kuid igal lehel tuleks keskenduda ühe kasutaja tegevusele või konversioonile.
Liiga palju asju võib kasutajaid ülekoormada. Nad võivad unustada, millised toimingud tuleks lõpule viia, ja nad võivad teha vähem soovitava valiku. Planeerige kujundus nii, et iga leht viib kasutajad ühe eesmärgini. Iga käsitsetav nupp kerimise kohal ja samal lehel kerimise all peaks tegema sama. See järjepidevus aitab kasutajatel mõista, miks nad teie saidil asuvad ja mida nad peaksid tegema; nende valikute lihtsus muudab disaini lihtsaks ja kaasahaaravaks.
2. Pidage kinni kahte tüüpi peredest
Projekteerimisjuhiseid on nii palju, et soovitatakse projekti jaoks kolme kirjatüüpi. Kahe kindla tüübi perekonnaga saate seda veelgi sujuvamaks muuta.
Otsige tüüpperekonda, mis sisaldab mitut raskust ja millel on palju kontrasti tavalise ja rasvase või musta valiku vahel. Veelgi elegantsi saamiseks valige kuvarivalik, mis sisaldab mõnda alternatiivset tähemärki, mida saate kasutada ülisuurtes pealkirjades.
Seejärel peate vaid segama ja sobitama korpuse ja kuvari kirjatüüpi, et saada suurepäraseid kombinatsioone tähtkujude jaoks kogu kujunduse jaoks. Kasutage kahte tüüpi perekondi just nii, nagu teeksite siis, kui valisite teatud kaalude või stiilide jaoks konkreetse valikuga rohkem võimalusi.
Leiate, et see aitab teil luua kergesti loetava ja hõlpsasti kasutatava tüpograafiapaleti, mida on lihtne hallata ja millel on visuaalne järjepidevus.
3. Kasutage järjepidevat joondamist
Vasakul, keskel või isegi paremal - ükskõik milline joondamine teile meeldib, pidage seda kogu kujunduse juures kinni. See hõlmab sarnaste üksuste, näiteks tekstikastide ja elementide, mis pole sarnased, kuid sobivad rühmitamiseks, joondamist.
Kohanemisvõimeline teeb selle ära suurepärase töö kodulehe liuguril oleva tekstiga. Hoolimata tekstist, mille pildil on erinev arv numbreid, joondub iga pealkiri tegevusele kutsuva nupuga. Elementide vaheline kaugus on samuti ühtlane.
Veelgi enam, see järjepidev joondamine toimub kerimisel koos teiste pealkirjade ja CTA paaridega.
Joondamine vastab liuguri voolule, mis liigub ka üksteist täiendavas suunas. Vasak- ja keskjoondus on tekstielementide puhul kõige tavalisemad valikud, kuna need on kõige loetavamad. Pikema teksti korral on eelistatud valik vasakpoolne joondamine.
4. Kehtestage hierarhia
Kasutajad ei peaks mõtlema, mida vaadata või kuidas disainilahendusel liikuda. Isegi kõige lihtsamatel visuaalsetel kompositsioonidel peaks olema selge hierarhia.
See algab domineeriva visuaaliga. See võib olla pildi, video või teksti kuva või midagi muud, mis jätab esmamulje.
Siis peaks olema mingi tekst, mis ütleb kasutajale, mida disain ja veebisait üritavad suhelda. Tavaliselt on see lihtsa pealkirja vormis, mis töötab domineeriva visuaaliga.
Kolmas on teisejärguline teksti- või toimingutükk, mille kasutajad saavad lõpule viia. Viimane visuaalne element on navigeerimismenüü. Kasutajad loodavad leida kõik need elemendid ja silm on koolitatud liikuma elementide vahel põhimõtteliselt selles järjekorras. Sel viisil kujundades tehke see neile lihtsaks.
5. Andke elementidele palju ruumi
Kui te seda praegu ei tea, pühendage see mällu: Valge ruum on teie sõber.
Andke kujunduse igale elemendile palju ruumi. Ruum aitab juhtida tähelepanu üksikutele elementidele, võtab "ruumi", nii et teil pole kiusatust lõuendit risustada ja aidata luua üldine fookus.
Ruumi hästi kasutamise trikk on järjepidevus. Seadke reeglid ruumi suuruse kohta, mis ümbritseb üksikuid elemente või mahub tekstiridade vahele. Kui kujundus osutub liiga viljakaks, peate võib-olla pisut vaeva nägema. Teate, et vahekaugus on õige, kui avate kujunduse värskena ja lähete otse kohtadesse, mida kasutajad kõigepealt näevad. (Kas te pole kindel, mis need on? Minge tagasi punkti 4 juurde - Hierarhia kehtestamine.)
6. Amp Up Contrast
Suure kontrastsusega kujunduselemendid - alates värvivalikust kuni elementide suuruseni - võivad anda projektile just vajaliku visuaalse peensuse, isegi kõige väiksemates raamides.
Trendika valiku jaoks proovige kasutaja tähelepanu köitmiseks erksat kontrastset värvipaletti. Paksud värvid muudavad lihtsa kujunduse keerukamaks ja huvitavamaks kui mustvalge variant. Kontrastset värvi saab maksimaalselt kasutada värvirulli vastaskülgedest koosnevate ja sarnaste küllastusega toonide korral. Kui see valik on teie meelest liiga palju, proovige teisi värviratastel põhinevaid paare. (Võite leida isegi ootamatu uue lemmiku, näiteks ülaltoodud lilla ja sinise kombinatsioon.)
7. Kasutage järjepidevaid ikoone ja elemente
Järjepidevus disainis on tapjakujunduse üks paremini (ja halvimaid) saladusi. See on üks neist asjadest, mis unustatakse liiga sageli, kuna disainiprojektid on täis mitut nuppu või sotsiaalmeedia ikoone, mis lihtsalt ei ühti ülejäänud veebisaidi ikonograafiaga.
Kasutajaliidese elemendid ei tohiks olla järelmõtted.
Oluline on luua ikoon ja kasutajaliidese elementide komplekt ning reeglid ja kasutada neid kogu projekti vältel samal viisil. (Võite isegi osta või alla laadida ikooni fondi või kasutajaliidese elementide komplekti, kui te ei soovi neid nullist luua.)
Valige elementide jaoks värv, kasutage iga hõljumistoimingut või efekti (üks klõpsatavate elementide ja teine mitteelementide jaoks) ja suuruselemendid vastavalt kasutusele. (Pisut graafilisemate elementide jaoks on aktsepteeritav nii ikooni suurus kui ka ülisuur valik.)
Praticca müügiautomaadid kasutavad ülemääraseid ikoone näiteks kasutajate näitamiseks, kuna seal on rohkem teavet. + Asub värvilise ikooni sees. Kõik kolm ikooni on värvilt identsed. Nad kõik teevad hõljumisega sama asja ja kõik kasutaja klõpsamisel toimivad samamoodi. Sama ikooni kasutatakse kogu saidil väiksemaks, et käivitada uus sisupakett ja aidata kasutajatel koopiat skannida.
Järeldus
Lihtne kujundus ei pea olema täiesti minimaalne või selles ei tohiks olla lõbusaid elemente ega kasutajaliidese nippe. Lihtne disain on väga kasutatav ja intuitiivne, võimaldades kasutajatel suhelda ilma küsimuste või keerukate juhisteta.
Ehkki on olemas koht keerukamate veebisaitide jaoks või kasutajate vaheliseks suhtlemiseks, saab KISS-lähenemisviisist kasu olla enamikul veebisaitide kujundamisel. Ärge seda üle mõelge ja kasutajad ei pea seda kumbagi tegema.