Web dizaino paslaugos - tai svetainių dizainas. Dažniausiai kalbama ne apie programinės įrangos kūrimą, o apie svetainių kūrimo aspektus, susijusius su naudotojo patirtimi. Anksčiau žiniatinklio dizainas buvo orientuotas į svetainių kūrimą stalinių kompiuterių naršyklėms, tačiau nuo 2010-ųjų vidurio vis didesnę reikšmę įgauna mobiliųjų ir planšetinių kompiuterių naršyklėms skirtas dizainas. Žiniatinklio dizaineris kuria svetainės išvaizdą, išdėstymą, o kai kuriais atvejais - ir turinį. Išvaizda susijusi su naudojamomis spalvomis, tipografija ir vaizdais. Išdėstymas susijęs su tuo, kaip informacija suskirstyta ir suskirstyta į kategorijas. Gerą žiniatinklio svetainės dizainą lengva naudoti, jis yra estetiškas ir tinka naudotojų grupei bei svetainės prekės ženklui. Gerai sukurta svetainė yra paprasta ir aiškiai komunikuoja, kad neklaidintų naudotojų. Ji laimi ir skatina tikslinės auditorijos pasitikėjimą, pašalindama kuo daugiau galimų naudotojų nusivylimo taškų. Jautrusis ir prisitaikantis dizainas yra du paplitę būdai kurti svetaines, kurios gerai veikia ir kompiuteriuose, ir mobiliuosiuose įrenginiuose.
Interneto svetainių dizainas - tai svetainių dizainas. Dažniausiai kalbama ne apie programinės įrangos kūrimą, o apie svetainių kūrimo aspektus, susijusius su naudotojo patirtimi. Anksčiau žiniatinklio dizainas buvo orientuotas į svetainių kūrimą stalinių kompiuterių naršyklėms, tačiau nuo 2010-ųjų vidurio vis didesnę reikšmę įgauna mobiliųjų ir planšetinių kompiuterių naršyklėms skirtas dizainas.
Žiniatinklio dizaineris kuria svetainės išvaizdą, išdėstymą, o kai kuriais atvejais - ir turinį.
Išvaizda susijusi su naudojamomis spalvomis, tipografija ir vaizdais.
Išdėstymas susijęs su tuo, kaip informacija suskirstyta ir suskirstyta į kategorijas. Gerą žiniatinklio svetainės dizainą lengva naudoti, jis yra estetiškas ir tinka naudotojų grupei bei svetainės prekės ženklui.
Gerai sukurta svetainė yra paprasta ir aiškiai komunikuoja, kad neklaidintų naudotojų. Ji laimi ir skatina tikslinės auditorijos pasitikėjimą, pašalindama kuo daugiau galimų naudotojų nusivylimo taškų.
Jautrusis ir prisitaikantis dizainas yra du paplitę būdai kurti svetaines, kurios gerai veikia ir kompiuteriuose, ir mobiliuosiuose įrenginiuose.
Atsparusis žiniatinklio dizainas (dar žinomas kaip „reaguojantis“ arba „jautrusis dizainas“) - tai požiūris į žiniatinklio turinio kūrimą, kuris rodomas nepriklausomai nuo įrenginio skiriamosios gebos. Paprastai tai daroma naudojant peržiūros taškus (skiriamosios gebos ribas, kai turinys keičiamas pagal tą peržiūrą). Vaizdinės sritys turėtų logiškai prisitaikyti prie bet kokios skiriamosios gebos planšetinių kompiuterių, telefonų ir stacionariųjų kompiuterių.
Naudodami jautrųjį dizainą galite apibrėžti taisykles, kaip turinys teka ir kaip keičiasi išdėstymas, atsižvelgiant į ekrano dydžio diapazoną.
Jautrusis dizainas reaguoja į naršyklės pločio pokyčius, pritaikydamas dizaino elementų išdėstymą, kad jie tilptų į turimą erdvę. Jei atidarysite reaguojančią svetainę darbalaukyje ir pakeisite naršyklės lango dydį, turinys dinamiškai persitvarkys, kad tilptų į naršyklės langą. Svetainė patikrina, kiek vietos yra mobiliuosiuose telefonuose, ir tada pateikia save idealiai išdėstytą.
Geriausia atsakomojo dizaino praktika ir aspektai
Naudodami jautrųjį dizainą, projektuojate taip, kad visi aspektai - vaizdai, tekstas ir išdėstymas - būtų lankstūs. Taigi, turėtumėte:
Pradėkite produkto projektavimo procesą pirmiausia mobiliesiems įrenginiams, o ne staliniams kompiuteriams.
Kurkite sklandžius tinklelius ir vaizdus.
Pirmenybę teikite keičiamo mastelio vektorinės grafikos (SVG) naudojimui. Tai yra XML pagrįstas 2D grafikos failų formatas, palaikantis interaktyvumą ir animaciją.
Įtraukite tris ar daugiau lūžio taškų (maketai trims ar daugiau įrenginių).
Nustatykite pirmenybę ir paslėpkite turinį, kad jis atitiktų naudotojų kontekstą. Patikrinkite savo vizualinę hierarchiją ir naudokite laipsnišką atskleidimą bei navigacijos stalčius, kad naudotojams pirmiausia būtų pateikti reikalingi elementai. Nereikalingus elementus (malonius dalykus) palikite antroje vietoje.
Siekite minimalizmo.
Taikykite dizaino šablonus, kad naudotojams būtų maksimaliai patogu naudotis jų kontekstuose ir jie greičiau susipažintų: pvz., stulpelio kritimo šablonas tinka turiniu daugeliui ekrano tipų.
Siekite prieinamumo.
Kas yra prisitaikantis žiniatinklio dizainas?
Prisitaikantysis dizainas panašus į prisitaikantįjį dizainą - abu šie būdai taikomi kuriant dizainą įvairiems įrenginiams; skirtumas yra tas, kaip pritaikomas turinys.
Prisitaikančiojo dizaino atveju visas turinys ir funkcijos yra vienodos kiekviename įrenginyje. Todėl didelio ekrano stalinio kompiuterio ir išmaniojo telefono naršyklėje rodomas tas pats turinys. Skiriasi tik turinio išdėstymas.
Prisitaikantysis dizainas padidina jautrumą. Atsparusis dizainas orientuojasi tik į įrenginį, o prisitaikantysis dizainas atsižvelgia ir į įrenginį, ir į naudotojo kontekstą. Tai reiškia, kad galite kurti kontekstą atitinkančią patirtį - žiniatinklio programos turinys ir funkcijos gali atrodyti ir elgtis visai kitaip nei kompiuteryje pateiktoje versijoje.
Pavyzdžiui, jei prisitaikantis dizainas nustato, kad yra mažas duomenų srauto pralaidumas arba kad naudotojas naudojasi ne staliniu, o mobiliuoju įrenginiu, jis gali neįkelti didelio paveikslėlio (pvz., infografikos). Vietoj to gali būti rodoma mažesnė infografikos santraukos versija.
Kitas pavyzdys galėtų būti nustatymas, ar įrenginys yra senesnis telefonas su mažesniu ekranu. Svetainėje gali būti rodomi didesni nei įprastai raginimo atlikti veiksmą mygtukai.
Prieinamumas žiniatinklio dizainui
„Žiniatinklio galia slypi jo universalume.
Prieiga visiems, nepriklausomai nuo negalios, yra esminis aspektas.“
-Timas Bernersas-Lee, W3C direktorius ir pasaulinio žiniatinklio išradėjas
Žiniatinklio prieinamumas reiškia, kad žiniatinklio svetainės ir technologijos būtų pritaikytos įvairių gebėjimų ir negalią turintiems žmonėms. Prieinama svetainė užtikrina, kad visi naudotojai, nepriklausomai nuo jų gebėjimų, galėtų suvokti, suprasti, naršyti ir sąveikauti su žiniatinkliu.
Šiame vaizdo įraše „Syntagm“ generalinis direktorius Williamas Hudsonas aptaria prieinamumo svarbą ir pateikia patarimų, kaip padaryti svetaines prieinamesnes.
Pasaulinis žiniatinklio konsorciumas (W3C) išvardija keletą pagrindinių tinklalapių prieinamumo aspektų:
Užtikrinkite pakankamą kontrastą tarp pirmojo ir antrojo plano. Pavyzdžiui, juodą arba tamsiai pilką tekstą ant baltos spalvos lengviau perskaityti nei pilką tekstą ant šviesesnio pilkos spalvos atspalvio. Naudokite spalvų kontrasto tikrinimo priemones, kad patikrintumėte teksto ir fono spalvų kontrasto santykį ir įsitikintumėte, kad žmonės gali lengvai įžiūrėti turinį.
Informacijai perteikti nenaudokite vien tik spalvų. Pavyzdžiui, tekste su hipersaitais naudokite ne tik spalvą, bet ir pabraukimus, kad žmonės, turintys spalvinį aklumą, vis tiek galėtų atpažinti nuorodą, net jei negali atskirti hipersaito nuo įprasto teksto.
Užtikrinkite, kad interaktyvūs elementai būtų lengvai atpažįstami. Pavyzdžiui, rodykite skirtingus nuorodų stilius, kai naudotojas ant jų užveda pelės žymeklį arba sutelkia dėmesį naudodamas klaviatūrą.
Pateikite aiškias ir nuoseklias navigacijos parinktis. Kad išvengtumėte painiavos, naudokite nuoseklų meniu elementų išdėstymą ir pavadinimų suteikimo tvarką. Pavyzdžiui, jei naudojate „duonos trupinius“, užtikrinkite, kad skirtinguose tinklalapiuose jie būtų toje pačioje vietoje.
Užtikrinkite, kad formos elementuose būtų aiškiai susietos etiketės. Pavyzdžiui, kad sumažintumėte klaidų skaičių, formos etiketes pateikite formos lauko kairėje pusėje (kalbant kalbomis iš kairės į dešinę), o ne virš įvesties lauko ar jo viduje.
Pateikite lengvai atpažįstamą grįžtamąjį ryšį. Jei grįžtamasis ryšys (pvz., klaidų pranešimai) bus parašytas smulkiu šriftu arba tam tikra spalva, žmonėms, turintiems silpnesnį regėjimą arba spalvinį aklumą, bus sunkiau naudotis svetaine. Pasirūpinkite, kad toks grįžtamasis ryšys būtų aiškus ir lengvai atpažįstamas. Pavyzdžiui, galite pasiūlyti parinktis, kuriomis galima pereiti prie skirtingų klaidų.
Susijusiam turiniui grupuoti naudokite antraštes ir tarpus. Gera vizualinė hierarchija (pasitelkiant tipografiją, baltąsias erdves ir tinklelio išdėstymą) palengvina turinio nuskaitymą.
Kurkite dizainą, pritaikytą skirtingų dydžių rodinio langeliams. Užtikrinkite, kad turinys būtų keičiamas į didesnę (didesniems įrenginiams) ir mažesnę (mažesniems ekranams) skalę. Kurkite prisitaikančias svetaines ir kruopščiai jas išbandykite.
Į dizainą įtraukite vaizdų ir medijos alternatyvas. Pateikite garso ir vaizdo turinio transkripcijas, o paveikslėlių tekstines alternatyvas. Užtikrinkite, kad alternatyvus vaizdų tekstas perteiktų prasmę, o ne tik apibūdintų vaizdą. Jei naudojate PDF dokumentus, įsitikinkite, kad jie taip pat yra prieinami.
Pateikite turinio, kuris paleidžiamas automatiškai, valdiklius. Leiskite naudotojams pristabdyti automatiškai paleidžiamą animaciją ar vaizdo turinį.
Ši praktika ne tik palengvina svetainės prieinamumą žmonėms su negalia, bet ir apskritai patogumą visiems.
