Week #5: Editorial Design
The challenge of the 5th week in Ironhack Lisbon UX/UI Bootcamp was to design a responsive online platform for a magazine directed to meet the needs and goals of one of the presented User Personas. We picked up Elaine, "The Eco-Friendly Researcher".
My partner Brenda Sandoval Cuervo and I had to deliver a consistent, branded, and engaging experience and all the documentation that would allow the project to continue after our intervention as UI Designers.
“Your brand isn’t what you say it is, it’s what the say it is” — Marti Neumeier
The kickoff was to think about the concept: let's talk about Sustainability. We defined the values of the brand with the ideas below:
Our mission is to inspire people with stories that are changing the world in a positive way. We need anchor points and more durability. In this sense, grows the idea of sharing assets and experiences, with a collective responsibility concerning for naturalness and simplicity as well.
This is a kind of reaction of the increasing fluidity of life that everything changes and disappears fast. This conscience leads us to a new kind of involvement, a Human to Human approach. The collections, the food waiver, the closets, the garages don’t need to be full of belongings that we don’t use or even don’t demand. Let’s reconnect with the essential.
With that statement, our mag was born: Footprint, a Sustainability & LifeStyle Magazine. And the challenge here is to translate that to our design.
Responsive web design responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device. We started the design for mobile and then moved to the desktop version. Start small, it’s actually harder (the hardest part should be done first).
Mobile first!
Moodboard and Benchmark
For the generation of ideas in the early stages of conceptualization, we created a Moodboard to transfer the right mood, get inspired and bring the emotions expected from our magazine. We also analyzed the style (colors, fonts, icons, buttons) of five similar magazines about sustainability (Ethos Magazine, Nordic Way, The Regeneration, For Magazine, and Beside).
Style Guide
With Style Guides, we can keep the appearance consistent by creating a set of rules that follow the design. The process becomes flexible, easily maintained, and coordinated. It will also cut out the time we spend making design decisions. We don’t have to reinvent the wheel every time we add a new page or new feature!
Here are the UI elements for our brand’s identity:
An important part of the Style Guide is the Typography.
And… tcha-ran! Here is the Prototype of Footprint in Desktop version, with some animations and even an advertisement popup.
Learnings
- Figma
To work in pairs, Figma is the best tool ever! We could share easily the Library, follow the design of the Mobile and Desktop version in real-time, and work together with any sharing plugin needed.
- Principle
The animation is quite hard to learn in the beginning but bit by bit (and with a lot of dedication) I think I can improve this. Animation provides meaningful information related to action. It's related to the real world and the way we perceive the movement. It makes a huge difference in the final product.
- Consistency
This project was all about being C O N S I S T E N T. Capital letters just not to forget how important is this concept in design, especially in responsive web design projects. Consistency is key to good omnichannel UX (Familiarity and Confidence, Learnability, Efficiency, and Trust).
