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 Responsiv design Wireframes Photoshop- och Fireworkskisser HTML5 & CSS3 /Twitter Bootstrap Checkinsweden.com Koncept & design, webbutveckling av hotellportal i responsiv design Wireframes & Photoshop 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 Koncept & design av webbplats 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. Business på riktigt Grafisk design av kampanjwebb 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.skolporten.se 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