{"id":514,"date":"2020-03-12T21:06:15","date_gmt":"2020-03-12T21:06:15","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=514"},"modified":"2020-05-21T11:04:23","modified_gmt":"2020-05-21T11:04:23","slug":"veebilehe-disain","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/veebilehe-disain\/","title":{"rendered":"Veebilehe disain"},"content":{"raw":"Veebilehe disain peaks olema \"n\u00e4htamatu\"! Veebileht v\u00f5iks olla ilus, praktiline, mugav!\r\n

\"T\u00e4iuslikkus saavutatakse, mitte siis kui enam midagi lisada pole, vaid siis kui enam midagi \u00e4ra v\u00f5tta pole.\"\r\n<\/em>Saint Exupery.<\/em><\/p>\r\nLoodav veebileht peab olema \u00fclesseadmist v\u00e4\u00e4rt (peab olema v\u00e4\u00e4rt sisu ja kujundus ning need peavad koosk\u00f5las olema)!\r\n

\u00dcldised reeglid kujundamiseks<\/h1>\r\nVeebilehe eesm\u00e4rk peab olema ilmne!\r\n
    \r\n \t
  • K\u00fclastajatele tuleb anda p\u00f5hjust lehte \u00fcha uuesti k\u00fclastada! Leht ei pea sisaldama uusimat tehnoloogiat vaid peab olema kergelt hallatav ning sisaldama v\u00e4rsket sisu!<\/li>\r\n \t
  • Piltide ja tekstimaterjali kasutamine peab olema tasakaalus!<\/li>\r\n \t
  • Lehele tuleb ka vaba ruumi j\u00e4tta, et olulised objektid saaksid \"hingata\" ja paistaksid v\u00e4lja! Silm peab ka puhata saama! Iga objekti juurde peab kuuluma ka natuke vaba ruumi, see annab v\u00f5imaluse domineerida! Vaba ruumi v\u00e4hesus t\u00e4hendab, et korraga pakutakse liiga palju informatsiooni ja see tekitab vaatajas alateadlikku hirmu.<\/li>\r\n \t
  • Kujundus peab olema tasakaalus (objektidel on visuaalne kaal)! Eristatakse formaalset tasakaalu (s\u00fcmmeetria) ja mitteformaalset (as\u00fcmmeetria).<\/li>\r\n<\/ul>\r\n[caption id=\"attachment_517\" align=\"aligncenter\" width=\"500\"]\"Tasakaalu Tasakaalu loomise v\u00f5imalused[\/caption]\r\n
      \r\n \t
    • R\u00fctm on v\u00e4ga oluline \u2013 inimese aju on mustritele v\u00e4ga vastuv\u00f5tlik! Korrates kujunduselemente (teksti kujundid, piltide paigutus jms) saame me veebilehe sisu kergemini vastuv\u00f5etavaks muuta!<\/li>\r\n \t
    • Kasutada tuleb kontrasti, et olulised elemendid eristuksid!<\/li>\r\n \t
    • Kuna korraga on tavaliselt n\u00e4htaval vaid v\u00e4ike osa materjalist, siis peab oluline info olema kohe n\u00e4htav!<\/li>\r\n \t
    • Kerimisribasid tuleks kasutada nii v\u00e4he kui v\u00f5imalik!<\/li>\r\n \t
    • Kujundus peab olema \u00fchtne! K\u00f5ik kasutatud elemendid peavad omavahel sobima ning ka tervikuga sobima!<\/li>\r\n \t
    • Kujundus peab olema j\u00e4rjekindel! K\u00f5ik objektid peavad veebilehestiku k\u00f5igil lehtedel asuma samadel kohtadesl ja toimima \u00fchte moodi!<\/li>\r\n \t
    • Korrastatud struktuur on alati eelistatav kaosele!<\/li>\r\n \t
    • Veebilehe avanemine ei tohi kaua aega v\u00f5tta! Seega on oluline avalehe maht.<\/li>\r\n \t
    • Veebileht peab olema vaadeldav erinevate seadmete ja veebilehitsejatega!<\/li>\r\n<\/ul>\r\n

      Objektide paigutus ekraanil<\/h1>\r\nOsa ekraanist t\u00f5mbab rohkem t\u00e4helepanu kui teised. Sinna tuleks paigutada k\u00f5ige olulisem info.\r\n
        \r\n \t
      • ekraani keskosa on silmatorkavam;<\/li>\r\n \t
      • vasakul \u00e4\u00e4rel peatub silm enne (ilmselt tingitud eurooplaste traditsioonilisest lugemissuunast);<\/li>\r\n \t
      • ekraani \u00fclemine kutsub enne lugema kui alumine (tuleneb lugemiskultuurist)<\/li>\r\n<\/ul>\r\nOsavalt paigutatud graafika, teksti v\u00e4rvus vms. v\u00f5ib silma juhtida soovitud osale ekraanil.\r\n
          \r\n \t
        • Suuremaid jooniseid m\u00e4rgatakse enne kui v\u00e4ikseid (m\u00f5\u00f5tmete kontrast).<\/li>\r\n \t
        • Tumedaid m\u00e4rke heledal pinnal enne kui heledaid tumedal pinnal (v\u00e4rvuse kontrast).<\/li>\r\n<\/ul>\r\nObjektide paigutamine lehe\/ekraani keskele on ootusp\u00e4rane ja igav, seet\u00f5ttu v\u00f5iks kujutisi paigutada keskmest pisut eemale.\r\n

          Navigatsioon<\/h1>\r\nVeebisaidil (veebilehestikus) liikumine ehk navigatsioon peab olema v\u00e4ga lihtne! Enne saidi avalikustamist peab kindlasti l\u00e4bi viima kasutajatest, et teha kindlaks kui palju aega ja vaeva n\u00f5uab inimestelt saidi sisu l\u00e4bivaatamine.\r\n\r\nK\u00f5ik navigatsioonivahendid (lingid) peaks olema n\u00e4htaval. Paigutus peaks olema lihtne ja loogiline, siis ei pea vajaliku info leidmiseks tervet lehte l\u00e4bi kammima!\r\n
            \r\n \t
          • Kasutaja peab alati saama linkide kaudu tagasi avalehele p\u00f6\u00f6rduda ning ka erinevate teemalehtede vahel liikuda!<\/li>\r\n \t
          • Kui veebilehestik (site) kasvab ning keerukamaks muutub, v\u00f5iks veebilehele lisada ka sisukaardi (site map)!<\/li>\r\n \t
          • Lingid peavad k\u00f5ikidel lehtedel olema \u00fchesugused! See lihtsustab orienteerumist ja linkide leidmist!<\/li>\r\n \t
          • Lingid v\u00f5ivad olla tekstip\u00f5hised aga v\u00f5ib kasutada ka graafikat!<\/li>\r\n<\/ul>\r\n

            Tekst<\/h1>\r\nVeebilehele ei tohi kuhjata liialt palju teksti!\r\n
              \r\n \t
            • V\u00e4ltida tuleb pikka katkematut teksti! \u00d6elda tuleb vaid olulist!<\/li>\r\n \t
            • Tekst tuleks jagada 8-10 realisteks plokkideks ja need \u00fcksteisest eraldada!<\/li>\r\n \t
            • Tekst peab olema korrektne! Lohakas, ebaviisakas ja vigadega tekst peletab lugejaid!<\/li>\r\n \t
            • Joonda tekst reeglina vasakule!<\/li>\r\n \t
            • Teksti minimaalne lubatud suurus veebilehel on 8pt.<\/li>\r\n \t
            • Arvesta, et tekstirida ei tohiks olla ei liialt l\u00fchike ega liialt pikk! Minimaalne rea pikkus v\u00f5iks olla 25 ja maksimaalne 50 t\u00e4hem\u00e4rki! V\u00f5ib j\u00e4rgida ka reeglit 10-12 s\u00f5na real!<\/li>\r\n \t
            • P\u00fc\u00fca v\u00e4ltida teksti kirjul taustal.<\/li>\r\n<\/ul>\r\n

              Graafika kasutamine<\/h1>\r\nVeebilehti ei tohi \u00fcle koormata suuremahuliste piltidega ning kasutatud graafika peaks enne veebilehele paigutamist sobivasse m\u00f5\u00f5tu l\u00f5ikama. Enim leiavad veebilehel kasutust JPEG, PNG, GIF ja SVG formaadis pildid.\r\n

              V\u00e4rvid<\/h2>\r\nV\u00e4rvilahendus peab olema sobivalt valitud! Oluline on j\u00e4lgida, et v\u00e4rvid silmadele ei hakkaks ning et teksti ja tausta v\u00e4rvide vahel esineks piisavalt suur kontrast.\r\n\r\n ","rendered":"

              Veebilehe disain peaks olema “n\u00e4htamatu”! Veebileht v\u00f5iks olla ilus, praktiline, mugav!<\/p>\n

              “T\u00e4iuslikkus saavutatakse, mitte siis kui enam midagi lisada pole, vaid siis kui enam midagi \u00e4ra v\u00f5tta pole.”
              \n<\/em>Saint Exupery.<\/em><\/p>\n

              Loodav veebileht peab olema \u00fclesseadmist v\u00e4\u00e4rt (peab olema v\u00e4\u00e4rt sisu ja kujundus ning need peavad koosk\u00f5las olema)!<\/p>\n

              \u00dcldised reeglid kujundamiseks<\/h1>\n

              Veebilehe eesm\u00e4rk peab olema ilmne!<\/p>\n

                \n
              • K\u00fclastajatele tuleb anda p\u00f5hjust lehte \u00fcha uuesti k\u00fclastada! Leht ei pea sisaldama uusimat tehnoloogiat vaid peab olema kergelt hallatav ning sisaldama v\u00e4rsket sisu!<\/li>\n
              • Piltide ja tekstimaterjali kasutamine peab olema tasakaalus!<\/li>\n
              • Lehele tuleb ka vaba ruumi j\u00e4tta, et olulised objektid saaksid “hingata” ja paistaksid v\u00e4lja! Silm peab ka puhata saama! Iga objekti juurde peab kuuluma ka natuke vaba ruumi, see annab v\u00f5imaluse domineerida! Vaba ruumi v\u00e4hesus t\u00e4hendab, et korraga pakutakse liiga palju informatsiooni ja see tekitab vaatajas alateadlikku hirmu.<\/li>\n
              • Kujundus peab olema tasakaalus (objektidel on visuaalne kaal)! Eristatakse formaalset tasakaalu (s\u00fcmmeetria) ja mitteformaalset (as\u00fcmmeetria).<\/li>\n<\/ul>\n
                \"Tasakaalu
                Tasakaalu loomise v\u00f5imalused<\/figcaption><\/figure>\n
                  \n
                • R\u00fctm on v\u00e4ga oluline \u2013 inimese aju on mustritele v\u00e4ga vastuv\u00f5tlik! Korrates kujunduselemente (teksti kujundid, piltide paigutus jms) saame me veebilehe sisu kergemini vastuv\u00f5etavaks muuta!<\/li>\n
                • Kasutada tuleb kontrasti, et olulised elemendid eristuksid!<\/li>\n
                • Kuna korraga on tavaliselt n\u00e4htaval vaid v\u00e4ike osa materjalist, siis peab oluline info olema kohe n\u00e4htav!<\/li>\n
                • Kerimisribasid tuleks kasutada nii v\u00e4he kui v\u00f5imalik!<\/li>\n
                • Kujundus peab olema \u00fchtne! K\u00f5ik kasutatud elemendid peavad omavahel sobima ning ka tervikuga sobima!<\/li>\n
                • Kujundus peab olema j\u00e4rjekindel! K\u00f5ik objektid peavad veebilehestiku k\u00f5igil lehtedel asuma samadel kohtadesl ja toimima \u00fchte moodi!<\/li>\n
                • Korrastatud struktuur on alati eelistatav kaosele!<\/li>\n
                • Veebilehe avanemine ei tohi kaua aega v\u00f5tta! Seega on oluline avalehe maht.<\/li>\n
                • Veebileht peab olema vaadeldav erinevate seadmete ja veebilehitsejatega!<\/li>\n<\/ul>\n

                  Objektide paigutus ekraanil<\/h1>\n

                  Osa ekraanist t\u00f5mbab rohkem t\u00e4helepanu kui teised. Sinna tuleks paigutada k\u00f5ige olulisem info.<\/p>\n

                    \n
                  • ekraani keskosa on silmatorkavam;<\/li>\n
                  • vasakul \u00e4\u00e4rel peatub silm enne (ilmselt tingitud eurooplaste traditsioonilisest lugemissuunast);<\/li>\n
                  • ekraani \u00fclemine kutsub enne lugema kui alumine (tuleneb lugemiskultuurist)<\/li>\n<\/ul>\n

                    Osavalt paigutatud graafika, teksti v\u00e4rvus vms. v\u00f5ib silma juhtida soovitud osale ekraanil.<\/p>\n

                      \n
                    • Suuremaid jooniseid m\u00e4rgatakse enne kui v\u00e4ikseid (m\u00f5\u00f5tmete kontrast).<\/li>\n
                    • Tumedaid m\u00e4rke heledal pinnal enne kui heledaid tumedal pinnal (v\u00e4rvuse kontrast).<\/li>\n<\/ul>\n

                      Objektide paigutamine lehe\/ekraani keskele on ootusp\u00e4rane ja igav, seet\u00f5ttu v\u00f5iks kujutisi paigutada keskmest pisut eemale.<\/p>\n

                      Navigatsioon<\/h1>\n

                      Veebisaidil (veebilehestikus) liikumine ehk navigatsioon peab olema v\u00e4ga lihtne! Enne saidi avalikustamist peab kindlasti l\u00e4bi viima kasutajatest, et teha kindlaks kui palju aega ja vaeva n\u00f5uab inimestelt saidi sisu l\u00e4bivaatamine.<\/p>\n

                      K\u00f5ik navigatsioonivahendid (lingid) peaks olema n\u00e4htaval. Paigutus peaks olema lihtne ja loogiline, siis ei pea vajaliku info leidmiseks tervet lehte l\u00e4bi kammima!<\/p>\n

                        \n
                      • Kasutaja peab alati saama linkide kaudu tagasi avalehele p\u00f6\u00f6rduda ning ka erinevate teemalehtede vahel liikuda!<\/li>\n
                      • Kui veebilehestik (site) kasvab ning keerukamaks muutub, v\u00f5iks veebilehele lisada ka sisukaardi (site map)!<\/li>\n
                      • Lingid peavad k\u00f5ikidel lehtedel olema \u00fchesugused! See lihtsustab orienteerumist ja linkide leidmist!<\/li>\n
                      • Lingid v\u00f5ivad olla tekstip\u00f5hised aga v\u00f5ib kasutada ka graafikat!<\/li>\n<\/ul>\n

                        Tekst<\/h1>\n

                        Veebilehele ei tohi kuhjata liialt palju teksti!<\/p>\n

                          \n
                        • V\u00e4ltida tuleb pikka katkematut teksti! \u00d6elda tuleb vaid olulist!<\/li>\n
                        • Tekst tuleks jagada 8-10 realisteks plokkideks ja need \u00fcksteisest eraldada!<\/li>\n
                        • Tekst peab olema korrektne! Lohakas, ebaviisakas ja vigadega tekst peletab lugejaid!<\/li>\n
                        • Joonda tekst reeglina vasakule!<\/li>\n
                        • Teksti minimaalne lubatud suurus veebilehel on 8pt.<\/li>\n
                        • Arvesta, et tekstirida ei tohiks olla ei liialt l\u00fchike ega liialt pikk! Minimaalne rea pikkus v\u00f5iks olla 25 ja maksimaalne 50 t\u00e4hem\u00e4rki! V\u00f5ib j\u00e4rgida ka reeglit 10-12 s\u00f5na real!<\/li>\n
                        • P\u00fc\u00fca v\u00e4ltida teksti kirjul taustal.<\/li>\n<\/ul>\n

                          Graafika kasutamine<\/h1>\n

                          Veebilehti ei tohi \u00fcle koormata suuremahuliste piltidega ning kasutatud graafika peaks enne veebilehele paigutamist sobivasse m\u00f5\u00f5tu l\u00f5ikama. Enim leiavad veebilehel kasutust JPEG, PNG, GIF ja SVG formaadis pildid.<\/p>\n

                          V\u00e4rvid<\/h2>\n

                          V\u00e4rvilahendus peab olema sobivalt valitud! Oluline on j\u00e4lgida, et v\u00e4rvid silmadele ei hakkaks ning et teksti ja tausta v\u00e4rvide vahel esineks piisavalt suur kontrast.<\/p>\n

                           <\/p>\n","protected":false},"author":1,"menu_order":5,"template":"","meta":{"_mi_skip_tracking":false,"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":3,"_links":{"self":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/514"}],"collection":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":4,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/514\/revisions"}],"predecessor-version":[{"id":882,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/514\/revisions\/882"}],"part":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/514\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=514"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=514"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=514"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}