The Making of a Website

[gagi]

Dakle, dobili ste web projekt i sta sad? Zanimaju me vase procedure (“behind the scene”) pa sve do finalnog produkta? Bilo bi super kada bi mogli da okacite i primjere tih procedura (proposal, brainstorming, sketch, sitemaps, datamaps, …).

 

Imam ja par svojih primera koje mogu da pokazem, nista specialno, pa reko da vidim kako vi to radite ...

 

 

Hvala

[Denis_Radenkovic]

Zanimljiva tema :) .

 

Ovaj sajt nije zavrsen, fali sadrzaj, ali jos uvek su tu vecina skica i predloga podeljeni u 3 koraka. Ovome je predhodila lista detaljnih pitanja, i logo dizajn.

 

1- Skice::

 

http://38one.com/orpheus/sketches/web-page.gif

http://38one.com/orpheus/sketches/web-page-4.gif - prihvaceni home

 

* Prvi nivo navigacije

http://38one.com/orpheus/sketches/books-2.gif

http://38one.com/orpheus/sketches/books-3.gif - blize prihvacenoj

 

* Drugi nivo nav.

http://38one.com/orpheus/sketches/books-3-singleseries.gif

 

* Treci nivo nav.

http://38one.com/orpheus/sketches/books-3-...series-book.gif

 

 

2- skoro finalni mock-up :

 

http://38one.com/orpheus/homepage_3.html >> 'series' >> 'atlases' >> 'Picture Atlas of the World' je stranica / template pojedinacne knjige.

 

 

3- sajt:

 

http://orpheusbooks.co.uk/

 

Poz! :)

[gagi]

Hvala Denise! Da li bi mogao malo opsirnije da objasnis kako se bacis u "akciju", nadam se da ne zahtjeva mnogo ... ;) Takodje, zanima me kako uspijes da pokazes skice klientu (crno/bjelu) a da ne bude; "Zast ovo? Sta je ovo? Gdje je boja? Da li ce biti slika? Koji font? ...". Nisam se jos usudio skicu da pokazem clientu, uvjek bude kolko-tolko dizajnirano. Mada mi je to gubljenje vremena, vise volim kako ti to radis ...

 

 

Tvoji su primjeri za dizajn/izgleda sajta, evo sto sam ja nedavno radio za jedan sajt ali vise tehnicki. Dakle ...

 

Poslje razgovara s'klientom, kakva sajt zeli, fukncije sajta, cilj sajta, itd.

 

1. Proposal

Ovo je prvi dokument koji saljem; procedura za razvoj sajta, generalno objasnim sta ja predlazem, schedules, cjena, itd.

 

ex: http://www.dragan.ca/workflow/IPO-Proposal2.pdf (252Kb)

 

 

2. Ugovor (contract)

Ako se svidjeo proposal i zele da nastave, onda bi se ugvor trebao da podpise.

 

npr: http://www.dragan.ca/workflow/WebDes...act_Canada2.doc (130Kb)

 

 

3. Sitemap

Skiciram kako bi sajt trebao da radi. Ako ok izgleda, klient opet podpise i idemo dalje ...

 

npr: http://www.dragan.ca/workflow/SiteMap.pdf (974KB ..mrzilo me da kompresujem)

 

4. Specifikacije

Kako su stranice povezane, sta se prikazuje na stranici, ... uglavnom detalji.

 

npr: http://www.dragan.ca/workflow/AdminPanel.pdf (50Kb) - Specs. za Admin Panel sekciju ...

 

5. Kodiranje

6. Testiranje

 

Kada je br. 4 podpisan, onda pocne research za sve sto se izgleda sajta tice. Imam poprilicno dobru ideju sta ide na koju stranicu ...

 

Ovo radim kada je projekt malo veci i kada imam vremena. Inace, ako je neki sajt sa 10 stranica: contract > dizajn.

 

Ja ovo sve vecinom radim u Illustrator-u, Word-u i Excel-u. Interesuje me da li ima neki software koji bi mi olaksao posao?

[Denis_Radenkovic]

oooH... Odlicno!

 

Evo nekoliko razloga zasto kod ovog sajta nije bilo nista detaljnije od skica:

 

- Relativno nizak budget

 

- Kratak deadline - nije bilo vremena da se radibilo bilo sta detaljnije od ovih skica. Sto se tice organizaciije sajta, ovaj konkretno je prilicno jednostavan i straight forward pa nije bilo potrebe za nekim detaljnijim skicama i analizama.

 

- Ja sam koristio Textpattern koji vec ima odredjenu funkcionost Control Panela koju ja nisam u stanju mnogo da modifikujem - nema svrhe :). Na Textpatternu koji ja koristim sam objasnio funkcionalnost CP-a.

 

- Klijent je 'local', i pre nego sto su nastale prve skice dosta detalja je bilo ustanovljeno na osnovu razgovora i upitnika.

 

Da li bi mogao malo opsirnije da objasnis kako se bacis u "akciju", nadam se da ne zahtjeva mnogo ...  Takodje, zanima me kako uspijes da pokazes skice klientu (crno/bjelu) a da ne bude; "Zast ovo? Sta je ovo? Gdje je boja? Da li ce biti slika? Koji font? ...". Nisam se jos usudio skicu da pokazem clientu, uvjek bude kolko-tolko dizajnirano. Mada mi je to gubljenje vremena, vise volim kako ti to radis ...

 

To jeste gubljenje vremena, posebno ako ga nema mnogo. Ako je klijent ozbiljan, razumece - na kraju krajeva on placa tvoje vreme. Ako ga ti gubis jer si radio neke detaljne skice koje na kraju nisu dobre, dzaba.

Ove skice objasnim kao organizaciju stranica, raspored sadrzaja, gde se sta nalazi i zasto. Dizajn zavisi od sadrzaja, i samim tim niko od tebe ne moze da ocekuje da se bacis na boje, detalje i finese pre nego sto si siguran kako, sta i narocito GDE! Ja bar, moram prvo da ustanovim bazu na osnovu koje cu da razvijem dizajn, ali zavisi kako ko radi i kako se kome svidja.

Kako god, vrlo je bitno da pre nego sto se uopste krene sa bilo kakvim radom na sajtu dobijes neki avans ;) , i detalje koji se ticu funkcionalnosti sajta, sadrzaja, izgleda ( koliko moguce ) da posle ne bi bilo iznenadjenja.

[Dragan Babic]

To jeste gubljenje vremena, posebno ako ga nema mnogo. Ako je klijent ozbiljan, razumece - na kraju krajeva on placa tvoje vreme. Ako ga ti gubis jer si radio neke detaljne skice koje na kraju nisu dobre, dzaba.

Ove skice objasnim kao organizaciju stranica, raspored sadrzaja, gde se sta nalazi i zasto. Dizajn zavisi od sadrzaja, i samim tim niko od tebe ne moze da ocekuje da se bacis na boje, detalje i finese pre nego sto si siguran kako, sta i narocito GDE! Ja bar, moram prvo da ustanovim bazu na osnovu koje cu da razvijem dizajn, ali zavisi kako ko radi i kako se kome svidja.

Ovo je meni najveci problem. Ljudi (iz mog licnog iskustva samo govorim) stavljaju dizajn na poslednje mesto, i pravo da vam kazem dobijam neki osecaj kao da zale pare koje ce dati dizajneru da napravi CSS+XHTML.

 

U tom slucaju moras da se iscimas troduplo vise jer prakticno "izmisljas" sadrzaj i dizajniras taj imaginarni sadrzaj samo da bi neki direktor baja to mogao da ima odstampano na papiru jer naravno pred racunarom se oseca inferiorno i lose.

To na zalost najverovatnije znaci da ces ti dobar deo posla morati da radis opet, ako te ukenja ostavice ti na miru neke osnovne elemente (header, navigacija ...).

 

On the side note, ako nesto mrzim da radim to su ono, full blown mockup-i, jednostavno mi je jako tesko da se ubacim u taj trip i da na taj nacin razmisljam kada krecem sa sajtom.

Kod mene sve ide od papira i onako -- bas grubo. Onda pustim da to malo odlezi (dan--dva) pa na kraju to ispadne nesto sto pomalo podseca na inicijalnu ideju. :)

Ali to je ok, tada imam osecaj da sam stvarno poradio na necemu i da je to "evoluiralo" dok je bilo u mojim rukama.

 

Jako mi je drago da je postavljena ova tema i mislim da je razmena ovakvih iskustava veoma bitna.

[gagi]

Hvala momci!

 

Izgleda da svako ima neke svoje procedure tj. nema pravog nacina za razvoj sajta?

 

Kako radite kada trebate da redizajnirate sajt? Znaci, sajt postoji, contet je tu - a vas posao je da se to bolje organizuje i naravno redizajnira. Iste procedure ili ... ? Ja malo drugacije ovo radim, ali mozda nije ni potrebno?

 

Niko mi ne rece da li ima neki programici s'kojim bi olaksao posao, ili je to ... radi s'cim znas?

 

Ostali ... ?

[kai]

Počeo sam da radim na razvoju interaktivnih PDF formulara, raznih namena vezanih za kompanije koje nude web design usluge i webmastere. Posao je malo poveći, tako da imajte strpljenja. Uskoro ću postovati PDF Contract Form koji popunjava design agency, i potom šalje klijentu na potpisivanje.

[feedback]

Počeo sam da radim na razvoju interaktivnih PDF formulara, raznih namena vezanih za kompanije koje nude web design usluge i webmastere. Posao je malo poveći, tako da imajte strpljenja. Uskoro ću postovati PDF Contract Form koji popunjava design agency, i potom šalje klijentu na potpisivanje.

 

Mislim da ova tema ne zasluzuje da umre posle ovako lepog pocetka.

 

 

Kai, evo sad te javno prozivam :)) Podeli sa mnom (i mozda jos nekim ako ima zaintersovanih) formulare u radnim verzijama, pa da ih "skockamo" zajednickim snagama.

[gagi]

Web Site Planning Book, developed by CGS Solutions

http://www.gsinet.net/sitedev/cgs_wspb.pdf

[Denis_Radenkovic]

Evo jos jedan koristan upitnik:

 

http://clearleft.com/worksheet/survey.rtf

[[nq]]

Odlicna tema, jos bolji postovi! Hvala Vam!

[gagi]

Site Diagrams: Mapping an Information Space by Jason Withrow

http://www.boxesandarrows.com/archives/sit...ation_space.php

 

Wire Frame Your Site By Matt Beach

http://www.sitepoint.com/article/wire-frame-your-site

 

Grey Box Methodology by Jason Santa Maria

http://www.jasonsantamaria.com/archive/200..._box_method.php

 

Using Wireframes by Strange Systems

http://www.strangesystems.net/archives/000005.php

Argus Center for Information Architecture (ACIA) (organizacija raznih informacija ...)

http://argus-acia.com/white_papers/index.html

[ZeroStyle]

Jel ima ko ugovor kakav na našem jeziku da okači ??

[gagi]

^ Nope :\

 

Imam raznorazne ugovre i papre na engleskom. Doduse pisani su za US, Canada, UK i Australia ... ti prevedi, odnesi kod advokata da prepravi i onda nam ostavi ovde :D

 

Javi se na PP, ako zelis sljedece:

h++p://www.proposalkit.com/htm/contractpack.htm#cpprolist

[Jee]

mislim da i ja imam neke sa sitepoint.com

[||NeX||]

Odlična stvar. Nažalost meni to sve treba na Njemačkom.

Ono što sam napravio neki dan je šablon za telefonski razgovor.

Pošto ovdje ne možeš dobiti klijenta putem pisma ili drugog vida reklame,

moraš ići lično ili lično zvati pravo osobu u pravo vrijeme.

 

Ono što sam primjetio jeste, da ste možda previše detaljni. Večina klijenta ne razumije sve to (tipa: rasčlanjenje merchant skripte itd.) pa možda pojednostavljenje nebi loše bilo.

 

Kvalitetno urađen katalog referenci isto nije loša stvar.

 

Par fazona treba i od programera maznuti, a to su recimo mind mapping software-i. Da ne spominjem M$ produkte, ali ima tu par dobrih stvari. Konkretno ni sam nisam još se pozabavio tom temom, ali vidim recimo da u Boschu niko bez toga ne radi. Neki noviji ti daju upozerenja ako odradiš jedan task, da je on povezan i sa drugim taskovima koje još nisi uradio, a trebao bi popraviti da nebi bili bugoviti.

 

Nakon ispita ću malo više sjesti i napraviti sve te stvari, jer su stvarno neophodne.

 

Ako neko ima tu pri ruci račun, i to bih volio vidjeti. Još jednom, hvala na nesebičnoj podjeli materijala.

[gagi]

Hajde, okacit cu jos neki "behinde the scene" skica ...

 

Nex,

Ono što sam primjetio jeste, da ste možda previše detaljni. Večina klijenta ne razumije sve to (tipa: rasčlanjenje merchant skripte itd.) pa možda pojednostavljenje nebi loše bilo.

 

Pazi, projekt koji sam ja radio (sto sam gore postavio) je poprilicno velik bio. Klient je izgledao onako razbacan na sve strane; "ja bih to ovako, ne stani, imam drugu ideju, ustvari ne.. ostavi onako". Znaci svaki detalj je na papiru, poslje svako "..uradi ovako" se placa ili da se osiguras od "ja to nisam htjeo". Takodje, da sam poslao dokument od 10 stranica nebi mogao da opravdam cjenu koju smo naplatili. :D Prvo nam je frku pravio kako kasnimo, kada je dobio dokument od 40 stranica; "vidim da se dosta vremena proveli na planiranju sajta ..." i sve ok. 'Ebiga, moras nekad malo pametnij da izgledas nego sto jesi :)

[ivanhoe]

jao, kako ja ceznem za poslovima gde cu sa klijentima da potpisem ugovor, pa da mogu da im mahnem papirom ispred nosa kad mi u pola posla promene specifikaciju... ali jos je to daleko u ovim krajevima, bar za obicne sajtove :(

[||NeX||]

'Ebiga, moras nekad malo pametnij da izgledas nego sto jesi :)

 

There's sometjing true in it. :D

[radoman2]

Evo jedan ugovor na nasem jeziku.

ugovor_za_sajt.rtf

[gagi]

"Behinde the Scene" a selling strategy?

 

Smor mi je kada moram da objasnjavam klientu; zasto to toliko kosta, pa da se nagadjam za nesto sto sam vec povoljno dao. Problem je sto vecina (manjih/srednjih) klienta nema veze sta je moj posao i koliko tu nekada ima posla sto oni ne vide/shvataju. Naravno, mali klienti su teski i sa parama.

 

So, danas sam imao neki manji posao da ugovaram - po mom proracunu ima nekih 30-40 sati posla (imam vec pola stvari uradjeni od prije...). Za tako nesto, mrzi me nekad jednostavno da sebi kacim obaveze oko vrata. Ali eto, htjeo sam da vidim koliko bih mogao da uzmem para.

 

So, preskocio svoje etape (naveden gore medju prvim komentarima) i probao da im pokazem "behinde the scene". Da vide da tu imas vise posla osim; dizajn, HTML i par linkova koji to sve povezu.

 

Proveo (rizikovao?!) 6-7 sati svoga vremena; skicirao na papir par ideja, najbolju ideju sam prebacio u Illustrator i uradio crno-bjelu skicu (Denise - ovo je odlicno!), uradio sitemap (diagram) i proposal s'osnovim funkcijama. Takodje, uradio sam bio neki research konkurencije; istampao tri primjera: dobar, srednje i los. Ukratko napisao zasto to mislim i kako sam bazirao svoje misljenje (dizajn, content, user friendly, etc.) a ostale sajtove sam samo izlistao i stavio rating 1-5. Jednostavno da vide gdje se njihova konkurencija nalazi i gdje oni trebaju da se nalaze. Da mi ne bacaju neke njihove bolestne ideje. Imao sam isto papir s'par pitanja koje sam trebao da postavim tokom prezentacija da ne zaboravim.

 

So, moje misljenje kako su reagovali ...

 

Prvo sam im pokazao sitemap. Sajt sam "razmotao" i nacrtao ga kao diagram, svaku stranicu predstavio s'iconom mali i kako su stranice povezan jedan s'drugom. Odma su vidjeli da tu imas vise stranica nego "About Us", "Contact Us" i "Products". Lakse su shvatili kako ce sajt da radi, vidjeli su da sam se potrudio i odradio svoj posao ... cak i vise nego sto sam trebao. Bili su zadovoljni kako sam im sve to jednostavno objasnio i nacrtao. So, that was good.

 

Druga stvar, proposal & funkcije sajta. Shvatili su kako sajt radi pomocu sitemap, sada ih mogu s'povrsnim detaljima da gnjavim. Nista mnogo da se izgube, ali dovoljno da vide da sam zaintersovan za njihov projekt i da sam uradio research. Dao im neke nove ideje, njihove stare ideje prepravio, kako ce im neke stvari olaksati posao kasnije, itd. Tu smo malo pricali, postavio par pitanja koje sam sebi prije zapisao, da li je to sto oni zele, da li je previse, sta da izmjenimo, itd. "Well.. we didn't think about all this stuff. That's great that you thought about it.". To je to sto sam htjeo - da vide da sam ja sjeo i razmisljao o tome. Da tu ima vise nego sto oni misle, da to nije samo sjedi dizajniraj i kodiraj.

 

Trece, sajtovi konkurencije. Pokazao primjere, objasnio sta i kako. Dao ostale sajtove da pogledaju ako ih zanima. Zatim, izvadio sam svoje skice na papiru ... cisto da vide da sam ja opet, sjeo, razmislio i odradio nesto sto ima nekog smisla. Onda im pokazao crno/bjelu verziju uradjena u Illustratoru. "Wow! This looks great, we can't wait to see the final product."

 

... and now, the price. Mislio sam da ce im biti puno, pa sam dao tri mjeseca da me isplate. "Oh, not a problem. We can give you a deposit right now, we want you to keep working on this. How do you want the rest of the payments?". Naravno, uvjek stavim 2-3 jeftinije opcije u slucaju da je prva previse za njihove potrebe ili budget. "Oh, no, no.. we rather give you a couple of hunder dollars more and you do what you think is the best.". Odlicno :)

 

Uglavnom, bili su mi mnogo zahvalni sto sam im pokazao i objasnio kako ce to sve da radi, sto sam ih proveo korzi proces izrade sajta, mnogo su naucili, itd. Takodje, rekli su da oni znaju da su mali kao klient ali da su se osjecali kao "veliki" sto sam ulozio toliko vremena i truda za njihov sajt - ponasao sam se prema njima kao da me vise njihov projekt zanima nego pare (..riiiiiiight!). Kada se sajt zavrsi, zele da pricaju kako da reklamiraju taj sajt. So, mozda jos nekih para zaradim ...

 

 

Uglavnom, to je to ... dobio sam posao, za pare koje sam htjeo bez ikakvih problema. Licno, mislim da nisam uradio kvalitetnu prezentaciju kao sto bih inace uradio. Ali dovoljno da njih impresirama tj. sebe napravim pametnim :). Da me niko ne shvati lose; nisam ih prevario, nalagao, ni budalama pravio (I don't belive in that kind of business!) - jednostavno sam uradio sexy prezentaciju, dao im dobar first impression i pokazao da tu ima vise posla nego sto oni misle. Misli, ovo nebi nikada radio a da nisam podpisao ugovor (...i zato sto sam ljen kad su u pitanju mali sajtovi ;)). Ali eto, cisto da vidim kako ce da reaguju. Meni je se ovo pokazalo uspjesno, ne garantujem da ce svima uspjeti ... ali mozete da probate. ;)

 

 

(hmmm... nebi bilo lose da cujemo kako vi prodajte vasu umjetnost ;))

[misk0]

Ne znam kolike si pare trazio, ali meni je ovo sto si napisao poprilicno u redu. Tj ne vidim nikakvu obmanu, prevaru ili slicno. Bio si veoma fer do klijenta, potrudio se da mu predstavis sta sve nosi taj posao, koje su etape, izgled, cak si se potrudio da im pokazes neke stvari na koje vjerovatno nisu mislili.

Ipak se klijent osjecao 'cjenjenim' i uvidio je tvoj trud. Naravno, to su opet izgleda bili normalni ljudi jer bi nekom kretenu i skotu i to bilo malo i trazio bi da spustis cijenu ili sta ja znam.

Najveci je problem da si napravio sve to i rekao cijenu, a oni onda otisli kod drugog sa tim idejama. Fakticki napravis predracun u koji ulozis poprilicno vremena i na kraju od toga ne bude nista.

[ivanhoe]

uf, u Srbiji mene pokopaju klijenti kad nakon cele prethodne price usledi: pa jeste to sve super, ali nismo mi mislili to bas tako ozbiljno, a jel mozes ti sad da uradis nesto na brzaka, samo da ima nesto, znas dolazi nam Mile/Pera/Zika pa da mu pokazemo....a onda posle mozemo ovo ostalo da uradimo (i naravno to se nikad ne desi...) :/

[gagi]

Vidi da mnogi postavalaju teme; "koliko da naplatim...". Slucajno naleti na sljedeca dva linka, pa reko da podjelim s'vama.

 

How to charge a client

http://www.koudal.dk/how-to-charge-a-client

 

Website production: Behind the budget

http://www.koudal.dk/website-production-behind-the-budget

[flash_back]

lepo :), nego nisam sad kao neki kazanova za klijente, ali ipak imam neko lepo/skromno iskustvo... Po meni najbitniji je sam pristup poslu, jer to puno govori o tebi kao coveku kome treba da se ipak poveri jedna odgovorna stvar...

 

Ja znaci nikada nepravim "dogovor", vec brate imam rokovnik/notebook i hemisku, pa kad klijent krene da objasnjava neke stvari kako on to zamislja (meni krajnje nejasne) ja lepo kazem "Molim Vas, budite ljubazni and drow it...". To mi ustedi jedno 30% vremena oko odredjivanja rasporeda osnovnih elemenata na sajtu...

 

Drugo, imam neka "klasicna" pitanja.. Veci deo se zasniva na sledecim linku. Cak sam i cimnuo doticnu agenciju za neki vid poslovne saradnje/prebacivanje poslova jer nije da se sada razbijam od posla, ali odgovor nisam dobio

 

---

 

 

Inace primer srpske ozbiljnosti na relaciji klijent-postednik-shvatanje web dev.-a - i ja:

 

btw, uskoro (za dan, dva) treba da pregovaram oko cene jednog sajta koji radim... Bio sam pre nekih metar dana odustao od posla zbog posrednika i njegove ne/ozbiljosti.. Ladno indijanac nije mogao/hteo da mi sredi sastanak od 15min sa _root-om koji je non-stop bio na "sastancima" ili zauzet.. Hteo je lik da bude _parent pa to ti je.

 

I nista, oteram ga ja tu u k* pre manje od mesec dana... A glupo, bas sam "spickao" koncept verzije i ono bedak da propadne stvar... Malo se iscimam danas i dodjem do broja klijenta, okrenem ga i zgrozim se, prvo pitanje je bilo "..znaci vratio si se iz vojske".. "...i kakav koncept v2.x ja sam upoznat samo sa privim" "RD.OnLine Clients Menager...???".. dalje necu ni ga govorim, samo cu reci da je taj idjana dzons [as _parent] u stvari "ortak" iz prve godine srednje, a klijent njegov cale.. eto to ti je srbija, ko će kome ako ne svoj svome...

 

 

---

 

 

i da ne userem temu, idite na ovaj -> linkic / mrzi me da sredjujem design <- concept verzija v1.0 je radjena po ukusu "drugara" [_parenta :P] znaci nisam ono s* sa sve sredjivanjem mogao da stavim u portfolio pa to ti je... one v2.x su moje pa cisto da vidite sta sve [v1.0] ipak moze da prodje za ok kintu u srbiji i da se okarakterise kao "...svidja mi se, bas je dobro" :lol: strasno

 

eto, srbija, _parenti i web

Edited April 27, 2006 by flash_back