Portfolio. Mathias Andelin 2014

Transkript

1 Portfolio Mathias Andelin

2 Innehåll Responsiv design Sektionsdata webb Hairnordic.com Riksutställningar Checkinsweden.com Hypernode Fishbone framework Magazine VMKF Intranät Västerås Stad Seco Tools Webbplatser Skolporten FAR Förlag - HR-guide Kampanjwebbar Business på riktigt Webbutveckling / CMS BalticDeal.eu Wireframes Designmanualer Corporate identities Banners/Webbannonser

3 Responsiv design Sektionsdata webb Responsiv design Photoshop- och Fireworkskisser Twitter Bootstrap Sektionsdata behövde konvertera en PC-applikation för avancerade kalkyler till webbmiljö. Mathias tog fram responsiv design för desktop och läsplattor med tilltalande användarvänlig modern design a la flat design. Tjänsten lanseras Wikells byggberäkningar AB 3

4 Responsiv design Hairnordic.com Portal Wireframes Grafisk design HTML5/CSS3. Responsiv design Wordpressimplementation VPS-miljö Hairnordic.com är portalen där kunder/besökare kan hitta erbjudanden och tjänster från lokala frisörer och stylister. Mathias tog fram konceptet i form av wireframes, grafisk design, responsiv HTML5 / CSS3, implementation i WordPress, VPS-miljö(Ubuntu/LAMP) och launch. 4

5 Responsiv design Riksutställningar Responsiv design Wireframes Photoshop- och Fireworkskisser HTML5 & CSS3 /Twitter Bootstrap 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. 5

6 Responsiv design Checkinsweden.com Koncept & design, webbutveckling av hotellportal i responsiv design Wireframes Fireworkskisser HTML5 & CSS3 / Wordpressimplementation 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 Som publiceringsverktyg valdes WordPress CMS. 6

7 Responsiv design Hypernode.se Koncept & responsiv design Wireframes Fireworkskisser HTML&CSS3 med Bootstrap + jquery Uppdraget bestod av att ta fram en design och gränsnittskod som skulle anpassa sig efter besökarens plattform(responsiv design). Extra krut satsades på sökmotoroptimering (SEO) för att sidornas innehåll lättare skall hittas av sökmotorerna. Call to action var att ha lättilgänglig kontaktinfo på alla sidor. Som publiceringsverktyg valdes WordPress CMS. 7

8 Responsiv design Fishbone framework 2013 Grafisk design av ramverk för portaler Grafisk formgivning. Fireworksskisser Grafisk manual med mått och färgangivelser Grafisk design av Fishbones Systems senaste ramverk för portaler i SharePoint Primär målgrupp är alla Fishbones Systems befintliga och nya kunder. 8

9 Responsiv design Magazine Koncept & design av tidningsplattform Wireframes Fireworkskisser Responsive design (Desktop - läsplatta - smartphones) Magazine är en tidningsplattform med responsiv design som gör det möjligt att läsa innehållet oavsett vilken plattform besökaren använder när de surfar in på webbplatsen. Magazine har i grunden EPiServer som CMS-system. 9

10 Responsiv design VMKF Responsiv design för kommunwebbar Wireframes Fireworkskisser Responsive design (Desktop - läsplatta - smartphones) Då allt fler surfar med smartphones och surfplattor ville Västra Mälardalens Kommunalförbund uppgradera förbundets webbplattform med sk responsiv design. Responsiv webbdesign gör att sidornas design och layout anpassas efter besökarens enhet och skärmstorlek. Plattformen används av förbundets 6 webbplatser i EPiServer. Mathias tog fram responsiv design kring ramverket Bootstrap. 10

11 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 medarbetare inom Västerås Stad. Se fler skisser på Västerås Stads utvecklingsblogg: 11

12 Intranät Seco Tools Grafisk design av intranät 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). 12

13 Webbplatser Skolporten Koncept & design av webbplats Koncept & design Grafisk manual med mått och färgangivelser 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. 13

14 Webbplatser FAR Förlag - HR-guide Grafisk design av webbplats Grafisk formgivning. Photoshopskisser Grafisk manual med mått och färgangivelser Webbplatsen implementerades i EPiServer och är en tjänst med information om allt inom HR; personal- & lönfrågor samt lag & rätt. Tjänsten är abonnemangsbaserad och olika information presenteras för olika målgrupper och abonnemangstyper. Far Förlag är ett helägt dotterbolag till Far, branschorganisationen för revisorer och rådgivare. I koncernen ingår även systerbolaget Far Akademi, som är marknadsledande inom utbildning för ekonomer på alla nivåer. 14

15 Kampanjwebbar 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 som pågick 8-9 oktober 2012 på Sånga Säby. Till eventet bjöds det in entreprenörer, företagare och studenter mellan 18 till 35 år, med olika bakgrund och kompetens, men som hade en sak gemensamt intresse för riktig business. 15

16 Webbutveckling / CMS BalticDeal.eu Koncept, design och utveckling av webbplats Wireframes Fireworkskisser HTML & CSS / Wordpressimplementation Ett EU-projekt som blev en av de största och lyckade av sitt slag när det gäller antal EU-länder i samverkan med varandra. Mathias hade ensam hela ansvaret för framtagningen av denna externa webbplats vilket innefattade koncept, design och implementation. Förstudien resulterade i ett färdigt koncept inklusive struktur för webbplatsen. Skisser i form av wireframes togs fram för allt innehåll. Därefter togs design fram i Photshopskisser/Fireworks, XHTML&CSS och jquery. Slutligen implementerade Mathias webbplatsen i valt CMS(Wordpress). Dessutom ingick även kopplingar till Google analytics. Dokumentation och driftsättning var även en naturlig del av uppdraget, likaså projektledning gentemot kund. Webbplatsen levererades med gott resultat och kunden är mycket nöjd över utseende och funktion. 16

17 Wireframes För att presentera idéer och koncept i form av sk wireframes använder Mathias gärna program som Balsamiq och Mockups.me (för paddan). 17

18 Designmanualer Mått Service& Tjänster Designmanualer tas fram som ett stöd och verktyg åt de webbutvecklare som skall bygga gränssnittet och är bra för alla i teamet under hela processen. Manualerna fungerar även bra som dokumentation. 960 grid Service & Tjänster+ I en en grafisk manual ingår mått, typsnittsval och färgangivelser. Layouten följer 960-grid:en 960 pixlar på bredden med 12 kolumner. ( ( grids.heroku.com/

19 Corporate identities Grafisk profil för företaget Hypernode med logotyp, visitkort, brevpapper, powerpoint, rollups, flaggor, skyltar & www Vägledning, design & utveckling inom digital kommunikation Mathias Kontorsnr:

20 Corporate identities K L I M AT S M A R T M AT Grafisk profil för företaget ecobricks med logotyp, visitkort, brevpapper, meny, www samt annonser. Roger Nelson Mobil: Kontor: Mail: roger.nelson@ecobricks.se K L I M AT S M A R T M AT Sveavägen 23, Stockholm, Sweden K L I M AT S M A R T M AT Roger Nelson Marknadschef roger.nelson@ecobricks.se DOKUMENTNAMN Datum Mottagarnamn Företag Utdelningsadress Grafisk identitet - brevmall Jag har aldrig sett en sådan sommar. Rötmånadshetta sedan mitten av maj. Hela dagen står ett tjockt töcken av damm alldeles stilla över gatorna och torgen. Först på kvällen lever man upp en smula. Jag tog en aftonpromenad nyss, som jag gör nästan var dag efter mina sjukbesök, och de äro icke många nu på sommaren. Det kommer en sval, jämn luftström från öster, töcknet lyfter, seglar långsamt bort och blir en lång slöja av rött stoft bort i väster. Intet skrammel av arbetsåkdon mera, bara en droska då och då, och spårvagnen som ringer. Jag går gatan ner i sakta mak, träffar emellanåt en bekant och står och pratar en stund i ett gathörn. Men varför skall jag jämt möta pastor Gregorius? Jag kan inte se den mannen utan att jag kommer att tänka på en anekdot jag en gång i världen hörde om SchopenhauSchopenhau er. Den bistre filosofen satt en kväll i ett hörn i sitt kafé, ensam som vanligt; dörren öppnas och en person med ett osympatiskt utseende stiger in. SchopenSchopen hauer betraktar honom med ett ansikte förvridet av vämjelse och fasa, rusar upp och börjar dunka mannen i huvudet med sin käpp. Det var bara med anledning av hans utseende. Nå, jag är nu ingen Schopenhauer; då jag såg prästen komma emot mig på långt håll, det var på Vasabron, stannade jag hastigt och ställde mig att se på utsikten med armarna stödda mot broräcket. Helgeandsholmens grå hus, den gamla badstuns söndriga götiska träarkitektur som speglades bruten i det rinnande vattnet, de stora gamla pilarna, som doppade sina blad i strömmen. Jag hoppades att prästen inte hade sett mig och att han inte heller skulle känna igen min ryggtavryggtav la, och jag hade redan i det närmaste glömt honom, då jag plötsligt fick se honom stå brevid mig med armarna på broräcket liksom jag och huvudet på sned i alldeles samma attityd som för tjugo år sedan i Jakobs kyrka, då jag satt i familjebänken vid min salig mors sida och för första gången såg denna förskräckliga fysionomi skjuta upp i predikstolen som en otäck svamp och klämma i med sitt abba, käre fader. Samma feta, grådaskiga ansikte, samma smutsgula polisonger, litet gråa nu kanske, och samma outgrundligt gemena blick bakom glasögonen. Omöjligt att komma Postadress: Sveavägen 23, Stockholm Besöksadress: Sveavägen 25, Stockholm Telefon: Fax: Postgiro: Bankgiro: Org nr:

21 Corporate identities 21

22 Banners/Webbannonser Animerade flashbanners till kunder som ABB, Tidningen Market, Boken Why We Buy, Byrånumret, Executive People, Bytbil, mfl... 22

23 Mathias Andelin