Orbit Website

Posted on Leave a commentPosted in Channel Project

Today I finished the Orbit website. This website has been a big challenge for me as it is very different from any other site I have made because of its design style. The fact its made of lots of circles in a square browser was only the star of the challenge. Because the was no defined structure to the site every circle, text, header and image had to be individually tailored  and positioned. This made it extremely time consuming because this had to be done for different screen sizes as well to make the site mobile friendly.

I think overall the site turned out really well seeing as design is very different from all the other sites on the web. From building this site i have learnt a lot about the problems with designing sites which are hard to replicate on smaller platforms. Secondly I have learnt that when designing a website there is very few restrictions and pretty much anything you want can be achieved in some form.

Orbit Website

Screen Shot 2014-02-12 at 13.22.29Screen Shot 2014-02-12 at 13.22.42Screen Shot 2014-02-12 at 13.22.59 Screen Shot 2014-02-12 at 13.24.05Screen Shot 2014-02-12 at 13.23.23Screen Shot 2014-02-12 at 13.23.36

Channel Website 4

Posted on Leave a commentPosted in Channel Project

Screen Shot 2014-02-05 at 14.52.57 Screen Shot 2014-02-05 at 14.53.00

A Circular Image gallery would go with our circular theme but are hard to find information about and how to make one. I managed to find a image display system which I have modified to make circular, with my colour scheme and with my sizes ?? I could easily adjust this easily because its made using Jquery so I could add more images and how fast it animates. To improve this I want to add a full image display system so viewers can view the images full screen.

Channel Website 3

Posted on Leave a commentPosted in Channel Project

Screen Shot 2014-02-01 at 17.39.11Screen Shot 2014-01-31 at 23.59.15


After some reviewing of the Channel Website we have made some major decisions that will affect the colour scheme of the website. Previously on each different page when the central orb opened the colour of the segments changed. After some debate we decided that this was possible a distraction and that it should be kept all white however, I suggested that a bit of colour would add and entice people to pages. We tried different solutions but using a hover on the segments was the most effective and influential. This was done by using a simple :hover tag in the CSS which made a huge difference to the interactivity of our site.

Channel Website 2

Posted on Leave a commentPosted in Channel Project

We have decided to put content in circles as well to keep with our Orbit Theme. So far the circles are very un organized and un ordered which makes the site look very confusing and messy. To combat this we are going to overlay them so they follow around the page. However this could be problematic when it comes to smaller devices so a different system will have to be found for them.  We are using a shadow on the elements to distinguish them from each other. This comes in the form of a  “box-shadow: 0px 0px 50px #000; ” this gives us a shadow onto elements behind and provides a bit of depth to the page.


Another problem we have found with the site when adding content is the central orb. When it opens it covers some of the content which can be problematic and cause confusion. It looks ok because of the colour difference but we may have to find another solution like when it opens the content moves out the way. This would be a possibility but would require the CSS to change when the open nav tag is added.


Channel Website 2

Posted on Leave a commentPosted in Channel Project

Screen Shot 2014-01-26 at 16.05.58Screen Shot 2014-01-17 at 13.26.58 Screen Shot 2014-01-26 at 16.05.36Screen Shot 2014-01-26 at 16.05.52
When navigation through the site we wanted it to be obvious what section you’re in. We have done this by putting the section that you have navigated to at the top and the others collected at the bottom. However on the homepage they are evenly distributed showing you can go where ever you want

Secondly when you’re on the homepage is states in the central orb “Orbit” this shows your on the home page. When You navigate to a different section it gives the option “More” This is because you have navigated away from the central Orb showing you not on the home page anymore.

Some other additions to the site was changing the background style of the sections to differ on each page to show a clear difference in content and location.

Also Added the glowing background to the sections to look like they are being projected out . To do this I have to use a need CSS3 tag of        background: radial-gradient(transparent 35%, #0081d7 90%);   This produces a radial gradient with the center transparent and the transparent and the outer edge fo to 90% transparency of the colour selected. 

Going on I want to start adding content  to the site. At the moment we haven’t decided quite how we want this to appear on there like simply written with a colour contrast to the background or in a shape or similar. This will lead on to developing the site for mobile devices using Media Queries.

Channel Website 1

Posted on Leave a commentPosted in Channel Project

Screen Shot 2014-01-17 at 13.26.55


For the channel project we have to produce a website related to our channels output. We wanted to make the channel website similar to our Operating System we are designing so this meant using a central navigation. After hunting around the internet I managed to find some different way to making opening central menu’s and circular navigation. This was difficult because central navigation’s are difficult to make and are not normally used because of they restrict the user significantly. With CSS3 and javascript have allowed for the creation of complex animations and transitions allowing the menu to expand from the center, Change the display content and colour changes.

Screen Shot 2014-01-17 at 13.26.58

I think so far that the idea works well but needs development because I want to be able to adjust arrangement of the sections, add a background glow and make hover changes. I dont like that some of the words on the sections are severely slanted meaning difficult to read and I don’t like how the sections are all collected together in one corner.

Channel Project Orbit

Posted on Leave a commentPosted in Uncategorized

The channel project has progressed well in the last few day. We have spent allot of time developing ideas about the operating system and the design of it. We feel that’s it mainly is going to revolve around a central circle which when selected will allow for further navigation. From this we are going to keep the circular theme including on our name, logo and website.

From this we mind mapped several ideas for names revolving around circles like sphere, all-rounded and cimple but our favorite was Orbit. As our company would also include a mock operating system we thought it worked well including when including the OS phrase at the end. This is why we named the operating system “OS Orbit”

Channel Project Idea

Posted on Leave a commentPosted in Uncategorized

Our idea Des-fi idea for the channel project surrounds the idea of future operating systems. Our idea is to create the channel about a new operating system in the future. The operating system would be based around the idea of a central navigation which allows access to every part of the system. The channel would display this on some futuristic devices, tutorial of the system and some adverts for the system. \

We think this is a good idea because it reduces the need to produce and physical objects to present. This is one of the problems we found also we couldn’t find anyone else who was speculation upon operating systems in the future and thought this would a change to look a the software side in the future.