590 likes | 740 Views
Webprocessen. 1. Del - Karin. I har modtaget en mail om undervisningsevaluering på jeres kea-mail. . Undervisnings evaluering !. I har installeret Komodo Edit I har installeret Filezilla I har installeret Firefox & Chrome I har Lavet det første html-site
E N D
Webprocessen 1. Del - Karin
I harmodtaget en mail omundervisningsevalueringpåjeres kea-mail. Undervisningsevaluering!
I harinstalleretKomodo Edit • I harinstalleretFilezilla • I harinstalleretFirefox & Chrome • I harLavetdetførste html-site • I erbegyndt at tænkepåjeres “eget portfolio”… Hvorlangter vi nået?
Dagenspensum: http://semesterplan.keaweb.dk/ugeplaner/1sem/1_B_M2 • Kap 1 • Kap 2 (26-31) • Kap 3 Spørgsmåltillæsestoffet?
Planlæggeogdesigneeget portfolio site • Identificereindholdet • Udarbejde et Sitemap/navigationsdiagram • Lave Wireframes for alle sider • Lave Mock-up I Photoshop sitemap wireframes mock-up Hvadskal vi lave I dag?
En referencerammefor projektet • Hvilketwebsite skal vi lave? • Redesign vs. nyt site? • Virksomhedsprofil(historier, værdier...) • Målgruppe? • Statisk vs. dynamisk site? • Flash, HTML/CSS, JS, CMS? • Elementer (logo, tagline, indhold... Brief Her erdetunderviserne der hargivetbriefet…
Hvad med portfolio sites? • Et portfolio site er lidt anderledes… Show, don’t tell
Småtellerstort site? • Hvem skal se det? • Skal jeg vælge ud eller vise det hele? • Processen eller kun færdige projekter? Formuler en “strategi”
Kategoriseringilogiskestrukturer(sider ogindholdselementer) • Arbejdihånden, ikkepå computer • Brugpapir, post-its mm.! informationsarkitektur
Definer hvilke sider der skalværepåditportfolio-site • Lavet sitemap • Begyndat overvejeindholdselementernepå de enkeltesider, - talgerne med din sidemandom dine ideer ca. 20minutter… (determåskeikkenok) opgave1
Nu har vi en idéomindholdselementernepåsitet • Vi vedhvor mange sider, der skalværepåsitet Nu skalvi organisereindholdetpå de enkelte sider Organiseringafindhold
Navigationenfortælleromsitetsindholdoghvor vi ersamthjælperos med at findedet vi søger • Hvordanskal vi navigeremellemsiderne? • Hvilken type navigation egner sig tilvores site? • Hvordanskalnavigationen se ud? Navigationsdesign
Hvor mange navigationselementerbørder værei en menu? Navigationsdesign
Hvor mange navigationselementerbørder værei en menu? • Hick’s law (7 +-2) - “The time it takes to make a decision increases as the number of alternatives increases” Navigationsdesign
Hvor mange navigationselementerbørder værei en menu? • Hick’s law (7 +-2) - “The time it takes to make a decision increases as the number of alternatives increases” Steve Krug: • “Human beings like fewer options presented at one time”– “make simple interfaces by limiting choices” • Navigationenersitet! – den skalfjerne “spørgsmålstegn” • Links ogknapperskal se udsomdet de er! Navigationsdesign
Hierarkisk navigation • Cyklisk navigation • Sekventiel navigation Navigation
Hierarkisk navigation Navigation
Cyklisk navigation Navigation
Sekventiel navigation Navigation
Horisontal navigation • Vertikal navigation • Faneblade • Breadcrumbs • Drop-down, fly-out mm. Navigationsdesign
Navigation skalværegennemtænkt! • Kontrolvs. frihed for brugeren- vigtigst? • Navigation ihvor mange niveauer? • Hvor mange gangeskal man klikke for at opnå “satisfaction” Navigationsdesign
Vi vedhvad der primærtskalværepåvoressider (forside, profil, referencer, kontakt...) • Hvormegetfylderelementerne? • Hvorskalelementerneplaceres? • Oghvadskal der yderligereværepåsitet? • Reklamer, søgefelter, tags, arkiver, polls, gallerier... Indholdselementer
HTML/CSS sites beståraf “kasser” • Header, venstre/højre, indhold, footer og navigation • Adskilles via fysiskeafgrænsninger: gruppering, proximity, lukkethed header nav indhold Html og “kasser” footer
Skal vi anvendekonventionerne? Generellewebkonventioner
Skal vi anvendekonventionerne? • Brugerelæserikke - vi scanner ogvælgerhurtigt • “The right-hand fold” • Venstreside: 69 % opmærksomhed • Højreside: 30 % opmærksomhed Generellewebkonventioner
F – formetlæsemodus Generellewebkonventioner
Hvadsigerkonventionerneellers? Generellewebkonventioner
Hvadsigerkonventionerneellers? • Placeringaflogo • Placeringafsøgefelt • Placeringafkontaktinfo • Links • “Home” - knappen Generellewebkonventioner
Wireframes erskitser der visersitetsindholdselementer, men ikkedetgrafiskeudtryk • Lavdemhelstihånden • Se godeeksempler her: http://inspirationfeed.com/inspiration/25-examples-of-wireframes-and-mockups- sketches/ wireframes
Find udafhvordan du vilkonstrueredin navigationsmenu • Identificersamtligeindholdselementerpådit site • Lavwireframes for dine (forskellige) sider ca. 20minutter… (du bliverikkefærdig) wireframes
Skabvisuellehierarkier(designregler) • Brugkonventioner (logo, links...) • Del sider op iklartdefineredeområder – bruggestaltlovene • Gørklarthvad der erklikbart • Minimerstøj Usability & design
Overvejelservedr.: • Visuelstilogvirkemidler • Grafiskedesign regler: Hierarki, farver, typografi, kontraster, former... • Indholdsopdeling - bruggestaltlovene Visuelt design
Hvadvil vi understøtte? (Skærme, browsere, flash...) • Fleksibelt/ikkefleksibelt design? • Størrelse, bredde (anbefaling = 960 px) • Statistikfor skærmstørrelser: http://fdim.dk/statistik/teknik/skaermoploesning • Grids: http://960.gs Kompositionog grids