Några designprojekt under de senaste åren.
Axis Kayaks är ett nybildat företag med syfte att konstruera, tillverka och sälja kajaker och surfskis med lite nya fräscha idéer. Jag blev tillfrågad att utveckla modellerna från idé till färdig ritning, inklusive den grafiska formen: utseende, färg, loggor etc. En bit in i jobbet dök behovet av en webbsajt upp, för att tidigt presentera projektet och idéerna, och som därför skulle höra visuellt intimt samman med kajakerna. Det designjobbet hamnade också på mitt bord. Sajten består av en enda sida (initialt) och tar upp kajakernas färgschema och grafiska enkelhet. Den är responsiv med två brytpunkter: desktop-surfplatta och surfplatta-smartphones.
För att spara tid (det var ovanligt bråttom den här gången) använde jag en färdig open-source-mall från internet (Escape Velocity från HTML5up) som jag anpassade efter behov och önskemål. Jag gjorde även den är gången Illustrator-Photoshop-bilder av de färdiga modellerna – eftersom inga produktionsexemplar ännu finns tillgängliga.
Vad? Visuell design, kodning, illustrationer och implementering.
Hur? HTML5, CSS3, Javascript/JQuery, webstandards, responsivitet, validerande (vid leverans) och innehållet redigerbart via en grafisk editor.
Nordic Kayaks sajt behövde en uppfräschning i samband med lanseringen av en ny spännande serie surskis, med likaså uppfräschad visuell design. Sajten arbetades om för att matcha den grafiskt rena estetiken på kajakerna och vi passade på att ge den en responsiv funktion, d v s den fungerar lika bra i små telefonskärmar som i stora desktopskärmar. Bakgrunden är att allt fler internetbesök sker via smartphones och surf- och läsplattor. Därför måste en sajt också anpassas efter dessa mindre skärmar.
Det handlar dels om att fokusera mer på innehållet och mindre på perifert utfyllnadsmaterial, att göra navigationen enkel och lättanvänd, att se till att man inte behöver skrolla fram och tillbaka i sidled för att se hela texten eller bilden, och dels om att acceptera en annan sorts användning med snabbare, kortare besök för att snabbt hitta den information man söker eller för att snabbt kunna bilda sig en uppfattning om vad sajten har att erbjuda.
Nyckelorden är “mobile first”, vilket innebär att man bygger sajten med navigation och funktionalitet kring Smartphones, och därefter bygger ut den så att även fungerar i en traditionell desktop. Rätt hanterat ger det fördelar även i storformat: rent och elegant, lättnavigerat och funktionellt.
I uppdraget ingick också att göra fotorealistiska bilder för marknadsföring och webb, eftersom alla surfskis inte fanns färdiga när sajten publicerades (renderade i Illustrator/Photoshop från linjeritningarna).
Vad? Visuell design, kodning, illustrationer och implementering.
Hur? HTML5, CSS3, Javascript/JQuery, webstandards, responsivitet, validerande (vid leverans) och innehållet redigerbart via en grafisk editor.
Parkmusiken är ett av Varberg Kommuns sommarevenemang – konserter i Societeten varje kväll från 25 juni till 7 augusti – en blandning av lokala band och rikskändisar, det mesta kostnadsfritt. Till detta behövdes en sajt, och jag fick uppdraget. Det blev en enkel singel-page sajt med mjuk vertikal skrollning: ett huvud och en ordbild med artistnamnen – färg och form från Arthur Ragnarssons affisch
för Parkmusiken – en kalender och presentationer av artisterna. Namnen i ordbilden länkar till rätt dag i kalendern, där namnen i sin tur länkar till presentationerna.
Vad? Visuell design, kodning och implementering.
Hur? HTML, CSS, Javascript och JQuery, webstandards, strict validerande (vid leverans), innehållet redigerbart via en grafisk editor.
Susano AB är ett malmöföretag med offentliga och privata uppdragsgivare - medicinska bedömningar, livsstilsförändringar och stressreducering. Med utgångspunkt i den logga jag ritade för Susano i somras, blir det nu en ny sajt. Uppdraget innefattar företagets visuella webbidentitet, färgskala, typografi och själva sajtbygget. I färger och struktur har jag försökt återspegla den lugna och sakliga professionalism jag upplever hos Susano.
Vad? Visuell design, kodning och implementering.
Hur? XHTML, CSS, Javascript, webstandards, PHP, strict validerande (vid leverans), innehållet redigerbart via en grafisk editor.
Jag fick även i år förtroendet att snickra ihop webbsajten för Varbergs Kultur Dag & Natt (även 2011 ocxh 2012 med ungefär samma grundmall) Det tryckta programmet formgavs i år av Arthur Ragnarsson och liksom tidigare år valde jag att lägga startsidan nära det tryckta bladets utseende för att skapa igenkänning mellan de båda informationmedierna. Övriga sidor fick däremot en helt egen stil – det tryckta häftets layout hade inte fungerat bra som webbsajt. Istället använde jag javascript och Jquery för att bygga en horisontellt glidande layout, där man spolar fram mellan tider och evenemang.
Vad? Visuell design, kodning och implementering.
Hur? XHTML, CSS, Javascript, webstandards, PHP, strict validerande (vid leverans), innehållet redigerbart via en grafisk editor.
Sassa Buregren, konstnär och författare. Tredje versionen av Sassa sajt - efter ett par år kändes det rimligt med en lite förnyelse.
Vad? Design/layout, kodning och implementering, text- och bildredigering.
Hur?XHTML, CSS, Javascript, Webstandards, PHP, strict validating (vid leverans), inlänkade textfiler för innehållet - redigarbara via en grafisk editor i webbläsaren. Bilderna uppe i huvudet, från Sassas olika verksamhetsgrenar, är klickbara och öppnar i en "lightbox".
Nordic kayaks i Vaxholm lanserar en ny serie multisportkajaker/surfskis, som jag varit med att utforma, och ville fräscha upp webbsajten samtidigt. Eftersom kajaker är avancerade high-tech-byggen i kolfiber/prepreg-epoxy kändes det relevant att visa detta i vinjetten. Sajtbygget är uppdelat i två steg: det första innebar en ny vinjett, uppfräschad logga, genomarbetning av sidkoden till webstandards med XHTML, CSS och Javascript. Nästa steg kommer att involvera hela sajtens utseende och struktur.
Vad?Visuell design av vinjett, kodning och implementering.
Hur? XHTML, CSS, Javascript, webstandards, PHP, strict validerande (vid leverans), innehållet redigerbart via en grafisk editor.
Green Hat Music & Sound kan och gör det mesta inom levande musik. Med utgångspunkt i den logga jag ritade för Green Hat för ett par år sedan, blir det nu en ny sajt. Uppdraget innefattar företagets visuella webbidentitet, färgskala, typografi och själva sajtbygget. I färger och struktur har jag försökt återspegla bredden, mångfalden och kompetensen hos Olle Grane, som i praktiken är företaget. Bilderna "tänds" på mouse-over och länkar till djupare presentationer av de olika verksamheterna: inspelning, produktion, undervisning, komposition, musikutövande mm. (Sajten är ännu inte publicerad)
Vad?Visuell design, kodning och implementering.
Hur? XHTML, CSS, Javascript, webstandards, PHP, strict validerande (vid leverans), innehållet redigerbart via en grafisk editor.
Varberg Kultur Dag&Natt 2009. Tredje året jag har gjort sajten för evenemanget, de två senaste baserade på Anita Wohléns tryckta förlaga. Sajten utbytt mot årets upplaga (se ovan).
Vad? Design/layout, kodning och implementering, text- och bildredigering.
Hur? XHTML, CSS, Javascript, webstandards, PHP, strict validating (vid leverans), en sida, dynamiskt inlänkat innehåll - redigerbart via en grafisk editor. Klickbar karta öppnar i en "lightbox".
Hotel Djingis Khan i Lund renoverade lokalerna under 2009 och kände behov av att även förnya sajten, som hängt med i flera år.
Vad?Planering, design/layout, kodning och implementering, texter och översättning till engelska.
Hur? XHTML, CSS, Javascript, webstandards, PHP, strict validerande (vid leverans), innehållet redigerbart via en grafisk editor. Vinjett med klickabar kontextuella bilder.
Varbergs Kultur Dag&Natt 2008. Layouten ansluter tämligen nära till det tryckta programhäftet, gjort av Anita Wohlén. Nytt för i år är att den gamla startsidan pensionerades, ersatt av en kort ingresstext i huvudet - besökaren kommer direkt in till det viktiga: programmet. Sajten är ersatt av årets upplaga (se ovan).
Vad? Design/layout, kodning och implementering, text- och bildredigering.
Hur? XHTML, CSS, Javascript, Webstandards, PHP, strict validating (vid leverans), inlänkade textfiler för programtablåerna - redigerbara via en grafisk editor i webbläsaren.
Ny sajt för för Varbergs Konsertförening , en ideell förening vars gamla sajt inte längre speglar verksamheten, och därför ville ha hjälp med en uppdatering.
Hur? XHTML, CSS, Javascript, Webstandards, PHP, strict validating (vid leverans), inlänkade textfiler för innehållet - redigarbara via en grafisk editor i webbläsaren.
Varbergs kulturdagar 2007. Årligen återkommande kultur Dag&Natt har ökats på med flera kulturdagar och en internationell SPA-konferens - och behövde därför en ny plats på nätet. Sajten är ersatt av årets upplaga (se ovan).
Vad? Design/layout, kodning och implementering, text- och bildredigering.
Hur? XHTML, CSS, Javascript, Webstandards, PHP, strict validating (vid leverans), inlänkade textfiler för programtablåerna - redigarbara via en grafisk editor i webbläsaren.
Fungera Friskvård. Ett hälsoföretag som arbetar inom fyra verksamhetsområden; rehabilitering, friskvård, läkarmottagning och företagsservice.
Vad? Design/layout, kodning och implementering, text- och bildredigering.
Hur? XHTML, CSS, Javascript, Webstandards, PHP, strict validating (vid leverans).
Till webbdesign hör oftast ikoner för olika funktioner:
Här är några från min nuvarande sajt:
...och så lite ur arkivet
Haveriet. Haveriet är ett båtsnickeri med kajakbygge som specialitet.
Vad? Design/layout, kodning och implementering, text- och bildredigering.
Hur? XHTML, CSS, Webstandards.
När det efter några år var dags att uppdatera Sassas sida ville hon göra om den i grunden - innehåll och form helt åtskilda med XHTML och CSS, helt enligt Webbstandards och gällande accessibility-krav. Visuellt sparsmakad, överskådlig och lättnavigerad - ingenting längre bort än två klick.
Sassa Buregrens första sida blev en "konstnärslösning" snarare än traditionell webbdesign. Här fanns inga stora informationsmängder utan istället krav på en smakfull presentation av olika aspekter av konstnärlig verksamhet - mycket färg och känsla. Lösningen blev bland annat att låta sidan öppna i fullscreen, utan störande verktygsfält och att använda delar av Sassas offentliga utsmyckningar som dekorelement i navigationsspalten.
Alfa Laval. GUI-design för ett intranetprojekt.
Winsider. Webbplats för ett programutvecklingsföretag.
Östenergi. Webbplats för ett energiföretag med inriktning på grön teknik.
...och så min egen sida som är en ständigt pågående försöksverksamhet i navigation, information och presentation - nu framme vid version 7 (våren 2011). Hittills har jag gjort om den totalt ungefär var artonde månad och fingrat på det mesta dessemellan. Fortfarande .aspx och MS-databas, men nu HTML5 och CSS3 (med ett modernizr-script som andningshjälp åt antika webbläsare). Nya knep har minskat laddningstiderna med ytterligare någon tiondels sekund – ligger nu (maj 2011) och pendlar mellan 450 och 580 ms, med ett medel på 508 ms. Visuellt är fontstorleken ökad en aning, vilket irriterat en del av mina besökare med äldre skärmar med låg upplösning (ett klick på ctrl– löser problemet), men eftersom trenden går mot högre upplösning i både små och stora skärmar, har det fått avgöra. Version 7 går att köra i läsplattor (iPad-storlek) utan att skrolla, och är läsbar utan att förstora i de flesta smartphones med högupplösta skärmar.
Några tidigare versioner:
Version 6 (2007): Byte till .aspx och en riktig databas för första gången. Web Standard, XHTML 1.0 strict, CSS 2.0, accessibility AA och de ofta uppdaterade sidorna sköttes från webbläsaren via ett skräddarsytt CMS (Content Management System). Administrationen blev betydligt enklare. Från besökarens perspektiv märks främst att sajten blivit rätt mycket snabbare (laddningstider kring 500-700 ms), att språkbyte och annan interaktivitet blivit enklare och mera logisk, och att betalningsrutiner numera sköts direkt på sajten.
Flitiga uppdateringar har lett till att besöksfrekvensen ökat från ca 400-500 för ett par år sedan till 1000-1200 unika besök per dag under åren efter uppdateringen (med enstaka toppar upp till 1700), och bredden, kvaliteten och uthålligheten till att det börjar dyka upp referenser i diskussionsforum långt utanför kärnområdet, i vetenskapliga artiklar och avhandlingar och till att sajten bland annat ingår som resurs i skolornas länkskafferi.
Version 5 (2004): Byte till PHP och lite serverscriptning, bland annat för att hantera nyhetsnotiser (presentation, arkivering mm) – i övrigt hårdkodad. Ribban lades högre med Web Standard, XHTML 1.0 strict (fast implementerad i HTML-läge), CSS 2.0, Accessibility AA. Ett litet antal sidor i engelska kom till.
Version 4 (2003): HTML-version, helt hårdkodad, med lite javascript-godis – bland annat en flytande meny
Versioner 3 (2001), 2 (1999) och 1 (1997) – HTML och helt hårdkodade. Version 2 med tabellayout och rudimentär CSS. Version 1 med frames, tabellayout och inlinestyling (jag ryser – men den är preskriberad nu, och det var det första jag gjorde på webben överhuvud taget, inspirerad av vad jag såg runt omkring mig).
