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.

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.

Website ideas

Posted on December 8, 2015 by Jess Claxton

As I said in my last post, my main idea is to have a version of the solar system on a grid and then to bend the grid around the planets depending on how much they affected space-time. I wanted to give the website and sciencey feel so I wanted to have a science related font for the headings as well as a science green colour for the lines of the grid. I also wanted the background to have a starry, space effect rather than just plain black to represent the solar system and space.

Firstly, I looked into finding a science based font. I did this by searching for science on dafont.com.

I felt that a lot of the fonts on that page were quite childlike which is not what I wanted for my designs as I was designing it for teenagers/young adults and felt that they would be more into something grown up. On dafont.com I found the font ‘Science Fair’. I felt that this would fit perfectly for what I was aiming for, a more grown feel but still science based.

I wanted the website to be laid out so that the solar system would have some perspective. I laid it out so that the top right hand corner would be the furthest point and the planets would be getting smaller up until the point where you couldn’t see the next planet. I decided to put three planets on the first ‘page’, where the user could then drag to move through the solar system and the rest of the planets would come into focus.

The above screenshot is my first ‘page’ of the website before I had bent the grid around the planets. When the white triangle would be hovered over, some information would appear explaining the space-time warp.

It was difficult to line up the planets so that they looked right in the perspective but also so they were the correct size compared to the ones around it. I think the above example did this quite well.