Met transitions kun je onderdelen van een website laten veranderen.
Bekijk eerst deze voorbeelden
Gebruik schaduwen om tekst te benadrukken
See the Pen Close shade example by Tim Brown (@timbrown) on CodePen.
Het toepassen van tekstschaduw in de traditie van “sign painters“. Zie practice.typekit.com/lesson/using-shades/
En een gerelateerd filmpje: www.vormplatform.nl/SIGN-PAINTERS-TRAILER/
Maak Air France responsive
Voor Air France ontwerp en bouw je een nieuwe website. Je maakt de site voor 2 verschillende schermresoluties.
Download de volledige opdracht als pdf: opdracht1 webdesign
Deze opdracht is in de les met een korte schermpresentatie toegelicht. Hieronder vind je de bijbehorende links:
- http://www.forbes.com/sites/kateharrison/2012/08/14/the-app-titude-test-is-creating-a-mobile-app-right-for-you/2/
- http://speckyboy.com/2012/02/22/tips-for-wireframing-a-usable-mobile-app-interface/
- http://sixrevisions.com/user-interface/website-wireframing/
- http://konigi.com/tools/omnigraffle-wireframe-stencils
Responsive
Gratis en toch voor niks, http://www.delicious.com/stacks/view/Fdz7caHelaas is die koppeling niet meer actueel. In de plaats daarvan een verwijzing naar de het artikel waar ik voor het eerst las over responsive webtechnieken. Mijns inziens een klassieker: http://alistapart.com/article/responsive-web-design/
Over het (responsive) web. Lezen dus.
Opdracht periode 3 | klas MV42c
De indeling van een krantensite vernieuwen.
Klas MV42C
periode 3 opdracht 1
tijdsduur: 4 weken
Voor deze opdracht neem je een van de onderstaande sites als uitgangspunt.
- nu.nl
- nrc.nl
- telegraaf.nl
Je gaat de voorpagina van een van deze sites opnieuw indelen. Alle onderdelen die nu op de site staan moeten in jouw ontwerp ook terugkomen. Voor de beoordeling van je werk is het belangrijk dat je de onderstaande volgorde aanhoudt bij het maken van de opdracht.
Wireframe
Je maakt minimaal 2 wireframes die duideijk van elkaar verschillen. Een wireframe is een schematische weergave van de verschillende onderdelen op de site: waar komt het menu, waar staat het logo, waar staat het belangrijkste nieuws, waar de advertenties enz. Alles wat zou kunnen afleiden laat je weg: Er staat geen inhoud in. Ook pas je nog geen vormgeving toe.
Laat je wireframes beoordelen.
Ontwerp
Daarna maak je een uitgewerkt ontwerp in bijvoorbeeld photoshop of illustrator.
Laat je ontwerp beoordelen.
Beschrijvende markup
Bouw de pagina in html en css. Gebruik beschrijvende markup, bijvoorbeeld voor de belangrijkste kop <h1></h1> of voor een alinea <p></p>
Voor een overzicht van de elementen zie http://www.webmonkey.com/2010/02/html_cheatsheet/ of http://www.webmonkey.com/2010/02/html_cheatsheet/
Laat je code beoordelen
WordPress voor mobiel
Ontwerpen voor mobiel is meer dan even je CSS aanpassen en klaar is Kees…
Carrington-mobile is een handig uitgangspunt als je de eerste mobiele versie van je Worpress site wilt maken. Content die op een klein scherm niet handig of in verband met lagere downloadsnelheden zelfs irritant is, wordt uit de reguliere site gestript.
Al met al worden daarmee de laadtijden weer acceptabel en heb je een interface die geschikt is voor een klein scherm.
Ontwerpen en bouwen voor mobiel
Artikelen over ontwerpen en bouwen voor mobiel web. Met tussen blokhaken mijn eerste indruk van de kwaliteit van de informatie.
- Learn the mobile web [compleet en grondig]
- Return of the Mobile Stylesheet [lees vooral de reacties: de meningen zijn zeer verdeeld over hoe je te werk moet gaan]
- Designing for the Mobile Web [globaal overzcht]
- http://iwebkit.net [alleen voor iphone of ipad…]
- Make Your Site Mobile-Friendly in Two Minutes [echt waar]
- http://www.alistapart.com/articles/ebookstandards/
Sketchpad
Tekenen in je browser! http://mugtug.com/sketchpad/