Web

Design for Web/Motion Graphics News

news

Graphics in Motion

Graphics in Motion

news events history subscribe

news

Graphics in Motion

Graphics in Motion

news

news

events

history

subscribe

events homepage History

events

history

subscribe

events

history

subscribe

subscribe

Site map

The site map shows the set up of the website and how each page will link to the homepage. My root folder will have all the pages for the website, and will include a separate images folder with rollover images.

Scamps

The scamps show the basic set up and aesthetics of the websites. They exhibit the format and layout that the information on the website will take and how the information will be organised. I made a few examples of the layouts that I felt lent themselves to the concept the most.

Design for Web/Motion Graphics News Container - 1600px x 800px Pages: - Homepage - Newspage - Events page - History page - Subscribe page

Colour scheme:

Navigation bar - centered under the logo with roll over images for buttons.

Content - Summer brief research and extra research into motion graphics Fonts used: - Times New Roman for logo - Times New Roman for body (12pt) - Helvetica for buttons

Text - #000000

Background - #FFFFFF

Website Specifications

I looked into the specifics of my website by identifying the fonts I will use, the colour scheme, the logo and the layout specifics.

Design for Web/Motion Graphics News

news

homepage title

200px

title

200px

video feature 474px

250px

article

250px

250px

live feed

live feed

article

breadcrumbs

article

500px

500px

700px

about motion graphics

500px

500px

article

200px

250px 474px

navigation

50px

700px

500px article

1024px

navigation

50px live feed

300px

title

200px

1024px

1024px navigation

50px

about

250px

article 700px

300px

250px

300px

history

subscribe

title

200px

title

200px

1024px

1024px

navigation

50px

navigation

50px live feed

510px

live feed

history timeline

510px

subscription form

500px

700px

450px

500px

300px

700px

Site map

The wireframe shows more exact measurements of each element of the template from the design of the scamps on each page so that they all fit together. I have kept the measurements of the logo and navigation bar the same and altered the measurements based on the content of each page.

300px

300px

Design for Web/Motion Graphics News Index

News based page with a ‘feature of the day’ - voted for by viewers of the page. The page will showed most viewed and most recently released examples of cross-media motion graphics. It will have navigational links to each page and the logo/heading of the page.

News

More in depth examples of new releases and features, perhaps with an advanced search bar that allows the viewer to see the features that fall into the category they are interested in. Will also have a Twitter feed and Facebook link to the websites fan pages. The examples of new releases will link to external pages directly for the designer who created the motion graphic.

Events

Events page will show upcoming motion graphic exhibitions or events, perhaps including cinematic releases that use a lot of 3D or motion graphics. May also have an advanced search bar so that the viewer can narrow down by areas they are close to or by the specific category of event they would like to go to.

History

A brief history of motion graphics and animation techniques and development within the field in terms of technology and software.

Will have the option to jump to different titles parts of the history will fall under. Will include the emergence of motion graphics throughout history and will show early examples of motion graphics, through the use of vimeo examples and images.

Subscribe

A page giving the option for viewers to subscribe to the website and recieve updates of motion graphic releases via email. It would be a free subscription and give the subscribers the opportunity to get advanced tickets to events and perhaps competitions.

All Pages

All pages will have the navigation bar to access other pages directly and the logo on the top of each page, with a direct link to the homepage. I am considering having the Twitter feed and Facebook link on the right bar of every page to allow people to access external links quickly.

Design for Web/Motion Graphics News

Research

While there are a lot of motion graphic based websites available to people, they are not designed in such a way that provides the viewer with the opportunity to filter the information to suit their own interests. On top of this, most of the examples I found were blogs giving amatuer motion graphic designers the opportunity to get their work seen by other people. I would like to include something similar but this would be in the form of ‘feature of the day’ as voted by viewers. In terms of content and layout my website would be more news-based. Similarly not many of these pages give the visitors the opportunity to subscribe, which would be an integral part of my website.

Design for Web/Motion Graphics News

Research

While there are a lot of motion graphic based websites available to people, they are not designed in such a way that provides the viewer with the opportunity to filter the information to suit their own interests. On top of this, most of the examples I found were blogs giving amatuer motion graphic designers the opportunity to get their work seen by other people. I would like to include something similar but this would be in the form of ‘feature of the day’ as voted by viewers. In terms of content and layout my website would be more news-based. Similarly not many of these pages give the visitors the opportunity to subscribe, which would be an integral part of my website.