The last assessment we had to hand in for Interactive Design was the creation of a website with a collection of images. These images had to be all related and a general theme had to be considered. The theme was Scandinavian Design.
As an interior designer and an architect, I have always been amazed by this style, specially in the last few years in which it has become more and more important. One of the things I like more of this style is the simplicity behind it all. They do not need to use a lot of shapes, forms or colours to give an idea, to send a message. They use the exact number of elements to convey an image with enough impact.

For this assessment I tried to achieve that in the general design of the website. The wireframe was composed by a banner with the title, underneath the title explaining what was going to be found on the website, and at last, the 9 grid images that would explain each of the principles.
The colour palette is very neutral, with padding around the images that allows the viewer to focus on them one at a time. The font selected is also very simple, and the spacing between enhances that idea of clean and simple.
Each image can be selected, and a new page opens in which each of the principles is explained. The text is included as another image, with a simple background and a black coloured font to create contrast. By applying the text in the centre of the page, the viewer immediately sees the text.

Each page has the option of returning to the home and the cute image of the banner is repeated in all the pages, creating remembrance from one page to the other.
It was a very difficult assessment, but in this one I tried to use more the inspect tool in the page. This helped me understand more the interface, understand what would happen when I started adding certain elements.
One of the most difficult things was creating a link to the image without loosing the flexbox attributes already added to the image grid. I was trying to use one of the first codes we did in class but after hours of not getting what I wanted, I decided to look at Code Pen and saw some reference codes that helped me understand how to write it.
Here is the link to each of them:

It ended being a nice, clean and simple website, with enough information for the viewer to understand where he is, were he can go and what information can be found with each image.
Comments