Visa varukorgen
Kanoter & Paddling

Webbdesign

Att beställa en webbsajt…

Exempel på webbsajter

Jag bygger en och annan webbsajt (ofta till kunder och företag jag träffat genom paddling eller kajakdesign) och varje nytt uppdrag är ett oskrivet papper - inga förutfattade idéer om hur det skall se ut, ingen "hus-stil". Istället total öppenhet tills det är dags att börja skissa. Jag litar på designprocessen och intuitionen och låter den öppna för idéer, färger, strukturer, bilder. 20 års erfarenhet av grafisk formgivning ger en trygg grund för kreativitet, nya idéer och att våga ta ut svängarna. Design är glädje, optimism, energi. Det skulle glädja mig att få hjälpa dig med ett lyckat webbprojekt.

Identitet på internet

Det räcker inte längre bara att finnas på nätet. Den tiden är sedan länge förbi. En sajt måste ha en bra sökprofil för att hittas, en attraktiv presentation för att locka en besökare att stanna kvar och intressant, meningsfull och lättåtkomlig information för att förvandla besökaren till en nöjd kund. Jag arbetar med företag och människor som strävar efter en tydlig och representativ identitet på internet. Jag fokuserar på att skapa sajter som åstadkommer den respons som du och dina kunder söker.

Det visuella

Som grafisk formgivare är design och layout viktiga för mig. Den visuella profilen hos en sajt måste prata samma språk som företagets övriga kommunikation: kundkontakter, marknadsföring mm. Att med en uppseendeväckande sajtdesign väcka förväntningar man inte kan leva upp till är kontraproduktivt: fel besökare lockas och blir besvikna över att inte hitta det de väntar sig, medan de verkliga kunderna vänder i dörren. Den visuella profilen måste vara ärlig. Målet är en bestående kundrelation, inte en tillfällig besökare som efter ett "wow!" klickar vidare.

Grunden är en relevant innehållsstrategi, bestående av en engagerande, informativ och saklig text, en visuellt tilltalande och märkesrelevant form, ett enkelt, intuitivt, och lättanvänt gränssnitt, presenterat i en pålitlig, konsekvent och skalbar sidstruktur.

Det som inte syns

Vad som sker under huven är inte mindre viktigt. En enkel semantisk kod, byggt på Web Standards och med innehåll, presentation och interaktivitet separerat är lätt att bygga, enkel att underhålla och fungerar oberoende av webbläsare och når alla kategorier kunder och besökare. En sådan kod tar mindre plats på servern, läses in i webbläsaren snabbare och är framtidssäker, så långt det går att bedöma idag. Lika viktigt är att sajten är responsiv, det vill säga att den fungerar i många typer av applikationer: datorskärmar i olika storlekar, surfplattor, smartphones, talande webbläsare mm. Detta åstadkoms enklast genom att låta webbläsaren kolla upp lite basfakta: besökarens skärmstorlek, upplösning med mera och anpassa text- och bildstorlek, och layout efter det.

SEO (Search engine optimization)

När en sajt är publicerad måste sökmotorerna från Google, Firefox, Safari, Opera, Bing m fl hitta den och indexera den på ett relevant sätt, så att rätt besökare hittar den. Det är i grunden ganska lätt, men kan bli hur komplicerat som helst. Det finns en utbredd övertro på tricks och smarta genvägar. Men eftersom sökmotorerna har precis samma mål som du och dina besökare - att dina kunder finner din sajt av rätt skäl och blir nöjda med vad de hittar - handlar SEO om att bygga sajter med lättillgänglig, korrekt och ärligt presenterad information - svårare är det inte, inte heller lättare.

Redesign - att förnya en gammal sajt

En sajt, oavsett hur välgjord den är, är inte ett statiskt dokument - det måste följa med företagets utveckling. Det skall inte visa var du varit utan vart du är på väg. Så när är det då dags att förnya? Det beror naturligtvis på vad som händer i företaget,hur sajten är gjord och hur den fungerar. Läs mer...

Lite om det tekniska...

Kontakta mig om du har projekt där min erfarenhet skulle vara värdefull.

 

Några designprojekt under de senaste åren.

Axis Kayaks Svenska

Axis Kayaks kommer att säljas i Sverige genom Nordic Kayaks, och ett nytt företag Axis Kayaks Svenska bildades för detta. En webbsajt behövdes förstås och jag blev tillfrågad. Den nya sajten fick drag från både Axis och Nordic för att leda associationerna åt båda hållen, det mesta materialet från den norska Axis-sajten, en egenutvecklad responsiv sajtkod, och ett behändigt PHP-script för redigering direjt på sidan (innebär att beställaren loggar in direkt på sidan och redigerar, uppdaterar, lägger in bilder etc, spara och loggar ut igen – snabbt och enkelt). Hela sajtkoden är mycket slimmad och trots bilder på alla produkter på startsidan laddas den normalt på mellan 400 och 500 millisekunder (inga templates, inga standardmallar, inga scriptbibliotek utan minsta möjliga kod för önskad funktion, det kortaste CSS-fil jag någonsin skrivit).

Vad? Visuell design, kodning, illustrationer och implementering.

Hur? HTML5, CSS3, Javascript, PHP-script, webstandards, responsivitet, validerande (vid leverans) och innehållet redigerbart via en grafisk editor.

Axis Kayaks


Axis Kayaks

       


Axis Kayaks

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 hä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.

Axis Kayaks


Axis Kayaks

       


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
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.



       


Varbergs Kultur Dag & Natt
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.

Varbergs Kultur Dag & Natt Varbergs Kultur Dag & Natt Varbergs Kultur Dag & Natt

       


Sassa Buregren, version 3.0
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".


Sassa Buregren, version 3.0

     


Nordic Kayaks
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.

Nordic Kayaks

     


Green Hat
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 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".

Varbergs Kultur Dag & Natt 2009 – den tryckta foldern

Hotel Djingis Khan i Lund
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 och Natt

Det tryckta programbladet 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.


Varbergs Konsertförening
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
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
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:

ikoner för olika funktioner

...och så lite ur arkivet

Haveriet
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).

Kommentarer

Det finns ännu inga kommentarer.

Skriv en kommentar