Modular and responsive design for Doctors Without Borders

1. Responsive

2. Modular

  • Atoms: A single button or headline
  • Molecules: A search field with button and textfield; A byline for an article
  • Organisms: A campaign area, menu or list of news
  • Templates: The page template for news articles
  • Pages: Complete pages like About or Blog

3. Content first

Next step: Integrating design and development




Activist & Web Consultant —

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Petter Joelson

Petter Joelson

Activist & Web Consultant —

More from Medium

Wireframes and Sketches

Picture of Lee, Hailey, and Erin (left to right) discussing sketches and wireframes at Modal — Coffee & Hostel

TravelPerk App system

A Breif Introduction to firebase

Design tokens in Figma — Source of truth for Design and Development