1 / 15

Digital æstetik Interaktion

Digital æstetik Interaktion. Stefan Grage. Interaktion. 4 kursusgange med interaktion Fokus på fede frontends… Wauw ! Hvor ofte sker det ? … Men hvad er fedt ?. Video. http://www.gudrungudrun.com / http://www.whitelies.com / http://www.uniqlo.jp/uniqlock /. Baggrunde (parallax).

aden
Download Presentation

Digital æstetik Interaktion

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Digital æstetikInteraktion Stefan Grage

  2. Interaktion • 4 kursusgange med interaktion • Fokuspåfede frontends… • Wauw! Hvorofteskerdet? • … Men hvaderfedt?

  3. Video • http://www.gudrungudrun.com/ • http://www.whitelies.com/ • http://www.uniqlo.jp/uniqlock/

  4. Baggrunde (parallax) • http://www.dangersoffracking.com/ • http://graphicnovel-hybrid4.peugeot.com/start.html

  5. One-pagers • http://thinkpixellab.com/ • http://www.jeph.info/ • http://iamcreative.me/

  6. Horisontal scrolling • http://deanoakley.com/ • http://www.ericj.se/

  7. Responsive web • http://css-tricks.com/ • http://bradfrost.github.io/this-is-responsive/ • http://www.abookapart.com/

  8. Copy/paste… • Detkunneværefedt at lave nogetheltunikt. Nogetheltnyt… • … Men vi laderosinspirere. Vi genanvender, efterlignerogkopiererandresløsninger… • Heldigvis!

  9. Rapid front end development • Detgørproduktionennogetnemmere • Brugalletænkeligehjælpemidler for at udviklehurtigt!

  10. Fede frontends? • Hvadgør et websites frontend lækker? • Design • Visuelstil • Layout & tilpasningpåforskelligeenheder • Fortællerhistorie • Up-to-date med senesteteknikkerogteknologier • Interaktion • Detskal vi se på her – ogvigtigstaf alt: Nørklelidt med det…

  11. Dettekniske… • HTML5, lydog video • CSS3 backgrounds, transforms & transitions • Atypisk layout: Single Page layout, Horisontal scrolling, Parallax scroll • Grids & responsivt design • Rapid frontend development: Twitter bootstrap • … • PÅ 4 DAGE!

  12. Hvordannår vi det? • Øvelser (frontend fiflerier) • Egetprojekt (website) • Ikkesåmegetlæsning… • Pensum: 2 småbøgerog et par web-dokumenter

  13. Andet I ku’ tænkejer? • Hvadgør et website fedt? • Hvorfor? • Er der nogetandet/mere, I gernevil have med påprogrammet?

  14. OvervejelserTilnæste gang… • Hvordankan du tænke et website indiditindividuelleprojekt? • Overvejwebsitet: Begyndat gennemtænkedit layout, funktioner, features, indhold mm. • Hvilketeknikkerkunneværeoplagte at brugetildet?

  15. Spørgsmål? • Input • Ønsker • Bekymringer • …

More Related