Download - Introduktion till web-design
Uppgifterv.32:
Gör wireframe och design för din portfolio. Wireframe kan lämnas in som
handritad skiss. Designen skall lämnas som om det var en överlämning till
utvecklare. Med ordning och reda på Lager och mappar i PSD-filen och en
mapp 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.33
ACUMO uppgiften.
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/
Wireframes / Trådskisser
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 bilder
2. Edit > Color Settings
3. Monitor Colour
4. View > Proof Setup > Monitor RGB
5. Save for web > Uncheck convert to sRGB
http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/
DON’T!1. Undvik för mycket färger.
Färg blir skrikigare på skärm än på papper
2. Överanvänd inte starka färger i
Uppmärksamhets syfte
Exempel
http://www.inspiredbymuhammad.com
http://www.ryanair.se
http://www.kullaflyg.se
Do And Don’t för färger på webb
DO!1. Utnyttja färg för att lyfta fram viktig information
2. Använd färger för att förtydliga gränssnittet.
3. Var Konsekvent
Exempel
http://www.skype.com
http://www.fuelbrandinc.com
http://www.brio.se
http://www.spotify.com
DON’T!1. Otydligt var användaren befinner sig
2. Användaren får aldrig ”försvinna”
från navigeringen. Använd i så fall ”Breadcrum”
3. Göm inte navigeringen
Exempel
http://www.theosbrinkagency.com
http://www.jenseneducation.se
http://www.dn.se
http://www.india.gov.in
Do And Don’t för navigering
DO!1. Var kreativ men glöm inte att navigeringen
måste vara tydlig och lätt att förstå.
2. Dubbeltkolla med andra så att den är helt
idiotsäker. Lätt att bli hemmablind
3. Var konsekvent
4. Använd gärna fritextsök
Exempel
http://www.dlanordic.com
http://www.svd.se
http://www.folkuniversitetet.se
http://www.carlos-polo.com/index_old.html
DON’T!1. För långa rader ger dålig läsbarhet.
2. Ingen brödtext i storlek under 12 pixlar
3. Aldrig understruken text som inte är Länkar.
4. Överanvänd inte embedade typsnitt
Exempel
http://www.theosbrinkagency.com
http://www.jobb24.se/
http://www.communitymx.com/
Do And Don’t för typografi
DO!1. Använd större radavstånd på skärm än i print.
Längre rader större radavstånd
2. Text ska behandlas som användargränssnitt.
3. Använd text hierarkier, rubrik, ingress,
brödtext, länkar mm.
Exempel
http://www.6wunderkinder.com
http://www.ea.com/
http://www.greatworks.se
@font-face {
font-family: fontName;
src: url(http://www.yoursite.com/fonts/font.otf);
font-weight:400;
}
p {
font-family: fontName, Helvetica, Arial;
}
@font-faceÄr under utveckling men kan användas idag
Licensproblem med typsnitt.
Stöds av
Internet Explorer 5.5
Safari 3.1
Opera 10
Firefox 3.5
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
Typografilänkarhttp://media.24ways.org/2007/17/fontmatrix.html
http://www.fontsquirrel.com/
http://www.informationarchitects.jp/en/100e2r/
Varför CMS?CMS: Content Management Systems
Förenklar uppdateringar
Tydliga flöde och ansvarsområden vid flera användare
Konsekvent Design (Templates)
Ett bra CMS ger bra SEO - Search Engine Optimization
http://www.smashingmagazine.com/2009/11/08/getting-started-with-content-management-systems/
Öppen källkod / Open Source WIKIPEDIA:
Öppen källkod, även öppen programvara, på engelska open source, avser datorprogram där
kä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 ansvar
CMS
BLOGG: http://wordpress.com
PORTAL: http://www.joomla.org
WEBSHOP: http://www.oscommerce.com/
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 - Dyrt
CMS
EPiServer: http://www.episerver.com/sv/
Atex Polopoly: http://www.atex.com/solutions/web-cms
SiteVision: http://www.sitevision.se/
Mag+: http://www.magplus.com/
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!
Prova på wordpressSkapa konto: http://wordpress.com/
Lös uppgifter på
http://codex.wordpress.org/Writing_Posts
http://codex.wordpress.org/Pages#Creating_Pages
ACUMO Acumo är ett företag som säljer komponenter till industrin. De har under de två senaste åren mer än
fördubblat sin personalstyrka och det är en mycket säljorienterad organisation. Du har hjälpt dem med
trycksaker och montrar m.m. och nu vill de göra om hela sin grafiska profil och samtidigt sin web. De ser
gä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 in
i plattformsval nu.
För Acumo är det viktigt att exponera sina produkter och på sikt även bygga en webshop. De vill kunna
blogga om teknik och mässhändelser och ha en aktiv kommunikation via nyhetsbrev. Alla säljare ska
själva kunna lägga in nya produkter och blogginlägg men det måste läsas av säljchefen innan det läggs
upp. Idag är det en kille som har koll på internet som gör alla uppdateringar med Dreamweaver. De
tycker att det funkar hyffsat idag och funderar på om de kanske ska utbilda alla säljarna i Dreamwever.
Budget vill de inte avslöja.
Uppgift Ta 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 [email protected]
SITER
http://www.idg.se/2.1085/1.358602/wordpress-dodforklarar-publiceringssystemen
http://edenstrom.wordpress.com/2008/05/14/anledningar-att-inte-valja-open-source-cms/
vs
FLASH HISTORIK 1995 Skissprogrammet SmartSketch blir animeringsprogrammet FutureSplash
Konkurrent på webben var brinnande facklor och gif-animationer.
Adobe tackar nej till att köpa FutureSplash
1996 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.
Spümcø – “The George Liquor Program!”
http://www.coldhardflash.com/swf/johnk/Weekend-Pussy-Hunt-01.swf
Gabocorp
http://www.thefwa.com/flash10/gabo.html
FLASH på 1900-talet
STATISTIK FLASH PLAYER PC
KÄLLA: http://www.adobe.com/products/player_census/flashplayer/version_penetration.html
MOBILT: Fungerar inte i iOS och i Android.
http://www.intel.com/museumofme/r/index.htm
http://herraizsoto.es/labuat/eng/
FLASH EXEMPEL FRÅN IDAG
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.”
RÄCKVID HTML5 PLAYER PC
KÄLLA: http://www.focus.com/fyi/wtf-is-html5/
MOBILT: Fungerar både i iOS och i Android.
http://www.thewildernessdowntown.com/
http://www.ultranoir.com/
http://www.ro.me/
HTML5 EXEMPEL
Pris
Spridning
Kraftfull
Användar gränssnitt
vs
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-applications
Historik
http://www.alistapart.com/articles/a-brief-history-of-markup/
Uppgift Läs kapitell. (thing) 4-8
http://www.20thingsilearned.com/
Gör tutorial
http://webdevfoundations.net/flashcs5/
jQueryjQuery är världens mest populära JavaScript-bibliotek.
JavaScript-bibliotek = färdiga funktioner som enkelt kan modifieras
jQuery tutorialshttp://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
http://www.webbdesignguiden.se/jquery-guiden/
Tänk alltid mobilt.
Olika beteenden på att surfa mobilt respektive stationärt.
MOBILA ENHETER
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).
Mobil statistik
http://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?
Hur frekvent vill användaren få informationen?
Behöver vi ens mobiloptimera?
Facebook i iPhoneAPP SAFARI
Ted Talk (ted.com) i iPhoneAPP SAFARI
Resume i iPhoneAPP SAFARI
Optimera med Grid-system HTML5 kan känna av använda olika CSSer dynamiskt beroende på vilken storlek man har
på browsern
CSS EXEMPEL och tutorial
http://css-tricks.com/6206-resolution-specific-stylesheets/
960 GRID SYSTEM - störst men inte längre bäst.
http//960.gs
LESSFRAMEWORK och GOLDEN GRID SYSTEM
http://goldengridsystem.com/
http://lessframework.com/
Grid-system verktyg http://www.gridsystemgenerator.com/
http://www.danclien.com/psd-grid-layout-generator/
http://grids.heroku.com/
http://gridder.andreehansson.se/
Skärmstorlek
http://setmy.browsersize.com/
http://resizemybrowser.com/
http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display/
GUI Templates
Designtrend minimalism.Inte mer än nödvändigt
http://www.peckish.se/
http://www.dropbox.com/
http://www.wunderlist.com/
http://www.facebook.com/
https://www.linkedin.com/
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://yaronschoen.com/
Designtrend endast en sidahttp://onepagelove.com/