--- title: Cipher Nettside Redesign date: 2024-04-16T12:00:00Z --- Martin | Cipher Nettside Redesign
Webutvikling

Cipher Nettside Redesign

En komplett modernisering av nettsiden til Cipher Norge AS med fokus på brukeropplevelse, visuell identitet og konvertering

Fullført April 2025 Team: Selvstendig Varighet: 4 uker

Prosjektoversikt

Da jeg begynte å jobbe hos Cipher Norge AS, observerte jeg at deres eksisterende nettside trengte en oppdatering for å bedre reflektere selskapets kompetanse og profesjonalitet. Den opprinnelige nettsiden hadde et datert design som ikke lenger representerte selskapets moderne tilnærming til teknologi og tjenester.

Ny Cipher nettsidedesign
Gammel Cipher nettsidedesign
FØR
ETTER

Dra skyveknappen for å sammenligne før og etter redesign

Jeg tok initiativ til å utvikle en komplett ny nettside som ville forbedre brukeropplevelsen, skape en sterkere merkevare, og formidle selskapets tjenester på en mer overbevisende måte. Prosjektet omfattet alt fra ny visuell identitet og fargepalett til forbedret informasjonsarkitektur og responsivt design for alle enheter.

HTML5 CSS3 JavaScript Responsivt Design Ytelsesoptimalisering Web Accessibility SEO

Visuell identitet

Designet ble bygget rundt en profesjonell og moderne fargepalett som reflekterer Ciphers posisjon som en seriøs aktør innen IT-tjenester.

Fargepalett

Primær Oransj
#F5A28C
Mørkeblå
#212338
Lysere Blå
#353756

Fargepaletten kombinerer profesjonalitet (mørkeblå) med varme og energi (oransje). Den mørkeblå bakgrunnen gir et solid, pålitelig fundament, mens de oransje aksentene trekker oppmerksomhet mot viktige elementer og call-to-action knapper. Dette skaper en perfekt balanse som gjenspeiler Ciphers verdier: solid teknisk kompetanse kombinert med en kundevennlig og personlig tilnærming.

Forbedret tjenestevisning

FØR Gammelt tjenesteoppsett

Tidligere uoversiktlig presentasjon av tjenester

ETTER Nytt tjenesteoppsett

Nytt oversiktlig kortbasert grid-system

En av de viktigste forbedringene var hvordan Ciphers tjenester ble presentert. Den nye designen bruker et rent og moderne kortbasert grid-system med konsistent formatering. Hver tjeneste er representert med et unikt ikon med tjenestespesifikk fargekode for visuell gjenkjenning, tydelig kategorisering, og konsis beskrivelse som forklarer verdien.

Denne tilnærmingen gjorde det mye enklere for besøkende å raskt forstå Ciphers ulike tjenester, sammenlignet med den tidligere nettsiden som hadde en uoversiktlig og ustrukturert presentasjon. Kortsystemet skalerer også elegant på tvers av enheter, og konfigurerer seg automatisk til en enkeltkolonne på mobile enheter.

Responsivt mobil design

FØR Gammel mobil navigasjon

Tidligere mobil navigasjon med fullskjerm lilla meny

ETTER Ny mobil navigasjon

Ny mobil navigasjon med ryddig mørkeblå meny

En kritisk forbedring var overgangen fra en forvirrende lilla, full-screen hamburgermeny til en ryddig, strukturert navigasjon med logiske nedtrekksmenyer. Den nye mobile opplevelsen ble optimalisert fra grunnen av med en "mobile-first" tilnærming. Dette sikrer at nettsiden fungerer perfekt på alle enheter, fra smarttelefoner og nettbrett til desktop-datamaskiner.

Utfordringer og løsninger

Utdatert design

Utfordring: Den gamle nettsiden hadde et design som var på etterskudd i forhold til moderne webstandarder.

Løsning: Implementerte et moderne, rent og minimalistisk design med fokus på whitespace, kontrast og lesbarhet.

Mangelfull mobilstøtte

Utfordring: Nettsiden var ikke optimalisert for mobile enheter, noe som ga en dårlig opplevelse for en betydelig andel brukere.

Løsning: Utviklet en fullstendig responsiv side med "mobile-first" tilnærming og grundig testing på alle enheter.

Uklar navigasjon

Utfordring: Den eksisterende navigasjonsstrukturen var forvirrende og gjorde det vanskelig å finne relevant informasjon.

Løsning: Redesignet informasjonsarkitekturen og implementerte en intuitiv hierarkisk navigasjon med tydelige dropdown-menyer.

Svak ytelse

Utfordring: Treg lastetid på grunn av uoptimaliserte ressurser som påvirket brukeropplevelsen og SEO negativt.

Løsning: Optimaliserte bilder, minimerte CSS/JS, implementerte lazy loading og reduserte blokkerende ressurser.

Optimalisert brukerreise

Brukerreisen ble optimalisert i fire trinn:

1

Førsteinntrykk og merkevaregjenkjenning

Header med tydelig logo, navigasjon og CTA-knapp som kommuniserer profesjonalitet og tilgjengelighet fra første øyeblikk.

2

Verdiforslag og posisjonering

Hero-seksjon med tydelig slagord "Teknologi som skaper verdi" og en konsis beskrivelse av hvordan Cipher hjelper virksomheter. Partikkelanimasjon og floating shapes gir et moderne teknologisk preg.

3

Tjenestenavigasjon

Visuelt tiltalende tjenestekort som kategoriserer og forklarer Ciphers tilbud på en oversiktlig måte, med tydelige ikoner og konsistent design. Separate farger per kategori for enklere visuell identifisering.

4

Konvertering

Strategisk plasserte kontaktpunkter og CTA-knapper gjennom hele brukerreisen, med tydelige handlingsoppfordringer. Dedicated kontaktskjema med enkel tilgang forenkler henvendelsesprosessen.

Interessert i lignende prosjekter?

Ta kontakt om du ønsker å diskutere hvordan jeg kan hjelpe med webutvikling, design eller lignende utfordringer for din virksomhet.

Tilbake til CV Kontakt meg
// Close menu when clicking on a nav link const navLinks = document.querySelectorAll('.nav-link'); navLinks.forEach(link => { link.addEventListener('click', () => { navMenu.classList.remove('active'); menuIcon.classList.remove('fa-times'); menuIcon.classList.add('fa-bars'); body.style.overflow = ''; // Allow scrolling again }); }); // Close menu when clicking outside document.addEventListener('click', (e) => { if (navMenu.classList.contains('active') && !navMenu.contains(e.target) && !menuToggle.contains(e.target)) { navMenu.classList.remove('active'); menuIcon.classList.remove('fa-times'); menuIcon.classList.add('fa-bars'); body.style.overflow = ''; } }); } // Image comparison slider const setupImageComparison = (containerId) => { const container = document.getElementById(containerId); if (!container) return; const before = container.querySelector('.before'); const sliderHandle = container.querySelector('.slider-handle'); let isDragging = false; // Set initial position const setPosition = (percent) => { const boundedPercent = Math.max(0, Math.min(100, percent)); const position = `${boundedPercent}%`; before.style.setProperty('--position', position); sliderHandle.style.left = position; }; // Initialize at 50% setPosition(50); // Handle mouse events const getPercentage = (e) => { const rect = container.getBoundingClientRect(); const x = e.clientX - rect.left; return (x / rect.width) * 100; }; const onMouseDown = (e) => { isDragging = true; setPosition(getPercentage(e)); e.preventDefault(); }; const onMouseMove = (e) => { if (isDragging) { setPosition(getPercentage(e)); } }; const onMouseUp = () => { isDragging = false; }; // Handle touch events const getTouchPercentage = (e) => { const rect = container.getBoundingClientRect(); const touch = e.touches[0]; const x = touch.clientX - rect.left; return (x / rect.width) * 100; }; const onTouchStart = (e) => { isDragging = true; setPosition(getTouchPercentage(e)); }; const onTouchMove = (e) => { if (isDragging) { setPosition(getTouchPercentage(e)); e.preventDefault(); // Prevent scrolling while dragging } }; // Add event listeners sliderHandle.addEventListener('mousedown', onMouseDown); container.addEventListener('click', onMouseDown); window.addEventListener('mousemove', onMouseMove); window.addEventListener('mouseup', onMouseUp); sliderHandle.addEventListener('touchstart', onTouchStart, { passive: true }); container.addEventListener('touchstart', onTouchStart, { passive: true }); container.addEventListener('touchmove', onTouchMove, { passive: false }); window.addEventListener('touchend', onMouseUp); }; // Image comparison slider const setupImageComparison = (containerId) => { const container = document.getElementById(containerId); if (!container) return; const before = container.querySelector('.before'); const sliderHandle = container.querySelector('.slider-handle'); let isDragging = false; // Set initial position const setPosition = (percent) => { const boundedPercent = Math.max(0, Math.min(100, percent)); const position = `${boundedPercent}%`; before.style.setProperty('--position', position); sliderHandle.style.left = position; }; // Initialize at 50% setPosition(50); // Handle mouse events const getPercentage = (e) => { const rect = container.getBoundingClientRect(); const x = e.clientX - rect.left; return (x / rect.width) * 100; }; const onMouseDown = (e) => { isDragging = true; setPosition(getPercentage(e)); e.preventDefault(); }; const onMouseMove = (e) => { if (isDragging) { setPosition(getPercentage(e)); } }; const onMouseUp = () => { isDragging = false; }; // Handle touch events const getTouchPercentage = (e) => { const rect = container.getBoundingClientRect(); const touch = e.touches[0]; const x = touch.clientX - rect.left; return (x / rect.width) * 100; }; const onTouchStart = (e) => { isDragging = true; setPosition(getTouchPercentage(e)); }; const onTouchMove = (e) => { if (isDragging) { setPosition(getTouchPercentage(e)); e.preventDefault(); // Prevent scrolling while dragging } }; // Add event listeners sliderHandle.addEventListener('mousedown', onMouseDown); container.addEventListener('mousedown', onMouseDown); // Add global window event listeners to handle events outside the container window.addEventListener('mousemove', onMouseMove); window.addEventListener('mouseup', onMouseUp); sliderHandle.addEventListener('touchstart', onTouchStart, { passive: true }); container.addEventListener('touchstart', onTouchStart, { passive: true }); container.addEventListener('touchmove', onTouchMove, { passive: false }); window.addEventListener('touchend', onMouseUp); }; // Initialize image comparison sliders when page loads document.addEventListener('DOMContentLoaded', () => { setupImageComparison('homepageComparison'); });