Website for One Vision

After completing the logo, and brochure I created my website. It is my first time trying to make my own website on MUSE. I was inspired by one fifty-one company website. It’s plain simple and professional. I decided to create something similar. I wanted the website to be simple, noticeable by the three primary colours. My background is white because I think White is the only colour that goes with the three primary colours. I didn’t want to create a loud going website but something happy, calm and professional.

While making this website, I didn’t have enough renders so I added placeholder images. I did some research on layouts and found one that I really liked.Screen Shot 2016-11-18 at 16.21.14.png

I wanted this type of layout, so I tried.

Screen Shot 2016-11-30 at 21.05.17.png

But it didn’t work out, and I needed renders, the placeholder image didn’t really fit well as it is too dark. So I decided to do another type of layout.

This layout was my final layout.

At first, I created many different pages but I didn’t have enough time to finalise each page, so I decided to put everything on the homepage, this way it is more formative, and what I put on the homepage, are just all just simply an intro to one vision. I wanted to engage audiences by showing pictures of the site. While doing the website, I showed my tutor and he said there should be something unique about it that stands out from any other  website that is also advertising a building. So I looked back to my formative presentation and thought I should add my rooftop garden because it is something unique. And this rooftop garden will be there while the construction is still in place. This rooftop will be open to the public first, it will be a marketing point, where the public could experience one vision theme and have the chance to see the construction from a top view.

While creating one vision website, I went on and looked at tutorials about scrolling effects. At first, I couldn’t do it because my screen size was not in the correct size. But after finding the right dimension, everything was easier to do. But I did it too much so I had to keep some elements stills, this way it would be easier for the public to read and see.

Screen Shot 2016-12-01 at 20.30.51.png

This is my homepage. I put one of the renders the architecture group sent me because I think the render looks pretty decent. My enter button will change colour as I roll over it.

Screen Shot 2016-12-01 at 20.32.38.png

The colours are all in the theme of my logo.


These are thumbnails of my website. The first few slides are an introduction to the three section of One Vision. Theres a request call back form, which allows to show how many people are interested in the housing, market and viewing the rooftop garden. This would also show statistics how well One Vision is marketing. And at the end I will add all the renders the architecture will give me. The reason why I put it at the end is because they are sending renders really late, three to two days before my summative, therefore I cannot wait for them, So I had to use placeholder images of what I think the housing, market will look like. This means I don’t have to worry much, as the stress level is already high enough…

Overall what I am missing are renders for the community centre, the whole site is community based, bringing everyone together.


The weekend before my deadline I received renders from the architects. However these renders are not there final ones as they are still working on it because there summative is a week after hours. This collaboration has been so unorganised. We can’t include any renders before our deadline. However I put there renders into my website in the section of ‘Our plans now.’

From this brief I learnt that you can do screen recording with quick time. I couldn’t export my website therefore I previewed my site and did a screen recording showing how my website works.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s