Hoe maak je een eerste preview voor een website?

[Verwijderd]

Stel je voor.........

Je moet voor een opdrachtgever een 1e preview voor een website maken. Hoe pakken jullie dit aan?

Maken jullie eerst een preview met Photoshop, Paint Shop Pro o.id. waarin alle onderdelen in verschillende lagen ondergebracht zijn? Of maken jullie een preview in 1 laag en slicen jullie daarna de verschillende onderdelen?

[Thijsmans]

Het maken gaat natuurlijk het makkelijkst iin verschillende lagen, mocht je het daarna ter goedkeuring van je opdrachtgever nodig hebben, kun je altijd alle layers samenplakken in een nieuw bestand (layers > flatten image). Nou ik erover nadenk, ik deed het laatst met nogal veel layers, het slicen ging daardoor gewoon slecht. Had ik toen maar eraan gedacht om eerst de layers samen te persen

[Verwijderd]

Wat bedoel je precies met een preview? Als je het grafisch ontwerp bedoelt; dat maak ik altijd in Photoshop. De klant krijgt daar echter een gif of jpg van.

[André]

Verwijderd schreef op 13 May 2003 @ 20:03:
Maken jullie eerst een preview met Photoshop, Paint Shop Pro o.id. waarin alle onderdelen in verschillende lagen ondergebracht zijn? Of maken jullie een preview in 1 laag en slicen jullie daarna de verschillende onderdelen?

Maakt dat uit dan? Zo lang de opdrachtgever maar een plaatje voor zijn neus krijgt is het goed.

[Allochtoon]

Photoshop, wel zo makkelijk als je de klant "wat dingetjes in een ander kleurtje wil zien"

[Verwijderd]

Verwijderd schreef op 13 mei 2003 @ 20:10:
Wat bedoel je precies met een preview? Als je het grafisch ontwerp bedoelt; dat maak ik altijd in Photoshop. De klant krijgt daar echter een gif of jpg van.

Ja, ik bedoel een grafisch ontwerp.

[Booster]

Ik neem even aan dat je hier ook doelt op de manieren omtrent copyright e.d?

(hoe zorg ik dat een klant niet met mijn ontwerp naar een ander bureau loopt)

[Verwijderd]

André schreef op 13 May 2003 @ 20:12:
[...]
Maakt dat uit dan? Zo lang de opdrachtgever maar een plaatje voor zijn neus krijgt is het goed.

Ik zal proberen het iets te verduidelijken:

Het is toch ook van belang dat je bij de 1e preview rekening houdt met het vervolg, dus het coden en programmeren?

Stel......
Je maakt een 1e grafische opzet met daarin dummy-teksten en dummy-afbeeldingen. Dan is het toch handig dat je alles in lagen hebt opgeslagen en bijvoorbeeld de buttons weer kunt gebruiken nadat de preview is goedgekeurd? Bij het coden gebruik je toch gewoon hexa-decimale waarden voor de achtergrond kleur en niet de laag uit b.v. Photoshop?

Valt eerlijk gezegd niet mee om het heel duidelijk uit te leggen, maar hopelijk snappen jullie mij vraag.

[Verwijderd]

Booster schreef op 13 May 2003 @ 20:20:
Ik neem even aan dat je hier ook doelt op de manieren omtrent copyright e.d?

(hoe zorg ik dat een klant niet met mijn ontwerp naar een ander bureau loopt)

Nee, daar gaat het mij in dit geval niet om.

[André]

Verwijderd schreef op 13 May 2003 @ 20:23:
[...]
Stel......
Je maakt een 1e grafische opzet met daarin dummy-teksten en dummy-afbeeldingen. Dan is het toch handig dat je alles in lagen hebt opgeslagen en bijvoorbeeld de buttons weer kunt gebruiken nadat de preview is goedgekeurd?

Ja, klopt...
Dus je weet het antwoord al?

[EL_Loco]

ik maak ze altijd met fireworks in png, gewoon zoals ik een site zou maken, dan kan je er op verder werken als het goed is, en dat schilt tijd

[Verwijderd]

André schreef op 13 May 2003 @ 20:35:
[...]
Ja, klopt...
Dus je weet het antwoord al?

Mijn vraag was of jullie het op deze manier aanpakken, of zijn er eventueel nog andere manieren om de 1e grafische opzet
'om te zetten' naar een homepage in HTML?

[syllaz]

Ik werk op een reclamebureau en presenteer de eerste schetsfase altijd op foamboard.
Je werkt je grafisch ontwerp in photoshop uit en maakt 3 dummy pagina's. Deze print je uit en plak je op een stuk foam. Ik bedoel zonder dat je ontwerp goedgekeurd is, is het een beetje zonde van je tijd om te gaan zitten html-en e.d.

[RSP]

Schetsen m'n vriend, pak een a3 formaat schetsboek en ga je schetsen uitwerken, dat werkt veel sneller en is het minder erg als de klant nog het een en ander aangepast wil hebben, schetsen is imo de beste manier

[alienfruit]

Ik maak meestal ontwerpen van bijv. de hoofdpagina en nog twee subpagina's met mogelijk al aangeleverde tekst (anders lorem ipsum ) of plaatjes in Adobe Photoshop (met al ingedachte dat het voor het Internet is en dus al snel naar websafe colours ga kijken). Vervolgens stuur ik de ontwerp per e-mail naar de klant, of zoals syllaz op foamboard maar het ligt er aan of de klant een gehele presentatie verwacht of niet.

[Verwijderd]

Ik begin gewoon.... en kijk wat ie ervan vind.. kan naderhand altijd nog de frameset aanpassen...

[supakeen]

Verwijderd schreef op 13 May 2003 @ 22:43:
Ik begin gewoon.... en kijk wat ie ervan vind.. kan naderhand altijd nog de frameset aanpassen...

Alsof je altijd met framesets werkt

[André]

alienfruit schreef op 13 mei 2003 @ 22:30:
Ik maak meestal ontwerpen van bijv. de hoofdpagina en nog twee subpagina's met mogelijk al aangeleverde tekst (anders lorem ipsum ) of plaatjes in Adobe Photoshop (met al ingedachte dat het voor het Internet is en dus al snel naar websafe colours ga kijken). Vervolgens stuur ik de ontwerp per e-mail naar de klant, of zoals syllaz op foamboard maar het ligt er aan of de klant een gehele presentatie verwacht of niet.

Moet je tegenwoordig nog op websafe kleuren letten? Is wel een beetje achterhaald lijkt me.

Verwijderd schreef op 13 mei 2003 @ 22:43:
Ik begin gewoon.... en kijk wat ie ervan vind.. kan naderhand altijd nog de frameset aanpassen...

Professionele websites hebben geen framesets.

[littledreamer]

Wat ik altijd doe is als eerste een gesprek met de klant, heeft hij/zij zelf al ideëen?

Dan zet ik een aantal ontwerpen in elkaar, meestal een stuk of drie, (PSD).

Dan laat ik dit aan de klant zien, en geef ik hem op papier het idee achter de nieuwe ontwerpen en wat ik voor ogen heb met de website.

Dan ga ik daarna nog een keer met de klant praten of hij de ontwerpen ziet zitten? Als hij een keuze heeft kunnen maken kan ik dat ontwerp uitwerken, heeft hij geen keuze kunnen maken kunnen we wat aanpassingen doornemen of kijken of hij zelf iets anders in gedachten had.

[Nozzman]

Ik werk mijn ontwerpen volledig uit in PSD. Een 100% accurate preview van de site. Ik heb uit vervaring geleerd dat dat de enige juiste oplossing is om uiteindelijk ook meer tijd te winnen. Een aantal pageina's uitwerken dus, in goed overleg met de heren techniek. Haalbare dingen voorstellen (zowel in techniek als in creatie) zodat een klant precies ziet wat ie kan verwachten.

Schetsen op papier is een absolute ruk-oplossing, omdat het totaal geen accuraat beeld geeft van wat je uiteindelijk gaat maken. Hoogstens in grote lijnen. Binnen een denkproces en een brainstormmoment (met de klant bijvoorbeeld) werkt schetsen natuurlijk wel. Dan kan de klant ook gewoon meekijken en denken.

Omdat een klant toch vaak tot op de pixel een oordeel heeft, heeft het geen zin om een indicatieve schets te maken. Een Creatief Ontwerp, met hoofdletters, werk je dan ook tot op de pixel uit.

Je hebt ook nog zoiets als een voorfase, waarbij het project nog niet binnen is. Dan is het ook de moeite om meteen een goed beeld te geven en dus zo concreet en realistisch mogelijk een ontwerp te presenteren. Het liefst ook op het web.

[EL_Loco]

André schreef op 13 May 2003 @ 22:54:
-knip-

Professionele websites hebben geen framesets.

sorry dat dit een beetje offtopic is, maar dat in echt bullshit (nofi)
ook professionele sites worden met framesets gemaakt

[Willem]

Ehm even voor de duidelijkheid: We gaan hier niet discusieren over framesets

Daarnaast, @Haco: " " zeggen en dan daarna (nofi) is even stom als de bewering die jij tegenspreekt, dus hou het even gezellig.

Previews van een website zijn er in meerdere vormen -in de werkwijze die wij hanteren dan- en zoals Nozzman al aangeeft. Bij het "definitieve" voorstel (wat vaak uit 2 of meer moodboards bestaat) wordt daarvan een apart stukje test- en ontwikkelomgeving ingericht op onze server.

De klant krijgt gebruikersgegevens en kan daarmee de vorderingen van -in dit geval het ontwerp- volgen met een korte toelichting.

[Bosmonster]

Ik ben het eens met Nozzman

Je wilt je klant geen dingen beloven die uiteindelijk niet werkbaar blijken. Of dit nu gaat om technische of budgettaire beperkingen.

Een simpele getekende schets kan dus imho nooit dienen als eerste preview. Hier ziet een klant gewoon niks aan. Als ik zelf klant zou zijn zou ik daar ook nooit genoegen mee nemen. Het is alsof je een auto koopt van een schetstekening... daar wil je toch op z'n minst wat echte foto's van zien

Dit wil niet zeggen dat je je PSD's tot in de puntjes helemaal uitwerkt, het is en blijft een preview. Maar enkele van de belangrijkste schermen (welke je in een voortraject mogelijk gedefinieerd hebt, of je 'gokt' een aantal schermen die mogelijk in de site zouden kunnen komen) werk je uit in de stijl die je de site wil gaan geven.

[littledreamer]

Bosmonster schreef op 14 May 2003 @ 09:38:
Ik ben het eens met Nozzman

Je wilt je klant geen dingen beloven die uiteindelijk niet werkbaar blijken. Of dit nu gaat om technische of budgettaire beperkingen.

Een simpele getekende schets kan dus imho nooit dienen als eerste preview. Hier ziet een klant gewoon niks aan. Als ik zelf klant zou zijn zou ik daar ook nooit genoegen mee nemen. Het is alsof je een auto koopt van een schetstekening... daar wil je toch op z'n minst wat echte foto's van zien

Dit wil niet zeggen dat je je PSD's tot in de puntjes helemaal uitwerkt, het is en blijft een preview. Maar enkele van de belangrijkste schermen (welke je in een voortraject mogelijk gedefinieerd hebt, of je 'gokt' een aantal schermen die mogelijk in de site zouden kunnen komen) werk je uit in de stijl die je de site wil gaan geven.

Ik bouw altijd vast het begin van de website, met de des betreffende knoppen (als die natuurlijk aanwezig zijn). Zo krijgt de klant een goeie indruk (beter als op een tekening zoals jullie terrecht zeggen) hoe zijn website eruit komt te zien, ook met de opvulling dus.

En opvulling kan namelijk een heel andere draai aan een ontwerp geven natuurlijk.

[ShivanDragon]

ik kan hier weinig aan toevoegen nog, ik raad ook tenstelligste aan om je site eerst te teken in een grafisch pakket dat met layers werkt. Zo kan je makkelijk secties verschuiven en aanpassen voor de ogen van je werkgever.

welk pakket? Photoshop is dik in orde, maar Fireworks krijgt toch mijn voorkeur. Want deze tekent veel makkelijker.

[Verwijderd]

André schreef op 13 mei 2003 @ 22:54:
[...]

Moet je tegenwoordig nog op websafe kleuren letten? Is wel een beetje achterhaald lijkt me.


[...]

Professionele websites hebben geen framesets.

[Verwijderd]

Een simpel sitetje voor jezelf schets je gewoon, maar ik heb ook sites gemaakt waarbij je vanaf 0 begint die haast geen huisstijl hebben, dat was lastig maar ik heb toch een web-preview gemaakt. Klant kan dan commentaar geven. Eigenlijk heb ik nog nooit een site - van de vele die ik ontworpen heb - getekend in een grafisch programma, gewoon editplus en leef je uit.

Altijd was de klant wel tevreden met het ontwerp. Maarja dat vereist vaardigheden in b.v. op de wensen inspelen van de klant

[Larixk]

Ik vraag me af hoe jullie het laten zien aan een klant bedoelen.
Dat je (gezellig ) samen met de klant achter een pc gaat zitten?
Dat je hem geprinte/gedrukte versies geeft?
Dat je hem de bestanden mailt?

ik vraag het me af.

Het lijkt me duidelijk dat je bij het maken van een site altijd met losse layers moet werken, aangezien dit latere aanpassingen nog toestaat. (stel dat de klant die knop toch wat meer naar rechts wil)

[Verwijderd]

Gewoon in het programma waar je het beste mee werkt.
In mijn geval flash
Ik maak dan een opzet van 1 of 2 pagina's en zet die online.
Vanaf daar verder...

[Verwijderd]

Met Illustrator.

[OzBoz]

syllaz schreef op 13 May 2003 @ 20:45:
Ik werk op een reclamebureau en presenteer de eerste schetsfase altijd op foamboard.
Je werkt je grafisch ontwerp in photoshop uit en maakt 3 dummy pagina's. Deze print je uit en plak je op een stuk foam. Ik bedoel zonder dat je ontwerp goedgekeurd is, is het een beetje zonde van je tijd om te gaan zitten html-en e.d.

Ook zonde van het foam Nu werk ik ook op een reclamebureau en het komt nog steeds wel voor dat ik sites op foam presenteer. Maar tegenwoordig maak ik voor de klant een nette 'virtual foam' waarbij ik in de kantlijn nog wat opmerkingen plaats als het ontwerp toelichting nodig heeft. Deze werkwijze vooral bij sites die in een kort tijdsbestek gemaakt moeten worden. Voordeel is ook nog eens dat de klant het precies zo ziet zoals het wordt, qua kleur maar ook qua gevoel als het gaat om bijvoorbeeld het gebruikte corps en de duidelijkheid van het geheel.

[Verwijderd]

Fireworks, daarin kun je ook al het een en ander aan html elementen zoals tekstboxen en dhtml menuutjes toevoegen, die daadwerkelijk een beetje reageren!
Finetunen is daarna een eitje, en uiteindelijk omzetten naar html ook door allerlei geile integratie met dreamweaver.

Moet wel gezegd worden dat voor het zwaardere foto-bewerkingsgedoe ik meestal Photoshop neem omdat dat toch wel veel meer kan.

[Verwijderd]

armyantlyrix schreef op 14 May 2003 @ 17:36:
Ik vraag me af hoe jullie het laten zien aan een klant bedoelen.
Dat je (gezellig ) samen met de klant achter een pc gaat zitten?
Dat je hem geprinte/gedrukte versies geeft?
Dat je hem de bestanden mailt?

ik vraag het me af.

Het lijkt me duidelijk dat je bij het maken van een site altijd met losse layers moet werken, aangezien dit latere aanpassingen nog toestaat. (stel dat de klant die knop toch wat meer naar rechts wil)

klant is koning, als hij het over de mail wilt dan sturen we het via de mail (vaak een url van een tempsite die bestaat uit de site als plaat en evt de kleurvlakken van de framesets er omheen)

ik geef de voorkeur aan geprinte versies. Die kan je samen met de klant dan lekker onderkladderen, dat schijnen sommige mensen erg leuk te vinden

in een later stadium als er al delen werkend zijn is het wel handig om met de klant achter de computer te gaan zitten aangezien je ze toch de interactieve dingen moet laten zien.

[Verwijderd]

0.1 checken wat die klant nu wil, wat hij zelf voor ogen heeft, wat voor sites hij goed vindt etc.

0.2 Voor de vormgever/bouwer, check de offerte, daar staat vaak precies in wat belooft is, en in 'hoeveel' uur.

1.a interaction design - site flow
[puur technish en logisch overzicht van alle pages - naamgeving van alle buttons etc.]
1.b design [2 a 3 psd`s - omgezet naar jpg of gif]

2. pas na 100% goedkeuring van stap 1.a&1.b pas bouwen.

4. de content plaatsen | aanpassen en bellen wanneer die 'final' content nu eindelijk wordt aangeleverd. (de vertragende factor)

5. debuggen, alle 'links' overal clicken, en iemand met 'taal-gevoel' er ook naar laten kijken.

[littledreamer]

armyantlyrix schreef op 14 mei 2003 @ 17:36:
Ik vraag me af hoe jullie het laten zien aan een klant bedoelen.
Dat je (gezellig ) samen met de klant achter een pc gaat zitten?
Dat je hem geprinte/gedrukte versies geeft?
Dat je hem de bestanden mailt?

ik vraag het me af.

Het lijkt me duidelijk dat je bij het maken van een site altijd met losse layers moet werken, aangezien dit latere aanpassingen nog toestaat. (stel dat de klant die knop toch wat meer naar rechts wil)

Zoals Hugo inderdaad al zei klant is koning!
Soms komt het zelfs voor dat ik een auto-run cd toestuur met documentatie erbij (op papier natuurlijk).

En zoals je zelf al zei layers zijn echt de methode.
Je kan beter teveel layers gebruiken dan geen, tis een ideale oplossing.
Ik werk zelf met Photoshop, kleine aanpassingen zijn zo gedaan.

[Fluxie]

Voor onze vaste klanten werken we altijd met het PDF bestanden. (Al deze klanten zijn in bezit van acrobat 5)

Op die manier kunnen we ons commentaar invoegen in het bestand, meestal zet de vormgever en de projectleider allebei commentaar erbij. De klant kan zelf ook commentaar toevoegen in het bestand en deze later weer terugsturen.

Als nieuwe klanten geen acrobat 5 hebben sturen we ze wel altijd een PDF, maar leveren de commentaren er dan apart bij. Die staan dan op een template waar de klant per onderdeel zelf ook commentaar kan bijvoegen.

[Mr_Kite]

wat is precies het grote voordeel van acrobat? (sorry als dit een domme vraag is)

[ge-flopt]

Het kan niet 1..2..3 gedit worden en dus de opdracht gever kan niet met jou idee (lees source code) gaan werken. Tuurlijk een interface is zo nagemaakt, maar de exacte onderliggende code moet dan weer door iemand uitgedocterd worden.

[Fluxie]

Een van de grootste voordelen is dat iedereen het gratis kan bekijken (acrobat reader), om PDF's aan te passen heb je wel Acrobat nodig. Verder kan je beveiligen tegen tekst/afbeeldingen kopieren,printen, editen en nog een aantal instellingen.

Het voegt alle afbeeldingen en fonts in het formaat en je hebt dus verder niets nodig om het goed te kunnen bekijken. Er zit ook ondersteuning in voor postscript en ICC kleurprofielen. Theoretisch zou alles er op iedere PC en printer dus hetzelfde uit moeten zien.


Extra informatie:
In PDF 1.5, wat gebruikt wordt in Acrobat 6 die over een aantal maanden uitkomt, zal ook informatie over photoshop layers en andere programma-specifieke informatie bewaard blijven. In PDF 1.6+ zullen ook ilustrator layers en effecten bewaard blijven.


ge-flopt: over wat voor code heb jij het in je bericht, PDF is voor het bekijken en commenten van drukwerk, geen sites. Sorry als ik je verkeerd begrepen heb, maar het lijkt mij alsof je het over internettoepassingen hebt.

[Verwijderd]

Gewoon met Dreamweaver, daar werk ik het vlugste mee.

[kaassouffle]

Bij mijn stage kwamen de klanten meestal gewoon meekijken over de schouder van de ontwerpers. Kon er meteen geschoven worden en kleuren aangepast worden. Voor grote wijzigingen werd dan wat tijd uitgetrokken en een nieuwe afspraak gemaakt. Voor andere klanten werd het ontwerp uitgeprint, of online gezet als JPG....

Alle ontwerpen maakten we met Photoshop. Voor de prints zetten we er meestal een IE 'frame' ( plaatje statusbalk, adres balk etc.) omheen zodat het er uitzag zoals in je browser.

[Mr_Kite]

Fluxie schreef op 16 mei 2003 @ 20:32:
[snip] Sorry als ik je verkeerd begrepen heb, maar het lijkt mij alsof je het over internettoepassingen hebt.

Daar gaat deze thread toch ook over? Het grote voordeel van PDF wat betreft de compatibiliteit zie ik absoluut in, maar als het om websites gaat, is dat misschien niet zo nodig. Wat ik doe: eerst (zoals velen hier) de boel in photoshop in elkaar puzzelen, dan als plaatje online zetten.

@ge-flopt: zoals jij pdf beschrijft zie ik geen verschil met een photoshop bestand: dat kun je evenmin 'jatten'

[E-Mile]

OzBoz schreef op 14 May 2003 @ 19:56:
[...]


Ook zonde van het foam Nu werk ik ook op een reclamebureau en het komt nog steeds wel voor dat ik sites op foam presenteer. Maar tegenwoordig maak ik voor de klant een nette 'virtual foam' waarbij ik in de kantlijn nog wat opmerkingen plaats als het ontwerp toelichting nodig heeft. Deze werkwijze vooral bij sites die in een kort tijdsbestek gemaakt moeten worden. Voordeel is ook nog eens dat de klant het precies zo ziet zoals het wordt, qua kleur maar ook qua gevoel als het gaat om bijvoorbeeld het gebruikte corps en de duidelijkheid van het geheel.

Wat is de hele functie van het foam en waarom niet gewoon hardcopy

[Fluxie]

Ik weet dat deze thread over internettoepassingen gaat, maar in de post van ge-flopt lijkt het alsof hij eerst de gehele pagina in html (dat is wat is versta onder source-code) maakt en er dan een PDF van maakt. Dat is naar mijn idee een heel vreemde manier om eerst extra functionaliteit erin te bouwen (html) en daarna om te zetten naar PDF die geen html ondersteunt.

Ik kan er nog wel bij vertellen dat ik nooit websites maak en daarom gaat mijn eerste posting vooral over grafisch drukwerk

[Yellow|A]

Als de design fase redelijk lang is mooi op dik A3 papier printen met veel kanttekekingen zoals Ozboz in z'n digitale foam dinges gebruikt. Deze kanttekeningen zijn dan geprint op een transparant vel die in een boekje met het A3 veel zit.

Als er minder tijd is gewoon een index pagina maken met daarop links naar een paar PNG'tjes van hou het geheel eruit zal komen te zien. Nog minder tijd gewoon mailen.

Stel het is voor een animatie dan maak ik gewoon meestal wat voorbeeld schermen met pijlen die animatie weergeven en als er tijd en geld is misschien een ruwe blokjes animatie zodat ik timing kan laten zien aan de klant.

Maarja, waar er tijd en geld voor is

[ Voor 26% gewijzigd door Yellow|A op 17-05-2003 15:49 ]