Designing adaptive reusable components & pages

Information architecture, design component, reusable components, content model, responsive design

Friday 24th - 9:00 to 12:00

I will teach you a step by step framework to help you design reusable components that can adapt to different layouts, from responsive to container queries. We will start with user goals and user flow, build a strong re-usable content model, prioritize this, and re-use for different components in different contexts and go all the way to low fidelity wireframes to share with your development teams.

What the attendees will learn

Attendees will learn how to plan their content and information architecture to help them build more re-usable components.

They will work in groups on small information architecture exercises on my Miro board template. An empty version of that template will be available after the workshop so that they can re-use this method in their daily work.

Disclaimer: this is a design/information architecture workshop, we will go up to wireframes, but there is no code involved.

Requirements

We will use an online whiteboard tool: Miro. Participants need a laptop with a browser. It would be nice if they can also get familiar quickly with the tool before. They don’t need to create an account, but it would be better if they want to duplicate the template to re-use it after.

No prior knowledge is required. But some basic knowledge on user research and information architecture will help. Please note that we won’t enter into the details on how to conduct the research, though.

Workshop Plan

  • Introduction to the workshop and tools (15min)

  • The Core (1h and 15 min)

    • Modular Information Architecture
    • Start with user needs and goal
    • Build a user flow
    • Build content model

Break (15 min)

  • Hands-On (1h and 15 min)

    • Build content priority
    • Build a system of modular components
    • Build the full page
    • Re-use the components

Q&A (30 min.)

Target audience roles

Designers (UX, UI) and front-end developers who want to find a way to identify and plan better reusable components