
Tervetuloa webbisuunnittelu-sivulle!
MiMaVe-Design-Photo Web Design in English.
Läpikäynnin webbisivusuunnittelusta antavat MiMaVeSuunnitteleeJaKuvaa , MiMaVe-Design-Photo.net ja Navigarespectrum.fi -sivut.
Webbisuunnittelua eri keinoin, eri aikona ja eri tyylein
Läpikäynnin webbisivusuunnittelusta antavat MiMaVeSuunnitteleeJaKuvaa , MiMaVe-Design-Photo.net ja Navigarespectrum.fi -sivut. Näillä kolmella sivulla tulee esille kolme eri aikakautta, kolme eri tapaa tehdä sivut, ja myös kolme eri tyyliä ja kaikki ovat WordPress-pohjaisia.
Navigarespectrum.fi edustaa vanhaa aikakautta ja ”klassista” teemaa.
Sivut on tehty starter-teemaa (teemarunko) apuna käyttäen. Tätä on modattu ja siihen on lisätty visuaalisia, graafisia ja layouttiin liittyviä elementtejä yms. Se on aikakaudelta ennen kuin Gutenberg ja blokit toivat enemmän mahdollisuuksia. Eli suurin osa modifioinneista piti tehdä teemassa, eli koodissa. Visuaalisesti tässä on kuvaa, fonttia, väriä ja grafiikkaa.
MiMaVe-Design-Photo.net edustaa taas seuraavaa sukupolvea, joka hyödyntää jo Gutenbergin mahdollisuuksia, eli peruslayout-jutut onnistuu wordpressissä itsessään paremmin.
Tämän sivun teeman olen tehnyt aivan tyhjästä itse. Halusin teeman, jossa olisi vain välttämätön ja täten enemmän tilaa jäisi visuaaliselle, grafiikoille, ja itse suunnittelulle ilman, että koodi paisuisi. Gutenberg ei kuitenkaan mahdollista kovin paljoa, eli jos halutaan tehdä erilaista on se vielä tehtävä koodilla ja teemalla. Tähän teemaan on rakennettu grafiikkaelementit alusta lähtien osaksi sivustoa, mitä ei gutenbergillä, eikä sen evoluutiolla Full Site Editingillä (tästä alla lisää) pysty vielä täysin tekemään. Eli MiMaVe-Design-Photo.net teema on täysin minun tekemä ja se on aika visuaalisesti kyllästetty, mutta tämä oli sen tarkoituskin, katsoa kuinka visuaalinen, erityisesti svg (vektorigrafiikka/koodia), tulee osaksi kokonaisuutta. Visuaalisesti tässä on siis huomattavasti enemmän kuvaa ja videota ja erityisesti grafiikkaa.
Tämä kyseinen sivusto, eli MiMaVeSuunnitteleeJaKuvaa on taas tehty täysin WordPressin Full Site Editingiä ajatellen. Jos wordpressillä 5.9 eteenpäin on FSE:lle tarkoitettu teema pystyy sillä itse tekemään aikalailla samaa kuin page buildereilla ennen. Eli ”perus” layout ja sivut ja niiden variaatiot onnistuvat ilman teemoja, plugareita yms. Ihan muutaman filun ja koodirivin FSE-teemalla tekee jo paljon, mutta ei vielä kaikkea. Joten tämänkin teemassa on kyllä jonkin verran Css:ssä, html:ää, svg:tä ja js-kikkoja ja myös muutama php-filukin.
Tulevaisuus näyttää kuitenkin mielenkiintoiselta: koodin tarve on vähentynyt aivan valtavasti, mutta kuitenkin voidaan luoda FSE-teemoja, joissa on oma tyylinsä pääosin theme.json-filun avulla. Eli voidaan tällä avata ja rajata käyttäjille mahdollisuuksia. Eli periaatteessa voit tehdä mielenkiintoisiakin sivuja ilman koodia, jos vain sinulla on materiaalia siihen. Kuten näillä sivuilla olen käyttänyt paljon kuvia ja rendattuja 3d-grafiikoita.
Graafiset suunnittelijat ja sisällöntuottajat ja miksei kuka vaan pystyy nyt tekemään omanlaiset sivut ilman koodia Wordpessissä. Tämä ei kuitenkaan muuta sitä tosiasiaa, että työmäärä sivustolle on suuri ja ehkä jopa uudet mahikset vain lisää sitä, jonkun on kuitenkin tehtävä luovat valinnat… Vieläkin kuitenkin jos haluaa tehdä erilaisempaa ja erilaisia ratkaisuja on se tehtävä koodin eli teeman puolella, pelkkä site editor ei vielä riitä.
Näiden kolmen sivun avulla, niitä vertailemalla ja selailemalla voi saada aika hyvän kuvan eri vaihtoehdoista, tyyleistä ja mahdollisuuksista. Millään tavalla sivut eivät kuitenkaan onnistu ilman vaivaa…
Vielä pari vanhempaa esimerkkiä
All olevat molemmat ovat samaa klassisen teeman aikakautta kuin navigarespectrum.fi-sivusto ja ovat jo siinä mielessä vanhoja, mutta vielä havainollistavia.
Alva-sivusto:
Sivuston tarkoituksena oli kerätä yhteen alueen vapaaehtoistoimijoita. Sivuston keskeinen osa on koneisto sen takana. Sivuston on tarkoitus pystyä käsittelemään paikallisten yhteisöjen ilmoituksia foorumilla, toimimaan yhteisölistauksena ja kontaktipaikkana. Lähtökohtana oli Alva-hankkeen jo olemassa oleva visuaalinen ilme. Sivusto vastaanottaa rekisteröintejä, joiden avulla luodaan profiilit ja käyttäjät. Yhteisöt voivat tätä kautta ilmoittaa vapaaehtoistyöntekijätarpeistaan.
Sivustoa ei ole julkaistu, mutta alla on muutama havainnollistava kuva esimerkkiversiosta. Vasemmalta aukeaa sivupalkki, jossa on haku, sisäänkirjautuminen ja luokituksia.



Ensimmäisessä kuvassa on pöytäkonenäkymää: Taustalla liikkuu sesonkiin/teemaan sopiva slaideri, mihin voi vaihtaa kuvia yms.
Toisessa kuvassakin on pöytäkonenäkymää: Ilmoittajaksi foorumille ilmoittaudutaan lomakkeella.
Kolmannessa kuvassa on mobiilinäkymää: Tämänkaltaiset profiilisivut toimijoille olisi tarkoitus tulla. Tässä on kyse tietenkin fiktiivisestä esimerkistä. Yllä olevan kuvan kohtaan tulee toimijan logo tai valitsema kuva yms.
Niemelänkylän kyläyhdistyksen sivut:
Sivujen on tarkoitus toimia informaatiolähteenä kyläyhdistyksen toiminnasta ja ajankohtaisten asioiden ilmoituspaikkana. Toivottiin maalaismaista tyyliä. Sivut on toteutettu niin, että yhdistyksen vastuuhenkilöt voivat itse helposti päivittää sivustoa. Kuvien, sisällön yms. vaihtaminen ja lisääminen käy helposti. Ulkoasuakin voi muuttaa värityksen ja otsikkokuvan avulla. Sivusto on ulkoasusuunnittelulta tarkoitettu sellaiseksi, että se mukautuu mahdollisimman hyvin eri väri- ja kuvateemoihin.
Sivustolle oli tarjolla myös erilaisia ilmeitä graafisine kokonaisuuksineen. Sivustosta oli kaksi versiota testattavana. Alla näytillä yksi testiversioista. Tässä jokaiselle sivusto-osalle oli oma ”logonsa” liittyen kylälle suunniteltuun logoon. ”Logot” kulkivat sivustossa mukana valikossa. Siis yhdistys -sivuilla kyläyhdistysgrafiikka jne.




Julkaistusta sivustosta tuli esiversioihin nähden huomattavasti karsitumpi, tarkentuneiden toiveiden mukaisesti toteutettuna. Klikkaa linkkiä Niemelankyla.net.
Webbidesignia, asiaa!