Éva letette az idegenvezető vizsgát, kellett neki egy profi weboldal. Engem ért a megtiszteltetés, hogy elkészíthettem. A projekt minden mozzanatát rögzítettem, így most teljesen az elejétől a végéig bemutatom nektek, hogyan készül el egy weboldal, milyen munkafolyamatokból áll össze.

Ezt azért csináltam, mert már számtalanszor kérdezték tőlem, mégis hogyan áll össze egy oldal, mik a lépések, mennyi ideig tart, mennyire bonyolult satöbbi…

Talán így érthető lesz, miért nem két forint egy normális site elkészítése azoknak is, akik eddig csak azt hitték, hogy ez a munka csak egérkattintgatás és a “lécci neked ez semmiség délutánra összedobsz nekem egy weboldalt tudom höhö” gondolatkörben mozogtak. A teljes bemutató a tovább linkre kattintva olvasható…

1. fázis: Dokumentáció
Minden munka úgy indul, hogy a megrendelő valamilyen formában betűkbe önti a vágyait. Én nem szoktam több oldalas specifikációkkal szórakozni, a legtöbb esetben a kiindulási alap nem több egy fél/egy oldalas word doksinál vagy emailnél. Éva is szépen leírta miket szeretne viszontlátni a weboldalán:

Erre a doksira megy az árajánlat, és ha a megrendelő úgy gondolja, akkor ezután kezdünk el érdemben beszélgetni a részletekről :)

2. fázis: Draft/mockup
Ezután elkezdek agyalni, hogy a kívánt funkciókat hogyan lehetne megjeleníteni, mi az ami fontos és már a címlapon kint kell lennie stb… Eből készül el egy draft, valami hasonló módon:

Ezzel felkeresem a megrendelőt ás átbeszélem mi mit jelent, miért így csináltam. (ha megnézitek a végeredményt látható, hogy nem sokban hasonlít ehhez a draft állapothoz, ez tényleg csak egy kiindulási pont, az ötleteket átgondolva előfordul, hogy már a látványterv kezd testet ölteni, nem pedig egy újabb draft)

3. fázis: Látványterv/layout
Ha mindent átbeszéltünk és tisztázva vannak a funkciók, akkor kezdődik el a tényleges munka, a látványtervezés. Innentől indult a videofelvétel a gépemen, és a következő 4 munkafolyamatot rögzítettem.

(a videók HD-ben vannak fent, jó minőségért váltsatok át rá)

Az elkészült layoutot ezután megmutatom, átbeszéljük mi nem tetszik, és folyamatos finomíttatások után kialakul a weboldal címlapjának látványterve, ami meghatározza az egész oldal megjelenését. Első körben nem szoktam több különböző variációkat készíteni, az esetek többségében amit elsőre csinálok az megfelelő szokott lenni. Természetesen kisebb módosítási igények mindig vannak, de az nagyon ritka, hogy teljesen más látványvilágot kell kitalálni.

4. fázis: Sitebuild tervezés

Ha a címlap kinézetével elégedett a tulajdonos, akkor jönnek az aloldalak látványterveinek elkészítése. Ebben az esetben ez a fázis kimaradt, Éva rám bízta, az aloldalak amúgy sem térnek el az alap szerkezettől, ezért ezzel nem szívatott, hogy még ezt is rajzoljam meg neki (az oldalt természetesen baráti alapon teljesen ingyen csináltam, ezért ilyen kompromisszumok felmerültek).

A következő lépés a látványtervből egy működő HTML lap elkészítése és kódolása. Ezt nevezzük sitebuildnek. A HTML/CSS kivitelezés legelső lépése, hogy papíron megtervezem a weboldal szerkezeti felépítését. A videón csak a papírmunka látszik, közben természetesen a monitoron a layoutot nézem és az alapján rajzolom fel, hogy hogyan és milyen divekből alakítom ki a HMTL szerkezetet, és rögtön el is nevezem a főbb divek CSS osztálybeli nevét.

5. fázis: Sitebuild

Ezután elkezdődik a favágó meló, a HTML és CSS kódolás. Ez még csak egy statikus oldal lesz valami ideiglenes tartalommal feltöltve. Amikor nagyjából kialakult a HTML szerkezet, akkor jön a különböző böngészőkben történő tesztelés (12:45-től). Amint látható én egy virtuális XP-ben tesztelek a népszerű böngészőkre. Szakavatott kollégák kiszúrhatják, hogy bizony vétettem hibát, és csak CSS hackek segítségével oldottam meg, hogy az oldal a különböző böngészőkben is nagyjából azonos módon jelenjen meg.

Ha eddig eljutottam, akkor már lehet kicsit örülni.

6. fázis: WordPress sablon

Ezt az oldalt az általam kedvelt WordPress motor működteti, az elkészült statikus HTML lapot alakítom át működő WordPress sablonná. Itt kapja meg a szükséges PHP kódokat.

Amint látható volt némi felesleges kör. A header képeket forgató flasht is lecseréltem, mert útközben rájöttem, hogy nem volt szerencsés választás. Valamint bénáztam picit, rég készítettem WordPress témát, és ez a 3.0-ás motor is tartogatott számomra meglepetéseket. A videóból ezeket szándékosan nem vágtam ki, hiszen ezek is szerves részét képezik egy hasonló munkának.

Mennyi az annyi?

Szándékosan nem fogom forintosítani ezt a projektet, de felfedem a lapjaim. Mindennel együtt kb 40 munkaóra volt ebben a weboldalban. Irodai környezetre vetítve ez pont egy munkahét. Egy “igazi” megbízás esetén itt még plusz idő (és költség) lett volna a folyamatos egyeztetések lebonyolítása (Éva a lakótársam így csak átkiabáltam a másik szobába). Szintén plusz költségként merülhet fel egy “igazi” megrendelés esetén a közvetítői költség, keresőoptimalizálás, SEO/SMO regisztrációk (startlap, linkcenter, facebook, twitter…stbstbstb), domain regisztráció, hoszting, iroda rezsi, ÁFA és egyéb, a számlázással kapcsolatos tételek. Egy hasonló volumenű weboldal előállítási költsége így könnyedén érheti el a 150-200 ezres szintet. És ez még nem is egy bonyolult site, nincs benne fórum, webshop, stb…

Egy weboldal elkészülése ritkán egyezik meg a szükséges munkaórák számával. Amint mondtam ez kb egy hét volt. Természetesen ennél sokkal tovább tartott, hiszen szabadidőmben csináltam csak, mellette futottak más projektek is (ez mindenhol így van, párhuzamosan mennek a melók), így lehetséges az, hogy az elejétől a végéig 1/1,5 hónap szükséges egy weboldal elkészítéséhez.

Végezetül a szakmához szólnék, osszátok meg ti is a munkamódszereiteket, mutassátok meg hogyan dolgoztok, tanuljunk egymástól.

Felhasznált szoftverek/eszközök

  • OmniGraffle a draft/mockup készítéshez
  • Photoshop a layouthoz
  • Todoist (online) a teendők menedzseléséhez
  • On The Job a munkafolyamatok timetrackingjére (nemtom szebben, bocs)
  • Coda a sitebuldhez
  • Forklift az ftp-hez
  • Parallels a windows virtualizáláshoz
  • iShowU a képernyő felvételéhez
  • papír/toll a tervezéshez
  • …és mindezt egy Macbookon követtem el (alu bill., varázsegér, wacom bamboo rajztábla, + egy 22″-os BenQ monitor)
balu.ertl (2011. március 6 - 01:59)

Nekem tetszik, kifejezetten nagyon. A végeredmény is, a tulajdonos is, és a munkafolyamat levezetése is. Ez utóbbiban nagyon jók az alapvető lépések levezetése, az pedig külön hangsúlyozandó, hogy a weboldal Vizualitási feladatai (eMeM személyében) világosan elkülönül a működéstől — ez a Megrendelőnek nem mindig egyértelmű :)

Itt most egy személyes blognál nem merültek ugyan fel, de pár lépést még hadd tegyek hozzá. Hátha egy kedves Ügyfél olvassa, akkor mindenképp tudjon róla, nagyobb volumenű projekteknél mik növelhetik még a lefutási időt:

– “Piacelemzés”, konkurens webdizájnok feltérképezése
– Anyaggyűjtés/-előállítás (üresen nem lehet élesíteni a szájtot)
– Képanyag előállítása (saját fotózás) / beszerzése (stock galériák)
– Tesztkörnyezeten usability-check (pl. ismerősökkel, Anyu/Apu :)
– Doménreg (ha már foglalt, akkor kezdődhet a huza-vona)
– Tárhely-előfizetés (szintén nem 1 nap)
– End-user dokumentáció írása, ez alapján betanítás
– Látogatottság-mérés behuzalozása, GA-felületen beállítgatások
– After-launch követés: kábé 1 héttel a kilövés után jó, ha rajta tudjuk tartani a szemünk, vagy készenlétben vagyunk (ha megfizetik persze :), a Kedves Ügyfél kezdeti eltolásait korrigálhassuk.

És mindezt persze egyszemélyben — “lécci neked ez semmiség délutánra összedobsz nekem egy weboldalt tudom höhö” LOL :)

1

Itt lehet megaszondani!

// Uccsó kommentek

// Twitterbedrótozás

twitter
Szabad követni: éntwitter // gyártwitter

// Keresni is lehet






// RSS

Kérésre házhoz is megyünk!

Bejegyzések // Kommentek.

// Gépház

A világdominancia felé a kiváló WordPress hajt minket. 
 A dizájnt eMeM köszörülte csinosra a mondovicsmihaly.hu  gyárterületén.

 Minden amit mond felhasználható Ön ellen © 2002-2009.