Générations
![Générations](https://cdn.iomedia.ch/media/image/0/normal_16_9/header-generations.jpg?f63f0c2065719352d199f6d63053c59c 1080w,https://cdn.iomedia.ch/media/image/0/large_16_9/header-generations.jpg?f63f0c2065719352d199f6d63053c59c 1456w,https://cdn.iomedia.ch/media/image/0/zoom_16_9/header-generations.jpg?f63f0c2065719352d199f6d63053c59c 1920w)
Overview
We support Générations in their digital strategy aimed at acquiring more visibility on the web. The implementation of our CMS developed with and for the media makes it possible to initiate a paradigm shift which tends to create editorial content on a single tool.
Concept | Information structure |
Webdesign | Design system, UI / UX, Figma |
Front | Vue 2, Nuxt 2, Tailwind |
Back | AIO V3 Headless |
Challenge
Challenges
Create an easy-to-use and intuitive product
Modernize the identity of the Générations website while keeping its essence and respecting the user experience linked to its mature audience.
Implement a flexible, intuitive and scalable CMS to manage content intuitively
![Générations mockup laptop](https://cdn.iomedia.ch/media/image/0/normal_16_9/mockup.jpg?901cbe97d9283a606eaa41bc1a8f7e5c 1080w,https://cdn.iomedia.ch/media/image/0/large_16_9/mockup.jpg?901cbe97d9283a606eaa41bc1a8f7e5c 1456w,https://cdn.iomedia.ch/media/image/0/zoom_16_9/mockup.jpg?901cbe97d9283a606eaa41bc1a8f7e5c 1920w,https://cdn.iomedia.ch/media/image/0/zoom_xl_16_9/mockup.jpg?901cbe97d9283a606eaa41bc1a8f7e5c 3840w)
![Générations web](https://cdn.iomedia.ch/media/image/0/base/gene.jpg?f23a2cc8898b87eaf6d705488ced751c 1456w)
Mobile
Mobile
Accessibility on all media
The user experience is designed to adapt to all media. So subscribers to the magazine can easily consult their content regardless of their device. Loading and display performance allows for smooth reading of content.
![Générations Mockup Mobile](https://cdn.iomedia.ch/media/image/0/normal_3_2/generations-mobile-mockup-2.jpg?65270502042453450144116086a861ea 1080w,https://cdn.iomedia.ch/media/image/0/large_3_2/generations-mobile-mockup-2.jpg?65270502042453450144116086a861ea 1456w,https://cdn.iomedia.ch/media/image/0/zoom_3_2/generations-mobile-mockup-2.jpg?65270502042453450144116086a861ea 1920w,https://cdn.iomedia.ch/media/image/0/zoom_xl_3_2/generations-mobile-mockup-2.jpg?65270502042453450144116086a861ea 3840w)
Methodology
How do we do it?
Closer to customer needs
After in-depth analysis of the technical issues and those relating to the user experience, the iomedia and Générations teams participated in workshops in close collaboration. This is how we can set the priority objectives together to achieve the result desired by our client.
![Générations ambiance](https://cdn.iomedia.ch/media/image/0/normal_3_2/generations-couple.jpg?463361a808262120197c2eb8b2d461e8 1080w,https://cdn.iomedia.ch/media/image/0/large_3_2/generations-couple.jpg?463361a808262120197c2eb8b2d461e8 1456w,https://cdn.iomedia.ch/media/image/0/zoom_3_2/generations-couple.jpg?463361a808262120197c2eb8b2d461e8 1920w,https://cdn.iomedia.ch/media/image/0/zoom_xl_3_2/generations-couple.jpg?463361a808262120197c2eb8b2d461e8 3840w)
Interactivity
Accessibility
Colors
The complementary yellow color is used for all subscriber-only content. This color is quickly identifiable throughout the site.
Typography
The fonts used on the site were selected according to several criteria. The main condition was its readability to adapt to the target audience. Also, it must be available in several different weights to add rhythm to the text.
At iomedia, we always favor fonts with a format suitable for the web.
![UX](https://cdn.iomedia.ch/media/image/0/normal_1_1/anzere-ux.png?3d53760609ee0835534ebf01538d214a 1080w)
Intuitive tailor-made interface
Let's work together to develop a tailor-made, intuitive interface, perfectly suited to your specific needs, to ensure an optimal user experience.
![Générations design system](https://cdn.iomedia.ch/media/image/0/normal_3_2/generations-design-system.jpg?77b30fc1fff0a743b1db7002bfa55833 1080w,https://cdn.iomedia.ch/media/image/0/large_3_2/generations-design-system.jpg?77b30fc1fff0a743b1db7002bfa55833 1456w,https://cdn.iomedia.ch/media/image/0/zoom_3_2/generations-design-system.jpg?77b30fc1fff0a743b1db7002bfa55833 1920w,https://cdn.iomedia.ch/media/image/0/zoom_xl_3_2/generations-design-system.jpg?77b30fc1fff0a743b1db7002bfa55833 3840w)