9 olulist näpunäidet DIY-algajatele

Veebikujunduse põhiprintsiibid & parimad tavad, mis aitavad mis tahes taseme algajatel professionaalset visuaalselt kujundada & iseenesest klanitud välimusega veebisait.


Veebikujunduse näpunäited algajatele

Nendel päevadel on kõigil võimalik olla veebidisainer. Jah, see on julge avaldus – kuid suurema juurdepääsuga avatud lähtekoodiga disaini tarkvarale nagu näiteks Gimp, ja DIY saidiehitusplatvormidega, nagu Wix ja Weebly, mis ujutavad turu üle, on joon vahel amatöör ja heauskselt veebi disainer on hiljaaegu muutunud palju õhemaks ja ohtlikumaks. Loovuse juures on huvitav see, et keegi ei saa sinu eest otsustada, millal sa oled “valmis” teatud rolli täitma. Paljud rokkstaarid ei võtnud kunagi muusikatunde; paljud edukad kunstnikud ei õppinud kunagi inimese anatoomiat; ning enamus sealsetest veebidisaineritest ei oma ametlikku kraadi. Niisiis, kui olete loonud oma ettevõtte veebisaidi, kas siis võite kindlalt öelda, et olete veebidisainer? See on teie enda otsustada.

Kõigil on võimalik olla veebidisainer DIY saidi loomise platvormidega.

Klõpsake Tweet

Kui olete selle ajaveebi jälgija, siis olete tõenäoliselt juba otsustanud oma veebisaidi ise luua. Ehkki võite tunda hämmingut veebiarenduse õppimiseks vajaliku tohutu hulga teabe osas, võite olla kindel, teades, et isegi väga vähese disainikogemusega ettevõtete omanikud saavad tõesti luua veebisaite, mis näevad välja professionaalsed. Kõik algab järgmistest põhitõdedest, mis õigesti kohaldades võivad teie saidi kujunduse ja kasutajakogemuse usaldusväärsuse poole pöörduda.

Mis see juhend on (ja mis see pole)

Selguse huvides räägime siin veebidisaini põhitõdedest – ega hakka me käsitlema keerukamaid teemasid, näiteks võrgusüsteeme, JavaScripti või CSS-i raamistikke. Selles juhendis eeldatakse ka, et kasutate mõnda veebisaidi lohistamist, et saaksite veebisaidi kujundada ilma kodeerimiseta. Ükskõik, kas kasutate oma veebisaidi ehitaja olemasolevat malli või alustate nullist (ambitsioonikam võimalus algajatele), aitab see juhend teid peamiste veebikujunduse põhimõtete ja tavade osas, mida peaksite oma veebisaidil rakendama. Üksik veebidisaini artikkel ei muuda teid koheselt asjatundjaks, nii et mõelge sellele oma esimeseks sammuks suuremas maailmas.

Kiire näpunäide: Algteadmised HTML-ist ja CSS-ist on igale veebidisainerile tohutu kasu. Kui soovite tõesti oma käsi kodeerimisega tegeleda, soovitan vaadata W3koolid sihtasutuse kohta rohkem teada saada.

Algajatele mõeldud veebidisaini alused

Laskem siis selle alla, eks? Siin on mõned kõige kasulikumad suundumused ja juhised, mida oma esimese veebisaidi loomisel tasub teada:

1. Pange hiir ära, korja pliiats üles

Teie veebisait võib juba eksisteerida teie arvates ilusa tervikliku üksusena – sellepärast hüppate kohe Photoshopi (või veel hullem – brauserisse ja HTML-i) selle kavandamiseks. Vau, jaa – jahutage oma masinaid korraks! Ära pane vankrit hobuse ette. Kõigepealt võtke välja pliiats ja paberipadjad ning alustage oma ideede muutmist kergesti käegakatsutavaks. See on oluline etapp saidi struktuuri kaardistamiseks, kasutades selleks ainult ristkülikuid, logiseid ja inspireeritud ideid (mida sageli nimetatakse ka traadist raamimine). Asjad võivad sel hetkel olla üpris karedad; keegi ei näe seda peale teie.

Veebisaidi kaadriraami näideVeebisaidi juhtraam aitab teil välja töötada oma veebisaidi paigutuse ja struktuuri, parandades samal ajal kasutajakogemust (UX) ja säästes aega.

Selles etapis on palju lihtsam muuta paigutusi, mis te algselt arvasid toimivat, kuid nüüd leiate, et need on paberil segaduses ja segaduses. See säästab mitu tundi pettumust, mitte sama avastuse tegemine, kui sait on kodeeritud ja brauseris. Lisaks aitab see märkimisväärselt veebilehte üles ehitada, kui teil on käsk viidete saamiseks pimesi mineku asemel konsulteerimiseks.

2. Järgige hierarhiat

On tõsi, et enamik veebisurfijaid kipuvad skaneerima ainult veebilehti, selle asemel et võtta aega, et kõike tegelikult läbi lugeda. Selleks peate olema selleks valmis asetades kõige olulisema sisu esikohale. See tähendab, et kasutajal peaks olema võimalik koguda kõige olulisemat teavet lehel kõikidel ekraanidel esialgse laadimise korral, ilma et oleks vaja suumida ega kerida. Seda on muidugi palju lihtsam öelda kui teha. Siin on mõned näpunäited, mis aitavad teil selle kujundusteooria olulisusest paremini aru saada:

Hoidke sisu „lehe kohal”

Kutsume seda laaditud sisu esialgset ekraani klapiks – ja kõike, mida selle all näha tuleb nägemiseks kerida, peetakse teisejärguliseks. Üldiselt asub teie kõige olulisem teave “klapi kohal”. Peamine asi, mis selles valdkonnas saavutatav on, on kasutaja meelitamine tegutsema või stiimuli loomine veelgi allapoole kerimiseks.

“Kangelase” pildi kasutamine

Tänapäeval on veebidisaini levinud suundumus täita see klapi kohal olev ala kangelase kujutise või ribareklaamiga. Need on täisekraanil taustpildid, millel on väga sisutihe ja punktist ülekattega tekst, tavaliselt paaris tegevusele kutsuva nupuga. Tõenäoliselt võiks kogu selle veebilehe eesmärk asuda selles ribareklaami piirkonnas, ehkki see on ka suurepärane alus sisu jälgimiseks.

Kangelase pilt / ribareklaami näide

“Klapi” võib sõltuvalt seadmest muutuda

Siin muutuvad asjad keeruliseks ja miks ei tohiks te end liiga koormata, üritades kõike maagilise joone kohal asetada. Ekraani mõõtmed võivad kasutaja seadmest olenevalt tohutult erineda. Lõualuu langeva 5K-ekraani vertikaalne eraldusvõime on 2880 pikslit, samas kui iPhone 5-l on sellest vähem kui pool. See tähendab, et mobiilikasutajad lihtsalt ei suuda oma ekraanikinnisvarasse nii palju sisu mahutada. (Sellest lähemalt hiljem.)

Kiire näpunäide: Üldine rusikareegel on tagada, et sisu üle voldi mahuks ekraani mõõtmete väikseimasse ühisesse nimetajasse. Seda aktsepteeritakse tavaliselt 768 pikslit vertikaalse eraldusvõimega.

3. Tüpograafia on teie kujundus

Kui te ei tegutse fotograafiaettevõttes, on tekst mis tahes veebisaidi kõige olulisem element, seetõttu on oluline seda osa õigesti teha. Teie veebilehe hierarhia sõltub suuresti teie valitud tüpograafiast: kuidas teie pealkirjad, alamrubriigid ja põhitekst järgivad loomulikku voogu ja jäävad üksteisest visuaalselt eristatavaks. Tüpograafia kohta leiate põhjaliku ülevaate meie parimate tavade juhendist. Siin on mõned olulised kaasavõtmised:

  • Veenduge, et tekst oleks loetav (vältige lillelisi fonte!) ja piisavalt suur (keha jaoks tavaliselt umbes 16 pikslit).
  • Püsige mitte rohkem kui kaks fonti—Ja veenduge, et nad paaristuvad omavahel hästi!
  • Andke oma lõikudele ruumi, et nad saaksid üksteise vahel hingata, ja sätige piisavalt ülemine polster või marginaal oma pealkirjades, et tähendada selgeid sisulisi lünki.
  • Vältige pikka tekstirida. Silmal on lihtsam, kui lõiguridade suurus on kõige rohkem 15 sõna pikk—Ja natuke vähem kui mobiiliekraanide puhul.
  • Serif fondid on tavaliselt parimad ainult trükitud kujul – välja arvatud juhul, kui neid kasutatakse veebis suurtes pealkirjades.

4. Värvid & Kontrastsus on ülioluline

Me oleme värvipsühholoogiast rääkinud pikalt, kuid see mõiste kordub. Teie veebisaidi jaoks valitud värvidel on tohutu roll selles, kuidas kasutajad teie brändi tajuvad, ja ka seda, kui motiveeritud võivad nad olla teie veebisaidi kaudu toimimist nähes (st. Asju ostmas). Miks? Noh, kõik värvid tekitavad teatud emotsioone ja kas nende loomupärase olemuse või kultuuriliste tingimuste tõttu on need värvid muutunud seotuks teatud tüüpi ettevõtetega. Kui laste mänguasjadega tegelev ettevõte või finantsnõustaja värviks kogu nende veebisaidi kirkalt mustaks, saadaks see nende sihtrühmale absoluutselt valesid signaale. Leheküljel jäädvustaks vastavalt klientidele erkroosa või meeldiv sinine täiuslik toon ja teadlikkus.

Veebikujunduse värvide näideSinine on usaldusväärikust äratav värv, mis on populaarne valik rahandusega seotud veebisaitide jaoks.

Kui olete oma brändi värvid juba kehtestanud, siis kasutage oma veebisaidi värve. Kõige parem on aga seda hoida mitte rohkem kui kolm värvi teie saidi jaoks; nagu fondid, ei taha te siin üle pingutada, vastasel juhul võib teie sait põhjustada mitu isiksusehäiret. Samuti olge ettevaatlik, kui teie veebilehel on liiga palju värvilaiku; meie pilk on nende poole tõmmatud nagu meepüünised ja need võivad teie sisu loomuliku voo katkestada. Kasutage värvi ainult siis, kui seda kõige rohkem vaja on, näiteks linkide või nuppude jaoks.

Teemal kontrasti, on oluline, et teie tekst eristuks taustast. Heledate hallide, kollaste või roheliste kasutamine fontide korral muudab need peaaegu kindlasti lehel nähtamatuks. Must valgel taustal on kontrasti suurim kombinatsioon ja üldiselt peaksite seda järgima.

Kiire näpunäide: Kõige parem on seda vältida täielik küllastus värvidega veebis. Puhas punane (heksaväärtus # ff0000) on silmadele pisut liiga torkiv. Samamoodi kipub puhas must (# 000000) fontide puhul silmadele liiga tugevalt vibreerima, samas kui pisut vähendatud must (# 333333) muudab lugemise lihtsamaks.

Samuti soovite, et teie tekst hüppaks taustpildile. Väga hõivatud fotode kasutamine võib tekstist eemale tõmmata, nii et selle probleemi vältimiseks kasutage kas vähem detailsemaid fotosid või kasutage näiteks rgba (51,51,51,0,5) ülekattet, mis aitab teksti all olevat pilti pehmendada.

pildi ülekatte näideKasutage teksti taga olevat ülekattet, et see taustast hüppaks.

Kontrastsus mängib rolli ka selles, kuidas kasutajaid meelitatakse teie saidi teatud põhielementide juurde. Teie kõige olulisemad tegevusele kutsumise nupud peavad kontrastset värvi kasutades silma haarama. Sinine “Osta kohe!” nupp kaotab kiireloomulisuse ja on seda väärt, kui selle neelab alla sait, mis kasutab igal pool sinist värvi, kuid samal lehel olev punane nupp haarab kasutaja tähelepanu, hüüdes: “Hei! Klõpsake mind! ”

6. Piltide kasutamine

Veebisaidil kasutamiseks sobivate piltide valimine tuleneb osaliselt teie enda kunstilistest võimetest, kuid on ka intellektuaalseid kaalutlusi, mis peaksid aitama teie valikuprotsessi. Esiteks vältige saidi kaunistamist kõrvaliste fotodega ainult seetõttu, et need võivad kena välja näha. Mõelge selle asemel, kuidas iga teie kasutatav pilt täidab oma eesmärki, ja mis veelgi tähtsam, kuidas see toimib sisu. Hästi valitud foto võib teie brändi, teenust, toodet või vaatajaskonda palju tõhusamalt kui sõnu edastada. Kasutage fotosid, et aidata oma kasutajatel millestki aru saada, emotsioone esile kutsuda või usaldust õhutada; nende kasutamine puhtalt esteetilistel põhjustel peaks olema teisejärguline.

Failitüüpide mõistmine & Tihendamine

Piltide kasutamiseks veebis tuleb teha veel üks samm. Need väljamõeldud fotod, mida saate sellistelt saitidelt nagu Shutterstock ja iStock võib olla üsna massiline (5000+ horisontaalset pikslit ja 10+ megabaidi suurused), mis sobib hästi printimiseks, kuid ei sobi veebisaitidele. Kõigil pole ülikiiret fiiber-Internetti, nii et peate laadimisaegade jaoks piltide suurust vähendama (rääkimata sellest, et saidi laadimiseks kulub üle 3 sekundi 40% külastajatest, lahkuvad 40% külastajatest!). Tavaliselt soovite iga oma pilti hoida a-asendis maksimaalselt 500 kilobaiti suuruses, ehkki teie keskmine failisuurus peaks tõenäoliselt umbes olema 100 kilobaiti.

  • JPEG on fotode standardvorming. See on kadudeta vorming, mis tähendab, et tihendamisel väheneb selle pildikvaliteet. Kui kasutate JPEG-täisekraani taustpildi jaoks, soovitan hoida selle horisontaalset eraldusvõimet tasemel mitte vähem kui 1200 pikslit. Üldistel eesmärkidel, vältige väiksema kui 600 pikslilise kujutise kasutamist horisontaalne eraldusvõime, kuna see on tänapäevastel ekraanidel tõenäoliselt udune.
  • PNG on eelistatud valik graafika või piltide jaoks, mis seda vajavad läbipaistvus. See on kadudeta vorming, mis sobib suurepäraselt pildikvaliteedi säilitamiseks, kuid võib ka faili suurust suurendada. Üldiselt kasutate PNG-graafikat illustratsioonide, ikoonide või väiksemate piltide jaoks, mida saab muude elementide peale virnastada nende läbipaistvuse tõttu. Vajate harva PNG-d, mis on suuremad kui 1000 pikslit.
  • SVG (skaleeritav vektorgraafika) on uuem vorming, mis on asendamisel GIF ja mõnel juhul isegi PNG. SVG ilu seisneb selles, et see võib olla ekraanil nii suur või nii väike, kui vajate, säilitades samas täiusliku selguse ja teravuse (ja ikkagi olema faili suurus väike). Peaksite kaaluma SVG kasutamist logo, ikooni või logo jaoks vektorgraafika oma veebisaidil; kuna kõrged DPI-ekraanid muutuvad nüüd tavaliseks, tagab SVG teravus parima pildikvaliteedi.

Pildifaili tüübi näited

6. Mobiil-esimene disain

Oleme jõudnud ajale, kus enamik inimesi tarbib veebisisu pigem oma telefonidega kui lauaarvutis. Selle tulemusel on veebidisainis palju suurem eelisõigus kohandada seda spetsiaalselt mobiilikogemusele, mis on viinud „kõigepealt mobiilile“ disainifilosoofiani.

Põhimõtteliselt tähendab see, et paberil visandamise ja kavandamise algfaasis on kõige parem keskenduda kõigepealt saidi mobiilipaigutusele. Väiksematel ekraanidel kuvatakse ainult teie saidi toimimiseks kõige olulisem sisu. See sunnib sind lihtsustama oma paigutuse ja lõigake kõik segavad elemendid kohe alguses välja. Mõelge oma sisule „klapi kohal”: kui kõigepealt veendute, et kogu oluline teave mahub telefoni algiekraanile, siis teate kindlasti, et see sobib suurematele ekraanidele. Kui olete olulise mobiilipaigutuse naelutanud, võite hakata töölauaekraanidele lisama kaunistusi või suuremaid pilte.

Teie mobiilipaigutus eeldab kerimist inspireerivat vertikaalsemat kujundust, mitte töölaua laia maastikku. Kui näiteks teie tootelehel kuvatakse kirjed lauaarvutitel ruudustikus 3, siis kuvatakse teie mobiilipaigutus tavaliselt ainult ühe veeruna.

Jah, see tähendab, et peate oma veebisaidi igale lehele looma mitu paigutust. Õnneks peaks iga hea veebisaidi koostaja pakkuma reageerivaid malle, mis kohandavad neid paigutusi automaatselt, nii et peate ainult neid täpsustama.

Kiire näpunäide: Veenduge, et teie saidi ükski element, eriti kui see on interaktiivne, pole väiksem kui 44x44xx suuruses. Miks? See on väikseim sihtkoht, kus sõrm saab seda täpselt koputada.

7. Hoidke asjad joondatud

Kui elemendid tunduvad kogu teie saidil hajutatud, on selle põhjuseks sageli joondusprobleemid. Kujutage oma veebilehte graafikpaberilehel. Eraldage see ühtlasteks veergudeks, joonistades näiteks kuus sirget. Nüüd soovite veenduda, et teie elementide vasakpoolsed servad on jaotatud ja joondatud ainult nende kuue vertikaalse joonega.

8. Hoidke see lihtne

Sageli öeldakse, et parim veebidisain jääb märkamata; ainult kehv disain kutsub tähelepanu endale. Nagu varem mainitud, on mis tahes veebisaidi kõige olulisem aspekt lihtsalt selle tekst. Kui saate pakkuda silmapaistvat tüpograafiat, mida on rõõm lugeda, siis pole teil vaja teha palju muud. Saidi üleprojekteerimise katse segab ja raskendab lihtsalt asju.

Kas kasti varjud on vajalikud? Hullud, ehitud mustrid? Kümned värvid? Ilmselt mitte.

9. Suured avatud ruumid

Teie sisu vajab hingamiseks ruumi. Valge ruum on kaasaegsete veebisaitide domineeriv kujundusvalik: laiad ja tühised tühikud alad sisu sisustamiseks. See on nauditavam viis teabe seedimiseks ning julgustab ka saidi puhtuse tagamiseks eemaldama üleliigsed tekstid ja pildid.

Järeldus

Veebidisain võib olla laialivalguv tehnoloogiavaldkond õppimiseks, kontseptsioonide rakendamiseks, keelte õppimiseks ja meisterlikkuse omandamiseks. Ainult kogemuste abil saavad kõik need komponendid mõtet, kuid olete juba teel kaugele, kui mõistate ainult hea veebisaidi toimimise põhialuseid. Loodan, et see juhend on teie alguspunkt ja annab teile enesekindluse võtta oma veebisait omaenda kätesse ja ehitada see nii, et ainult ettevõtte omanik teaks seda kõige paremini.

Sündib disainer!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me