MADEFORM BOOK 2, 2020, INFO, 2550144, NKTS


        UX & DESIGN for collaborations between Net–A–Porter and brands which want to create content together. The work is varied so it was important to design an experience that would be flexible.

        A modular framework that allows to create pages quickly from pre–made elements.

        Additional solutions to problems like orphans and widows in copy were solved with JavaScript. This allowed pages to be quickly translated up to 6 or more languages without creating alternative layouts.
        Modules and visual layout was treated with a few solutions and with that approach it was easy to gain flexibility in module use and minimal development time.

CONCEPTS Early ideas for how to the pages could look and work. From keeping a similar editorial mood as The Edit to live shows.

    I. Live show coverage with commentary, Twitter, and Instagram content.      
    II. Editorial layouts.




Article content is linked to the shop. Rather than having moods or similar products the articles feature the actual styles that are shoppable.

MODULAR DESIGN Pages can be created easily from predefined elements.

    III. Modular elements that allow for variation, desktop and tablet layouts. 
    IV. Mobile layouts.




        PROCESS, The framework was first planned out to be as flexible as possible across desktop, tablet and mobile.
        The visual style followed from The Edit as these pages would be linked to from there. Consistency in visual direction was important to feel like a natural progression from one to the other.

It was important to create a system that keeps both form and function in mind.

        The outcome is a system that allows future expansion, with a balance of editorial layouts, comfortable user experience, and part of Net–A–Porter’s visual style.
        My goal was to create a framework that looks well, functions well, is easy to maintain, and create new projects with.