IXD103 Project 01 – Design application (After group critique and changes to wordmark/ colour )

On Monday we had a critique session in class, where my teacher and fellow classmates gave some advice on going forward with my brand.

I placed all my assets on a miro board for this critique;

At the end of the critique session, I was thankful to have gained some very valuable insights and advice from my class and my teacher.

I asked in class for my classmate’s opinions on whether I should have my wordmark in black or blue. And an overwhelming majority said black because my logo mark was already so colourful, any other colours would be too distracting, and the colours of the logo would be fighting against the colours of the wordmark.

Another major feedback I received was on the colour of my logo. The feedback was that the colour combination of Cyan, magenta and yellow could visually remind people of a printing company brand.

This was something I had never considered before, but when the feedback was given I also began to see why. I did some research on the top ten printing companies, and I did find one company called “Vistaprint” which supports the argument;












While thinking about changing the colour of my logo, I spent some time thinking about what I liked about the current logo colour, so as to not lose sight of it what is good about it when I re-colour the logo. There were 2 things really liked about my current colour scheme;

  1. Bright and cheerful, I like how the logo gives a nice burst of energy and colour. Since triangles very much symbolise energy and set things into action, I Won’t want something that looks too dull.
  2. the 3 colours made a nice spectrum gradient, it is a nice touch that  I used all throughout my design. Thus I would like to keep my logo in 3 separate colours, and the colour has to make a nice gradient.

I tried out different combinations of colours in Figma. I tried out mainly shades of green, blue and red/pink/oranges, becue these are the colour which I think are best associated with my brand. The red/pink/oranges

and I picked out my favourites;

I tried out the gradients of those colour combinations in Fimga;

Out of these gradient, my favourite is the pink, blue and orange below;



Now that I have decided on my logo and its’ colours, I wanted to quickly explore the realm of moving digital visual effects, motion graphics, and logo animation using Abobe Aftereffect.

Since this is my first time using Aftereffect, my main focus will be learning the basics of this software, getting myself familiar with navigating the tools and hopefully by the end of it producing a nice motion graphic for my logo.

My learning of Aftereffect began on youtube, my favourite place for learning new software. I spend quite a lot of time looking through beginner tutorials, and this video by Ben Marriott is one of the best tutorials on youtube for those hoping to understand the basics of how aftereffect works;

( source link: https://www.youtube.com/watch?v=hb2bbfiNBXA&t=189s&ab_channel=BenMarriott)

After I got more familiar with Aftereffects, it was time to decide what sort of moving effect I wanted to add to my logo. There were a few possible effects that I had on my mind. The first one was the raindrop effect( making the logo look like glass and have water running down it), the next was a very cool light effect in which a trail of light traces the logo, the last one was the gradient effect ( changing/moving  gradient in the logo background)

By now, I have realised that animating my logo will be very time consuming, especially for someone like me who has just started to grasp its concepts. Thus I know that I must choose carefully what effect I want since I know that there will not be enough time to experiment with all the different cool effects.

In the end, I chose the gradient effect for my logo, this is because my logo and my brand overall are very colourful. I think making use of the 3 colours in my logo and having them move around the background would be very fitting for my brand.

I have to give credit to the following video by Oliver Randorff, I followed his tutorial step by step to create and applied his techniques to my logo to create the final product;

( source link: https://www.youtube.com/watch?v=KIJ0l9nNE3g&t=275s&ab_channel=OliverRandorff )


So first I imported my logo into Aftereffect, I had to learn how to import my art in an acceptable vector form so that I can change its colour and size in Aftereffects;
















Next, I gave my logo a light base colour. This is the colour that will be in the background of my gradient, thus it needs to be a light colour. If the colour is too dark it might show through my gradient;



Next, we come to the most time-consuming part. I had to create multiple circles of different sizes and different colours ( but only using the three main colours of my logo). Afterwards, I had to animate each individual circle by setting the rotation effect to “Time  x random degree of rotation” so that each circle would rotate randomly in the background;
















The screenshot above showed the mistake I made during my first attempt. As my circles were so small and didn’t cover the whole logo, afterwards when I aminated the circles and confined them to the boundaries of my logo, a lot of background space was shown because as the circles randomly moved about there were gaps;


Thus I had to go back and add in more circles, in the end, I found that I had to add in over 80 circles to make sure that there were minimal gaps; I realised that the smaller my circles are, the more likely that as they move around they would not touch one another and leaves gaps where the background colour would show through. I have learned from this mistake and the next time I will do bigger circles.

Next, I applied the gaussian blur effect to blend and blur the circles together;


and confined the circles to the boundaries of the logo;

















The last things I had to do were all decorative elements to my logo, such as adding drop shadow and luminous overlay etc to make the colour pop more;


Once I was happy with everything, I rendered my animated logo and imported the file onto an online Abobe service which turns videos into GIFs. However, i found out the hard way the quality was not as good as i expected;



Thus i imported my video to photoshop under my teacher Daniel’s instruction. In this way, I can convert the frames of the video into individual layers, save them under web (legacy) and turn it into a GIF that way.

I can see that the photoshop version is much cleaner and more clear.




Leave a Reply

Your email address will not be published.