SmartArt Portfolio

Redesign 2016

Requirements

Mobile-first RWD

SEO aware &

W3 compliant

With an keen eye on UX and UI

Modular and Maintainable in essence

The short-mıd term aım

Content Strategy

Mobile-First Layout

Mobile-First Layout

Landing Page - Initial concepts

Look & Feel

Artworks Gallery Page - Initial concepts

Look & Feel

Large Artwork Page - Initial concepts

Look & Feel

Small Artwork Page - Initial concepts

Look & Feel

The Technology Behınd the Scenes

Keep things simple &

Concentrate on the output

Rapid PrototypingProgressive Enhancement

Static Website GeneratorMetalsmith + Gulp

Web Components… (to come)

The WorkflowKeepıng everythıng

Under Control

Gulp to streamline prototyping and image manipulation

Use of GIT With effective branchıng strategy

Issue tracker - BitBucketto keep track of the progress

Basic but efficient deployment system via CLI

Use of GITflow for a more predictable and traceable history of commits

Preliminary ResultsBounce Rate reduced from ~100% down to ~50%

Average download size~1 MB on mobile~2 MB on desktop

Overall Performance Improvement~1s at DomContentLoaded

Next StepsWeb Components

Full PWA

UX journeys improvements