Website 2.0

Posted on December 9, 2015 by Jess Claxton

After creating my app and poster, I went back to my website as I was still having trouble with bending the grid in InDesign. I had tried all sorts of methods, including bending it in Photoshop with perspective warp and with puppet warp, but none were working the way I wanted them to.

I then decided to try and create the bent grid using the method I had used for the poster, which was the “bucket” method – where the the planet sat in a circle of lines and then the grid would come off around it. I had planned to lay the solar system out horizontally, so the user would move across the screen from right to left. This way of creating the bend in the grid worked really well and I was happy with how that part came out. However, when it came to drawing on the rest of the grid, I found it difficult, firstly just to get my head around how that would work with the perspective, as well as how to join it up with the planet next to it.

I decided to scrap that idea and try it using just the “bucket” method.

I think that this looks okay and is fairly easy to understand. Because I had almost completely got rid of the grid, I added more information at the top, where the user can hover over, to explain what was happening.

My website will also act as my infographic as the bent “bucket” grid will visually explain to the viewer how much each planets mass bends space-time. This will be a fairly easy and simple way to explain it to the viewer, who I have targeted it at teenagers and young adults. I think that doing this visually would be much better than explaining it in words as the user can actually see how much space-time is bent rather than just imagining it.

Making the app

Posted on December 9, 2015 by Jess Claxton

I had a fairly simple idea in my head of how I wanted my app to look. The app would look more similar to the poster, as it would have the same sort of perspective, although it would have more information on as it would be interactive.

The app uses many of the same elements as my other designs. It will have the triangle with the drop down information when the user clicks on it. It will also have the information about each planet and some instruction on how to use the app at the bottom.

These are my three ‘pages’ of my app so far. I decided not to make a ‘page’ for every planet in the solar system as they would all look fairly similar.

I incorporated the facts about each planet, which would only appear when that planet is on the screen, as this would keep the continuity between the app and the website.

Making the poster

Posted on December 9, 2015 by Jess Claxton

Making my poster was fairly straightforward as I knew what I wanted to do straight away. I had drawn a very rough sketch of how I wanted my poster to look so it was fairly easy to make.

I used the same background for the poster as I had done for the website, along with the same font (Science Fair). I then placed on the planet, I chose Earth as it is the planet most common to everyone, and drew a guide circle around it so that I could easily draw the bending grid around it. Doing the grid this way was fairly easy and I thought it looked most effective, although was incredibly annoying layering and arranging the different lines and whether they needed to be in front or behind of the planet. I decided to try this method out on my website at a later date.

In my initial sketch I had used the white triangle, which I had planned to use on my website and app to signify more information, but I felt that there wasn’t enough space for it and it wasn’t really necessary on the poster. I felt that it wasn’t necessary as both the website and app will be interactive, and on both of these the user will hover over, or click, on it and the information will appear below. On a poster this is not possible so I felt that the triangle would be unnecessary and would clutter the poster which I did not want. I wanted it to be fairly minimalistic, like the first bent grid inspiration image I found on my first ideas post.

Once I had positioned the planet and the grid I felt that there wasn’t enough space for the information about the space-time warp at the top so I placed it at the bottom.

I think that this fills the space better and doesn’t leave any huge empty spaces but also positions everything well.

App and poster ideas

Posted on December 8, 2015 by Jess Claxton

My main idea for my app would be fairly similar to that of my website, to keep some continuity. It would still involve the space-time warp and bending the grids but the user could expand the size of the planet until it reached the size of the next one, where the information would change and tell the user about the planet on the screen. For example, the smallest planet (not including Pluto) is Mercury. The initial screen would say a bit about Mercury, the same information that will be on the website. The app user would then drag out from the middle of the planet and the planet would expand until it got to the size of Mars where the information would change to that of Mars and so forth.

The perspective will change on the app, rather than have it all disappear off into the top right hand corner, the grid will disappear into the background about halfway up the screen. The planet will then sit in the middle of the screen and the information about it will be below.

Again, I wanted to keep some continuity between my three designs so I decided to go for the same theme for my poster. My poster will consist of one planet in the middle with the grid bent around it, proportionate to how much its mass would bend it. I don’t think it will have the information about the planet on the poster but instead will just say some information about the space-time warp and maybe promote the website and app.

I think I will change the perspective for the poster but have it fairly similar to the app.

Bending the grid

Posted on December 8, 2015 by Jess Claxton

I discovered that the most difficult part of making my website was going to be bending the grid so it looked good and as if the grid was actually bending in relation to the mass of the planet. My original plan was to draw the lines straight on InDesign and then bend them using the ‘convert direction point tool’. This turned out to be way more difficult than I thought it would be.

Although it worked, I don’t think that it looked as good as it could be and looks quite messy and unprofessional. It also made it difficult to do the same thing to the planet next to it and all the bends crashed into each other. I also feel that the grid doesn’t look like it bends underneath the planet from its mass and so I tried to come up with another idea.

My second idea for bending the grid was to draw a circle around the planet as a guide and create and circle shaped grid around it and then draw the rest of the lines off from that. This worked to start with until it came to deleting the guide circle and drawing the rest of the warped grid and straight lines. When I came to drawing the straight lines out from the bent ones I got confused and none of them lined up correctly so I decided to scrap this idea.

I then became fairly stuck for ideas and decided to move and create my poster and app.