Ensimmäisenä omat sivuni yliopiston ajoilta. Käytin kuvituksena lempimaalaustani ja kokeilin painikkeiden tekemistä kuvankäsittelyohjelmalla. Leikittelin asettelulla ja heittelin painikkeet "sekaisin" taulukkoon, jotta asettelu ei olisi niin tylsä ja staattinen.
Parvelan Hevostilan sivut olivat ensimmäiset sivut, jotka tein muille kuin itselleni. En muista enää vuotta, kuitenkin ennen 2005, koska silloin sain ylläpidettäväkseni toisetkin sivut. Tämä versio on vuodelta 2008. Sivujen tilaaja ei osannut päättää sivuston väriä tekemistäni ehdotuksista, joten päätettiin tehdä layout, jossa väriä voi helposti vaihtaa - tässä muutama väriesimerkki. Muita värejä vuosien varrelta ovat olleet violetti-roosa, vihreä ja keltainen. Värejä vaihdeltiin usein vuodenaikojen mukaan, ja tein rakenteesta sellaisen että värien vaihtaminen onnistui nopeasti. Hienoa tässä layoutissa on leveyssuunnassa jatkuva kuva, jolloin sivu skaalautuu eri kokoisille näytöille eikä kuva katkea missään vaiheessa. Samaan kuvaan tein kuvankäsittelyohjelmalla opacity-kerroksen, johon lisäsin värin - näin värikerrosta vaihtamalla kuvan sai helposti muutettua sointumaan eri värisiin sivupohjiin. Nyt monta vuotta myöhemmin näiden katsominen on ehkä aavistuksen noloa, sen verran paljon olen oppinut webbisuunnittelusta lisää.
Tässä sivujen nykyinen layout. Jotain samaa, jotain uutta... Näillä sivuilla on hyvin symmetrinen asettelu, mutta tärkeää on kuitenkin selkeys ja skaalautuvuus leveyden suhteen. Hevoskasvatus ja jalostusori ovat saaneet omat alasivustonsa, jotta sivuston rakenne ei syvenisi liikaa. Ihan täysin en ole tähänkään tyytyväinen, mutta kypsytellään mitä vielä voisi parantaa.
Ratsastusseura Pirkanmaan Piaffelle tekemäni sivut. Otsikkopalkkiin koostin erilaisia kuvia, jotka kertoisivat seuran toiminnan monipuolisuudesta sekä liitin seuran logon näkyvälle paikalle. Seuralehden uusin numero on nostettu näkyville etusivulle, kuva on tehty ottamalla ruudunkaappauskuva pdf:n ensimmäisestä sivusta. Leveys on sovitettu kapeammillekin näytöille sopivaksi. Itselläni on koneessa leveä näyttö, siksi taustaa näkyy niin paljon. Nämä ovat ehkä vähän tylsän väriset, näyttävät melkein mustavalkoisilta - vanhanaikaisilta?
Tämä kiinnostava pikkuprojekti oli myös hauskaa css-harjoittelua. Navigointipalkin taustalla oleva sininen kuva on leikattu samalla sivulla olevasta mainoskuvasta. Minusta sininen-vihreä-valkoinen ei ole kovin toimiva yhdistelmä...
Uudistin jossain vaiheessa omia sivujanikin, kokeilin tässä netistä löytyvien valmiiden komponenttien käyttöä navigointiin. Harjoittelin myös toistettavan taustakuvituksen tekemistä.
Seuraavaksi esittelen ehkä onnistuneimpia layouttejani. Ensimmäisenä Parvelan Hevostilan alasivustot Hevoskasvatus ja jalostusori Lastun Leka:
Hevoskasvatus-sivun yläpalkkiin päässyt kuva on itse ottamani. Skaalautuessa yläpalkin kuva toimii hyvin - yleisimmillä näyttöleveyksillä kuva kapenee tyylikkäästi (koska kuvan painotus on vasemmassa reunassa) ja tosi leveänä kuvan molemmille puolille tulee näkyviin vihreä väri. Sivujen keväänvihreä väritys on valittu silmällä pitäen sitä, että keväällä sivuilla tapahtuu eniten, kun varsat syntyvät.
Lastun Lekan sivujen vuoden 2009 layout. Näiden sivujen (Hevoskasvatus - Lastun Leka) yhteyttä pyrittiin korostamaan samankuvioisella taustakuvituksella (vihreä - sininen) sekä samanlaisella asettelulla. Yläpalkissa oleva kuva on Tanja Ukkosen ottama, leikkasin kuvan irti taustasta ja liitin läpinäkyvälle taustalle. Tein gradientin ja asettelin siihen tekstin. Tein myös kakkostason otsikoille gradienttiteemalla kuvat. Navigointipalkkiin tein pienen pallurakuvan aktiivista sivua varten. Yläpalkkiin olen edelleen todella tyytyväinen, mutta sivun väliotsikkotyyleihin en.
Seuraavaksi talveksi (2010) vaihdettiin layouttia. Sivun kuvan on ottanut Tanja Ukkonen, tämänkin olen leikannut irti taustasta ja liittänyt läpinäkyvälle taustalle. Sivun alaosan nyöri-kuvan olen itse ottanut ja muokannut vaakasuuntaan toistettavaksi. Tämä on mielestäni tosi toimiva ja tyylikäs.
Tällaistakin layouttia suunniteltiin jossain vaiheessa, mutta tämä ei ole ollut koskaan käytössä. Sininen samettihuopa-taustakuva on itse ottamani ja muokkamani. Kokeilin myös samettihuopa-taustakuvan muokkaamista eri väriseksi. Mielestäni sinisen ja viininpunaisen värikontrasti on kiinnostava, tätä voisi kyllä joskus vielä hyödyntää. Kun vertaa tätä edelliseen, niin jotenkin tuo sininen raikastaa viininpunaisen hienosti.
Lastun Lekan nykyiset sivut. Sama sivupohja mutta vihreänä. En tiedä, ehkäpä viininpunainen toimii paremmin. Täytyy kyllä sanoa, että tumma vihreä on aika haastava sivun taustavärinä. Eri näytöillä vihreä näyttää ihan erilaiselta: tummemmalta tai kirkkaammalta.
Bogdogs-sivut ovat tulleet minulle ylläpitoon vuonna 2005. Vuoden 2008 lopulla tehtiin ulkoasu-uudistus, joka näkyy alla. Aikaisempaa versiota en esittele, koska se ei ole minun tekemäni. Olen hyödyntänyt sivuilla jo aiemmin käytössä olleita elementtejä: otsikkokuvia ja pieniä kukkasia, jotka toimivat erottimina. Lisäsin sivuille kennelin logon. Logoa muokkasin sen verran, että hyödynsin läpinäkyvää taustaa, jolloin sain laatikosta ulos lentävän sorsan korostettua. Lisäksi lisäsin muuten mustavalkoiseen kuvaan taustan väriset vesipisarat. Sivun taustana on leveyssuuntaan toistuva gradienttisoiro + taustaväri. Käytin tyylikeinona sitä, että logo on aivan kiinni sivun yläreunassa ja lentävä lintu erottuu hienosti gradienttia vasten.
Sivujen uusin versio (tammikuu 2012) on hieman muokattu vanhasta. Hyödynsin vanhaa, aiemmin käytössä ollutta taustakuvaa, siirsin navigointielementin ja logon osittain sisältöalueen sisälle. Näin sain muuten symmetriseen asetteluun hieman kiinnostavuutta.
Luovuuden kanavoimiseen on siis olemassa monia muotoja!
Ei kommentteja:
Lähetä kommentti