Interface design Arbejde med byggestenene: Fonte, Farver, Grafik, Video
Plan for idag... Hvad er rich content? Farver Fonte Billededitering Video embed (screencast) Flash embed
Rich Content Macromedia i 2002-2004 : Rich Internet application Fremkomsten af AJAX Eksempel: (http://www.ccicolor.com/#/color-solutions/trend-report/)
Succes uden rige grafiske virkemidler
Opmærksomhedsøkonomi We now live within an attention economy where designers must effectively arbitrate the scarcity of human attention. Those who know how to command the landscape of competing words, images, sounds, and motion will aid user goals more effectively. Richard A. Lanham Uday Gajendar med reference til Richard Lanham
En teoretisk ramme for brugeroplevelse Brugeroplevelse: En subjektivt fortolket, kontinuerlig strøm of psykologiske og fysiske fænomener, bragt til bevidsthed gennem en interaktion. Opmærksomhed Tiltrækning Tilfredshed
Hvorfor er rigdom i brugeroplevelsen vigtigt? I godt interfacedesign ligger en koregrafi af sanselige elementer - tekst, billeder, lyd, bevægelse - der udgør den digitale oplevelse og som transformerer det til et interessant udtryk brugeren har lyst til at interagere med. ARGUMENT
Argumentet
Argumentet i web interface design Luke Wroblevski
Rigdom på flere niveauer Strukturelt - ethos Interaktion - logos Visuelt - pathos
Struktur Der skabes interessante måder at opdage indholdet på, som samtidig giver bedre udnyttelse og forståelse af indholdet. Data er forbundet på forskellige nivauer Man kan finde ting tilfældigt eller på uventede måder.
Interaktivitet Interaktionen mellem bruger og system tilføjes sanseligt rigere adfærds- og bevægelsesimpulser.
Beskeden We create digital experiences of all kinds - experiences that are useful, playful, and have a story to tell - stuff that people want to spend time with.
Rigt visuelt udtryk Visuelle virkemidler, der giver tekstur og atmosfære introduceres Gradients Drop-shadows Afrundede hjørner Gennemsigtighed
Konklusion Kontrol af typografi, farve og layout forbliver essentielle elementer. De rige virkemidler har ingen effekt hvis de essentielle elementer ikke er i orden.
Farver "Research reveals all human beings make a subconscious judgment about an... item within 90 seconds of initial viewing and that between 62% and 90% of that assessment is based on color alone." INSTITUTE FOR COLOR RESEARCH
Farver indeholder et budskab -om karaktér, følelser, og intention. http://articles.sitepoint.com/article/colour-checklists-web-design http://www.colorcombos.com/bright-colors-article.html
Farvebrug og mønstre Farver skal kunne ændres af hjælpe teknologier eller manuelt i browser indstillinger. Stor kontrast mellem baggrundsfarve og tekst farve. Bagrunde til tekst skal være solide - undgå mønstre eller teksture bag tekst. Mønstre er bedst at placere i midten. Begræns antallet af farver.
Farvebrug og mønstre Brug af farver som kontrolelement skal være konsekvent. Symbolik og associationer er ikke universelt gyldigt. Begræns antallet af farver.
Farve valg Sort tekst på hvid baggrund er en sikker kombination og lettere at læse end hvid på sort. sikkert og godt ikke helt så godt ikke godt ikke godt
Farvevalg Rød og grøn i centrum af skærmen og sort, hvid, gul og blå er bedst i periferien er nemmest at se for gennemsnits-mennsket s øje.
Farvevalg Rød og andre stærke farver kan bruges til at skabe opmærksomhed.
Farvevalg Til et skærmbaseret interface der skal ses på i lang tid, er klare farver er bedst.???
Farvevalg Beige, blå, mørkegrøn giver et indtryk af høj kvalitet og tradition
Farvevalg Undgå forskellige blå nuancer samtidig. Undgå at kombinere yderpolerne i farveskalaen fx. blå og rød. Blå er bedst til store områder. Selvlysende farver ser amatør agtigt ud
Kontrast
Kontrast Høj kontrast - lille søgknap Lav kontrast - stor søgknap
Farve mode This is SO last year! http://www.thewebsqueeze.com/web-design-articles/web-designcolor-trends-for-fall-2008.html
Font-størrelse (print) 12 til 16 - Børnebøger 10 til 11 - Voksenbøger 9 - Avis 8 - Petit noter (Værdierne er i punkt)
Font-størrelse (web) Undgå absolutte font-størrelser. px pt Absolut Keywords xx-small, x-small, small, medium, large, x-large em Relativ Keywords smaller, larger. procent Forklaring på forskellen mellem mål: http://css-tricks.com/css-font-size/
Skærmstørrelse - Ikke det samme som indholdsområde! Jesper Rønn-Jensen http://justaddwater.dk/2006/08/17/design-for-browser-size-not-screen-size/
font størrelse 1 1/3 1 3/4 punktstørrelse 32 punktstørrelse 24 punktstørrelse 18
Websafe og udbredte Fonts Tabel fra http://dustinbrewer.com/fonts-on-the-web-and-a-list-of-web-safe-fonts/
Scalable Inman Flash Replacement open source Tilgængeligt let at bruge? http://designcrave.com/2009-08-25/free-fonts/ demo: http://www.mikeindustries.com/blog/archive/2004/08/sifr
Billedbehandlingsredskaber standard: Photoshop alternativ: Gimp webbaseret: picnik.com
Arbejde med billeder Tilskæring Justere billedstørrelse Arbejde med lag Save for Web Free Transform Tilpas farver og lys Fritskrabe Filtre
Tilskæring crop tool selection tool brug zoomredskab for præcision
Justere billedstørrelse image size canvas size
Arbejde med Lag ændre elementernes stak-orden gemme, låse lag, slette lag tilføje styles til et lag
Save for web
Vælg format { gif: jpg: png: få farver, transparens mange nuancer transparens Komprimér Udvisk pixelering Sharpen filter tip Max filstørrelse på et almindeligt billede: ca. 50k
Original: 172kb Very high: 48kb Very High: 52kb (bicubic reduction) High: 24kb Low: 7kb
Hvilken et er skarpest? A B
Hvilken et er skarpest? Very high: 48kb A B Very High: 52kb (bicubic reduction)
Free Transform vælg med selection tool eller ved at markere lag ctrl T brug ændringen - Enter Fortryd ændringen esc
Tilpas lys og farver brightness & contrast
Fritskabe "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Filtre Leg med dem - men brug dem med måde.
http://blog.plasticmind.com/ design/creating-mockups-inphotoshop/
Tip 9: Form elementer http://www.designerstoolbox.com/designresources/ elements/
Video plugins (wordtube) screencasting (screen-o-matic) video hosting (vimeo,youtube)
A) Upload din medie fil 1) Fra Dashboardet, vælg Media, wordtube 2) Fra Dashboardet, vælg Media, wordtube
3) Gennemse/ Browse dit lokale arkiv og vælg filen.
B) Embed video i en blog-post eller side 1) Skriv dit indlæg og klik på wordtube iconet.
2) Vælg mellem alle de filer du har uploadet med wordtube uploaderen.
Kimili plugin Den eneste attribut der SKAL være udfyldt er stien til filen. Brug en ABSOLUT sti. fx. http://www.njanga.com/blog/wp-content/ uploads/swf/flashfilm.swf NB! Husk en base URL hvis filmen loader fra en ekstern kilde
Øvelser tag screendump af valgt theme og tilføj ønskede design ændringer i Photoshop publicer mockup på blog. publicere film på blog installere wordtube og Kimili plugins, oprette vimeo/youtube konto til hosting af video producere en screen-cast video
ressourser Essential colour checklist for Web design: http:// articles.sitepoint.com/article/colour-checklists-web-design Photoshop tutorials: http://www.tutorialized.com/tutorials/photoshop/ Basics/1 10 tips for creating website mockups in photoshop (avanceret): http://blog.plasticmind.com/design/creatingmockups-in-photoshop/ Webbaseret billededitering: http://www.picnik.com/ Gimp: http://www.gimp.org/ sifr: http://www.mikeindustries.com/blog/sifr/
ressourser screencast-o-matic: http://www.screencast-o-matic.com/ wordtube plugin: http://wordpress.org/extend/plugins/wordtube/ Kimili: http://kimili.com/plugins/kml_flashembed Usability Forskningsresultater: http://meiert.com/en/blog/20070113/ web-design-15-important-research-findings-you-should-know/ personal branding:http://www.alistapart.com/articles/redesigning-your-ownsite/
ressourser: Købe-programmer til screen casting PC:http://camstudio.org/ videotutorial: http://www.youtube.com/watch?v=2flo95hukfq Linux: http://recordmydesktop.sourceforge.net/ MAC: http://www.ambrosiasw.com/utilities/snapzprox/