Codemotion is a platform that improves the developers’ professional growth by connecting IT professionals, tech communities, and companies.
I designed an email template and a guideline for their regular newsletter leading to articles on Codemotion website.
The challenge was coming up with a design solution that can cover 4 different situations of article layout - with/without body copy and with/without thumbnail image.
I created a design system containing an intro, several article previews, and a footer. The article preview part can be displayed in one of 4 different layouts depending on the elements of the actual article on the website, keeping the consistency of overall layout design.
The fixed elements of article layout are category, headline, writer name, and CTA. Each section of the elements is distinguished by a gap of font size, the position of copies, and an orange point colour so all the information can be clearly read at once.