I have created two PDFs that will explain the interactivity of my website and app.
Website -> website pdf
App -> app pdf
Tag Archives: website
Group feedback
I made a short presentation to show the group my work for feedback which you can see here –> space presentation
This feedback was useful, as I not only got feedback from the group on my own ideas, I also managed to get a bit of inspiration from other group members work on little things, for example, adding in the top status bar at the top of the apps, or creating an app logo for the app store. All of this was useful.
A piece of feedback I received was that the perspectives on the website were slightly off, although worked, and to counteract this I could make my website 3D. This would involve more interactivity where the user would drag around and see the whole planet from every side. I think that this would be good and would make it even more interesting for my target audience.
I also asked the group whether they understood what my website was trying to explain with the grids as I was previously unsure about whether this was understandable. The feedback that I received was positive and so I will keep it this way.
There are still a few changes that I would like to make to my designs but only minimal ones. I may also try and create a logo for my app.
Website 2.0
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.
Website ideas
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.
My idea
I became stuck for ideas as I felt that I didn’t understand the theory well enough so I did a bit more research and found this page on the BBC website. I particularly found the main image very inspiring.
I liked how minimalist the image was but how it also explained the idea of the space-time warp fairly well.
I decided to look into the space-time warp and see if I could make my website around this. Although, I do not understand a huge amount of the space-time warp, I do understand that the mass of the planet has an affect on the space-time ‘grid’ and so bends it. I feel that I know enough about the subject to be able to explain it simply to teenagers/young adults, who would be my target audience.
I found this video (up until about 4:00 minutes in) on gravity and the space-time warp which really helped me understand more about how the grids bend.
I thought it would be interesting if I had the whole solar system on my webpage and bent a grid around each planet, showing much it would bend depending on the mass of the planet. To make it more interactive I thought that it might be interesting to have the user be able to drag through the solar system so they could see each planet up close.