Mobile Website - Join Us page amendments

For this version I have added the images that appears on the 'Join Us' page on the main site, I feel that this adds a bit of life to the page. I have also removed some of the text content.

Here i have just experimented with a different colour for the titles, i think this looks nice however i still prefer blue as it keeps things consistent with the main website and looks better. I have also changed the colour of the quote at the bottom of the page to bold grey.

For this version i have re-included all the text from the 'Join Us' page on the main website but i have also kept the image to.

Mobile Website - About Us v2.2

The changes made from version 2 are as follows...

• The main image has been enlarged to fit most of the screen
• I have included the 'find out more' icon and replaced the simple underlined link.

Mobile Website - About Us v1.2

For this version I took out the 2nd image to reduce the loading time of the page and the amount of scrolling that would be needed. A few other changes include...

• 'About Us' text changed to sky blue, the same colour as the Towner logo.
• Instead of a 'visit out main site' link i have decided to incorporate a 'find out more' button so that it makes it more obvious to the user what they have to do.
• The quote has been changed to a bold grey so that is doesn't stand out too much but is still noticeable.

Towner Art Gallery Mobile Website - Join Us page Design

I have taken the 'if you love Towner' banner from the main website to provide a similarity between the 2 sites.
I have included all of the information from the Join Us page on the main site and set it out in a way that it is easy to read. Obviously in the 'How do I Join' section it is not possible in most cases to download the PDF membership form so I have removed this option and have informed the reader that they must download this on a pc or mac or alternatively they can phone the number provided.

About Us - v2

Version 2 of the about page which contains less information but seems to me to be a bit more tidy and easier for the reader to digest. Again, it provides a link to the main website if the reader wishes to indulge themselves further. The image has also been scaled down slightly with loading times in mind.

Towner Art Gallery Mobile Website - Page designs

First go at the About us page. Includes all the text from their initial about page with a nice piccie of the Towner gallery. Also includes a few snippets of text and an from their 'Our Story' Page. Not sure if this is too much info however? I shall upload V2 in a mo....

Group plans for half term

During half term I made the rest of the group aware of our clients decisions and told them when everyone's page designs must be done...

Chris Hill

Hey guys, just had another reply from Gilly regarding our font options....

'Hi Chris

These look great – orange ‘classic site’ button is definitely my favourite!

Can I just check both font options are Arial? – it’s just the first looks a bit like our font (AG Book Rounded), it could just be my screen as I’m having terrible problems with a very slow connection which makes it hard to flick between screens, but just thought I’d make sure first that they’re both the same to ensure direct comparison…

Thanks,

Gilly'


Not sure what you guys think but maybe it would be a good idea to have our ideas done by early next week (Tuesday) so we can send 2 designs of each page to towner, then ideally we'll have some feedback by Friday?

Top of Form

Like ·  · Unfollow Post · October 28 at 12:51pm

Feeback from client 26/10/11

 Our client has just confirmed she likes the 'orange' classic site option

 Digital Media Design Towner Mobile Website Developers

• 

  

To gillian.clarkson@eastbourne.gov.uk, John Searle

Hi Gilly,

We're glad you are pleased with the amended designs,

Yes, just to confirm,both font options are Arial, it was mainly the size of the text that we just thought we would check with you first and let you decide which you'd prefer.

Thanks,

Chris

26/10/2011

Reply  ▼

 Clarkson, Gillian

To Digital Media Design Towner Mobile Website Developers, John Searle

Hi Chris

 

These look great – orange ‘classic site’ button is definitely my favourite!

 

Can I just check both font options are Arial? – it’s just the first looks a bit like our font (AG Book Rounded), it could just be my screen as I’m having terrible problems with a very slow connection which makes it hard to flick between screens, but just thought I’d make sure first that they’re both the same to ensure direct comparison…

 

Thanks,

 

Gilly

Amendments & Font options

On the Friday after our meeting with the client we got together as a group to discuss the changes that needed to be made to our initial homepage design.

The client specified that they would like us to try applying a different colour to the classic site logo to make it stand out more. We therefore experimented with 3 different colour variations.

We have also changed the order of the pages around so they they follow the same order that the client specified...

Further to this we supplied our client with 2 versions of what the page would look like with content displayed...

This first one shows a zoomed out version of the page, displaying all the text, and image and the footer with the copyright banner they requested. We also supplied the client with 2 different font options, which is explained in our email below........

Hello Gilly,

Just another email to show you the amended designs for the homepage for the Towner's mobile website. 

We've rearranged the button layout to your specifications and we have made a few suggestions for the colour of the classic website button that link in with your tool kit.

We have also decided on two different typefaces for the various website pages. 

Font Choice One uses:

·         Size 24 Arial Bold for the "Current Exhibitions"

·         Size 15 Arial Bold for the "Franziska Furter: stray current"

·         Size 14 Arial for the dates.

·         Size 14 Arial for the body text.

Font Choice Two uses:

·         Size 20 Arial Bold for the "Current Exhibitions"

·         Size 16 Arial Bold for the "Franziska Furter: stray current"

·         Size 13.5 Arial for the dates.

·         Size 11.7 Arial for the body text.

Please get back to us with your preferences.

Many thanks,

Towner Mobile Development Team

Mobile Web Address

As a group we felt it necessary to confirm the future web address for the mobile website. We suggested 2 options for our client... 

Hi Gilly,

Can i say how useful yesterdays' meeting was for us, we received some great feedback and are looking forward to creating a really nice and easy to use mobile website.

Can i just confirm what the website address for the mobile website will be? (i.e what the user will have to type in the address bar to access the website)

We thought of...

mobile.townereastbourne.org.uk?

or

m.townereastbourne.org.uk

however the decision is yours.

Regards,

Chris




Here is our reply....

Hi Chris

 

I really enjoyed the meeting too – you guys have done an excellent job and I think it’s going to really look fantastic!

 

I think we’ll go with mobile.townereastbourne.org.uk.

 

Thank you!

 

Gilly

Job Roles

Considering the feedback that we received from the meeting with the client, I felt it necessary to give everyone their individual job roles. As there are 8 pages on the website in total and 4 of us in the group, it seemed common sense to assign everybody 2 web pages to design and eventually code...

These job roles were assigned as follows...

Hey Guys...

Just so we all know, here are our assigned job roles. Over the half term i recon we should design a few versions of our pages (say 3) and then we can pick the best 2 and send them to towner the first week back. 

here goes...

Harry:- Exhibitions/Events
Emma:- Visitor Info/Community
Jake:- Mailing list/Contact Us
Chris:- About Us/Join Us

Olympics Animation 3/5 - swinging gymnast

So now we have our idea we have to make it work.

We decided for ease of use to do the animation all in coloured card...
There were 2 ways we could have made this loop effectively:-
Method 1 - Move the rings across the page from right to left and move the gymnast accordingly so that he still looked as though he were swinging on the bars but also stayed central to the screen.

Method 2 - Harry suggested that we draw the gymnast out several times on card and draw it at various stages of the animation, i.e draw different arm/leg movements and then cut them out. This would enable us to swap over the cut-outs at various stages i.e when swinging towards and grabbing onto another ring.

We decided to go with method 2.

In order to resolve any looping issues we decided to make the rings & background so they they just touched the edge of the screen so that it looks like a continual flow of gymnasts swinging across the rings...

Here is the result of the animation....

It moves a little quicker than we would initially have liked, however we are pleased with the gymnasts movements across the rings. We made a background as well just to add a little more interest to the scene.

Ideally the gymnast could have been a different colour as it tends to clash a bit with the yellow ring, however we feel it is in keeping with the olympic colour scheme.

Monkeying around

For the next animation my partner for week 3 and I had the idea of working with a gymnastics theme.
We decided to look at somehow incorporating that with the olympic rings. Initially i had thought of maybe animating a figure so that it would do a somersault  over or through the rings, however there would have been a clear looping issue with this, which would have driven me loopy.

The next idea I had was to have the athlete swinging across the rings in a monkey bar style.

The first thing we needed to find was an example of how someone would manoeuvre themselves across monkey bars....i came across this video, hardly olympic standard but it gives us an idea...

Olympics Animation 2/5 with plasticine - reshoot

After the previous animation we decided that we could have made it look better if we removed the blue background and tilted the London bridge template to make it look more at an angle.  I felt as though we also needed to improve the running cycle to make the figure look more believable, however perfecting this proved extremely difficult and I think it actually looks a little worse on this re-shoot. There is certainly not enough movement in the legs or the arms. Also there appears to be varied lighting in places despite flash being turned off on the camera so I'm not sure what happened there. It may be necessary to edit this at a later date.

Olympics Animation 2/5 with plasticine

As we established that pipe cleaners were very fiddly for the animation that we were trying to achieve, the next material to try out was plasticine. After taking note from the 'morph' animation video that I posted earlier, we were looking to replicate this movement with our plasticine figure.

We used blue tissue paper for the background and creased it up a bit to give the impression of water, however this wasn't as effective as we first thought it would be. However the figure movements do look a bit more realistic now...

Olympics Animation 2/5 with pipe cleaners

For this animation my partner for this weeks animation and I decided to go with the idea of using a famous London landmark as a hurdle for the runner to jump over. After looking at various landmarks on the internet we decided that London bridge was probably the most appropriate one to use.

To create the 'hurdle' we copied a picture of London bridge onto a black piece of card, cut that out and then drew on a few details to add a bit of realism to it.

We had to draw the bridge at a slight angle to give a perspective so that  it looked at thought it was coming from a side on view.

It was quite difficult again to judge the timing and give the athlete realistic movements. It was also very tricky to move one part of the figure without moving the whole thing out of place, we found pipe cleaners to be very fiddly.

To ensure the animation would loop properly we had to keep the figure central to the camera and have the bridge move across the screen, this would give the impression that the camera was following the athlete. Otherwise the athlete would be repeatedly moving left to right across the screen.

Below you will see our first attempt at shooting the animation.

As you can see, the leg movements were not very realistic at all, it almost looks as though the figure is flying over the hurdles let alone jumping. Keeping the figure central to the screen for looping purposes works well though.

Hurdles in Slow motion

The short video below would be very useful to determine just how we would need to animate our character throughout various stages of the animation.

Plasticine animation example

One of the most recognisable plasticine animations which had its own TV series, is morph.

With the 'hurdle's animation in mind, i am ideally looking for a run & jump cycle that will loop easily. As an alternative to the previous 'pipe-cleaners' idea, I am looking at the possibility of using plasticine.
The first part of this video demonstrates a run & jump cycle which gives a good indication of how the figure would need to be moved in each frame in order to create a realistic movement.

Animation with pipe cleaners

For my next animation i am looking at trying something with pipe cleaners. My idea is to create the effect of someone running and jumping over a hurdle. I came across this tutorial on how they can be used in stop-motion animation..

I imagine they might be quite fiddly to work with but the effect that i am looking for could be acheived through this method.

Meeting with the client - 15:30 20/10/11

After our tour of the Towner, the 4 of us in the group has a meeting with our client to discuss our initial designs.

The meeting was very positive, the client picked her favoured design an suggested some things she wanted to be included or changed.... here are the minutes from that meeting....

Towner Website Feedback from meeting 20/10/2011

Gillian picked our design version 2.4

·        Grid Format

·        Rounded Corners

·        Different header image on each page

·        2^nd word of each page title (e.g. Visitor info) to lower case.

·        Header to take user back to homepage

·        The option to go ‘home’ to be included in the drop down menu.

·        Drop down menu to appear in a tile format.

·        When the user clicks on the menu button, it turns blue to indicate the drop down is in use.

·        Change copyright notice to ‘© Towner, Eastbourne’

·        Remove home button from header on each page.

Order of Pages (top to bottom, left to right)

·        Visitor Info

·        Exhibitions

On this page, display image from current exhibition on the header.
To include information about upcoming and current exhibitions.

·        Events

Events page to have different categories e.g for ‘family’, ‘schools’ ‘children’ etc.

Must include an option to book for each event, include a ‘book now option’ below the details of each event.

·        About Us

·        Community

·        Join us

·        Mailing List

·        Contact Us

·        Classic Site

Icons and text to be a different colour