Archief - Welke is de beste methode om websites te maken?

Dag beste webdesigners/ontwikkelaars

Ik zit al lang met de volgende vraag in mijn hoofd:

Als jullie websites maken doen jullie dat wellicht adhv een (zelfgemaakte) template he?
Slicen jullie dan elke deeltje (verschillende functie) via Photoshop en dan met css en xhtml integreren tot een webpagina? Of gebruiken jullie die template als 'schets'?
Wat ik doe is alle deeltjes apart maken in Photoshop/Illustrator en dan tot een geheel brengen adhv code. Ik vermoed dat dat een slechte methode is?

edit: oei, ik heb waarschijnlijk slecht voorvoegsel gebruikt

bedankt

Ik slice niet meer.

Ik doe het meeste in css, en wat daarmee niet mogelijk is (speciale effecten ofzo) maak ik in PS (bv: header, knoppen, etc).

En zijn templates niet eerder voorgekauwde dingen? Of heb ik het mis?

wartaal zei:

Ik slice niet meer.

Ik doe het meeste in css, en wat daarmee niet mogelijk is (speciale effecten ofzo) maak ik in PS (bv: header, knoppen, etc).

En zijn templates niet eerder voorgekauwde dingen? Of heb ik het mis?

Klik om te vergroten...

Welja, als je ze zelf maakt niet denk ik

Ik doe ook het meeste in css
Maar vaak zie je mensen die hun zelfgemaakte template(?) verkopen ofzo. Of dat ze die naar iemand sturen om om te zetten naar een webpagina.

Stel nu bv., je hebt een volledig ontwerp gemaakt van A tot Z, met een textbox voor de zoekfunctie enz...
Wat doe je er dan mee?

- In Photoshop gewoon een design opbouwen, zoveel mogelijk in lagen en smart objects werken zodat ge niets gaat vernietigen.

- Eenmaal het ontwerp af is bekijkt ge het eens, hoe kunt ge het beste uw afbeeldingen gaan versnijden om ze gemakkelijk in xHTML/CSS om te zetten? Wat wordt een repeating image? Wat wordt een background-image en wat behoort tot het design? Wat is de breedte van mijn content, hoe ga ik de containertjes indelen? Al die vragen kunt ge u best op voorhand stellen, anders gaat ge misschien niet efficiënt snijden.

- Dan begin ik te croppen, alles manueel. Die slice functie gebruik ik zelf nooit. Bijkomstig kunt ge dan al de verschillende hoogtes en breedtes neerschrijven, zo hebt ge die later sneller als ge in uw css bezig zijt. Maar dat laatste doe ik zelf eigenlijk nooit. CMD + ALT + SHIFT + E komt hier ook goed van pas, op die manier zit ge niet te klungelen met layer styles.

- En dan natuurlijk de xHTML/CSS. Hetzelfde als altijd, gewoon een containerke zetten en dan de basisopbouw doen. Ik werk blok per blok en schrijf de xHTML in combinatie met de CSS.

Als editors gebruik ik Coda/CSSEdit en ik ben nu aan't overschakelen op Espresso, maar dat staat nog lang niet op kot. Dreamweaver gebruik ik zelf nooit omdat ik vind dat er veel te veel bugs in zitten en omdat het programma te groot is voor wat ik er in doe.

--

En als ge het over textboxen hebt en dergelijke die ge geen speciale opmaak hebt gegeven dan moet ge uw 'template' maar als guidance gebruiken. Ge kijkt gewoon waar ge het precies gezet hebt in uw template (om uw margins in te stellen in css) en zo begint ge. Maar als ge ook een design hebt gemaakt voor uw inputvakken dan moet ge dat natuurlijk ook meecroppen.

Dan slice je de dingen die je niet kan maken met CSS en voor de rest maak je alles na eh. Een textbox op je layout . Ga je wel nog effectief moeten aanmaken in HTML. Der is niet zo iets al 'snel omzetten'.

Edit voor zero grav: wat voor bugs kwam jij al tegen in dreamweaver?

Redelijk wat bugs in verband met de GUI op Mac OS X. Het constant shiften tussen Code en Designview ook al had ik al op voorhand Code bepaald. De standaard instelling voor "Coder Plus" of hoe ze ook heet zou logischerwijs ook enkel code moeten weergeven en niet splitview, iets wat ge wel gemakkelijk kunt aanpassen.

Ook vaak delen van de GUI die gewoon puur verdwijnen als ge met Exposé werkt en dan moet ge weer gaan dubbelklikken op de tabbalk voor die weer tevoorschijn komen. Dit heb ik op veel andere macs ook zien gebeuren. Of die bugs ook op Windows aanwezig zijn weet ik niet, maar wellicht niet omdat de opbouw van dat programma daar volledig anders is.

Ook gewoon het programma in zijn geheel. 't Is echt warrig en staat vól knoppen. Als ik dan kijk naar andere editors zijn die veel meer straightforward en daarom niet noodzakelijk minder veelzijdig dan Dreamweaver. Al hebben de editors die ik gebruik ook stuk voor stuk hun nadelen en wacht ik vol ongeduld tot Espresso wordt wat het zou moeten zijn, en wat ons op voorhand ook 'verkocht' werd.

wartaal zei:

Ik slice niet meer.

Ik doe het meeste in css, en wat daarmee niet mogelijk is (speciale effecten ofzo) maak ik in PS (bv: header, knoppen, etc).

En zijn templates niet eerder voorgekauwde dingen? Of heb ik het mis?

Klik om te vergroten...

Je doet net alsof slicen iets vies is en dan zeg je dat je alles in css doet. Het één sluit het andere niet uit. Wat ik onder slicen versta is dat je de layout in photoshop maakt en dan slices gaat maken van alle onderdelen die je nodig hebt. Zodat je die dan gemakkelijk kan exporteren naar het gewenste formaat. Dan gebruik je die slices samen met html/css om de website vorm te geven.

Nu een volledige layout in photoshop slicen is natuurlijk af te raden. Maar ik denk dat elke webdesigner dit wel weet.

Ik heb ook onlangs een template map gemaakt die ik gewoon kan copy pasten. In die map heb ik een asp.net webisite met alle basis onderdelen die ik meestal nodig heb. Hier is een screenshot van mijn template project. Het is nog altijd work in progress en ik moet hier en daar nog iets opzoeken. Zoals of het gebruik van veel css bestanden nadelig is.

Is wel een leuk topic om te kijken hoe andere webdesigners werken en vooral om te kijken welke onderdelen vaak worden hergebruikt.

Ik ben ook eens begonnen met het maken van een 'content' template naar designers en copywriters toe. Misschien dat ik daar nog wel eens een post over maak. Lijkt me wel handig voor DTP ontwerpers die een website ontwerpen of copywriters die niet veel ervaring hebben met web copy.

Zero Grav zei:

- Dan begin ik te croppen, alles manueel. Die slice functie gebruik ik zelf nooit. Bijkomstig kunt ge dan al de verschillende hoogtes en breedtes neerschrijven, zo hebt ge die later sneller als ge in uw css bezig zijt. Maar dat laatste doe ik zelf eigenlijk nooit. CMD + ALT + SHIFT + E komt hier ook goed van pas, op die manier zit ge niet te klungelen met layer styles.

Klik om te vergroten...

Ik heb het lang ook zo gedaan maar ik vond het lastig om altijd opnieuw te croppen als er iets moest worden veranderd of bewaar jij al je "crops" nog eens als psd?

Sommige dingen wel, afhankelijk van de moeilijkheid om ze correct opnieuw te croppen. Bijvoorbeeld menu-items, waarbij ik zowel alle items als de hoverstate in één bestand wil hebben. Daar is het handiger om het eindresultaat van de crop direct even in een PSD op te slaan. Maar de gewone dingen laat ik zoals ze zijn. Als ge opnieuw moet gaan croppen is het inderdaad wat meer werk, maar ik heb dan gewoon het gevoel dat ik meer controle over mijn werk heb.

Maar uiteindelijk is dat gewoon een manier van werken, die slice-functie stoorde mij in het begin en ik heb ze dan ook vrij snel laten vallen. Maar als iemand anders dat graag gebruikt, en de html-output wist dan heb ik daar geen probleem mee.

Ik crop ook alles manueel, vind ik veel aangenamer werken dan het door photoshop te laten doen. Vervolgens begin ik mijn div's uit te werken, tegelijkertijd met de css totdat ik op het gewenste resultaat uitkom.

Wat ik doe is volgens mij ook niet de juiste manier maar het werkt wel voor mij.

- Ik ontwerp de volledige template in Photoshop.
- Denk na over hoe ik de boel het best kan slicen.
- Gebruik de slicetool in Photoshop om alles netjes te verdelen.
- Sla de slices op als ONLY images.
- Pas alles netjes samen aan de hand van DIVS in CSS.
- Vervang waar mogelijk de afbeeldingen die in 1 kleur zijn door een BGCOLOR.
- Done.

Ik vind heel da photoshop gedoe overdreven. Met de kracht van Css kan je toch zonder probleem een hele structuur in elkaar zetten?

Volgens mij is er niet een echte 'juiste' manier, iedereen heeft zo wel zijn methodes die het beste/snelste werken. Dit is hoe ik het doe:
- Ik maak een kleine grid layout op papier
- Maak dan een totaal ontwerp in Fireworks en zorg dat dit gestructureerd is. Een aantal licht/glow effecten gaan niet goed in Fireworks, hiervoor gebruik ik dan Photoshop en deze voeg ik opnieuw in in Fireworks
- Dan bekijk ik het totale ontwerp en zie ik wat met css kan, hoe ik eventuele sprite afbeeldingen ga samenstellen en hoe ik andere afbeeldingen ga indelen.
- Daarna maak ik een aantal nieuwe bestanden aan, ik slice dus niet.
Hierin voeg ik mijn afbeeldingen toe en stel ik de sprites samen.
- En als laatste alles opslaan in het juiste formaat en de gewenste compressie toepassen

MiniJeffrey zei:

Ik vind heel da photoshop gedoe overdreven. Met de kracht van Css kan je toch zonder probleem een hele structuur in elkaar zetten?

Klik om te vergroten...

Als er al één excuus is om Photoshop te gebruiken dan is het omdat ge veel meer over uw layout gaat nadenken. Als ik een site maak zonder eerst de layout te ontwerpen dan denk ik veel minder na over de samenhang van de elementen, vooral over de verschillende pagina's verspreid dan.

Daarbij hangt dat ook sterk af van het type sites dat ge maakt. Als ge enkel maar simpele bloksites maakt dan gaat ge niet veel Photoshop nodig hebben. Maar als ge al begint met een achtergrondpatroon en alles volledig in grunge te maken dan zijt ge echt maar slecht bezig als ge dat niet eerst een volledige template opbouwt.

Ik denk ook dat gij u enkel met webdevelopment bezighoudt als hobbyist, en ook minder met de designkant? Allé, ik ken u nu niet, maar zoiets leid ik wel af uit die statement die ge daar zet. Want ge vergeet precies dat er naast simpele bloksites (die trouwens vaak ook nog eens zoveel extra verborgen kantjes hebben waarbij uren Photoshop aan te pas is gekomen) ook nog een hele wereld van design bestaat.

photoshop + CSS + dreamweaver + manuele coding

[drone]-[1.05];11589053 zei:

Je doet net alsof slicen iets vies is en dan zeg je dat je alles in css doet. Het één sluit het andere niet uit. Wat ik onder slicen versta is dat je de layout in photoshop maakt en dan slices gaat maken van alle onderdelen die je nodig hebt. Zodat je die dan gemakkelijk kan exporteren naar het gewenste formaat. Dan gebruik je die slices samen met html/css om de website vorm te geven.

Klik om te vergroten...

Waar zeg ik dat het vies is? Maar, zoals eerder aangegeven crop ik gewoon de delen die ik nodig heb. Ik geef toch aan dat ik dingen in PS ook maak die nodig zijn?

* Mockup in illustrator, soms op papier, depending on the mood/time/place
* Structurele markup in xhtml
* CSS + Photoshop + Illustrator voor uitwerking

MiniJeffrey zei:

Ik vind heel da photoshop gedoe overdreven. Met de kracht van Css kan je toch zonder probleem een hele structuur in elkaar zetten?

Klik om te vergroten...

Das wel een heel grote fout hoor. Ze gaan bij de Ford toch ook niet in de fabriek aan de band kijken hoe de auto er eventueel gaat uitzien. Nope. Elk ontwerp begint op de tekentafel, of in dit geval photoshop/illustrator. Er zijn zelfs die-hard die eerst op papier schetsen.

Voor een simpelen niet al te technische site:
Dus eerst ontwerpen(liefst met technische structuur in't achterhoofd)
Vervolgens structuur in xhtml/css op basis van je photoshop ontwerp
En vervolgens grafische elementen plaatsen waar nodig(photoshop knippen en plakken, evn. flash).
En op basis van deze xhtml versie de functionaliteit inbouwen.

Maar ieder zijn methode/tools natuurlijk.

Op welke resolutie werken jullie dan meestal in PS?