veebidisain

Explore

Tunnid

06. Veebilehe layout. Nuppude disain.

Sissejuhatus, eelmise osa meeldetuletus. Selles tunnis tegeleme:

Tagasiside seinitehtule

UX ja UI disaini printsiibid

Nuppude disain

Veebidisaini korrastamise ülesanne

Puudujate märkimine, samal ajal täidavad õpilased tunni alguse sisendi (5 min):

https://forms.office.com/e/eMShrpAvWj⁠

⁠

Senitehtud tööde näited ja kriitika

Puudu on sisulised wireframed, mis tähendab, et pole teada, mida täpselt tehakse

UI osas vajavad nii töövõtted kui disaini, nii UX kui UI, põhimõtted selgitamist.

Disaini printsiibid. CRAP – 4 printsiipi: Kontrast Kordamine Joondamine Lähedus Kontrast (Contrast): Kontrasti kasutamine aitab eristada ja rõhutada disaini erinevaid elemente. See võib hõlmata värve, fonte, suurusi ja kujundeid. Kontrasti eesmärk on muuta lehe elemendid silmapaistvaks ja hõlpsasti eristatavaks, aidates sellega kaasa üldise disaini selgusele ja loetavusele.

⁠

Pilt: lrswebsolutions.com

⁠

Pilt: vassilissa.design

Kordamine (Repetition): Kordamise põhimõte tähendab ühtsete stiilide, värviskeemide, fontide ja muude disainielementide kasutamist kogu disainis. See aitab luua ühtsust ja koherentsust, mis muudab disaini professionaalsemaks ja organiseeritumaks.

Joondus (Alignment): Joonduse põhimõte keskendub elementide paigutamisele nii, et need loovad visuaalse seose. Iga element peaks olema visuaalselt seotud mõne teise lehe elemendiga, et tagada puhas ja organiseeritud välimus. Joondamine aitab vältida juhuslikkust ja loob tasakaalustatud ja hästi struktureeritud disaini.

⁠

Pilt: Melanie Taube

⁠

Pilt: uxengineer.com

Lähedus (Proximity): läheduse põhimõte tähendab elementide rühmitamist nende omavahelise seose alusel. Tihedalt seotud elemendid paigutatakse lähedale üksteisele, mis aitab kasutajatel mõista nende vahelisi suhteid. See aitab luua korraldust ja aitab kasutajal leida seotud teavet lihtsamini. ˇˇ

⁠

Pildid:

Annemarie Bufe⁠

⁠

Pilt:

uxmisfit.com⁠

Vaadake oma disain üle nt sellise tööriista abil:

Design checklist⁠

Põgusalt UX ”seadustest”, põhjalikumalt edaspidi.

Hierarhia

⁠

Pilt: Melanie Taube Pilgu suunamine F ja Z mustrid F-muster tekstipõhistele veebidele. Nt blogi

⁠

Pildid:

webdesign.tutsplus.com⁠

Z-muster kujundust täis lehtedele.

⁠

Pildid:

webdesign.tutsplus.com⁠

Loe rohkem:

understanding web ui visual hierarchy⁠

Jakobsi seadus – kasutajad veedavad enamuse ajast teiste lehtedel, seega nad ootavad sinu lehelt samu asju samades kohtades.

Kasutajad peavad esteetilisi asju ka kasutatavamateks või kasulikemateks

Hick'i seadus – mida rohkem valikuid, seda kauem võtab kasutajal otsustamine aega – lihtsus

Ühise või ühtse piirkonna seadus – Elemente kiputakse tajuma rühmadena, kui nad jagavad selgelt piiritletud ala

Vaata kindlasti juurde

https://lawsofux.com⁠

⁠

Nuppude disain.

Nupud ei ole lingid, ega pildid. Tee nupud “nupuliku” kujundusega

Korrektne padding – üles alla, vasakule paremale, suurus ja nuppude vahed.

Erinevad olekud (states)

Erinevad nuppude tüübid (Primary, secondary(ghost), tertiary vms)

ikoonide kasutus

varjud

Ise harjutamiseks materjali:

https://balsamiq.com/learn/articles/button-design-best-practices/⁠

https://blog.logrocket.com/ux-design/designing-button-states/⁠

https://setproduct.com/blog/button-ui-design⁠

Harjutus – paranda etteantud disain. Kopeeri antud visuaal uude maandumislehe tiimi loodud faili ja paranda ära. Pane faili nimeks “layout-perekonnanimi”. NB! Kasuta:

Auto layouti

Grid'e

https://www.figma.com/file/iNgs7U8My69foAX7LiQKx8/layouti-korrastamine?type=design&node-id=3-2246&mode=design&t=ty7joplyIxWke7ug-4⁠

Tunni lõpetamise pilet (5min):

https://forms.office.com/e/s23ARQE4bM⁠

⁠

Allikad:

⁠

https://freight.cargo.site/t/original/i/92ac4341251c05ab6e6fcc06f2deb8a76bf0fa79cdff1aff1335e63a408baaf3/MistakesPoster.png⁠

⁠

https://www.lrswebsolutions.com/Blog/Posts/97/Website-Accessibility/The-Top-5-Website-Accessibility-Failures/blog-post/⁠

⁠

https://dribbble.com/shots/1902171-Design-Principle-Alignment⁠

⁠

https://dribbble.com/shots/1903469-Design-Principle-Hierarchy⁠

⁠

https://medium.com/uxcam/the-key-to-intuitive-ux-gestalt-principles-bluespace-371345b077cf⁠

⁠

https://uxmisfit.com/2019/04/23/ui-design-in-practice-gestalt-principles/⁠

⁠

https://uxengineer.com/principles-of-design/alignment⁠

⁠

https://lawsofux.com⁠

⁠

https://www.awwwards.com/understanding-web-ui-visual-hierarchy.html⁠

⁠

https://webdesign.tutsplus.com/understanding-the-f-layout-in-web-design--webdesign-687a⁠

⁠

https://webdesign.tutsplus.com/understanding-the-z-layout-in-web-design--webdesign-28a⁠

⁠

https://www.awwwards.com/understanding-web-ui-visual-hierarchy.html⁠

⁠

Läks kogemata pisut kauem.

Ülesannet lõpetada ei jõudnud, seega sellega tegeleme järgmisel tunnil

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.