The Ordinary: Packaging Design | Ai

The Ordinary

  • Background

The Ordinary is an evolving collection of treatments offering familiar, effective clinical technologies positioned to raise pricing and communication integrity in skincare. The Ordinary is a brand from DECIEM. DECIEM is an umbrella of brands focused on advanced functional beauty. Their team is specialized in materials chemistry and biochemistry pioneering innovation in skin care through their core brands.


The brand was created to celebrate integrity in its most humble and true form. Its offering is pioneering, not in the familiar technologies it uses, but in its honesty and integrity. The Ordinary is born to disallow commodity to be disguised as ingenuity.

Continue reading “The Ordinary: Packaging Design | Ai”


Interactive Portoflio | InDesign

For this final project, we were asked to create and design an interactive PDF that would work as a portfolio to showcase our best work. I decided to stick with a minimal design for my portfolio since my branding is quite simple and I want the potential client or employer to keep their focus on my work. I decided to animate some of my text and images with the animation tool in InDesign which gave a lot more dynamism to my pages and made the content inside a lot more interactive and fun. I also decided to make use of multistate objects to help create some of the slideshows you see inside my portfolio. I decided to showcase 2 pieces of my work for each of my sections, I wanted to include some animations I’ve done in the past but I felt like I was including too much content and probably should stick with my best work instead. Nonetheless, I found this project a bit challenging for many reasons, I felt like we didn’t have too much time to actually create something we were proud of but we always have the opportunity to come back and redesign the parts we feel are not good enough, I also found it challenging because I didn’t have part of my branding done yet which is one of the most important things to have to later be comfortable and start creating a portfolio. I might have to make some modifications in the future to better some things out but overall I’m happy with my work and the way my portfolio came out. If you want to see the interactive version of my portfolio click here.

This slideshow requires JavaScript.


Composite II

For this assignment we had to create and album cover and website for an artist of our choice. I choose RY X and his most recent album “Dawn” since its one of my favorite albums ever. Ry Cuming better known as RY X is an Australian singer songwriter and musician, his genre of music varies between alternative, rock and pop, one of his hit single “Howling” was featured in the movies Taken 3 and Everything, Everything, making him gain a lot of popularity in the last two years.

I decided to do a Vinyl version of the album for my print component, it took me 3 days to complete the cover and back cover of my album plus the booklet, I already had an idea of what I wanted my album to look like so it was pretty easy to put the design together afterwards. I wanted my print and web components to be consistent in terms of design, color palette, imagery and fonts so I ended up using the same fonts and palette for both of my album and web.

Design process

I wanted my album cover to look quite unique so I went to Photoshop and played around with some effects and double exposure to get the results you see in my final cover, then I matched the colors of my images to the ones of the color palette I already created so everything looked consistent.

Web component

This part of the project was the most difficult for me to do because even though I’m average at coding trying to get my website to look the way I wanted it to look was a one of the hardest task. I began by mocking up and wire framing my website so I knew how to place all my elements later, that helped me visualize how everything was going to look, basically I was making my life a little bit simpler by knowing my limitations and knowing what I could and couldn’t do in terms of design to code. Then after I had my whole design mocked up I went in and cropped and resized all of the images I was going to use to have all of my files ready to code in. The most difficult part was trying to figure out the column system and alignments in my sections, since I wanted everything to look quite clean and minimalistic It was a must for me that every section and objet aligned perfectly with the rest of the other elements and the entire site. Here’s a link to the website if you want to check it out RYX 

I’m really proud of myself for finishing this project, to be honest I found it easier than I thought it was going to be, I know I want to keep practicing my code since it is still kind of difficult for me but overall I’m happy with how my project turned out.

Design to Code | Prototyping


This assignment was a somewhat difficult for me to do because coding is a bit of a challenge for me, even thought the portfolio mockup itself had very minimalistic design taking it to code was complicated, specially the Services section since it had to be built up with columns; columns is something I have to get accustomed to, is still very new to me and I’m still trying to figure out how they work, but thanks to the help of some of my classmates I was able to understand it a bit better and try and code it in. Even thought we did the first section of the portfolio with Mark I found myself following along and understanding what I was coding which was very surprising, I’m just so surprised I’m not a mess at coding at this point considering I never took a coding course in my life. I’m a bit impressed with myself for knowing how to code some things now. This is all very new to me but I’m so glad we get to take courses like this and learn how websites work not only in their code form but also in a design aspect. PS Brackets is way better than Dreamweaver.

Magazine | InDesign Project

For this assignment I chose a magazine that combines music, art, fashion, film, literature and all things millennial in one. Dazed (formerly Dazed & Confused) is a bi-monthly British style magazine, founded in 1991 in the UK. I wanted to do this magazine in particular because I really like the way they layout their content, their articles are always very clean and minimalistic and they focus a lot in coming up with good and on trend design styles, that makes every single publication different always creating a visually stunning magazine. For the content I mostly used articles from their website to stick with their same style, I had a bit of an issue with their images because even thought they were on the bigger size the resolution was pretty low so I had to do a lot of research to get similar images that could work with my articles and that would also look good with in the layout. I made use of their same fonts for headers and body text as I wanted my magazine to look like a real publication. For the ads I made use of my composite week 1 ads since they already followed the style of the magazine and later created other two that followed that same style. Although this project was very challenging for me because of the printing aspect, which was something I was concern about given I’m not very good a paginating or putting together magazines at all, the end result was really gratifying and I’m very happy with how my magazine turned out.

This slideshow requires JavaScript.

Wireframe 101 | Behance

I’m a little late but here it is. For this assignment we had to create a wireframe version of a website of our choice and since I’m a design freak I chose to do Behance, if you don’t know what that is, Behance is a website that let’s you create an online portfolio to showcase your work. When you sign up you can see the home page is composed out of a main nav with their menu, logo and social media links, then in their container they have sections divided into columns which represent every users content (basically a piece of their portfolio) these sections are composed with and image, buttons and text. And at the bottom they have their main footer composed with buttons, social media links and their logo again. This particular assignment was very helpful for me since mocking up and wire-framing websites is something that really interest me and something I find myself thinking about and sketching out often when browsing different websites. I didn’t know you could built a website like this at first, it really speeds up the design process since you already know how many columns you’re going to do, the size and weight of your fonts, size of you images, etc, is a time saver for sure.

This slideshow requires JavaScript.