Archive | 222.391 Graphic Design for the Screen RSS for this section





To the Finish.

Development to Finals.

A lot of changes happening here. The main points are:

Playing with the nav again and just shifting bits around and working out how its all going to animate.

Started redoing the lightboxes and how the secondary navigation features fit inside it. I figured a long box looked better but also was able to fit in more of the things I needed in there.

Then started working out how to tie the visual style of it to the main pages and I did that with the coloured bars on the left and the greys.

Did an ultra fine refinement for the mobile screens and created the About lightbox.


Assignment 2: Leading on from 1.

Assignment Brief
Your task is to refine and document digital branding recommendations for the new CoCA building Te Ara Hihiko. These will be presented in a form useful for the production phase.

My Screen design is for 1080p resolution screens – these are full HD capable screens and are currently the standard at the top end of the market.

My secondary design is for Android phones. For my example, I will be using the template of 720p resolution screens which are available on most top end phones such as the Samsung Galaxy SIII.


—— Massey/CoCA brand.
—— Link/s to CoCA.
—— (TBC) Links to Massey Univerity.

Primary interface
—— 6+ screens – computer visuals.
—— 6+ screens – specifications.
—— Short written explanation of
your chosen interface concept/
metaphor, graphic elements.
Secondary interface
—— 3+ screens – computer visuals.
—— 3+ screens – specifications.
—— Short written explanation of
the strategy behind the media

Splash screen/Loading Screen?

I was playing with the idea that a splash screen might be good to reinforce where someone is about to ‘enter’. Keeping with the idea that the website is a portal. Also a nice image of the building is always nice.

The dots rotate in a clockwise direction and the pie graph fills up quickly as it loads much like a percentage bar. The circles reflect the navigation inside.


Short Written Explanation of Your Chosen Interface

Concept/Metaphor and Graphic Elements.



This new, representation of the CoCA building, Te Ara Hihiko, in the digital world provides easy and fast access to information regarding the building and also works created within. The website can be viewed on desktop and notebook screens and also mobile phones; specifically Android. Upon arrival, it goes straight into the live updated news feed which you can sort to what sort of updates you are looking for i.e. Tweets or most popular. Events and the sort are also posted on this page so people can know right away what is happening.

The Gallery section enables Massey students and Alumni to post their work up for others to see and comment. You can also set permissions on who can view it and share it. This gives students the ability to grab inspiration from work created inside and around the building and also showcases work to prospective students. Both gallery and news, you can scroll down to view more tiles.

The Space page allows users to view from anywhere the conditions of the building, how full each floor is, what classes are being taken where and the ability to book areas at a certain time.


Things can be set to private, so that only those people logged in can view work if it is sensitive to Massey.


The Idea behind the website is that it is a portal into the building for students and prospective students to engage with. The background is grey like the outside walls and the colour palette is from aspects around the building. The building itself is quite bare, with it showcasing the materials that it is made from and the wiring laid out. This website is also minimal in its setup using basic shapes, bold typefaces and simplistic layout. The few options are easy to understand and use.


Similar to the desktop version, everything is more condensed and linear. The gallery has been expanded to 2 columns to view the work more easily.