Bootcamp Report #4 : Let’s Make Beautiful Things!
Episode 4 of my UX/UI Design journey at Ironhack Paris.
After last week’s UX presentation of my quit smoking app, Smoky Vault, I was ready to start the UI Design module, learning how to make beautiful interfaces to convey emotions to the user.
Day 16 : UI Components and Aesthetics Principles
We started the week with the differences between art and design, but also between visual design and UI design. We also learned more about what makes a successful brand, and its attributes. Lastly, we came back with my group on the Bio C’Bon project to focus on the UI side. We started by making a moodboard, including the colours, font, and images that would be representative of our new Bio C’ Panier feature
Being from a marketing background, I was already quite familiar with the branding attributes, but I was excited to create moodboards as it helps to project oneself in the UI we want to design. I was also happy to use Sketch again, as I learnt to use the software a few weeks ago, during the prework.
Day 17 : Let’s get technical.
It was definitely a full on day. We started the day with some technical information about screen resolution and its impact on design requirements. We then learnt more about the grids and the frameworks specific to each platform (bootstrap for web etc…). We finally discovered the use and meaning of colors and typography in UI design, and started to think about the color palette we would use for our Bio C’Bon project.
Not being from a graphic/visual background, I was positively surprised to discover that UI design was based on lots of guidelines, frameworks and rules to respect, depending on which platform you design for. There is not room for chance in this, and it pleases my rational/analytical mind!
Day 18 : Make UI design “matter”.
We continued learning how to design the different UI elements such as icons and forms, and best use shadows and lightings to make these elements feel more real to the user. We then discovered the concept of design systems, and specifically Atomic Design: how to organise every element of your UI into atoms, which when put together make molecules, organisms, templates and eventually webpages. Could we then compare UI to living matter ? The idea behind this system is to make the UI scalable, consistent over time and across devices, and can be easily communicated to developers and other designers. I applied this system to the redesign of the Bio C’ Bon responsive website, and started by creating every single atom: icons, text font size, colors etc…
My analytical mind was really pleased to learn more about design systems. It definitely gives a framework, to start designing UI. With atomic design, I found quite challenging to start thinking of every single element without having a clear view of how all these elements would act together on the final screen. I still got into it, and also loved using Sketch to discover more advanced functionalities such as nested symbols!
Day 19 : Know who you are designing for
As a UX/UI designer, you don’t create app screens/web pages to frame them and keep them in your living room. You usually design for a specific operating system (iOS or Android), which each have their own specificities and user targets. We learnt more about the UI differences between the two OS, and the strategy related to design and development for these platforms. We also discovered the concept of hybrid apps, with frameworks such as React Native and Ionic: they let you design and develop your app once, to then deploy it on the different platforms. Knowing how much money can be saved using these tools, it is definitely worth knowing and implementing!
As a smartphone user, it was super interesting to discover the differences between Android and iOS in terms of interface, design elements and interactions. I am definitely keen to know more about the hybrid systems such as React Native, and see how they work in a business environment.
Day 20: Atomic Design and … Football
We started the day by learning more about the specificities of iOS human interface guidelines. We saw the evolution of the iOS design over the years, going from skeuomorphism (iOS 6 mimicking a “real life” design) to flat design in the most recent versions. We then focused on building our design system for the Bio C’Bon website, and I was slowly building the different atoms of the interface into molecules and organisms. We concluded this day with something everybody had been waiting for: the World Cup quarter finals with France playing against Uruguay! Needless to say everyone got super excited to see France winning, and getting into semi-finals! Allez les Bleus!
My key take aways from this 4th week
As I reflect on the past few weeks at Ironhack, I can’t believe how time has flown by! I learn new things every day, and my brain is definitely grateful! Here are the main things I learnt during this week focused on UI design:
- Inspiration: In order to become a good UI designer, you always need to train your eye, look out for great visual interfaces and patterns. By doing so, you identify the elements that make these interfaces so appealing and integrate these ideas into your work.
- Structure: As a UI designer, you need to be structured in everything you create. Atomic Design and layout grids give you a framework to design the best UIs that will convey emotions and push people to use your website/app.
- Design for everyone: Learning about website/app accessibility, it opens new horizons, when designing for visually or physically impaired people for example. This actually contributes to improve the experience for everyone!
Thanks for reading this 4th Bootcamp Report! Feel free to clap, applaud and leave comments if you liked this article! Let my journey to become a UX/UI jedi continue!
