TyönäytteetWorkReferenssiCase study
Elina Suominen. Portfolio, joka pysyy poissa kuvien tieltä.Elina Suominen. A portfolio that stays out of the photos' way.
Elina Suominen on jyväskyläläinen valokuvaaja, joka kuvaa luontoa, ihmisiä ja kaupungin hiljaisia paikkoja. Suunnittelin ja koodasin hänelle portfolion: etusivu, neljä kokoelmaa ja tietoa-sivu.
Elina Suominen is a photographer in Jyväskylä, Finland, who shoots nature, people and the quiet corners of the city. I designed and coded her portfolio: a front page, four collections and an about page.
LähtötilanneStarting point
Valokuvaajan sivustolla kuva on koko asia. Jos sivut latautuvat hitaasti tai pakkaus tekee kuvista suttuisia, kävijä arvioi kuvaajan taidot väärän näytteen perusteella.
On a photographer's site the photo is the whole point. If the pages load slowly or the compression turns the photos to mush, the visitor judges the photographer on the wrong evidence.
Elinan kuvat elävät pehmeästä valosta ja hiljaisista hetkistä. Sivuston piti kantaa sama tunnelma. Ei tehosteita eikä kikkailua, vaan kuvat hyvässä järjestyksessä ja nopeasti esillä.
Elina's photos live on soft light and quiet moments. The site had to carry the same mood. No effects and no tricks, just the photos in good order, shown fast.
RatkaisuSolution
Sivustolla on etusivu, neljä kokoelmaa ja tietoa-sivu. Kokoelmat ovat Luonto, Muotokuvat, Kaupunki ja Yksityiskohdat, ja jokaisella on oma sivunsa. Navigaatiossa on kolme linkkiä, eikä kävijä eksy.
The site has a front page, four collections and an about page. The collections are Luonto, Muotokuvat, Kaupunki and Yksityiskohdat: nature, portraits, the city and details. Each has a page of its own, the navigation holds three links, and no visitor gets lost.
Jokaisesta kuvasta tehdään useampi koko, ja selain lataa niistä pienimmän, joka riittää kävijän näytölle1. Puhelin ei siis lataa samaa tiedostoa kuin iso näyttö. Kuvat on pakattu WebP-muotoon, joka pitää sävyt mutta pudottaa tiedostokoon murto-osaan.
Every photo is produced in several sizes, and the browser loads the smallest one that is enough for the visitor's screen1. A phone does not download the same file as a large display. The photos are compressed to WebP, which keeps the tones but drops the file size to a fraction.
Ulkoasussa ei ole mitään, mikä kilpailisi kuvien kanssa. Typografia on hillitty ja tausta rauhallinen. Sivut rakennetaan valmiiksi Astrolla, joten palvelimella ei pyöri mitään, mikä voisi hidastua tai kaatua.
Nothing in the design competes with the photos. The typography is restrained and the background calm. The pages are prebuilt with Astro, so nothing runs on a server that could slow down or crash.
Mitä teinWhat I did
- UlkoasuDesign
- Suunnittelin sivuston kuvien ehdoilla. Tyhjä tila ja hillitty typografia jättävät huomion sinne, minne se kuuluu.I designed the site on the photos' terms. Empty space and restrained typography leave the attention where it belongs.
- KoodiCode
- Etusivu, neljä kokoelmasivua ja tietoa-sivu, rakennettu Astrolla. Sivut ovat valmiiksi rakennettuja tiedostoja ja aukeavat nopeasti myös hitaalla yhteydellä.A front page, four collection pages and an about page, built with Astro. The pages are prebuilt files and open fast even on a slow connection.
- Kuvien käsittelyImage pipeline
- Jokaisesta kuvasta syntyy automaattisesti useampi koko WebP-muodossa. Elinan ei tarvitse miettiä tiedostokokoja, kun hän lisää uusia töitä.Each photo automatically becomes several sizes in WebP. Elina never has to think about file sizes when she adds new work.
- YlläpitoMaintenance
- Uudet kuvat ja kokoelmat lisätään ilman uutta projektia. Pidän sivuston kunnossa julkaisun jälkeen.New photos and collections go in without a new project. I keep the site in working order after launch.
LopputulosOutcome
Valmis sivusto on kevyt ja hiljainen, niin kuin kuvatkin. Kävijä näkee työt nopeasti ja hyvälaatuisina, ja Elina voi kasvattaa kokoelmia ilman, että sivusto menee remonttiin.
The finished site is light and quiet, like the photos. The visitor sees the work fast and in good quality, and Elina can grow the collections without the site going under renovation.
[LISÄÄ ASIAKKAAN KOMMENTTI: pyydä Elinalta pari lausetta yhteistyöstä ja laita ne tähän]
[ADD A CLIENT QUOTE: ask Elina for a couple of sentences about the project and put them here]
TiedotDetails
- AsiakasClient
- Elina Suominen, valokuvaaja, Jyväskylä.Elina Suominen, photographer, Jyväskylä, Finland.
- ToimitusDelivered
- Portfoliosivusto: etusivu, neljä kokoelmaa ja tietoa-sivu.A portfolio site: a front page, four collections and an about page.
- TekniikkaBuilt with
- Astro ja Cloudflare Pages. Kuvat WebP-muodossa useassa koossa.Astro and Cloudflare Pages. Photos in WebP, in several sizes.
- OsoiteAddress
- elinasuominen.pages.dev
- JulkaistuLaunched
- [LISÄÄ AJANKOHTA: milloin sivusto julkaistiin][ADD DATE: when the site launched]
Katso itseSee for yourself
Katso sivusto ja ennen kaikkea kuvat.
See the site, and above all the photos.
Jos teet töitä, jotka ansaitsevat oman sivuston, kerro sähköpostilla millaisesta työstä on kyse. Osoite on topidowork@gmail.com. If you make work that deserves a site of its own, tell me by email what kind of work it is. The address is topidowork@gmail.com.