• Context

 

Codemotion is a platform that improves the developers’ professional growth by connecting IT professionals, tech communities, and companies.

​

​

• Challenge

​

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.

​

​

• Solution

​

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.

​