Introduktion till web-design

Kenneth Lanneskogkenneth@lanneskog.com | 0738-030204

Webbintroduktion vecka 32

Webb-publicering vecka 33

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 kenneth@lanneskog.com

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/