Vanligtvis så bygger jag hemsidor i WordPress och designar layouts till befintliga hemsidor, re-designs med andra ord. När Zavann AB kontaktade mig gällde det något annorlunda. De önskade en helt ny design på sitt befintliga affärssystem.

Zavann AB tillhandahåller ett webbaserat affärssystem för små till medelstora elleverantörer. Detta systemet är väldigt komplext och bygger på väldigt mycket information. De var väldigt nöjda med hur allting fungerar men designen skulle göras om helt. Jobbets leverans skulle bestå av demosidor av hur det kan se ut samt fungera med kod och funktion. Detta skulle de sedan bygga vidare på med den bakomliggande programmeringen.

Ny design på befintligt system

Vi börjar med att ta en titt på deras gamla system. Det var väldigt orent och där var en total avsaknad av design och formgivning. Zavann AB visade mig ett par exempel på vad de tycker om och ville att det nya gränssnittet skulle vara mer anpassat för dagens webb.

Efter en del surfande på deras refernssajter och ett par designförslag var lösningen en enkel design med fokus på informationen och tillgängligheten. Det var även stor fokus på att utnyttja så mycket tabbar och utfällbara menyer som möjligt för att gömma undan en del av den stora mängden information. Zavann AB ville helt enkelt göra användarupplevelsen lite mer behaglig för sina kunder.

Kodning – HTML, CSS och jQuery

När det kommer till gränssnittets uppbyggnad och funktionalitet så önskade de en browserkompatibel HTML och CSS kodning som även var semantiskt kodad enligt standard. Dessutom så ville de ha exempel på färgschema, modala fönster (lightboxes), tabbsystem, samt utfällbara boxar och menyer.

Till själva tabbsystemet och de utfällbara boxarna/menyerna så utnyttjades jQuery. Det blev en hel del funktioner och CSS för att få det funktionsdugligt. Följande plugins användes till jQuery:

• Collapsing Menu
• Unobtrusive Tabs
• Thickbox
• Slickbox

Till varje funktion så ska det kodas en hel del CSS och HTML. Eftersom det handlar mycket om objekt som inte syns och flertalet boxar som använder samma jQuery-kod så blev det även många funktioner som baserades på ny CSS för varje box. Ett bra exempel på detta är tabbarna. Varje tabb har sin egen box, som i sin tur ska vara utfällbar.

Konklusion

Detta kundjobb var en väldigt nyttig upplevelse. Jag fick lära mig att det krävs lite annorlunda css-kodning för att få alla jQuery funktioner browserkompatibla. Det var inte helt lätt då jag aldrig har arbetat med jQuery på denna nivån förut. Zavann AB fick 6 st demosidor i HTML/CSS samt PSD-filer levererade och fortsatte arbetet vidare med att implementera allting i sitt befintliga system. Tyvärr kan jag inte visa er något live-exempel då systemet ligger hos Zavann AB.