Internetsivun ulkoasun synty on monivaiheinen prosessi. Se pitää sisällään ainakin kaksi vaihetta:
Tutkimalla useaa web-suunnittelijaa työssään voitaisiin selvittää, kuinka yksilöllisiä tapoja ko. prosessin suorittamiseen löytyy. Kuinka pitkälti teemme nettisivuja saman kaavan mukaan? Minä en tiedä, mutta tämän artikkelin luettuasi sinä tiedät ainakin sen, missä määrin omat tapasi eroavat minun tavoista.
Omalla kohdallani ulkoasun tekeminen ei käynnisty ideasta, tavallisesti ainakaan. Pääni on siinä vaiheessa tyhjä, kun avaan Photoshop’n. Homma lähtee liikkeelle epämääräisten kuvioiden piirtelyllä ja väriyhdistelmien kokeiluilla, kunnes yhtäkkiä huomaan monitorilla jotain kelvollista. Tässä vaiheessa näen ehkä pari eriväristä palikkaa tietyn värisellä taustalla, ja ne sytyttävät hehkulampun päässäni. Valmiista ulkoasusta muodostuneen mielikuvan turvin piirrän loputkin palikat. Grafiikka on nyt valmis.
Seuraavaksi kopioin tekstieditoriin jonkin aiemmin tekemäni nettisivun (x)html-merkkauksen ja rupean muokkaamaan sitä uudelle ulkoasulle sopivaan muotoon. Järjestän div-lohkot uuteen ulkoasuun soveltuvaan järjestykseen, ja teen html-tiedoston kaikkinensa valmiiksi. Seuraavaksi vedän esille taas kerran entisestä ulkoasusta peräisin olevan css-tyylitiedoston poistellen sieltä tyylit, joita en uuden sivuston kanssa tarvitse. Tyylitiedoston muokkaan valmiiksi seuraavassa järjestyksessä:
div:lle tyylit. Tavallisesti tämä on header-lohko, joka sisältää logon ja navin. Vasta, kun olen yhden div:n saanut kokonaisuudessaan tyyliteltyä, siirryn seuraavan kimppuun ja niin edelleen etenen lohko lohkolta ylhäältä alas. Näiden toimenpiteiden aikana tsekkailen jatkuvasti Mozilla Firefoxilla, että ulkoasu on sen näköinen, kuin pitääkin. Tämän vaiheen aikana myös pilkon tekemäni graafiikan siten, että saan aseteltua palaset lohkojen taustoille.Itse jatkan tavallisesti vielä viidenteen vaiheeseen, jossa rakennan ulkoasusta WordPress-teeman. Se onkin sitten jo oma tarinansa.
Miika Lammikosta, joka tällä hetkellä puuhailee sivustonsa seuraavan mullistavan version parissa.
Tagit: ulkoasu
Tämän julkaisun kommentointi on suljettu.
Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 7 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Vierailijat. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2007/06/14/ulkoasun-valmistuskaari-yksi-tapa.
Petri kirjoitti 332 päivää sitten:
Tämä Miikan naputtelema kirjoitus on kiehtova. Hän tekee osittain samaan tapaan noita ulkoasuja kuin minäkin. Esimerkiksi tuo “epämääräisten kuvioiden piirtely ja väriyhdistelmien kokeilu” on hyvin usein edessä, ellei projektin tilaaja ole erikseen antanut jotain tiettyä väripalettia käytettäväksi, tai jos tilaajalta ei ole saatu logoa tai muuta kuvamateriaalia nähtäväksi. Logosta, valokuvista jne. voi ottaa helposti vaikutteita siihen ulkoasuunkin, mutta jos minkäänlaista graafista aineistoa / ohjeistusta ei ole entuudestaan käytettävissä, pitää tosiaan kaikki käytettävät värit poimia paletista oman maun mukaan.
Viime aikoina olen tehnyt aika tummaa jälkeä (esim. tässä), joka poikkeaa vaikkapa tästä Korinaa kuopasta -blogin leiskan värimaailmasta aika radikaalisti. Tummien sävyjen käyttäminen taustalla on oikeastaan hyvin haastavaa jos halutaan säilyttää tekstin lukukelpoisuus edes siedettävällä tasolla.
Kommentoin tuonnempana tätä kirjoitusta lisää. Nyt on en ehdi, koska on kiire (hankkia lisää traumoja). Neloselta nimittäin tulee se The Cell. :-)
Gocom kirjoitti 332 päivää sitten:
Tummat värit tosiaan ovat aikamoinen vaikeus nettisivujen taustoissa, tai sitten sinä päävärinä. Monet eivät tummasta yleisteemasta pidä ja näyttöjen kirkkaus, sekä ihmisten näkökyky tuottavat silloin suuria ongelmia. Tummaa sivustoa oikeastaan tarvitsee salailla pimeässä huoneessa, jottei selailu häiriinny valaistuksesta, jos vähän liioitellaan.
Mitä tulee sitten Miikan kirjoittamaan artikkeelin, tai sitten siihen miten hänen ulkoasunsa syntyvät, muistuttavat aika tavalla minun tapaani tuottaa sivusto. Minulla yleensä grafiikan piirtäminen psp9:llä alkaa taustavärin valinnasta, jonka jälkeen valitsen siihen 2-3 sävyä lisää. Tekstin väri on joko vaalean harmaa, valkoinen tai musta – ainakin pääpiirteittäin.
Itse merkkauksen tuotan joka kerta lähes täysin ulkoa, sillä sen kirjoittamisessa ei mene yhtään sen kauempaa kuin blogimerkinnän tekemisessä. Tosin aina kirjoitan kaiken saman kaavan mukaan, ja jokainen merkkaus muistuttaa todella paljon toisiaan. Tosin eng-kielisissä sivuissa tulee käytettyä vain eng-kielellä id-nimettyjä div-palikoita :-)
Petri kirjoitti 332 päivää sitten:
Viitaten tuohon aikaisempaan kommenttiini: The Cell oli oikeastaan todella mainio ja tyylikäs elokuva. Hienoja pukuja, maskeerauksia ja lavasteita. Monet kohtaukset olivat niin epätodellisia, että virkistivät kummasti. (Lue: En uskalla mennä nukkumaan. Ikinä. Mä pyydän nyt äiskää lähettämään iltasadun vaikka tekstarilla.)
Nuo tummat värit on tosiaan hankalia käyttää jos halutaan sitä paljon ylistettyä esteettömyyttä mättää sivustolle. Pulmahan siinä on juuri se jos on iso klöntti esimerkiksi mustaa väriä taustalla, niin sen päällä hyllyvän tekstin pitäisi olla kohtalaisen kirkasta, mutta ei liian räikeää, sopivan kokoista jne.
Gocom, teet siis sen sivupohjan merkkauksen uusiksi joka kerta? Elä, elä... Hyvä mies. Kannattaa hyväksikäyttää niitä vanhoja luomuksia, eli ihan nöyrästi kopioida joku vanha toimiva merkkaus sillä hetkellä työstettävän projektin rungoksi. Sama CSS:n kanssa. Saatat muuten vaikka unohtaa jotain tärkeää. Esimerkiski CSS:n suhteen voipi unohtua vaikka joku selainkohtainen viritys jos ulkomuistista vetelet. Vaikka onhan tuo tietysti siinä mielessä näppärä tapa ylläpitää omaa osaamistaan jos ei kopioi suoraan vanhoja vaan tekee aina mieleen ahdettujen muistiinpanojen pohjalta.
Itse en noista id-nimistä niin välitä onko ne suomeksi vai englanniksi. Taitaa yleensä mennä joukkoon kummallakin kielellä. Vanha tapa, josta olisi varmaan ihan hyvä päästä eroon, koska ovat niin sekalaista mössöä -> jälkikäteen on vähän vaikeuksia hahmottaa että mitäs ihmettä tämä tai tuo tarkoittaakaan.
Kun tuo Miika jo tuossa artikkelissa vähän vihjasi, että miten me muut näitä ulkoasuja teemme, tarjoan tässä tiivistetyn version omasta workflow’stani:
1. Kopioidaan jonkun vanhan sivupohjan HTML-tiedosto ja CSS-tiedostot. Pidän kaikki projektit samassa hakemistossa, josta noista kopioitavia tiedostoja löytyy.
2. Deletoin HTML-tiedostosta edellisen projektin sisällöt ja turhan merkkauksen, jota ei sillä hetkellä tehtävässä projektissa tarvita. Lisään samalla tiedostoon mahdollisimman paljon tietoa sivupohjasta, eli otsikon, tekstit ja muut sisälmykset.
3. Avaan CSS-tiedostot yksi kerrallaan ja tyhjennän niistä ne mitä ei nyt sillä hetkellä tarvita.
4. Lueskelen projektin taustatiedot vielä kertaalleen jos niitä on tarjolla. Ihan siltä varalta ettei tule tehtyä asioita väärin.
5. Keitän kahvia, pistän kuulokkeet korville, WinAmpin soimaan ja otan sukat pois jalasta.
6. Teen jonkinlaisen hahmotelman kuvankäsittelyohjelmalla. Joskus tulee tehtyä koko sivupohjan grafiikat, joskus taas vain ulkoasun grafiikan runko (se sisältöalue, taustaväritys).
7. Tallennan sillä hetkellä valmistuneet grafiikat muotoihin .pspimage, .psd ja .tif tai .bmp. Tällä pyrin varmistamaan sen, että saan tiedostot auki myöhemminkin vaikka mitä sattuisi. Tuo kolmas tiedostomuoto vähän vaihtelee, kunhan se on joku sellainen formaatti mikä ei pakkaa kuvia.
8. Leikkaan grafiikat ja tallennan ne.
9. Luon CSS-merkkausta elementti kerrallaan ja kuikuilen Firefoxilla miltä sivupohja missäkin vaiheessa oikeasti näyttää.
10. Kun CSS-merkkaus on valmis, lähetän joko ulkoasun tilaajalle tarkistettavaksi (demoversio) tai sitten skippaan sen ja:
11. Laitan leiskan toimimaan myös Internet Explorerilla ja sitten parilla muullakin yleisimällä graafisella nettiselaimella.
Suunnilleen noin. Kaikenlaiset pienet kuvat (favicon, koristeet, kuvakkeet) pistän paikoilleen milloin missäkin vaiheessa. Tuossa “työvirrassa” ei ole mainittu CSS-tiedoston tekemistä esim. mobiililaitteille, mutta jos sellainen on tarkoitus tehdä niin se tuppaa valmistumaan vasta sen jälkeen kun ulkoasu on testattu nettiselaimilla. Testaan ulkoasun merkkauksen virheettömyyden vasta sen jälkeen kun kaikki muut vaiheet on hoidettu pois alta. Yleensä en viitsi ajaa validaattorin läpi noita CSS-tiedostoja. Jos ulkoasu on tehty jollekin ulkopuoliselle henkilölle, lähetän siitä hänelle joko kuvakaappauksia tai “live-version” mahdollisimman aikaisessa vaiheessa, jotta tilaaja voi kommentoida sitä ja kertoa toiveistaan. Demoja tulee läheteltyä joskus aika montakin kappaletta, etenkin jos on hyvin vaativa asiakas joka keksii kerta toisensa jälkeen lisättävää / poistettavaa / korjattavaa. Lopputuotteen tilaaja saa joko asennettuna tai ladattavana zip-/rar-pakettina.
Nuo työvaiheet tulevat ihan varmasti kehittymään ajan mittaan.
Hyvä yleisö. Nyt on Teidän vuoronne. Kun kerran tässä Miika, Gocom ja minä avauduttiin, niin nyt saatte tekin… ;-)
Riku kirjoitti 332 päivää sitten:
Ennen tarkassa järjestyksessä eteneviä vaiheita on enemmän tai vähemmän pidempi vaikutteiden keruuta ja inspiraation etsintää sisältävä jakso. Aina se ei ole tietoista, tyylejä, kikkoja ja muita ulkonäköön liittyviä palikoita vain kasaantuu päähäni niin lehdistä, kirjoista, musiikista, kuin myös (tietenkin) nettisivuista. Tämä vaihe on itse asiassa päällä koko ajan.
Kun tulee tarve päästää palikat ulos, homma alkaa kynällä ja paperilla. Tyhjä A4 ja musta tussi päästävät luovuuden ulos parhaiten. Paperille suttailtuani ja ideoita pyöriteltyäni siirryn tietokoneelle ja avaan Photoshopin.
Tässä vaiheessa tulee yleensä lisättyä musiikin volyymiä.
Yleensä ideat jalostuvat vielä koneella niitä pyöritellessäni. Värit tulevat yleensä aika itsestään, niitä sen enempää miettimättä. Kun ulkoasu alkaa tuntua hyvältä, tallennan sen .png-muotoon ja luon ulkoasulle oman kansion, jonne sitten tulee kaikki mahdollinen ulkoasuun liittyvä tavara.
Seuraa ulkoasun pilkkominen. Ei siitä sen enempää.
Kun ulkoasu on kauniina palasina, on aika koostaa se HTML:n ja CSS:n voimin. Yleensä tulee kopsattua ulkoasun kansioon jonkin vanhemman ulkoasun Lorem ipsumilla varustettu pohja ja sen CSS-tiedosto. Palojen koostaminen alkaa.
Kun ulkoasu on kasassa ja selaimella ihailtavissa, pistän sen sivuun. Joskus rakennelma saa maatua aika kauankin, ennen kuin kaivan sen taas esiin. Mietin mitä parantaisin, onko se käyttökelpoinen, pidänkö siitä ja päätöksestä riippuen kikkailen siitä WordPress-teeman, jos siis onni käy.
Jos asiakas on joku muu kuin minä, on matka hahmotelmasta hiukan erilainen, mutta ei silti kamalasti. Nopeampi vain. Lopputulokseen tämä ei kamalasti vaikuta, itselle tehdystä ulkoasusta haluaa vain olla varmempi jotenkin.
Kamalaa kirjoittaa näin pitkää tekstiä näin pieneen laatikkoon. :(
Petri kirjoitti 331 päivää sitten:
Kiitos Riku. Tapasi tehdä on luonnollinen. Taidanpa kokeilla miltä tuo paperille hahmotteleminen tuntuu ja minkälaista jälkeä siitä syntyy. “Suttailetkos” siihen paperille ihan randomilla jotain muotoja ja viivoja vai yritätkö päästä mahdollisimman ulkoasumaiseen lopputulokseen?
(Laitoin nyt vihdoinkin tätä kommenttikenttää suuremmaksi.)
asdfds kirjoitti 314 päivää sitten:
Millä ohjelmilla te teette sivustojenne kauniit grafiikat, onko niitä ohjelmia helppo käyttää?
Petri kirjoitti 314 päivää sitten:
Itse käytän pääsääntöisesti Paint Shop Pro -nimistä kuvankäsittelyohjelmaa. Sen vanhempia versioita, sillä Corelin vallattua Jasc Softwaren alkoi PSP:n käyttöliittymä käymään käyttökelvottomaksi. Paint Shopperoa on kohtalaisen helppo käyttää ainakin jos näitä nettigrafiikoita on tarkoitus luoda. Softan tuoreimpia versioita on tarjolla myös suomenkielisenä. Sitä voi testata demoversiona muistaakseni 30 päivän ajan, joten sitä ei ole pakko ostaa ihan heti. Demoversiosta ei ole karsittu toimintoja.
Riku tuossa kommentissaan mainitsi käyttävänsä Photoshopia ulkoasujen tekemiseen. Se on noita Adoben rakentamia monipuolisimpia kuvankäsittelyohjelmia. Siitä meikäläisellä ei ole mainittavasti kokemuksia, kun en ole paljon käytellyt. Enkä muuteskaan tykkää siitä ikinäkikinä. Höhöhö.