Napapijri - Redesign

Design & Quality in one.

Programs

Sketchapp, photoshop, after effects.

Taken

Web Design, UI/UX,

Briefing

01

Napapijri trending, Website niet.

Napapijri is één van de bekendste merken op dit moment. Iedereen kent de jassen met de ritsen aan de zijkant wel. Iedereen herkent dat logo wel. Alleen past de huidige website hier niet bij. Saaie look & feel en daarom ging ik aan de slag om hier mijn spin aan te geven. Huidige website (napapijri.nl).

MISSIE/VISSIE

01

Hype

De website koppelen aan de hype van het merk. Modern design, simpel en toch die klasse toevoegen.

Look & Feel

02

Noorse look, Italiaanse klasse.

Die Noorse/Scandinavische look mee geven in het design, maar toch met die Italiaanse klasse. Oftwel een Ferrari in Noorwegen. Het design van de website koppelen aan het design van de jassen. Lastige klus maar wel een mooie uitdaging.

LOGO

KLEUREN

#FFFFFF

#AAAAAA

#1C1C1C

#8C1C31

#1E5183

TYPOGRAFIE

Museo Sans
Font-style : Bold

Museo Sans
Font-style : Normal

Design/UI

03

Desktop Screens

Hieronder krijg je previews te zien van mijn redesign voor desktop. Ik heb 3 schermen eruit gepikt die in mijn redesign zitten en geef ook een korte uitleg van mijn keuzes bij het design van dat scherm.

Home screen

Ik heb in het gehele design maar ook op de homepage de 2 basis kleuren van Napapijri terug gebracht. Rood & Blauw die ook weer verwerkt zitten in de Noorse vlag. Zo kun je dingen van elkaar onderscheiden en goed gebruik van maken voor call to actions.

First screen

Ik heb gekozen om niet de tekst over het plaatje te laten vallen (Zoals in meeste sliders wordt gedaan) maar juist er naast op een duidelijke kleuren achtergrond. Dan is de tekst in mijn mening beter te lezen en gaat je focus daar ook meer naar toe. Ook is er gebruik gemaakt van sterk beeld naast de tekst. Goed beeld is best belangrijk voor je website want het geeft net die extra touch.

Desktop Menu

Voor het menu wilden ik niet zo'n standaard desktop menu en heb zo ook producten in het menu gebracht. Op deze manier kunnen mensen ook in het menu via beeld naar het gewenste product. Ook geeft het iets extras aan het menu dan alleen wat tekst. Daarnaast heb ik zoveel mogelijk ruimte gecreeerd dit oogt toch veel rustiger. Zo is het gehele menu ook veel overzichtelijker.

Mobile Screens

Voorbeelden van de hierboven getoonde designs alleen dan voor op mobiel. Tegenwoordig is het bijna wel een must dat je website perfect werkt op mobiel. Dit komt omdat het meeste verkeer en bezoekers via de telefoon komt en steeds minder via de PC of laptop.

Home screen

Heb hier veel beeld weggehaald vanwege gebrek aan ruimte, maar toch aan de footer toegevoegd. Maakt het namelijk nog wat spannender en zo kan de gebruiker ook verwachten wat er op de rest van de website zich te bevinden valt. Een soort sneak peek voor de gebruikers.

First screen

Zelfde idee gehouden net als de desktop versie, alleen vanwege de ruimte onder elkaar. Ook bovenin het menu al de optie gegeven om naar je winkelmand te gaan. Dit heb je op desktop niet, pas als je het menu opent.

Mobile Menu

Veel elementen weggelaten die niet van toepassing waren voor op mobiel. Zo is het beeld weg en een paar andere functies. Toch de meest belangrijke functies behouden en die onder elkaar gezet. De search functie heb ik onderaan het menu toegevoegd. Op desktop staat hij standaard al rechts en niet in het menu. Dus vandaar dat ik deze wel terug wil laten komen omdat dit een hele belangrijke functie is.

Animations

Voorbeelden animaties van de hierboven getoonde designs. Zo krijg je een beter beeld hoe de website daadwerkelijk dan ook werkt qua animaties en krijg je ook een totale view van de homepage.

The End

04

Uitdagend en leuk project om aan gewerkt te hebben. Toch vind ik de missie goed gelukt, de website is meer in de stijl van de kleding. Ook is de website veel overzichtelijker en wat rustiger dan de huidige website.

Next project

HockeyStyle Magazine