Hoe starten met ontwerp site?

[witchdoc]

Ik moet dus voor school een site('tje) bouwen.
Geen probleem zou je denken, ik ken alle technieken die we in de site moeen verwerken maar mijn probleem:

ik ben een totale kneus qua ontwerpen.
Hoe in hemelsnaam start je een site? Daar is ons absoluut nooit iets van gezegd. Maak ik eerst op wat er in moet komen qua content? Maak ik eerst in photoshop een layout? Kopiëer ik als beginneling best iemands layout? Wat is nou aan te raden als complete idioot in deze materie?

Simpelweg starten in dreamweaver lijkt niet te werken.. 'k zit nu al 3 kwartier naar m'n scherm te kijken met af en toe een ingeving die 10 minuten later weer gans wordt weggevaagd wegens lelijk of weet ik veel wat.
Gewoon site van iemand kopiëren lijkt me ook niet de bedoeling.. zelf wat van leren lijkt me erg belangrijk ook al wil'k nooit echt sites gaan bouwen.


De site hoeft niet eens enorm uitgebreid te zijn: css, wat tabellen, mouse-over gedoe, animated gif vanuit fireworks, zeer sumier flashpagina'tje, ... je snapt het wel.

Wie helpt er me eens op weg? Wat vinden jullie de beste manier om een site te starten? Gebruikten jullie die manier als kneus ook al? Nog andere tips?

[Rhapsody]

ik maak altijd eerst een ontwerp in paint, en dan met photoshop etc etc gaan uitwerken. (ben ook n00b)

Als ontwerp af is; alles dmv css en xhtml omzetten naar een website (die moet werken in de bekende browsers) en natuurlijk voldoen aan de standaard van het W3C.

[ Voor 44% gewijzigd door Rhapsody op 19-05-2003 23:21 ]

[Nozzman]

Wil je een site bouwen om een site te bouwen of heb je daadwerkelijk iets te melden?

Belangrijke tip 1: zorg dat je een reden hebt. Een onderwerp dus.

Als het onderwerp vast staat, dan kun je eens om je heen kijken wat er allemaal speelt rond het onderwerp: doelgroep, doel en concurrentie.

Bedenk goed welke beeldtaal er bij je onderwerp past. Leg dus grenzen aan voor wat je van plan bent. Dan wordt het staren en kwijlen richting scherm al minder.

Ga vervolgens goed na welke functionaliteiten en content er binnen het onderwerp te bedenken zijn. Wat is de mate van interactiviteit? Welke rol speelt vormgeving? Etc. etc.

Ga dan lekker op papier eerst eens een groffe opzet neerraggen. Als je daar uit bent, start dan je Photoshop eens op. Maak een zo compleet mogelijk ontwerp, let op je interactie ontwerp en alle elementen die een rol gaan spelen en dus een plaats moeten krijgen.

En dan, ja dan, dan kan je eens gaan bouwen. Leuke lijnen trekken in Dreamweaver heeft geen zin. Of zoek een andere hobby. Iets waar je wel lekker bij kan staren. Mediteren ofzo.

[snooze]

begin eens met te bepalen WAT er op je site moet komen, en voor welk publiek je de site maakt.
Van daaruit kun je al een heleboel afleiden (kleurenschema's, navigatie).
Ga dan kijken hoe moeilijk je het jezelf wil maken (ga je statisch of dynamisch veel of weinig grafische poespas).
Ikzelf hou erg van een simpele strakke site die waar het voor bedoeld is met hooguit 1 klein bannertje bovenaan.

dan denk ik dat het al een heel wat minder grote klus is

nog een tip: schets eerst wat met potlood en (veel) papier vooral de navigatie graphics.

edit: was te laat maar mediteren is (voor mij) in ieder geval geen slecht idee

[ Voor 8% gewijzigd door snooze op 19-05-2003 23:25 ]

[witchdoc]

ok, het probleem is dus 1 dat ik totaal geen site wil maken.. ik moet dus maar een onderwerp verzinnen en alstie af is, sjah, dan gaat ie richting prullebak.
Ik had echter wel gedacht aan een informatieve site over parachutespringen te maken. Is nog intressant.

doelgroep: de leerkracht,
doel: goeie punten halen,
concurrentie: euhhm.. geen 't is tijdelijk site.

beeldtaal, mm, goei idee.. levende kleuren, blauwe lucht, "adrenaline foto's", intressante tekstjes.
Maar kan je zoiets anders inwerken dan een fototje op elke pagina en fotopagina om't af te sluiten?

Interactiviteit moet er niet zijn, hebben ook nog geen scripting enzo gezien, puur de basics van dreamweavers, basics van fireworks, en echt absolute basis van flash (cirkel laten bewegen).

Vormgeving is natuurlijk erg belangrijk, daar wordt eens ite altijd op beoordeelt, ook door mijn leerkracht dus.. maarja, ik heb al moeite om hemd en broek uit te kiezen die bij elkaar passen.. laat staan een mooie stijl voor een site. Noujah, die jatten we dan maar

Met de groffe opzet, bedoel je daar de layout mee of de werking? Heeft er toevallig iemand een voorbeeld van "draaiboek" voor een simpele site met wat prulletjes hier en daar?


Mmm, lastig, waarom leren ze je de techniek wel maar totaal niks over het ontwepren zelf? Techniek is simpel en kan je overal leren, ontwerpen vind'k veel en veel moeilijker

[OzBoz]

Ontwerpen is ook moeilijk en das ook de reden waarom een ontwerper prima te eten heeft. Maar je moet jezelf in elk geval niet gaan frustreren om te denken dat je binnen een paar uur een brilliant ontwerp op het schem hebt. Das namelijk niet zo. En veel sites mogen dan in een half uur na te maken zijn in bv Photoshop. Kan best zijn dat er dagen zoniet weken over aan gesleuteld is om het final te krijgen en elke pixel met een reden op een plek te hebben gezet.

[Blaise]

doelgroep: de leerkracht,
doel: goeie punten halen,
concurrentie: euhhm.. geen 't is tijdelijk site.

Volgens mij kan je beter doen alsof je een iets zinnigere doel(groep) hebt dan wat je hier noemt. Dit is een website maken om het website-zijn. Met een duidelijk doel komt er waarschijnlijk iets veel beters uit.

[witchdoc]

OzBoz schreef op 19 May 2003 @ 23:50:
Ontwerpen is ook moeilijk en das ook de reden waarom een ontwerper prima te eten heeft. Maar je moet jezelf in elk geval niet gaan frustreren om te denken dat je binnen een paar uur een brilliant ontwerp op het schem hebt. Das namelijk niet zo. En veel sites mogen dan in een half uur na te maken zijn in bv Photoshop. Kan best zijn dat er dagen zoniet weken over aan gesleuteld is om het final te krijgen en elke pixel met een reden op een plek te hebben gezet.

Uch, blij dat'k toch nog paar weken ôp voorhand aan ben begonnen
Maar zijn er tips om een simpel ontwerp te maken? Waar op letten? Wat kan of niet? Of is dat iets dat je echt zelf moet weten/ondervinden?

Blaise schreef op 20 May 2003 @ 00:11:
[...]
Volgens mij kan je beter doen alsof je een iets zinnigere doel(groep) hebt dan wat je hier noemt. Dit is een website maken om het website-zijn. Met een duidelijk doel komt er waarschijnlijk iets veel beters uit.

Goei punt. ,Vanaf nu ben'k dus bezig aan een informatieve skydive-site waar mensen die ook wel geïntresseert zijn maar de eerste stap nog niet gezet hebben, overhaalt kunnen worden.

mm, je hebt gelijk, invulling wordt al makkelijker.. maar dat klotedesignen niet.. ghehe

[djluc]

Als je nou een goede site maakt dan heb je daar later ook nog voordelen aan. Zo zou je bijvoorbeeld kunnen denken aan geld verdienen met je site door wat banners oi.i.d. Maar het gaat er vooral om dat je dan een beter doel hebt dan een site die alleen maar voor de cijfers is. Wat je cijfer weer zal verbeteren uiteraard omdat je inzet beter is.

[Falcon]

Of je pakt www.phpnuke.com ! .. Ben je meteen klaar.

[RM-rf]

poohbeer schreef op 19 May 2003 @ 23:43:
ok, het probleem is dus 1 dat ik totaal geen site wil maken.. ik moet dus maar een onderwerp verzinnen en alstie af is, sjah, dan gaat ie richting prullebak.
Ik had echter wel gedacht aan een informatieve site over parachutespringen te maken. Is nog intressant.

zoals je nu overkomt kan je wel een flinke schop onder je kont gebruiken.
Wat jij wil is niet belangrijk, als je een goed cijfer wil behalen heeft het geen zin te blijven mokken dat je 'niet kan ontwerpen', 'niet wil'.

Pak het praktisch aan: je thema is 'parachute-springen':
dat is dynamiek, beweging, opwindend;
- welke vormen beelden beweging uit? (denk eens aan de 'swoosh' van Nike)
- zoek een mooie action-foto van een parachutist en probeer hier eens een mooie uitsnede van te maken.
- wat is de structuur van je content, heb je veel teksten, of juist eerder veel beelden?

stap onmiddelijk achter dreamweaver weg, dat is een uitvoerende tool, geen ontwerp omgeving, je schetsfase breng je door met wat papier, een potloodje en photoshop, teken wat begin-ideeen op, wat voor vormen, en wat voor bladindeling komt daaruit voort?

Bedenk ook dat talent enkel van belang is voor mensen die een verkeerde werkaanpak hebben, 99% van het ontwerp-werk is afhankelijk van praktisch denken, gericht analyseren en vooral aanpakken (99% transpiaratie, 1% inspiratie)

Mmm, lastig, waarom leren ze je de techniek wel maar totaal niks over het ontwepren zelf? Techniek is simpel en kan je overal leren, ontwerpen vind'k veel en veel moeilijker

* RM-rf denkt opeens aan die Karate Kid film, waar het gozertje eerst 3 dagen lang een auto moeten poetsen om te leren karatevechten;

[Peedy]

Ik schets zelf altijd een paar ontwerpen, en leg die voor aan mijn opdrachtgever.
Als hij er 1tje kiest (laten we zeggen de standaard top/main frameset) dan maak ik die frameset en zet ik er losse plaatjes/logo's etc in.
Zoals velen van jullie aangeven, tekenen jullie de HELE site in PhotoShop, waarna je gaat cutten en opslaan, en weer in delen gaat importeren.
Dan maak je dus geen gebruik van html codes! Niet dat ik jullie nu een les wil leren, maar ik zit zelf nog op een 56k6 lijn en ik vind het mateloos irritant als een hele site uit plaatjes is opgebouwd. Mijn advies; begin met tables en divjes, voor n00bs desnoods frames en werk zoveel mogelijk met kleurtjes in HTML code werken!

[himlims_]

pEeDy16 schreef op 20 mei 2003 @ 09:06:
Ik schets zelf altijd een paar ontwerpen, en leg die voor aan mijn opdrachtgever.
Als hij er 1tje kiest (laten we zeggen de standaard top/main frameset) dan maak ik die frameset en zet ik er losse plaatjes/logo's etc in.
Zoals velen van jullie aangeven, tekenen jullie de HELE site in PhotoShop, waarna je gaat cutten en opslaan, en weer in delen gaat importeren.
Dan maak je dus geen gebruik van html codes! Niet dat ik jullie nu een les wil leren, maar ik zit zelf nog op een 56k6 lijn en ik vind het mateloos irritant als een hele site uit plaatjes is opgebouwd. Mijn advies; begin met tables en divjes, voor n00bs desnoods frames en werk zoveel mogelijk met kleurtjes in HTML code werken!

Ik maak mijn lay-out ook meestal helemaal in photoshop, alle grote / egale vlakken worden toch echtwel html codes. Ja niet als je die gaat exporteren, maar ik doe 't meestal met dreamweaver (ben zelf niet zo'n kei in tabellen) de rest doe ik met 't handje via een editor als 'crimson editor of zend studio'.
Persoonlijk denk ik dat ieder zo z'n eigen manier heeft van hoe je een site maakt.
Overigens maak ik m'n lay-out altijd volledig; daarmee bedoel ik dat ik in m'n psd bestandje ook al de nieuws berichten op neem. De navigatie of weet k 't wat. Zodat je precies weet hoe groot je font moet zijn, dat je precies kunt meten en zo hoe alles moet aansluiten.
Maar bedenk goed wie de doelgroep is; op dit moment bent ik bezig met een pagina over een computer game. Mijn groep is gamers, die hebben vaak wel flash/een hoge resolutie/goede i-net verbinding etc. dan kun je daar op inspelen.
Zo liep ik gister tegen een project aan waar de doelgroep varkensboeren zijn; mensen met een niet al te hoog ict-gehalte (vaak), om die pagina te kijken was IE6SP1 verplicht (anders werkte het niet). Persoonlijk vind ik dat dan ook knudde gedaan; want lang niet iedere boer weet hoe hij zijn ie moet updaten. Daarnaast werd er veel flash gebruikt wat overbodig was; voor stil staande tekst, bannertje en ngo een paar kleine dingen, die beter als animated-gif gebruikt konden worden.
Dat zijn van die dingen waarbij je ook rekening dient te houden met je ontwerp; wat wil ik, kan het, en heeft 't nut? dat zijn vaak de vragen die ik aan me zelf stel.

Even een bericht aan poohbeer - mocht mijn internet vanavond weer werken thuis - kan ik je wel een paar bestanden sturen over hoe ik m'n lay-out maak.

[Verwijderd]

Meestat heb ik de volgende routines

1) Kijk welke websites ongeveer passen bij mijn onderwerp en haal daar inspiratie vanuit
2) Maak een schets. Bedenk gelijk ook wat wel en niet kan tijdens het ontwerp.
Ik ken mensen uit de reclame wereld die maken een website alsof ze een brochure maken ( zie je aan de layout). Sommige designs kunnen moeilijk( of kan helemaal niet) in html ( hangt ook vanaf wat je technische eisen zijn ).

3) Zet de schets om in photoshop
4) Haal de plaatjes eruit die je nodig heb
5) Gebruik zoveel mogelijk HTML en gebruik dan plaatjes
6) ftp
7) done


Zoiets ;-)

[Cartman!]

pak een paar vellen papier, ga wat tekenen met potlood. Gewoon een indeling maken zegmmaar. Dus waar komt t menu, content, etc. En dan kan je met wat vormen spelen. Tegelijkertijd kan je denken aan kleurschema's. Als je dat eenmaal af hebt (tis niet gezegd dat t in een paar uur is...) kan je eens gaan klooien met photoshop. t coden was geen probleem zei je.

[himlims_]

persoonlijk vind ik op papier aan frotten niets;
dat is namelijk absoluut niet reperesentatie voor een website want die bestaad uit pixels.
Daar kun je beter rekening mee houden, en al spelenderwijs aan de slag gaan met photoshop (oid).
Want aan een papiere sketch heb je opzich niet veel. Is misschien leuk als je even snel iets in gedachten hebt om te noteren of zo. Maar een lay-out ontwerpen / sketchen op papier vind ik zelf nergens voor nodig.

[Willem]

Schetsen of een PSD'tje verschilt nogal denk ik, en voor beiden is wel wat te zeggen. Gaan we de concept-kant op, met art- en moodboards, impressions en noem de hele reutemeteut maar op zou ik zeker kiezen voor een indruk op papier met pantone markers of wat dan ook..

Gaan we naar de serieuze -concrete- (website)ontwerp voorstellen, lijkt me een grafisch voorbeeld op 't scherm een prima keuze, want ik denk dat dit -helemaal bij websiteontwerp- veel meer tot de verbeelding spreekt bij klanten.

Neemt niet weg dat er bij het ontwerp traject van een website ook een concept fase aan vooraf kan gaan.. maar, dan vind ik dat je keuze voor deze stap toe moet kunnen lichten. De grap is vind ik van conceptueel ontwerpen, tekenen en schetsen is dat je een aardige indruk kunt neerleggen, die vrij simpel gemaakt kan zijn.

Een bepaalde look-and-feel dus.. vervolgens kan zoiets worden uitgewerkt en gerealiseerd

Wilde nog wel even benadrukken dat bovenstaande fase(n) wat mij betreft afhankelijk zijn van een aantal factoren, en dat zal het altijd blijven.. bijvoorbeeld projectomvang en grootte van de opdracht, de importantiefactor.. belangrijkheid van de toepassing van het project, de prijs en noem maar op.

De bakker om de hoek krijgt geen moodboards voor het ontwerp van z'n website ajbwib

[Johnny]

poohbeer schreef op 19 mei 2003 @ 23:15:
Ik moet dus voor school een site('tje) bouwen.
Geen probleem zou je denken, ik ken alle technieken die we in de site moeen verwerken maar mijn probleem:

ik ben een totale kneus qua ontwerpen.
Hoe in hemelsnaam start je een site? Daar is ons absoluut nooit iets van gezegd. Maak ik eerst op wat er in moet komen qua content? Maak ik eerst in photoshop een layout? Kopiëer ik als beginneling best iemands layout? Wat is nou aan te raden als complete idioot in deze materie?

Simpelweg starten in dreamweaver lijkt niet te werken.. 'k zit nu al 3 kwartier naar m'n scherm te kijken met af en toe een ingeving die 10 minuten later weer gans wordt weggevaagd wegens lelijk of weet ik veel wat.
Gewoon site van iemand kopiëren lijkt me ook niet de bedoeling.. zelf wat van leren lijkt me erg belangrijk ook al wil'k nooit echt sites gaan bouwen.


De site hoeft niet eens enorm uitgebreid te zijn: css, wat tabellen, mouse-over gedoe, animated gif vanuit fireworks, zeer sumier flashpagina'tje, ... je snapt het wel.

Wie helpt er me eens op weg? Wat vinden jullie de beste manier om een site te starten? Gebruikten jullie die manier als kneus ook al? Nog andere tips?

Ik weet niet watvoor school je zit of wat precies de opdracht is, maar bij mij op het middelbaar onderwijs hebben leraren graag iets makkelijks dat ze net zo lezen als een papieren verslag. Neem dus gewoon een witte pagina zet de tekst daarop. verdeel het in losse pagina's maak een leuk logo, zet het boven iedere pagina. Maak een paar vorige-volgende knoppen onder iedere pagina en je bent klaar, binnen een uurtje heb je een degelijke website voor de leraar in elkaar. Verzin dan een verhaaltje over simpelheid, toegankelijkheid, browserondersteuning en hoe goed de site wel niet op alle, ook oudere PC's werkt...

Tja, het zal geen meesterwerk zijn, maar je doel is snel een site hebben die maar een enkele keer door een enkel persoon zal worden bekeken.

[Eijkb]

Persoonlijk zou ik idd voor het laatste kiezen. Als je het verhaal eromheen (zoals genoemd toegankelijkheid e.d) goed voor elkaar hebt ben je vast wel binnen. Kijk ook eens wat andere studiegenoten in gedachte hebben.... en stem de kwaliteit evt. daarop af

[Verwijderd]

Misschien hebbie hier wat aan, Mike Markel's Web Design Tutorial

[ Voor 8% gewijzigd door Verwijderd op 20-05-2003 15:14 . Reden: typo ]

[Nozzman]

Met papier bedoel ik alleen een indelingschets maken. Niet de site zelf. Simpel gezegd: de vlakverdeling die je wil gaan gebruiken: wat komt waar en hoe? En het uiteindelijke hoe bepaal je dan digitaal in PSD.

[witchdoc]

k thx jongens, heb't effe samen met een vriend gedaan.. die gozer had op 5 minuten een mooie (simpele) layout klaar met photoshop. Dan slicen en poof je hebt je site in feite al.

Bottomline, als'k met een hoop prentjes in layers begon te schuiven was het best makkelijk een leuk uitziende layout te maken.
Aangezien ik maar een simpele site heb, lijkt dit me echt wel de beste manier om't aan te pakken.

Nu nog eens kijken of't nog zo makkelijk is als'k helemaal from scratch dit probeer zonder voorbeeld erbij

[ Voor 4% gewijzigd door witchdoc op 21-05-2003 09:12 ]

[Clay]

Ik denk ook dat een deel van je probleem is/was dat je -alles- alleen moet doen. Dus design, frontend (en evt backend). Er zijn niet zoveel mensen die alles kunnen en in hun eentje een mega site kunnen neerzetten. Zo heb ik bijvoorbeeld een goeie vriend die backend held is, kan ik zelf niet.
Iemand erbij halen die wel kan waar je zelf blijkbaar moeite mee hebt (wat je dus ook gedaan hebt ) is dus de oplossing

[Bosmonster]

Even wat posts verwijderd die dus niks met het onderwerp te maken hadden.