Webdesigner 92

Webdesigner 92

Overzicht

  • CSS-animatie
  • Responsive design met Photoshop en Illustrator
  • Design met Adobe CC
  • Automatisch aanvullen met Polymer
  • € 8,99
    Op voorraad

    Overzicht

  • CSS-animatie
  • Responsive design met Photoshop en Illustrator
  • Design met Adobe CC
  • Automatisch aanvullen met Polymer
  • Omschrijving

    Als het op de keuze van een font aankomt, is het aanlokkelijk om lui te zijn en maar weer naar een bekende favoriet te grijpen. Hoe meer je ermee bezig bent, des te meer besef je dat maar een klein percentage van de honderden beschikbare fonts geschikt is om daadwerkelijk te gebruiken.

    De wereld van webfonts

    Iets om in gedachten te houden is dat nieuwe trends belangrijk zijn voor bepaalde bedrijven of projecten, maar dat je uiteindelijk altijd een font moet kiezen dat geschikt is en niet eentje dat helemaal hip is. Dit is een belangrijke vaardigheid voor een goede ontwerper, want het juiste kiezen is en blijft essentieel.

    Slimmer animeren met CSS

    Sommige CSS-properties zijn beter geschikt voor animaties dan andere. Eigenschappen die zichzelf lenen voor goede prestaties hebben geen invloed op de document-flow en andere elementen. Accordeons en andere elementen die je op je site gebruikt, kunnen de flow van de webpagina beïnvloeden en des te meer je gebruikt, des te trager je site wordt. Gelukkig is er de eigenschap ‘transform’, waarmee je geavanceerde animaties maakt die ook nog eens goed presteren.

    Responsive design met Photoshop en Illustrator

    Het is inmiddels wel bekend dat dat je een website niet alleen voor het grote scherm van desktopcomputers of laptops ontwerpt. Uit eigen ervaring weet je dat je ook op een tablet of smartphone een pagina optimaal moet kunnen bekijken. Je pagina moet dus voor alle schermen geschikt zijn. In onze workshop laten we zien hoe je een responsive website ontwerpt. We kijken daarbij naar alles, van het instellen van het ideale Photoshopbestand als basissjabloon tot het werken met rasters, hulplijnen en gevectoriseerde Slimme objecten.

    Design met Adobe CC

    Photoshop CC is een populair en vertrouwd platform voor webdesigners. Je kunt met vectorgereedschappen grafische elementen ontwerpen die geschikt zijn voor webdesign, omdat ze resolutie-onafhankelijk zijn. De software biedt ook een eenvoudige, realistische en snelle weergave van daadwerkelijke websites en is daarom een uitstekend hulpmiddel om mock-ups te maken. Daarnaast kun je als ontwerper webelementen maken en exporteren dankzij de Adobe Generator die in CC is geïntroduceerd. We tonen de basis vertellen over het testen van je ontwerp, zodat het eindresultaat aan alle eisen en verwachtingen voldoet. We nemen daarbij een kijkje in Adobe Generator en Adobe Dreamweaver.

    Invoervelden automatisch aanvullen met Polymer

    Omdat websites ingewikkelder worden, is het bijna noodzakelijk dat je met modulaire componenten gaat werken. Maar zonder zorgvuldige planning wordt een eenvoudig formulier al snel een onoverzichtelijke brij van gekopieerde mark-up en spaghetticode die moeilijk te onderhouden is. Polymer is een bibliotheek van Google die Web Components polyfillt en nuttige extensies zoals databinding biedt, waarmee je data gemakkelijker tussen de componenten kunt uitwisselen. Het is krachtig genoeg om er een complete applicatie mee te maken, maar je kunt Polymer net zo makkelijk in bestaande projecten integreren en de componenten daarvan een voor een updaten.

    En verder ...

    ...gaan we op bezoek bij designbureaus Resn en ANIMAL, tonen we hoe je een bewegend 3D-logo maakt met three.js, maken we met JavaScript een responsive header die tijdens het scrollen omhoogschuift, laten we zien hoe je met Photoshop je eigen webfont maakt, lees je hoe je met effectief cachen je webpagina’s sneller maakt en hebben we de 20 beste plug-ins voor WordPress verzameld waarmee je productiever werkt.