OUGD504 Design For Web - Development

For the making of my website I had planned to mimic the set up of other news websites, to promote and exaggerate the fact that this is a about motion graphics news. However, at the same time I wanted to keep the set up fairly simple.

I initially planned to have the title and navigation in Times New Roman in order to embody a newspaper.

However, after I coded in the title, it immediately made the page appear dated and dull. I decided to go more minimal, and then created my own typeface in Illustrator using Helvetica Neue as a base.

I copied this type over to the navigation buttons and was overall much happier with it's appearance. I inserted the buttons as roll over images, that had a stroke running through the middle when the mouse hovered over it.
I made the title a link to the homepage, which I expected would be obvious but would need to check during a crit.

I wanted to ensure that the general set up of the website was spaced out and clear, so had to take care with padding while coding the site.

I wanted the homepage to have the 'Feature of the Day' as the main focus, and to also bare some other links to highly 'rated' and highly considered videos. I followed my scamps and split the page into a left column and a right column, allowing the right to focus on social media and networking, with the main content of the page occupying the left column.

I used a blog on vimeo called Purely Motion Graphics which allows people to upload their work to the site to be commented on. I copied the embed code on one of these videos to be the 'Feature of the Day'.

The video was not showing up but in the Dreamweaver sessions Simon said this was likely to happen before the website goes live, so I moved on to the other videos.

For this, I chose to use rollover images that gave a brief description of the features, but was primarily a link to an external page that focused on the designer and the release of this feature.

Here I had a problem getting the page to scroll. After asking some people about it, I was under the impression that just making the container longer than the view of the browser will allow it to automatically scroll, but this still didn't work, even when I tried with different browsers.

I managed to find some help, and inserted 'overflow:scroll:' into the CSS code for this part of the page, which not only allowed for the content to scroll, but kept it restricted to that section as oppose to the whole page.

On the right hand column, I inserted a link to a Facebook fan page I had created for the website, in the form of another rollover image. I also added a direct link to the Purely Motion Graphics blog for people to view more information on the designers and videos. When I have finished inserting all the relevant content I will think about adding a Twitter feed here.

After coding the homepage I moved on to the history page. The content was derived from much of the research I did over the Summer, and some more specific to this topic once I chose it. I kept it quite brief, with the content on the left column.

For the right column I thought I could set a menu option that allowed the viewer to jump to each subheading of the history section. I did this by creating external page with the relevant content on them.

For the subscription page, I wanted to add some 'Textarea' and 'Text Field' options, to make the page appear as though it was a realistic form to be filled out. I did this by going to Insert > Form and found the text area and text field options.

I added a drop down menu that allowed for the viewer to select the area of motion graphics they are most interested, with the intention of that subscriber receiving the most information about that topic.

I set up the News page in a similar format to the home page, with rollover images that show recent releases and updates. These link to articles that give more detail on the chosen subject.

The rollover images were those that I had created in Illustrator beforehand.