Amikor két SOS deadlineos projekt közt akad egy-két szabad órácskám saját bocskorom fényezésére, akkor próbálom a personal branding témakört körbefutni picit. Elindítottam hát a megmondo.com-on lévő facebook oldalam.
Sőt ezzel kapcsolatban szakértettem picit a Bognár Stúdió SEO blogján: Vírusmarketing és SEO:
[...] Egy webdesigner felfogható márkának, aki legtöbb munkáját kiajánlások útján kapja. Minden designer rendelkezik portfolio oldallal, de kevesen jelennek meg a facebookon, ahol hihetetlenül egyszerű pont a kiajánlás funkció (a tetszetős munkáink egyetlen kattintással megoszthatják kedves látogatóink). [...]
Hasonló írások
]]>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)
Hasonló írások
]]>
Hasonló írások
]]>Szóval kell-e portfólió site 2010-ben?
Kell. Tudom régen nem ezt mondtam, de belátom, hogy szükség van rá. Persze minimális, sőt nulla bullshit tartalommal.
Mit értesz bullshit tartalom alatt?
Például a bio szöveget, vagy a különböző skillek csillagokkal/rovátkákkal történő reprezentálását. Vagy például az egyes melókhoz tartozó 2-3 mondatos rizsát.
Hogyan néz ki egy portfólió site 2010-ben, szerinted?
Az egész alapja egy egyszerű galéria. A legjobbnak vélt 4-5 meló (max 4-5!!!) thumbnaillel, teljes képpel és live linkkel. Aztán kell valami megoldás a folyamatos flow-ról is. Szerintem erre jelenleg legjobb a twitter. Szóval kell egy melós twitter acc, amin az aktuális és nem privacys melókról dobsz egy screenshotot és 2-3 SZÓT. Ettől személyes is lesz picit, nem csak egy üres galéria ami fél évente frissül. A haramdik dolog ami még kell az a kontakt infó. De ez sem csak úgy felsorolva, hanem hivatkozások formájában social netwörkökre (fb, privát twitter, tumblr, etc…)
Ennyi?
Tulajdonképpen igen. Bár talán még egy dolog jöhet, de ezt még csak ködösen látom. Ez pedig a showreel. Egy grafikus esetében ezt úgy képzelem el, hogy egy látványos pörgő forgó max 1 perces videó, amiben a munkái jelennek meg. Persze ehhez érteni kell a videóhoz, vagy meg kell fizetni valaki szakértelmét.
A mondovicsmihaly.hu mikor lesz ilyen?
Kussolsznempofázol…. majd egyszercsak váratlanul berobban.
Köszönöm az interjút.
Én is köszönöm hogy itt lehettem, további szép napot!
Hasonló írások
]]>A layoutot két este csináltam meg, abszolút nem úgy álltam neki, hogy na most ae v9-et fogok csinálni, csak úgy elkezdtem ötletelni, aztán láttam hogy ez kezd alakulni, így gyorsan blogszerűvé formáltam. Cél volt az is, hogy a HHTML kódolással se szívjak sokat, mert még ott is feladhatom hamar, ezéert lett itt-ott ilyen egyszerű (bár az egyszerűség azért irányelv is volt).
Van még pár kijavítandó hiba, köszönöm a bugreportokat, mindet összeírtam itt egy kis fecnire, de most megint dolgos napok következnek.
Még egy mellékszál, a design frissítés egyik nemtitkolt indítéka az volt, hogy kicsit fellendítse bennem (és Atiban) az írás vágyát.
Hasonló írások
]]>Több mint 3 éves volt az előző design, ideje volt beújítani. Igazából korábban már keszült pár terv, de a PS-ből egy sem jutott tovább a kivitelezésig. Most azonban elszántam magam és megléptem a dolgot. Ami a megjelenést illeti a cél az volt, hogy több szín kerüljön be, valamint egyszerűbb/átláthatóbb legyen az egész.
A WordPress-t is felfrissítettem a latest cuccra (ami most 2.8.3-at jelent).
Bekerült a játékba a twitter is, ám ezzel még szerintem csinálok valamit, mert baromira belassítja az oldal betöltését.
Asszem hirtelen ennyi, a designról majd akarok még írni pár sort később, de most készülődöm a holnapi grillpartira. Biztosan vannak még hibásan működő csücskök, latest browserekben* azért annyira nem döcög, de ha találsz valamit akkor kommentáljad hamar-hamar!
*ie6 pedig konkrétan ki van bannolva teljesen
Hasonló írások
]]>mondovicsmihaly.hu
Hasonló írások
]]>Arra buzdítanám a szakmát, hogy mutassatok ti is többet a varázslatból!
Hasonló írások
]]>
Hasonló írások
]]>Előszöt is az alap elvárás az az, hogy legyél kreatív, újat mutató, olyat szarj amit még senki sem, és a produkt az állja a válságos időszakban fennálló kibebaszottmód költséghatékonysági kritériumokat.
Aztán ott van az ügyfél, aki vagy tudja pontosan mit akar (lila háttér, középre35pontosvillogótimesnewroman70%ostéglaszínnel), vagy pedig nem tudja mit akar (magyarul neked kell kitalálni, hogy mi a célja az oldalnak: a termékeit akarja online is eladni, vagy csak a brandjét erősíteni a weben).
A SEO-s az fehér alapon fekete betűket, és kék színű aláhúzott linkeket akar, az egyetlen grafikai elem a logo lehet.
A marketinges színes kiemeléseket, bannereket, mindeninfóttetgyünkki dolgokat akar.
A titkárnő hellokittis animgifet kér.
A boss pedig mindezt szeretné bezippelve, aláírva és leláttamozva, mindenki által elfogadva, 6 óra alatt maximum.
Most pedig Atee írje le légísuves, hogy milyen az amikor valaki a kamera mögött van.