Fotós portfólió mozgó képsávval
Fehér Zalán esküvői fotós, és korábban nem volt weboldala. Minimalista lapot kért, mintának pedig egy statikus oldalt küldött át, hogy ő pontosan olyat szeretne. A visszafogottságot megtartottuk, egyetlen ponton viszont megtörtük: a képei többet érdemelnek annál, hogy csak egymás alatt álljanak. Belement, és ebből lett az íves képsáv, ami az egész nyitóképet viszi.
A munka
-
1 · Felépítés
A képektől az ajánlatkérésig
A lap egyetlen görgetés, nyolc szakaszra osztva. A nyitókép után a bemutatkozás jön, aztán a portfólió, majd az, hogy mi jellemzi a munkáját, utána a visszajelzések, a csomagok, a közös munka menete, és végül az ajánlatkérő.
A sorrend szándékos. Aki fotóst keres, előbb a képeket nézi meg, és csak utána érdekli, hogyan zajlik a dolog. Ha az űrlap előbb jönne, üresen maradna.
A munkamenet hat lépésre van bontva az ajánlatkéréstől az online galériáig, hogy a megkeresés előtt kiderüljön, mi következik és mikor.
A közös munka menete. Hat lépés az ajánlatkéréstől az online galériáig; a képen a második fele. -
2 · A képsáv
Egy képsáv, két szerepben
Ez lett a javaslatunkból. A minta, amit Zalán küldött, statikus volt: a képek egymás alatt álltak, és a lap nem különbözött a többi fotós oldaltól. Azt kértük, hadd mozogjanak a képek, mert így ők tartják a figyelmet, nem a körülöttük lévő szöveg.
A nyitóképben a kártyák U alakú ívben állnak, és maguktól úsznak balra. A portfóliónál ugyanaz a kód fut megfordítva: az ív lentről emelkedik középre, a sodródás pedig az ellenkező irányba megy.
Mind a kettőt lehet húzni egérrel és ujjal is, a portfóliósáv mellé nyilak is kerültek, és a képre koppintva teljes méretben nyílik, ahol lapozni és csúsztatni is lehet.
A két sáv egy felvételen. Fent a nyitókép íve, lent a portfólióé, fordítva. -
3 · Arculat
Minimalista alap, sötét és világos szakaszok
A kérés minimalista lap volt, és minden döntés ezt szolgálja: két betűtípus, szakaszonként egy gondolat, díszítés nélkül. Csendes lapon a képsáv mindent visz. Ha minden elem a figyelemért versengene, semmi nem maradna meg.
A lap nem egyetlen alaphangon szól. A nyitókép, a portfólió, a vélemények, a csomagok és a kapcsolat majdnem fekete alapon áll, a bemutatkozás, a „miért én” és a munkamenet pedig meleg krémszínen. A két képsáv mind a kettő a sötét szakaszokba került: ott nincs mellettük semmi, ami elvonná róluk a figyelmet.
A címsorok klasszikus talpas betűvel futnak, a kenyérszöveg visszafogott talpatlannal. A csomagoknál nincs kiírt ár, mindhárom ajánlatkéréssel zárul. Ennek van értelme: a fotózás ára a dátumtól, a helyszíntől és a hossztól függ, és az űrlap pont ezeket kéri be.
A csomagok. Három szint, ár nélkül. Mindegyik ajánlatkéréssel zárul. -
4 · Az űrlap
Azt kérdezi, ami nélkül nincs árajánlat
Az ajánlatkérő nem általános kapcsolatfelvétel. A név és az elérhetőség mellett bekéri az esküvő dátumát, a helyszínt, a vendégek számát és a kiválasztott csomagot. Ezek nélkül nem lehet árat mondani, tehát az első válasz úgyis ezekkel menne vissza.
Az űrlapban két láthatatlan védelem van a robotok ellen: egy rejtett mező és egy időzár. Ugyanaz a megoldás, ami a saját ajánlatkérőnkön is fut, és a látogató semmit nem vesz észre belőle.
Az ajánlatkérő. Dátum, helyszín, létszám: ezek nélkül nincs mit árazni. -
5 · Mérés
Keresőoptimalizálás: 100 a 100-ból
A mérést nem mi végeztük: a Google PageSpeed Insights jelentését hívtuk le az oldalra. A keresőoptimalizálás értéke 100 a 100-ból, a bevált módszereké szintén 100, a kisegítő lehetőségeké 94.
Ez nem a helyezést méri, hanem azt, hogy technikailag rendben van-e az oldal: címek, leírások, szerkezeti adatok, olvashatóság. Egy fotós oldalánál ez azért sem magától értetődő, mert a lap tele van nagy képekkel.
A Google PageSpeed Insights mérése. Keresőoptimalizálás: 100 a 100-ból.
Amit az ügyfél mondott
Volt egy saját elképzelésem a weboldalról, mert fotósként fontos volt, hogy az oldal ne csak szép legyen, hanem visszaadja azt a hangulatot is, amit a képeimmel képviselek. Végül kaptam egy sokkal modernebb és látványosabb javaslatot, ami sokkal jobban illett hozzám. A végeredmény nagyon igényes, egyedi és hangulatos lett, finom animációkkal és profi összhatással. Örülök, hogy hallgattam a javaslatra, mert így sokkal jobb lett, mint amit eredetileg elképzeltem 😊 Nem mellesleg végig gördülékenyen tudtunk együtt dolgozni Leventével.
Szolgáltatások
- Weboldal készítés
- Egyedi design
- Frontend fejlesztés
- Galéria és nagyító
- Ajánlatkérő űrlap
- Keresőoptimalizálás
Nektek is a munkátok a legjobb érv?
Fotós, tervező, kivitelező: ha a képek mondják el helyetted, mit tudsz, akkor a weboldalnak nem kell magyaráznia. Csak abban kell segítenie, hogy aki megnézte, meg is tudjon keresni.