Creating a responsive site.

When researching into responsive designs, it was said that images can be most problematic, therefore I decided to create a website based entirely upon images to challenge my skills

I set about creating an in browser experience to allow people to grasp the enormous size and distance of our planet and the others within the solar system.

You can see the website working at different widths here (Note how the distance between the planets gets bigger the wider the browser, this is because the bigger the planets, the distance between them also grows to stick to the actual ratios that have been worked out from nasa statistics);

Schermata 2016-01-09 alle 09.56.09Schermata 2016-01-09 alle 09.56.19

and you can visit the website and check it out yourself here;

I am aware through my research that it is important to check the different browsers, operating systems and devices to make sure my site is available to the largest possible audience.

Below is the html & css code required to make this site work;

Screen Shot 2015-10-06 at 16.26.49Screen Shot 2015-10-06 at 16.26.27Screen Shot 2015-10-06 at 16.26.03Screen Shot 2015-10-06 at 16.23.47


I have used percentages on the divs that contain the images to allow the images grow with the screen size.

Percentages have also been used for the padding between the planets, this needs to be done because as the screen sizes grow, the distance between the planets also needs to grow to stay to the correct ratio. This means the smaller the screen, the smaller the planets & distance, and the bigger the screen, the larger the planet size and distance between them.

Initial Idea – Photo Experience

An idea for a photo uploading service, having read this article ( which discusses how we no longer keep photo albums and that we are living in a disposable age of photography, and such there are suggestions to lead many to believe that, in the future, there is going to be a void in history where we have no photographic evidence of us being around. Given that all technology and internet services don’t stay around forever (take a look at Kodak and MySpace for example) I have decided to build the concept of my image uploading site around this idea. I hope to create a service that allows the user top upload the images and tag them as an event, a destination, a year etc, this will allow the user tho browse through these categories and seeing what other have created. I am ultimately creating the ultimate social photography experience. Instead of being about users and advertising, this is all about experiencing photos from different events, and areas, like Google images but in a much more personal level, the images have been uploaded by users of their memories with a caption instead of a crawler finding it on the web. While this is a great service, it doesn’t resolve the issue of the images being stored online, therefore, I am going to try and provided a method of printing these images. These are my initial ideas and are than likely going to develop a lot more before final production.

Content Layout

Understanding layout of content is going to be a vital part of my brochure so that I am able to present the web trends in a readable, fashionable way. Using a mixture of images, text and white space creates an interesting layout on paper. It is understanding to balance these elements that creates a visually appealing brochure. I have found that if you are to have text, to make it understandable, the best layout is to use columns of two or three. You can see quite a few examples of this method used below;

1 3 2

Some printed material focus their efforts more upon the typography than the other aspects of the design, this creates a different feel to the printed material, you can see some examples of this here;

This example is excellent because it also shows the method of cutout text to reveal an image through the text.
4 8 7 6 5

Another important thing I noticed in print is the shapes used to add additional interest in the subject is the addition of shapes and lines around a person or object. I think this allows the reader to instantly recognise what is at the centre of attention. You can see some great examples of this here;


Letterhead Research

To create a strong, professional brand, I will need to apply the same visual identity to all of the products that I produce. Materials used in letterheads are very important, there are lots of types and thickness of paper that can be used depending on style and design of the actual letter. I spoke to a company Marqetspace, they mass produce trade printing from business cards to letterheads to flyers and asked them to send me examples of the different types of paper that they print on. A couple of things i learnt from actually receiving the products were that thickness generally provides the user with a sense of quality and luxury while the opposite is said for the thinner pieces of paper.

You can see images of all the letterheads I looked at here;

1 2 3 4 5 6

Given that the thickness gives the paper a certain quality the “120gsm CONQUEROR” has a really nice texture but I also believe that you wouldn’t want to go below 100gsm if you don’t want to loose that ‘quality’ feel. Also the fact we are in an age where we all have to consider the environment we live in it would also make your company stand above e it’s competitors if you showed that you care, one way of doing this would be to use the “100gsm RECYCLED” letterhead. Something else to consider when choosing the thickness of the letterhead would be the capabilities of the printer you used to print on the letterheads, as you need paper that would not jam in the printer. Yet another consideration of letterheads is the legal requirements as a business you are required to provide your name, the registered company name, contact number and address.

From my research about good and bad letterheads it is reasonably easy to state the plain white ones that the average company such as a bank send are considered to be the worst, while unusual shapes and sizes are seen as better design. Something I noted from the good designs is that they have all redesigned the envelope as well as the actual letter itself. You can actually see this in these two images below, they have actually redesigned the entire concept of sending out material to their customers.

3 4

I think I like these two designs and will actually use them to create my own designs when it comes to making my mockups. Something I noted earlier was to have consistency across all of the material I produce, the pieces below have actually got a similar colour scheme and design processes behind them so that as a user you know they relate to the same company.


I looked at the consistency across the portfolio of items below and I noted that it is very similar to what I was going aim for, the colours fall in line with my logo design and would work perfectly. I may consider this when making my designs.


Another consideration for the letter is the eligibility of the content, I need to make sure the content of my letter is easily readable. Firstly, contrast of colour is something I really need to to focus on, my logo is a black to light purple gradient with light purple text, therefore to get the contrast for my type and logo design to stand out on the page i need to consider the colours my letter and envelope will come in. Line height, spacing and length are all factors that can impact the readability of the page, as discussed in this article (, dyslexic people find it easier to read shorter lines, so this is something I must consider when creating the letter layout. A larger line height is better because it improves the scannability which is something else I will need to consider when devising the layout of the letter because it allows the reader to flow through the content much easier by guiding them with the layout of the text.  At the same time though I don’t want too much text on the page so it is important to have a substantial amount of white space on the page as well, by using white space in between paragraphs it makes the content more scannable. Using grid layouts is going to be very important when creating the layout of the letters and their content and this is something I am going to examine in another post.

I really like the letterhead below because it uses flat colours (something that very fashionable in design right now) to separate the company information and the personalised information for the customer.


In a sense from the name ‘formal letter’ they should be simple and boring, but that is not the case by adding interest to the layout sets you apart from the competition. Making use of the back side of the paper is just important as it again adds interest to your letter, you can see below there are a couple of examples that take advantage of the free space.

6 7


Presenting my Images

I knew that presenting my images as a collection would be important, to look professional and be enjoyable to look at. Therefore I started to research how to present my images, the first lesson I learnt was that the purpose of setting this up is to show of my work, so it had to be all about the images, no distractions. The format I had chosen for my images were square with one horizontal rectangle. I decided the best way would be to split up the images into three, this would give the viewer more visual space to concentrate on the content and would also allow me to have a set of images. First I had to chose the images in each set and which order they would go in,, this was reasonably easy as I picked images that related to the other based upon their location being close. The next step was the actual order they were to be arranged in, I wanted the leading lines to draw they eye across the content so that the person viewing the collection would be lead from left to right with visual cues.

With my images being black and white I thought the best way to present them would be to use white borders and them present those on a black piece of card. In photoshop I created the layout for the overall portfolio pieces, I used rulers to measure 1 inch borders to each image. This meant the images were evenly spread out. Finally I printed them and applied them to self-adhesive mount card. After using the guillotine  to cut them to perfect size, I was left with well present, professional version of my images.