Share
Dit zijn spannende tijden om een webdesigner te zijn. CSS begint eindelijk de visies bij te houden van de prachtige websites die we in ons hoofd hebben. We hoeven niet langer te vertrouwen op hacks en afbeeldingen om prachtige boeiende interfaces te maken! Maar we kunnen niet alleen vertrouwen op browsers om dit nieuwe tijdperk in te luiden. Als makers moeten we flexibel zijn en onze workflow aanpassen om deze nieuwe beste praktijken aan te moedigen. Het is tijd om na te denken over hoe we websites maken.
Wat ik vandaag zal bespreken is niet nieuw of baanbrekend, maar eerder een verlengstuk van wat je al geruime tijd in je achterhoofd hebt vermoed. Dit artikel gaat dienen als een tegengesteld punt voor veel van de andere artikelen op deze website die focussen op Photoshop en Fireworks, maar het zijn slechts de meningen van een enkele ontwerper, dus u kunt ze meenemen of achterlaten.
Als je op mij lijkt, wanneer je een nieuwe website start, doorbreek je het schetsboek en begin je ideeën te krabbelen. Vervolgens open je Photoshop (of Fireworks) en maak je het ontwerp. Code heeft er tot de allerlaatste fase geen enkele invloed op.
Dit is een fundamenteel onvolkomen idee, om vele redenen. Ten eerste is een website geen beeld. Een voltooide website is flexibel, ontroerend ding, gebouwd met HTML of CSS. Photoshop geeft ons (en onze klanten) onrealistische verwachtingen over hoe een website er uit zal zien en zich zal gedragen. Je zou moeten nadenken over hoe het ontwerp zal vertalen in code helemaal door het ontwerpproces.
Ten tweede, het hele concept van één? ontwerp voor een website is verkeerd. Een Photoshop-mockup bouwen en dan ... in orde zeggen, nu door naar de code? geeft een webdesign een permanent karakter, alsof u een proefafdruk maakt voordat u deze verzendt. Een van de enorme voordelen van internet is dat het voortdurend verandert. Een mockup stempelen als gedaan zegt dat dit de definitieve versie van het ontwerp is die zal bestaan. Als ontwerpers moeten we de steeds veranderende aard van ons medium omarmen en erkennen dat een ontwerp nooit echt is voltooid.
Het voordeel van ontwerpen met code is dat je gedwongen wordt om over de inhoud en de stijlen na te denken als twee verschillende dingen. De inhoud zal het ontwerp leiden, in plaats van andersom.
Vanzelfsprekend heb je een browser nodig. In feite zou je echt een paar browsers moeten hebben om te testen. (Terzijde: ik adviseer Wijn voor het testen van IE op de Mac). Op zijn minst zou je een op Webkit gebaseerde browser zoals Safari of Chrome moeten hebben, evenals een door Gecko aangedreven browser zoals Firefox. Als je al eerder een vorm van webontwerp hebt gedaan, heb je dit gebied ongetwijfeld bedekt.
Je zou ook een fatsoenlijke code-editor moeten hebben. Bij voorkeur iets met een live-updatefunctie zoals Espresso of Coda. Ik ben persoonlijk een grote fan van TextMate, hoewel het geen live-update-modus heeft. Nogmaals, als een web guy / gal heb je waarschijnlijk al een favoriet, maar ik kan het net zo goed vermelden voor elke nieuwkomer.
Schetsen is misschien wel het belangrijkste onderdeel van het ontwerpproces. Dat zou niet moeten veranderen, ook al ontwerp je in de browser.
U moet nog steeds een goed idee hebben van hoe het ontwerp eruit moet zien voordat u op de computer start. Aan het eind van de dag is dit nog steeds een ontwerp en moet je nog steeds een schetsboek gebruiken. Ik zal niet in detail treden over dit deel van het proces, aangezien jij, als ontwerper, er al bekend mee zou moeten zijn. Weet alleen dat dezelfde regels van toepassing zijn. U zou Photoshop niet openen zonder een idee te hebben hoe uw site eruit zal zien, dat zou gek zijn!
Eigenlijk hoeft het niet te schetsen. Doe gewoon waarvoor het werkt u om het concept te creëren. Wat het ook mag zijn, het belangrijkste om te overwegen is om een goed idee in je hoofd te krijgen voordat je op de computer begint.
Layout is zonder twijfel het belangrijkste onderdeel van dit proces. Je zou de prachtigst geselecteerde lettertypen, perfecte kleuren en heerlijke kleine details kunnen hebben, maar zonder een degelijke lay-out, zal het hele ontwerp plat vallen. Gelukkig is het bouwen van een solide, op float-gebaseerde lay-out met CSS een van de gemakkelijkste dingen die je als webdesigner kunt doen. A List Apart heeft een geweldig artikel over het onderwerp dat ik ten zeerste aanbeveel voor de technische details van het bouwen van een CSS-gebaseerde lay-out.
Als er al iets is dat u al moet weten voordat u naar uw code-editor gaat, dan is dat de lay-out van uw ontwerp. Als u een specifieke lay-out in gedachten heeft, is het eenvoudig om deze te coderen. Als u echter zonder lay-out in gedachten gaat, denk ik dat u teleurgesteld zult zijn over de resultaten. Lay-out is geen ding dat je gewoon kunt experimenteren en direct kunt uitschakelen, het is een kwestie die een zorgvuldige afweging van de kant van de ontwerper vereist.
Zelfs als je het niet weet precies waar elk element op de pagina gaat leven, moet je op zijn minst een algemeen idee hebben van de plaatsing van de belangrijkste elementen, evenals de verhoudingen tussen die elementen.
Een van de geweldige dingen over deze nieuwe beweging van? Responsive Web Design? is hoe het ontwerpers stimuleert om in verhoudingen te denken in plaats van pixels. Je zou bijvoorbeeld kunnen zeggen dat dit element 30% van de hoofdcontainer moet zijn, in tegenstelling tot 200px of een vergelijkbare meting. Dit komt vooral van pas bij webontwerp in de browser wanneer men een pagina moet structureren. U kunt beginnen met een hoofdcontainerelement dat bijvoorbeeld 70% van het browservenster is en vervolgens de rest van de pagina in die container ontwerpen in verhouding tot de breedte van dat element. Geen gedoe meer met exacte pixelmetingen en dat stomme liniaalgereedschap in Photoshop!
Op dit punt zou je het op zijn minst moeten hebben gehoord van @ font-face, zelfs als u het nog niet in een project hebt gebruikt. Voor alles weet ik het niet, een van u die er nog nooit van gehoord heeft, hier is de versie met één zin. @ font-face is een manier om elk lettertype in te passen en te gebruiken voor gebruik op een website, zelfs als dit niet op de computers van uw gebruikers is geïnstalleerd.
Dit eenvoudige idee heeft in een paar jaar tijd een heel nieuw tijdperk van webtypografie opgeleverd. Gehele bedrijven zoals Typekit en Fontdeck zijn opgedoken met als enig doel prachtige lettertypen voor uw website te presenteren. In het verleden waren we gedwongen om te vertrouwen op hacky-methoden zoals Cufon of gewoon gewone afbeeldingen om ons type weer te geven zoals we het willen, maar dat is aan het veranderen. Type gieterijen hebben grotendeels het nieuwe formaat omarmd, hun licenties gewijzigd om insluiten toe te staan, of zelfs toestaan dat hun lettertypen worden gehost door Typekit.
Dus dit is geweldig, maar wat heeft het te maken met het ontwerpen van in-browser? Wel, mijn goede heer, dat zal ik u vertellen.
Het beheer van lettertypen is een stuk eenvoudiger als ze worden beheerd door CSS-regels en niet door Photoshop?
Moppen in Photoshop om elk stukje tekst in een geselecteerd lettertype te veranderen, wordt na een tijdje een beetje belachelijk. In code kunt u een voorbeeld van wijzigingen bekijken en verschillende lettertypen, gewichten en formaten testen door een paar regels tekst te wijzigen. Hiermee kunt u uw ontwerpen sneller herhalen en kunt u een ontwerp aanpassen aan klantaanvragen met een paar eenvoudige toetsaanslagen.
Al die kracht wordt een beetje belachelijk als je bedenkt dat we nu een oneindig aantal lettertypen hebben om mee te werken. Zolang de gieterijen hun ding blijven doen en Typekit blijft het hunne doen, zullen ontwerpers nooit een passend lettertype missen.
Ik raad ten zeerste aan om Typekit te gebruiken, omdat er veel meer lettertypen beschikbaar zijn dan met een standaard @ font-face-licentie. Je kunt de code altijd zelf beheren, maar het omgaan met licenties en het apart aanschaffen van elk lettertype wordt behoorlijk snel behoorlijk belachelijk. Dit is de optie die ik heb gekozen voor een paar projecten, en hoewel het nog steeds oneindig veel beter is dan wat we eerder hadden gedaan, was de ervaring niet de beste.
Als het gaat om het kiezen van lettertypen, veel plezier ermee! Experimenteer, probeer iets geks. Als je de flagrante zelfpromotie wilt excuseren, wil ik je wijzen op een ander artikel van mij.
In een? Traditioneel? webontwerpproces, vaak begint de ontwerper met het samenstellen van een grijswaardenmodel van hun ontwerp in Photoshop, alvorens de kleuren en details toe te voegen die nodig zijn om het ontwerp te laten knallen. Dit proces is een integraal onderdeel van de lay-out en het algehele gevoel van het ontwerp. Zelfs als je geen zwart en wit gebruikt, kun je met je ontwerp in sets met dozen en eenvoudige vormen echt zien hoe je ontwerp vanuit een hoger perspectief werkt. Het bouwen van een ontwerp met behulp van eenvoudige dozen kan heel gemakkelijk worden omgezet in onze workflow binnen de browser. Gebruik gewoon
Zodra u uw lay-out en typografie op de juiste manier hebt gemarkeerd en gestileerd, wordt het introduceren van kleur een triviale zaak met een paar regels code. Dit wil niet zeggen dat kiezen de kleuren is een eenvoudige en eenvoudige techniek (hoewel daar ook een geweldig artikel voor is), alleen al het inkleuren van de objecten op een technisch niveau is heel eenvoudig. Zelfs het weergeven van mooie verlopen is eenvoudig met CSS3.
Wanneer ik in kleur een ontwerp codeer, heb ik vaak dat Photoshop open is (snik!) Om de kleuren te kiezen. Ik weet zeker dat er een aantal geweldige tools online beschikbaar zijn die een kleurenkiezer bieden voor het genereren van hex-codes en rgb-waarden, maar om welke reden dan ook gebruik ik nog steeds Photoshop. Dit is niet handig, omdat ik Photoshop meestal al open heb, maar daar kom ik later op terug.
Net als bij typografie zijn de beste kleurenschema's het resultaat van experimenten, dus veel plezier! Hier kunt u de kracht van een in-browser ontwerpproces zien wanneer u de achtergronden en tekstkleuren van veel elementen op uw pagina kunt wijzigen met een paar toetsaanslagen. Met een Photoshop-mockup was het veranderen van de kleuren van meerdere elementen een moeilijke taak, waarbij je precies lagen selecteerde en veel te veel knoppen door een venster klikte, maar niet meer!
Weet je nog hoe ik zei dat ik meestal Photoshop open heb staan bij het coderen van een website? Wel, het is tijd om iets voor je te breken, jonge padawan. Zeer weinig sites kunnen worden ontwikkeld zonder Photoshop te gebruiken. Ik bedoel, denk er eens over na, zelfs als je een volledig browsergebaseerde workflow gebruikt, zal dat nog steeds zo zijn tenminste een of twee aangepaste afbeeldingen daar ergens, laten we zeggen, een achtergrond of een icoon van een soort. Tenzij u een manier kent om afbeeldingen te maken zonder een beeldeditor zoals Photoshop, moet u, of iemand anders, Photoshop of vergelijkbare software naar voren brengen om die texturen, pictogrammen en wat heeft u te maken.
Photoshop is niet helemaal slecht. Mijn belangrijkste argument in dit bericht is dat het helemaal niet goed is voor het ontwerpen van websites, maar als een icoonontwerptool, het is eigenlijk best wel leuk (als je negeert hoe gekmakend het vaak crasht, wat ik probeer). In ieder geval, op enig moment tijdens het maken van een webontwerp, zult u ongetwijfeld een soort aangepaste afbeeldingen moeten genereren. Ik heb geen problemen met PS worden gebruikt voor eenvoudige dingen zoals een herhalende achtergrond, textuur of pictogram dat uiteindelijk deel zal uitmaken van een groter webontwerp.
Evenzo is vuurwerk ook niet slecht. Fireworks heeft veel geweldige functies (zoals batchverwerking en geavanceerde "save for web" -hulpprogramma's die het eigenlijk de perfecte partner voor de workflow in de browser maken? Je moet weten wanneer je het moet gebruiken.
We hebben een lange weg afgelegd in dit artikel, maar voordat ik klaar ben, zijn er enkele kanttekeningen bij dit proces die ik graag wil vermelden.
Client Pushback: Sommige cliënten vinden het misschien niet leuk dat je deze techniek gebruikt. Ze zijn mogelijk vastbesloten om een Photoshop-mockup te zien voordat je een code uitvoert. Als dit het geval is, moet u ze aanpassen. Je kunt nog steeds veel van de tips gebruiken die ik hier heb gegeven, zoals het proberen van verschillende lettertypen met Typekit of een andere @ font-face-service of het snel herhalen van een ontwerp met kleuren. Het belangrijkste onderdeel van dit bericht is dat je moet erkennen dat, zelfs als je mock-up uitvoert met een beeldeditor, het ontwerp nog steeds open staat voor verandering en verbetering.
Oude Blindspots van de browser: Er zijn nog steeds een heleboel dingen die je niet kunt doen in de browser, en een heleboel dingen die niet worden ondersteund door oudere browsers. Als volledige IE7-compatibiliteit een clientvereiste is, moet u geen CSS-gradiënten gebruiken en in plaats daarvan afbeeldingen gebruiken. Er zijn manieren om fallbacks te bieden, maar soms zal een klant volledige ondersteuning eisen. Dat gezegd hebbende, moet je altijd op zoek gaan naar manieren om ontwerpverantwoordelijkheid te delegeren naar CSS en om het gebruik van buitensporige afbeeldingen te verminderen. Het produceert schonere en meer onderhoudbare markup en middelen.
Comfortabel zijn! Mijn derde en belangrijkste voorbehoud: je zult je misschien niet op je gemak voelen met deze workflow, en dat is oke! Zoals ik al eerder zei, zelfs als je er niet klaar voor bent of niet in staat om deze ideeën volledig te volgen, is het belangrijk dat je een aantal van de concepten, zoals snelle iteratie of het eerst focussen op lay-out, zult herkennen en op zijn minst probeert te overwegen.
Het is weer zover. Tijd om af te ronden en echt te beoordelen wat je vandaag hebt geleerd, wat hopelijk niets is. Ik heb veel dingen behandeld, en met een beetje geluk, heeft tenminste een deel ervan in je hersenen vastgehouden. Ik verwacht niet dat jullie allemaal gaan werken en jullie workflows volledig veranderen, ik wil alleen dat jullie allemaal overwegen dat er een andere manier is om dingen te doen. Het is soms moeilijk om te beseffen dat er andere manieren zijn om te ontwerpen naast de manier waarop je nu dingen doet, maar als ontwerper is het belangrijk dat je wordt blootgesteld aan verschillende stromingen..
Ik ben ervan overtuigd dat dit proces de toekomst is van webdesign en ik verwelkom het ten eerste!
Accentsconagua