DESIGN COMP- D&AD design application

On the images down below I have a detailed explanation of the design building process.

The design of it was a very complex experience since all possibilities of the user need to be proper linked in order to create a useful tool.

The system works on a very simple idea where part of the connections between pages are predefined and the text, media and layout become the main focus for the user.

After brainstorming and experimenting this several time I think I have built a very complete system.TEMPLATE_EDITING_TOOL-01.jpgSquarespace_Frontend_5.jpgSquarespace_Frontend_3.jpg


D&AD- Research

Because my briefing is to create the ultimate portfolio experience I had to look through the existent platforms where it is possible to create a portfolio/ website.







Captura de ecrã 2017-02-05, às 16.22.33.png


Captura de ecrã 2017-02-27, às 11.28.24.png

Wivi (wordpress)

Captura de ecrã 2017-02-27, às 11.29.09.png


After looking at the overall topic of portfolios and some of its edit features I went through squarespace template in order to understand the different visuals powered by them and what pages are used.

Captura de ecrã 2017-02-05, às 16.35.54.png


Captura de ecrã 2017-02-05, às 16.47.35.png


Captura de ecrã 2017-02-13, às 21.56.05.png


Captura de ecrã 2017-02-05, às 16.42.42.png


Captura de ecrã 2017-02-05, às 18.23.02.png

These research was very useful because could make a list of the features seen in the portfolio and then start to cut it down into an easier system.




DESIGN COMP- D&AD image mode

Once the user wants to insert images of their work to the portfolio there is a process to follow that allow the editor to transform the images as he wants to.
First the sizing has two modes. With one click the user will be able to resize the size of the actual image, on the second one with two clicks the box of the image also called mask will turn editable. This way you can easily lay or images aligned without distorting them.

The second part of editing an image is that, as it happens on social media such as Instagram, you can apply filters  and adjust contrast and brightness.


Down below are two examples of possible images you can get by the edit

HOT HOUSE- illustration brief


After a discussion with my peers and tutors I think I finally came to a possible outcome.

With Alistair hall everything was looking clear and some of the details and tweaks added by him seem to have taken this project to a new level.

As the main aim is to print this project with the riso print the editorial piece is using a very simple colour palette of black and green.

With this colour I am exploring how can i define levels and hierarchy on the different elements. This is how it looks so far comparing to the previous version.

HOT HOUSE- illustration brief

It is taking long… I have been playing around and it seems that I can’t make it right. After making my on illustrations I felt they were rubbish. So I decided to ask to one other student that could do it instead.

Karl Fitzgerald is a second year illustrations studio and his quick illustrative style in his reportage drawings  looks great for what I am looking for!

Theses are his illustrations.

A big thanks to him for his availability to contribute.



To understand how I wanted to build up my campaign I  had a look on some other campaigns that are trying to raise awareness about the same topic.

What I found from my research is that all of them have this negative character that makes me turn the face and not look at it. Although that happens because it does create  intriguing feelings.

In my campaign this will not happen at all, In my campaign the tone is very gentle and is not looking to motivate through the negative aspect of the problem.

It will be engaging and will require physical availability from the viewer.



DESIGN COMP- D&AD edit mode

For my project I am trying to inovate the all editing system on the fronted of the website.

Although There’s already some similar aspects in other websites my one tries to create a simple user interface.

My interface starts, by a simple tool with 6 options.

Motion effects,


Media box,

Text box,blog-01.jpg

As shown on this image the icons underneath are the one that will allow the user to insert content on the page.