2 HTML-filer som vardera har…
1 IMG-fil med…
1 MAP som innehåller…
5 länkar till andra sidor och…
1 länk till den andra HTML-filen
1 CSS-fil som gäller för båda HTML-filerna
En av HTML-filerna ska ha namnet index.html och vara förstasida, den andra ska vara… andrasida. En av IMG-filerna ska vara ett kollage gjort i Photoshop eller annat bildredigeringprogram, den andra ska vara en handskiss. Fotografera eller scanna handskissen, för att få in den i datorn.
För formgivare innebar webben nya möjligheter, som väckte experimentlusta. Hur skulle man göra navigation och struktur på hemsidor, om man kunde göra vad som helst? En kategori av experiment har i efterhand nedlåtande benämnts "mystery meat navigation": grafiskt rika sidor, där man inte förstod vad man klickade på förrän man hade klickat. Minst en av HTML-filerna ska innehålla mystery meat navigation, den andra är fri.
http://www.tolvnitton.se/
http://superbad.com/
http://www.bluebell.com/
http://webzone.k3.mah.se/k98ac8mt/zwei.htm
http://www.webpagesthatsuck.com/ beskriver mystery meat navigation och andra designprinciper som dess författare ser ner på. Frågan är om inte webpageshatsuck.com i sig själv suger? Hmm.
En annan intressant diskussion relaterat till mystery meat navigation är den om skeuomorphism.
Jobba vidare med de tutorials som är länkade under Uppgift 1.
Wikipedias artikel om MAP är förträfflig och länkar vidare till andra utmärkta resurser: https://en.wikipedia.org/wiki/Image_map. Det är en client-side image map vi ska göra, scrolla ner dit för exempelkod. I artikeln står om en modernare (?!) variant av samma teknik, en länk till artikeln om mystery meat navigation och längst nere en länk till http://imagemap-generator.dariodomi.de/ som vi ska använda för att göra våra image maps. Klassisk surf. En sprudlande wiki.
Kolla in hur man sparar för web i Photoshop. Läs alla kommentarer, de har alla rätt!
Det viktigaste i uppgiften är att skapa och reflektera över olika sätt att representera innehåll och struktur. Uppgiften introducerar handskisser i formgivningsprocessen. Teknikerna som lärs ut, med IMG och MAP, är ett effektivt sätt att göra en klickbar prototyp av en webbsida.