https://peda.net/id/3caa31a4a4c 2024-11-17T12:03:46+02:00 https://peda.net/:static/533/peda.net.logo.bg.svg <div class="license">Tämän sivun lisenssi <a rel="license" href="https://peda.net/info">Peda.net-yleislisenssi</a></div> https://peda.net/id/3cab621aa4c 2024-09-14T20:26:18+03:00 <div class="main"> <div class="content enclose"> <p>Moni moduuli sisältää erillisen videonurkan. Löydät sen oikealta tietokonenäkymästä ja alhaalta mobiilinäkymästä. Videonurkan sisällöt ovat moduulin aiheeseen liittyviä ja tarjoavat syvällisiä katsauksia asiantuntijoilta. Nämä videot tarjoavat mahdollisuuden syventää ymmärrystäsi moduulin aihepiiristä,<span> </span><b>mutta niiden katsominen ei ole pakollista kurssin suorittamisen tai keskeisten asioiden oppimisen kannalta.</b><span> </span>YouTube-videot voidaan tarvittaessa kääntää myös kotimaisille kielille videon asetuksista.<br/> <br/> <br/> <b>Video-ohjeita verkkosivustojen suunnitteluun liittyyen:</b><br/> </p><div class="youtube"><iframe loading="lazy" width="640" height="360" src="https://www.youtube.com/embed/8ly4Z3e3cPw?rel=0&amp;modestbranding=1&amp;hl=fi" allowfullscreen="allowfullscreen"></iframe><div><a href="https://www.youtube.com/watch?v=8ly4Z3e3cPw" title="https://www.youtube.com/watch?v=8ly4Z3e3cPw" target="_blank" rel="nofollow ugc noopener">https://www.youtube.com/watch?v=8ly4Z3e3cPw</a></div> </div> <br/> <div class="youtube"><iframe loading="lazy" width="640" height="360" src="https://www.youtube.com/embed/LJbkLdtEW00?rel=0&amp;modestbranding=1&amp;hl=fi" allowfullscreen="allowfullscreen"></iframe><div><a href="https://www.youtube.com/watch?v=LJbkLdtEW00" title="https://www.youtube.com/watch?v=LJbkLdtEW00" target="_blank" rel="nofollow ugc noopener">https://www.youtube.com/watch?v=LJbkLdtEW00</a></div> </div> <br/> <br/> <p></p> </div> </div> 2024-11-17T12:03:46+02:00 https://peda.net/id/3cadf483a4c 2024-09-13T18:15:39+03:00 Tässä moduulissa tutustumme suunnittelu-järjestelmän rakentamiseen, joka yksinkertaistaa verkkosivuston kehitysprosessia ja ohjaa meitä verkkosivuston elementtien tyylittelyssä. Tässä moduulissa opeteltujen ja tehtyjen asioiden ei tarvitse olla lopullinen mitä käyttää kurssin nettisivustossa, vaan moduulin tarkoituksena on että opit perusteet nettisivuston suunnittelusta ja sisäistät suunnittelun tärkeyden.<br/> <br/> <b>Mikä on design-järjestelmä ja miksi sitä kannattaa käyttää?</b><br/> <br/> Jotta verkkosivusto olisi tehokas, sen tulee välittää selkeää ja johdonmukaista viestiä, joka ilmenee sekä sen sisällössä että visuaalisessa suunnittelussa. Luomalla selkeät ohjeet rakennusprosessista tekee verkkosivuston tekemisestä tehokkaampaa, mikä säästää aikaa ja auttaa säilyttämään yhtenäisyyden koko sivuston läpi. Tässä kohtaa suunnittelu-järjestelmä on erittäin hyödyllinen. Suunnittelu-järjestelmä on kokoelma valmiiksi määriteltyjä tyylejä, jotka auttavat jäsentämään verkkosivustosi ja antavat sille puhtaan ja viimeistellyn ilmeen.<br/> <br/> Erilaisia ohjelmia verkkosivustojen suunnitteluun ovat muun muassa Figma (ilmainen, myös maksullinen versio löytyy) ja Adobe XD (maksullinen). Voit käyttää tällä kurssilla sitä ohjelmaa mikä sinusta tuntuu parhaalta verkkosivustosi suunnitteluun. 2024-11-17T12:03:46+02:00 https://peda.net/id/3caf9989a4c 2024-09-10T20:04:46+03:00 <p>Ennen kuin aloitat, mieti verkkosivustosi tarkoitusta ja kohdeyleisöä. Määritä, millainen tunnelma ja viesti visuaalisen suunnittelun tulisi välittää (esim. ammattimainen, luova, leikkisä).</p> 2024-11-17T12:03:46+02:00 https://peda.net/id/3cb033aea4c 2024-09-11T15:00:42+03:00 <ol> <li><strong>Valitse ensisijainen fontti</strong> – Tämä on pääfontti, jota käytetään otsikoissa ja tärkeissä teksteissä.  <ul> <li>Suositus: Varmista, että fontti on luettavissa eri laitteilla ja skaalautuu hyvin.<br/> <br/> </li> </ul> </li> <li><strong>Valitse toissijainen fontti</strong> – Tätä fonttia käytetään leipätekstissä ja vähemmän tärkeissä elementeissä. <ul> <li>Varmista, että fontit sopivat yhteen keskenään ja tukevat sivuston viestiä.<br/> <br/> </li> </ul> </li> <li><strong>Määritä hierarkia</strong> – Määrittele eri tasot, kuten otsikot, eli Otsakkeet (<b>Headerit</b>) (H1, H2, H3 jne.) ja kappaletyylit.</li> </ol> 2024-11-17T12:03:46+02:00 https://peda.net/id/3cb0d1e3a4c 2024-09-11T15:04:28+03:00 <ol> <li><strong>Päävärit</strong> – Valitse 3–4 väriä, jotka muodostavat sivustosi perusväripaletin. <ul> <li>Näitä käytetään tärkeissä elementeissä, kuten navigaatiossa, painikkeissa ja otsikoissa.<br/> <br/> </li> </ul> </li> <li><strong>Apuvärit</strong> – Nämä ovat lisävärit, joita käytetään korostuksissa ja taustoissa. Voit käyttää niitä halutessassi jos haluat värikkäämmän sivuston, mutta esimerkiksi lähes mustavalkoinen sivusto neutraaleilla väreillä voi näyttää ihan tyylikkäältä.<br/> <ul> <li>Suositus: Varmista, että apuvärit täydentävät päävärejä.<br/> <br/> </li> </ul> </li> <li><strong>Neutraaleja sävyjä</strong> – Käytä neutraaleja värejä, kuten valkoista, harmaata ja mustaa, tasapainottamaan värimaailmaa.</li> </ol> 2024-11-17T12:03:46+02:00 https://peda.net/id/3cb1a33aa4c 2024-09-10T20:06:06+03:00 <ol> <li><strong>Valitse yhtenäinen kuvaketyyli</strong> – Kuvakkeet voivat olla minimalistisia, yksityiskohtaisia tai leikkisiä. Valitse tyyli, joka vastaa sivuston ilmettä.<br/> <br/> </li> <li><strong>Kuvitukset ja kuvat</strong> – Jos käytät kuvituksia tai kuvia, varmista, että niiden tyyli on yhtenäinen. <ul> <li>Suositus: Valitse kuvia, jotka tukevat sivuston viestiä ja eivät riitele muun visuaalisen suunnittelun kanssa.</li> </ul> </li> </ol> 2024-11-17T12:03:46+02:00 https://peda.net/id/3cb23ed1a4c 2024-09-10T20:10:17+03:00 <ol> <li><strong>Luo komponenttikirjasto</strong> – Määrittele valmiit käyttöliittymäkomponentit, kuten painikkeet, lomakkeet, kortit ja navigaatiopalkit. <ul> <li>Suunnittele komponentit niin, että ne ovat helppokäyttöisiä ja monistettavia.<br/> <br/> </li> </ul> </li> <li><strong>Määrittele tila- ja animaatioefektit</strong> – Määritä komponenttien eri tilat (esim. hover, aktiivinen, passiivinen) ja mieti, käytätkö pieniä animaatioita tehostaaksesi käyttöliittymää.</li> </ol> 2024-11-17T12:03:46+02:00