Kenneth Lanneskogkenneth@lanneskog.com | 0738-030204Webbintroduktion                      vecka 32Webb-publicering vecka 33
Uppgifterv.32:Gör wireframe och design för din portfolio. Wireframe kan lämnas in somhandritad skiss. Designen skall lämna...
Wireframes / Trådskisser
Wireframes / Trådskisser- Övergripande skiss av web- eller skärmproduktion.- Visa flödet. (user journey)- Utgå från använd...
Wireframes exempel
Wireframes exempel
Wireframes exempel
Wireframes exempel
Wireframes exempel
Wireframes exempel
Färger på skärmDu kommer aldrig veta hur det ser ut på alla skärmar.Ta bort alla färgprofiler i Photoshop
Färginställningar i Photoshop1. Stäng alla bilder2. Edit > Color Settings3. Monitor Colour4. View > Proof Setup > Monitor ...
Do And Don’t för färger på webbDO!                                                      DON’T!1. Utnyttja färg för att lyf...
Do And Don’t för navigeringDO!                                             DON’T!1. Var kreativ men glöm inte att navigeri...
Do And Don’t för typografiDO!                                                DON’T!1. Använd större radavstånd på skärm än...
@font-faceÄr under utveckling men kan användas idag                @font-face {Licensproblem med typsnitt.                ...
Typografilänkarhttp://media.24ways.org/2007/17/fontmatrix.htmlhttp://www.fontsquirrel.com/http://www.informationarchitects...
Varför CMS?CMS: Content Management SystemsFörenklar uppdateringarTydliga flöde och ansvarsområden vid flera användareKonse...
Öppen källkod / Open SourceWIKIPEDIA:Öppen källkod, även öppen programvara, på engelska open source, avser datorprogram dä...
Stängd källkod / Closed Source• Korrekt namn Proprietär programvara• Utvecklas av kommersiella företag• Koden är hemlig oc...
Hur välja System?1. Vad är budgeten?2. Hur många användare?3. Vilka funktioner?4. Kritiska system?Välj inte system, välj u...
Prova på wordpressSkapa konto: http://wordpress.com/Lös uppgifter påhttp://codex.wordpress.org/Writing_Postshttp://codex.w...
OMUCAOmuca är ett företag som säljer komponenter till industrin. De har under de två senaste åren mer änfördubblat sin per...
UppgiftTa beslut på följande och motivera kort i text. Skall ett CMS användas? Om CMS skall användas.Är det öppen eller st...
vs
FLASH HISTORIK1995 Skissprogrammet SmartSketch blir animeringsprogrammet FutureSplash     Konkurrent på webben var brinnan...
FLASH på 1900-taletSpümcø – “The George Liquor Program!”http://www.coldhardflash.com/swf/johnk/Weekend-Pussy-Hunt-01.swfGa...
STATISTIK FLASH PLAYER PCKÄLLA: http://www.adobe.com/products/player_census/flashplayer/version_penetration.htmlMOBILT: Fu...
FLASH EXEMPEL FRÅN IDAGhttp://www.intel.com/museumofme/r/index.htmhttp://herraizsoto.es/labuat/eng/
Vad är HTML5?• Hyper Text Markup Language version 5• HTML är inte ett program utan en standard precis som CSS.• Standarden...
RÄCKVID HTML5 PLAYER PCKÄLLA: http://www.focus.com/fyi/wtf-is-html5/MOBILT: Fungerar både i iOS och i Android.
HTML5 EXEMPELhttp://www.thewildernessdowntown.com/http://www.ultranoir.com/http://www.ro.me/
vsKraftfull                       PrisAnvändar gränssnitt        Spridning
Länkarhttp://blog.mediaevolution.se/2010/12/02/html5-css3-och-javascript-en-ny-webb-ar-har/http://www.focus.com/images/vie...
UppgiftLäs kapitell. (thing) 4-8http://www.20thingsilearned.com/Gör tutorialhttp://webdevfoundations.net/flashcs5/
jQueryjQuery är världens mest populära JavaScript-bibliotek.JavaScript-bibliotek = färdiga funktioner som enkelt kan modif...
jQuery tutorialshttp://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-sliderhttp://www.webbdesignguiden.s...
MOBILA ENHETERTänk alltid mobilt.Olika beteenden på att surfa mobilt respektive stationärt.
STATISTIK• En tredjedel av 20-29-åringarna använde internet i mobilen (q4 2010)• Hos 30-39-åringarna är andelen nästan 30 ...
Mobil statistikhttp://gs.statcounter.com/#mobile_browser-SE-monthly-201007-201107
App eller hemsida?Vilken typ av information skall visas?Finns krav på funktioner?Informationsmängd?Snabbt och tillgängligt...
Facebook i iPhoneAPP             SAFARI
Ted Talk (ted.com) i iPhoneAPP              SAFARI
Resume i iPhoneAPP               SAFARI
Optimera med Grid-systemHTML5 kan känna av använda olika CSSer dynamiskt beroende på vilken storlek man harpå browsernCSS ...
Grid-system verktyghttp://www.gridsystemgenerator.com/http://www.danclien.com/psd-grid-layout-generator/http://grids.herok...
GUI Templateshttp://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display/
Designtrend minimalism.Inte mer än nödvändigthttp://www.peckish.se/http://www.dropbox.com/http://www.wunderlist.com/http:/...
Designtrend välfylld botten.http://www.spotify.com/http://www.folkuniversitetet.se/http://www.skype.com/http://www.fox.com/
Designtrend Stora skyltfönsterhttp://www.f-i.com/http://www.apple.se/http://mailchimp.com/http://www.hm.com/http://yaronsc...
Designtrend endast en sidahttp://onepagelove.com/
Introduktion till web-design
Upcoming SlideShare
Loading in …5
×

Introduktion till web-design

1,688 views

Published on

Published in: Education, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,688
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduktion till web-design

  1. 1. Kenneth Lanneskogkenneth@lanneskog.com | 0738-030204Webbintroduktion vecka 32Webb-publicering vecka 33
  2. 2. Uppgifterv.32:Gör wireframe och design för din portfolio. Wireframe kan lämnas in somhandritad skiss. Designen skall lämnas som om det var en överlämning tillutvecklare. Med ordning och reda på Lager och mappar i PSD-filen och enmapp med assets. Innan leverans ska punkterna på sid http://photoshopeti-quette.com/ vara avklarade. Särskilt viktigt är de under ” External File Orga-nization” och ”Internal File Organization”.v.33OMUCA - uppgiften.
  3. 3. Wireframes / Trådskisser
  4. 4. Wireframes / Trådskisser- Övergripande skiss av web- eller skärmproduktion.- Visa flödet. (user journey)- Utgå från användaren. Vad? Hur? Varför?- TRÅDSKISS ÄR INTE FORMGIVNING!http://wireframes.linowski.ca/
  5. 5. Wireframes exempel
  6. 6. Wireframes exempel
  7. 7. Wireframes exempel
  8. 8. Wireframes exempel
  9. 9. Wireframes exempel
  10. 10. Wireframes exempel
  11. 11. Färger på skärmDu kommer aldrig veta hur det ser ut på alla skärmar.Ta bort alla färgprofiler i Photoshop
  12. 12. Färginställningar i Photoshop1. Stäng alla bilder2. Edit > Color Settings3. Monitor Colour4. View > Proof Setup > Monitor RGB5. Save for web > Uncheck convert to sRGBhttp://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/
  13. 13. Do And Don’t för färger på webbDO! DON’T!1. Utnyttja färg för att lyfta fram viktig information 1. Undvik för mycket färger.2. Använd färger för att förtydliga gränssnittet. Färg blir skrikigare på skärm än på papper3. Var Konsekvent 2. Överanvänd inte starka färger i Uppmärksamhets syfteExempel http://www.skype.com Exempel http://www.fuelbrandinc.com http://www.inspiredbymuhammad.com http://www.brio.se http://www.ryanair.se http://www.spotify.com http://www.kullaflyg.se
  14. 14. Do And Don’t för navigeringDO! DON’T!1. Var kreativ men glöm inte att navigeringen 1. Otydligt var användaren befinner sig måste vara tydlig och lätt att förstå. 2. Användaren får aldrig ”försvinna”2. Dubbeltkolla med andra så att den är helt från navigeringen. Använd i så fall ”Breadcrum” idiotsäker. Lätt att bli hemmablind 3. Göm inte navigeringen3. Var konsekvent4. Använd gärna fritextsök ExempelExempel http://www.theosbrinkagency.com http://www.dlanordic.com http://www.jenseneducation.se http://www.svd.se http://www.dn.se http://www.folkuniversitetet.se http://www.india.gov.in http://www.carlos-polo.com/index_old.html
  15. 15. Do And Don’t för typografiDO! DON’T!1. Använd större radavstånd på skärm än i print. 1. För långa rader ger dålig läsbarhet. Längre rader större radavstånd 2. Ingen brödtext i storlek under 12 pixlar2. Text ska behandlas som användargränssnitt. 3. Aldrig understruken text som inte är Länkar.3. Använd text hierarkier, rubrik, ingress, 4. Överanvänd inte embedade typsnitt brödtext, länkar mm. ExempelExempel http://www.theosbrinkagency.comhttp://www.6wunderkinder.com http://www.jobb24.se/http://www.ea.com/ http://www.communitymx.com/http://www.greatworks.se
  16. 16. @font-faceÄr under utveckling men kan användas idag @font-face {Licensproblem med typsnitt. font-family: fontName; src: url(http://www.yoursite.com/fonts/font.otf);Stöds av font-weight:400; Internet Explorer 5.5 } Safari 3.1 Opera 10 p{ Firefox 3.5 font-family: fontName, Helvetica, Arial; Chrome 4.0 }http://www.font-face.com/http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/Typsnitt: http://www.fontsquirrel.com/fontface
  17. 17. Typografilänkarhttp://media.24ways.org/2007/17/fontmatrix.htmlhttp://www.fontsquirrel.com/http://www.informationarchitects.jp/en/100e2r/
  18. 18. Varför CMS?CMS: Content Management SystemsFörenklar uppdateringarTydliga flöde och ansvarsområden vid flera användareKonsekvent Design (Templates)Ett bra CMS ger bra SEO - Search Engine Optimizationhttp://www.smashingmagazine.com/2009/11/08/getting-started-with-content-management-systems/
  19. 19. Öppen källkod / Open SourceWIKIPEDIA:Öppen källkod, även öppen programvara, på engelska open source, avser datorprogram därkällkoden är tillgänglig att använda, läsa, modifiera och vidaredistribuera för den som vill.• Säljs ofta i någon typ av förädlad form tillsamans med t ex utveckling eller handböcker.• Öppen kod, ofta många som utvecklar programvaran.+ Gratis eller nästan gratis - Delat ansvar inget ansvarCMSBLOGG: http://wordpress.comPORTAL: http://www.joomla.orgWEBSHOP: http://www.oscommerce.com/
  20. 20. Stängd källkod / Closed Source• Korrekt namn Proprietär programvara• Utvecklas av kommersiella företag• Koden är hemlig och kan inte läsas eller ändras av andra än de som jobbar på företaget• Systemet/programmet säljs på licens.+ Ansvarig utgivare - DyrtCMSEPiServer: http://www.episerver.com/sv/Atex Polopoly: http://www.atex.com/solutions/web-cmsSiteVision: http://www.sitevision.se/Mag+: http://www.magplus.com/
  21. 21. Hur välja System?1. Vad är budgeten?2. Hur många användare?3. Vilka funktioner?4. Kritiska system?Välj inte system, välj utvecklare!
  22. 22. Prova på wordpressSkapa konto: http://wordpress.com/Lös uppgifter påhttp://codex.wordpress.org/Writing_Postshttp://codex.wordpress.org/Pages#Creating_Pages
  23. 23. OMUCAOmuca är ett företag som säljer komponenter till industrin. De har under de två senaste åren mer änfördubblat sin personalstyrka och det är en mycket säljorienterad organisation. Du har hjälpt dem medtrycksaker och montrar m.m. och nu vill de göra om hela sin grafiska profil och samtidigt sin web. De sergärna att du tar på dig jobbet men bara om du också hjälper dem med weben. De har en utvecklare påkonsultbasis som kan hjälpa dig med i stort sätt det mesta på siten men han har inte tid att sätta sig ini plattformsval nu.För Omuca är det viktigt att exponera sina produkter och på sikt även bygga en webshop. De vill kun-na blogga om teknik och mässhändelser och ha en aktiv kommunikation via nyhetsbrev. Alla säljare skasjälva kunna lägga in nya produkter och blogginlägg men det måste läsas av säljchefen innan det läggsupp. Idag är det en kille som har koll på internet som gör alla uppdateringar med Dreamweaver. Detycker att det funkar hyffsat idag och funderar på om de kanske ska utbilda alla säljarna i Dreamwever.Budget vill de inte avslöja.
  24. 24. UppgiftTa beslut på följande och motivera kort i text. Skall ett CMS användas? Om CMS skall användas.Är det öppen eller stängd kod? Förslag på CMS?Maila till kenneth@lanneskog.comSITERhttp://www.idg.se/2.1085/1.358602/wordpress-dodforklarar-publiceringssystemenhttp://edenstrom.wordpress.com/2008/05/14/anledningar-att-inte-valja-open-source-cms/
  25. 25. vs
  26. 26. FLASH HISTORIK1995 Skissprogrammet SmartSketch blir animeringsprogrammet FutureSplash Konkurrent på webben var brinnande facklor och gif-animationer. Adobe tackar nej till att köpa FutureSplash1996 Heter programmet FutureSplash Animation, (plug in FutureWave) 6 personer jobbar på företaget (Fractal Design). Microsoft (MSN) och Disney börjar använda Splash på sina siter. Macromedia köper i december programmet och döper om det till Flash och shockwave (idag flash player)2001 50 personer utvecklar flash 325 millioner installerade FlashSpelare i browser Flash är i stort sätt ensam på marknaden animering och spel på Internet.2005 Adobe köper Macromedia och då även flash.2010 Apple hindrar Adobe från att låta Flash användas vid app-produktion.
  27. 27. FLASH på 1900-taletSpümcø – “The George Liquor Program!”http://www.coldhardflash.com/swf/johnk/Weekend-Pussy-Hunt-01.swfGabocorphttp://www.thefwa.com/flash10/gabo.html
  28. 28. STATISTIK FLASH PLAYER PCKÄLLA: http://www.adobe.com/products/player_census/flashplayer/version_penetration.htmlMOBILT: Fungerar inte i iOS och i Android.
  29. 29. FLASH EXEMPEL FRÅN IDAGhttp://www.intel.com/museumofme/r/index.htmhttp://herraizsoto.es/labuat/eng/
  30. 30. Vad är HTML5?• Hyper Text Markup Language version 5• HTML är inte ett program utan en standard precis som CSS.• Standarden administreras av w3c (World Wide Web Consortium).• HTML5 är den senaste versionen av HTML standarden och CSS3 den senaste av CSS• HTML5 vill se sig som en rörelse. http://www.html5.se/• Web-browsern tolkar HTML och bara den senaste browsern kan hanterar senaste HTML standarden.• HTML5 är den mest ambitiösa uppgraderingen hitintills eftersom den innefattar nya element som <video>, <audio> and <canvas>”I en standard finns det alltid fler.”
  31. 31. RÄCKVID HTML5 PLAYER PCKÄLLA: http://www.focus.com/fyi/wtf-is-html5/MOBILT: Fungerar både i iOS och i Android.
  32. 32. HTML5 EXEMPELhttp://www.thewildernessdowntown.com/http://www.ultranoir.com/http://www.ro.me/
  33. 33. vsKraftfull PrisAnvändar gränssnitt Spridning
  34. 34. Länkarhttp://blog.mediaevolution.se/2010/12/02/html5-css3-och-javascript-en-ny-webb-ar-har/http://www.focus.com/images/view/11905/Vilka browsers klarar vad?http://www.findmebyip.com/litmus#html5-web-applicationsHistorikhttp://www.alistapart.com/articles/a-brief-history-of-markup/
  35. 35. UppgiftLäs kapitell. (thing) 4-8http://www.20thingsilearned.com/Gör tutorialhttp://webdevfoundations.net/flashcs5/
  36. 36. jQueryjQuery är världens mest populära JavaScript-bibliotek.JavaScript-bibliotek = färdiga funktioner som enkelt kan modifieras
  37. 37. jQuery tutorialshttp://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-sliderhttp://www.webbdesignguiden.se/jquery-guiden/
  38. 38. MOBILA ENHETERTänk alltid mobilt.Olika beteenden på att surfa mobilt respektive stationärt.
  39. 39. STATISTIK• En tredjedel av 20-29-åringarna använde internet i mobilen (q4 2010)• Hos 30-39-åringarna är andelen nästan 30 procent.• Storstadsregionerna är överrepresenterade.• 45% av sin mobiltid spenderar en iPhone-användare genom att ringa. Minst 1 timma om dagen går åt till surfning• 47% av de som är online med mobilen söker efter adresser, kartor och kontaktuppgifter• 80% har sökt information på nätet inför ett besök i en fysisk butik enligt Google Sverige (April 2011).• 7% av svenskarna uppgav att de under Q4 2010 handlat något via mobilen, en ökning med nästan 100% från kvartalet innan (Kleiner Perkins Caulfield & Byers, dec 2010).• För Ebay innebar slutet av 2010 en 200-procentig ökning av de mobila transaktionerna, till ett sammanlagt värde av 1,5 miljarder dollar (Internetworld).
  40. 40. Mobil statistikhttp://gs.statcounter.com/#mobile_browser-SE-monthly-201007-201107
  41. 41. App eller hemsida?Vilken typ av information skall visas?Finns krav på funktioner?Informationsmängd?Snabbt och tillgängligt?Hur frekvent vill användaren få informationen?Behöver vi ens mobiloptimera?
  42. 42. Facebook i iPhoneAPP SAFARI
  43. 43. Ted Talk (ted.com) i iPhoneAPP SAFARI
  44. 44. Resume i iPhoneAPP SAFARI
  45. 45. Optimera med Grid-systemHTML5 kan känna av använda olika CSSer dynamiskt beroende på vilken storlek man harpå browsernCSS EXEMPEL och tutorialhttp://css-tricks.com/6206-resolution-specific-stylesheets/960 GRID SYSTEM - störst men inte längre bäst.http//960.gsLESSFRAMEWORK och GOLDEN GRID SYSTEMhttp://goldengridsystem.com/http://lessframework.com/
  46. 46. Grid-system verktyghttp://www.gridsystemgenerator.com/http://www.danclien.com/psd-grid-layout-generator/http://grids.heroku.com/http://gridder.andreehansson.se/Skärmstorlekhttp://setmy.browsersize.com/http://resizemybrowser.com/
  47. 47. GUI Templateshttp://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display/
  48. 48. Designtrend minimalism.Inte mer än nödvändigthttp://www.peckish.se/http://www.dropbox.com/http://www.wunderlist.com/http://www.facebook.com/https://www.linkedin.com/
  49. 49. Designtrend välfylld botten.http://www.spotify.com/http://www.folkuniversitetet.se/http://www.skype.com/http://www.fox.com/
  50. 50. Designtrend Stora skyltfönsterhttp://www.f-i.com/http://www.apple.se/http://mailchimp.com/http://www.hm.com/http://yaronschoen.com/
  51. 51. Designtrend endast en sidahttp://onepagelove.com/

×