1. No category

Portfolio
Mathias Andelin
www.webbformgivare.se
mathias.andelin@gmail.com
1
Innehåll
Redesign. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Värvet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Addflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Pingdom Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Radioparadise.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Atomia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Intranät. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Västerås Stad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Seco Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Responsiv design. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Riksutställningar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Checkinsweden.com. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Hairnordic.com. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Fishbone framework 2013 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Webbplatser. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Skolporten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Kampanjwebbar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Business på riktigt. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Wireframes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Designmanualer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Trycksaker. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Corporate identities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Banners/Webbannonser. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2
3
Visual ID & webb
Värvet.se
Redesign / Redux
ρρ Responsiv webbformgivning
av webbplats
ρρ Photoshop & Sketch
Redesign av Skandinaviens största intervjupodcast av och med Kristoffer Triumf. Fokus
i redesignen har varit att göra upplevelsen
mer användarvänlig och enhetlig. Lyssnare
och besökare ges möjlighet till att föra en
konversation med hjälp av ett lättillgängligt
interface för kommentarer (sociala funktioner
skapar känslan av tillhörighet bland besökarna vilket ökar chansen till återbesök). För
att skala av informationsmängden har en
meny skapats för låtlista, reklaminslag och
4
4
5
Visual ID & webb
Addflow
Logotyp & webbplats
ρρ Webbformgivning av webbplats
Photoshop & Sketch
ρρ Grafisk formgivning av logotyp/visitkort
Illustrator & Indesign
Grafisk formgivning av logotyp, visitkort
och webbformgivning av extern webbplats
åt startupföretaget Addflow AB. Företaget
erbjuder tjänster och produkter för digitala
redaktionella system.
6
6
Gamification7
Gamification
8
Gamification
Pingdom Tools
Redesign av optimeringstjänst
ρρ Responsiv webbformgivning av webbplats
Sketch & Photoshop
ρρ Idé: Gamification och tjänsteförmedling
för ökat engagemang & återbesök
Veckans optimerare. För att öka engagemanget och
locka till återbesök var min idé att tillföra sk “gamification” i form av möjligheten för användarna att bli “veckans optimerare” och vinna priser.
Branschnav. Genom att erbjuda yta för utvecklare och
företag att annonsera sina tjänster inom webbplatsoptimering utvidgar vi kopplingen och relationen till
branschens aktörer vilket skapar ett mervärde kring
tjänsten.
Pingdom.com är i huvudsak ett övervakningssystem
för webbsidor och webbservrar. 500 000 kunder i mer
än 200 länder, med användare som Spotify, Microsoft,
Instagram, Twitter, Dropbox, Disney, Mailchimp och
Aftonbladet.
9
9
Streamingtjänst
10
Streamingtjänst
11
Streamingtjänst
Radioparadise.com
Redesign av streamingtjänst
ρ
Webbformgivning av webbplats
Photoshop & Sketch
Primär call to action. Bättre och tydligare placering av playknappen.
Personligt. Fokus på en mer personlig navigering
till sparade favoriter, länk till lista med låt-trådar
som användaren skrivit kommentarer i och till
egna inställningar.
Sociala kommentarer för årterkommande besök.
Jag har lyft fram de sociala kommentarerna till
startsidan (tidigare på en undersida) för att skapa
mer återbesök till sidan (diskussioner mellan
användare skapar ett socialt sammanhang och får
besökare att vilja återvända oftare).
12
Säljexponering. Mer säljfokus. Förslag på konserter (affiliatelänkar till sajter som Ticnet) som
baseras på användarens favoriter, geotaggar och
profilinställningar samt exponering av den aktuella
artistens album med affiliatelänkar till sajter som 12
amazon.com
Redesign
Addflow
Logotyp & webbplats
ρρ Webbformgivning av webbplats
ρρ Grafisk formgivning av logotyp/visitkort
Grafisk formgivning av logotyp, visitkort och webbformgivning av extern webbplats åt startupföretaget Addflow AB. Företaget erbjuder tjänster och
produkter för digitala redaktionella system.
13
14
Redesign
Atomia
Redesign av webbplats
ρρ Webbformgivning av webbplats
Sketch & Photoshop
Atomia är ett ungt, snabbt växande företag i
centrala Västerås. De utvecklar, marknadsför
och säljer en molnplattform till webbhotell och
teleoperatörer i hela Europa.
15
15
Intranät
Västerås
Stad
Grafisk design
av intranät
ρ
ρ
Grafisk formgivning.
Photoshopskisser
Grafisk manual med mått
och färgangivelser
Primär målgrupp är 11 000
medarbetare inom
Västerås Stad.
16
Intranät
Seco Tools
Grafisk design av intranät
ρ
ρ
ρ
Interaktionsdesign. Wireframes
Grafisk formgivning. Photoshopskisser
Grafisk manual med mått och
färgangivelser
Primär målgrupp är 5300 medarbetare inom
Seco Tools. En stor utmaningen var att lyckas
få till en bra och modern design trots begräsningar i ett mycket gammalt CMS(Lotus
Notes WebKit).
18
17
Responsiv design
Riksutställningar
Checkinsweden.com
Responsiv design
Koncept & design, webbutveckling av
hotellportal i responsiv design
ρ
Wireframes
ρ
Photoshop- och Fireworkskisser
ρ
Wireframes & Photoshop
ρ
HTML5 & CSS3 /Twitter Bootstrap
ρ
HTML5 & CSS3 / Wordpressimplementation
Då allt fler användare surfar med smartphones och surfplattor var
Riksutställningar i stort behov av att uppgradera sin webbplats
med responsiv design (dvs sidans design och layout anpassas
efter besökarens enhet och skärmstorlek för bättre användbarhet). Mathias tog fram designskisser/layouter, HTML5/CSS3 som
beskriver hela processen inklusive visuella riktlinjer som mått,
typsnitt och färgspecifikationer.
CheckinSweden.com är en guide till Sveriges hotell och
konferensanläggningar i Sverige. Sajten innehåller förutom
hotell- och konferenssök även en evenemangsdel, nyhetsblogg och väder. Webbplatsen tar hänsyn och anpassar
sig layoutmässigt till alla plattformar som desktopdatorer,
läsplattor och smartphones. Mathias höll i allt från planering, design, webbutveckling till lansering
www.riksutstallningar.se
www.checkinsweden.com
18
Webbplatser & kampanjplatser
Skolporten
Business på riktigt
Koncept & design av webbplats
Grafisk design av kampanjwebb
ρ
ρ
Koncept & design
Grafisk manual
Primär målgrupp är lärare, specialpedagoger och chefer inom
skolväsendet. Sajten tillhandahåller skolnyheter och nyheter
inom specialpedagogik bland annat. Målet med webbplatsen är
att underlätta vardagen och svara mot de önskemål & behov man
har i sin profession oavsett man är pedagog, rektor eller skolchef.
www.skolporten.se
ρ
ρ
Grafisk formgivning. Photoshopskisser
Grafisk manual med mått och färgangivelser
De gröna näringarna är en framtidsbransch med många möjligheter
för kreativa och affärsinriktade människor. Därför arrangerade LRF
Ungdomen det vassa företagseventet “Business på riktigt”.
www.businesspariktigt.se
19
Corporate identities
25
20
Banners/Webbannonser
Animerade flashbanners till
kunder som ABB, Tidningen
Market, Boken Why We Buy,
Byrånumret, Executive People,
Bytbil, mfl...
26
21
Portfolio
Mathias Andelin
www.webbformgivare.se
mathias.andelin@gmail.com
22