VEFUR SÍMANSHÖNNUNARFERLI

ARNAR ÓLAFSSON

UNDIRBÚNINGUR

• Núverandi vefur gagnrýndur.• Hvaða hlutum á að halda?• Hvernig er hægt að bæta þá hluti?• Hvaða nýjar lausnir er hægt að innleiða?• Er hægt að einfalda veftréð?• Vefhlutar skilgreindir (templates)

NÚVERANDI VEFUR GAGNRÝNDUR

• Betri aðgreining á leiðarkerfi og flýtileiðum.• Nota léttari bakgrunn.• Lofta um efni vefsins og aðgreina það betur.• Nota myndefni annarsstaðar en bara í

auglýsingasvæði.• Nota stærra letur.

HVAÐA HLUTUM Á AÐ HALDA?

• Rúnuð horn og hvítur litur.• Leit á vefnum og í símaskrá.• Áberandi auglýsingasvæði á forsíðu.• Flýtileiðir í mismunandi vefkerfi.

NÝJIR VEFHLUTIR OG LAUSNIR• Flýtileiðir úr stofnflokkum.• Vörur úr vefverslun á forsíðu.• Brauðmolaslóð (Þú ert hér)• Spurt og svarað tengt efnissíðum.• Næstu skref tengt efnissíðum.• Tengdar síður.• “Layer” notuð í stað “pop-up” glugga.• Forsíður flokka (undirforsíður).• “Index” síður hannaðar.• Mannlegri leitarniðurstöður

WIREFRAME

A website wireframe (also "web wire frame", "web wireframe", "web wireframing") is a basic visual guide used in web design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface. Because of this, they are often completed before any artwork is developed.

SKISSUR (WIREFRAMES)• Gróf grind teiknuð upp fyrir helstu vefhluta (templates).• Hægt að nota: blað og blýant, Excel, Illustrator..• Skissur eru unnar samkvæmt veftré og þeim kröfum sem

komu fram í undirbúningi.• Áhersla er lögð á uppsetningu, en ekki framsetningu.• Tilgangur er að auðvelda umræður um uppsetningu vefsins

áður en grafísk útfærsla er lögð fram.• Mun fleiri láta skoðanir sínar og athugasemdir í ljós við krot

á blaði heldur en fullhannaðann vef.• Tækifæri til þess að vinna vefinn frá byrjun með notendum.• Auðveldara (og ódýrara) að hreyfa hluti til og breyta á

þessu stigi.

GRAFÍSK ÚTFÆRSLA• Skissur (Wireframes)– Ekkert er þó meytlað í stein.

• Minnka myndasvæði í haus.• Gefa merki Símans meira vægi.• Gera leit á vefnum greinilegri.

• Hönnunastaðlar (Brand guidelines)– Logo– Litir– Letur– Myndefni– Grafísk “element”

ÞRÓUN FORSÍÐU VEFSINS

Hönnunarstaðlar Skissur

+

AÐRIR VEFHLUTAR

• Grunnútlit erfist frá forsíðu (ramminn)• Nýjir hlutir (element) eru hannaðir í samræmi

við tilbúna hluti, allt í sama stíl.

YFIRFERÐ

• Skjáskot tekin af vef og borin saman við hönnunarskjöl.

• Tillögur að lagfæringum á CSS kóða (Firebug)• Hefðbundinn vefur er ca. 1-3 mán í forritun.• Vefurinn gagnrýndur – er eitthvað sem má bæta

frekar?• Vefurinn er í stanslausri þróun, ekkert er meytlað

í stein.• Maður er alltaf vitur eftirá.

VERÐLAUNAVEFUR

• Vefur Símans var tilnefndur til Íslensku vefverðlaunanna 2008 í 3 flokkum:– Besti fyrirtækjavefurinn.– Besti þjónustu- og söluvefurinn.– Besta útlit- og viðmót.

• Vefurinn vann til verðlauna fyrir:– Besta útlit- og viðmót.– Besti Íslenski vefurinn.

TENGLAR Á SNIÐUG TÓLFirebug (www.getfirebug.com)

Til að skoða CSS kóða

Picnik (www.picnik.com)Til að breyta stærðum á ljósmyndum

Omnigraffle f/ Mac (www.omnigroup.com)Mindmanager f/ PC (www.mindjet.com)

Til að teikna upp vefi og veftré

Smashing Magazine (http://www.smashingmagazine.com)Hvað er nýtt í vefbransanum?

Grid Calculator (www.29digital.net/grid)Til að reikna út breidd dálka

TAKK FYRIR!