Reflection

In this project I achieved mostly everything I wanted to achieve. As a functional tool for my community - a place to share ideas, chat about events, and get to know people in their industry, as well as find people to work with on a project - I think it (would) works very well (if made live).

There are a few design decisions which now, looking back on I would change. I would tweak the colour scheme to be less bold, change the ratio of the film strip inspired navbar to 16:9 (which is a more modern film ratio anyway) instead of being square - to allow for more screen space to be used - and probably change the background to something which would look less black on other viewers screens. 

My aim was to fill a gap on the web (or at least I know of no tool like this) and I thin I did that. Maybe one day a tool like this will exist. All in all though, I think my site and project was a success.

Development

Here are some screenshots I took during the development.

This is leftover from the blue stage of development.

I have started building the navbar here. And added the background image.

In between the last image and now I forgot screenshots. It was a long time in between these. I found out how to use some java script to create the scrolling part and to change the scroll bar. I used some html webkit stuff to create the drop down panels above the navbar too which I was quite happy with.

Here is the crew search page.

This is the open animation projects page - with search bar and scroller. Only one page is actually linked though.

And this is the homepage. Take note of the top right (for the next image) 

You can see it slides down with a mouseover :)

After playing around with many background colours and images, I have settled on this textured one. It may be too dark for some but it looks quite nice on my screen so I hope it will be fine.

The mocks

Here are the 3 options I have.

Mock 1

Mock 2

Mock 3

I have decided on mock 3

Colour scheme progression

I realised the current design didn't have any colour and thought it didn't really relate to the group very well. So I went to https://kuler.adobe.com/create/color-wheel/ and had a fiddle. I also changed the navbar to squares in a strip to represent frames of film.

Here is the initial redesign. Colour pallet can be seen at the bottom.

This is a page lower down the sitemap. I extended the bar under the nav to extend to the full 970px. - And added a search bar below it aligned with the middle 3 frames in the navbar.

I gave the search bar its own segmentation.

Back to the homepage. I added a horizontal line to tie the navbar together.

Back to an inner page. I have added a scroll bar. and split the lower page navbar in two to make it easier to see the options.

I filled up the scrolling portion of the page with some fake film title ideas. and removed the background to check I was still all fine with the grid layout.

I thought it was too blue so I went back to the colour website and started playing around with new colours.

This is before.

And this is after.

For now I have settled on this. (I have also made the search bar span more of the width of the page.)

Initial HTML creation

So here I have created the front page roughly to what I had mocked up. I am trying to create a drop-down navmenu (hence the doubling up of the bar)

You can see I have managed the dropdown but there is still 2 of them. 

I've fixed the drop-down now and only have one menu. I have also added a placeholder video where I hope to have one.

Here you can see the drop down is covering the video rather then going behind it, which is good.

Computer mocks

This is the progression of my drawn up computer mock-ups for the site. 

I jumped straight in and just started making a design.

I didn't really think about the grid or usability or anything I just jumped straight in. Then I remembered about needing some form of grid so I went to http://www.gridsystemgenerator.com/ and downloaded the guide - which I used from then on.

At this point I thought I should hide what I had done and start again by drawing out roughly the layout I would like to use. (I used a drawing tablet)

I moved elements around to see if a vertical navbar would work better. I didn't think it did so I went back to trying the horizontal one at the top of the page.

I moved onto planning the pages further down the sitemap. Here I went back to the horizontal bar and tried to see how it would look when I had gone into the subpages.

Here is the me trying the vertical bar again. The subpages blended into the main pages so I decided finally that vertical wouldn't work.

Main page again - with an into and a section for examples of live action and animation from completed projects.

Here it is with a brief descriptor.

First paper site design

A quick sketch.

Some more site inspirations

I like this site simplicity. It has a very neutral colour pallet. The navigation is also quite simple looking - there are also simple divisions in columns with colours.

I more like the navigation menu on this site than anything else. It uses a simple, thin font which glows orange with a mouseover and stays orange for the page you are on. The layout on the page is also quite clean (though there isn't that  much by way of information to actually show).

The design on this site is ultra simple. It has the navigation pane stuck to the left of the page, with  dynamically sized information on the right. It is very clean and only shows what is needed.

Updated sitemap

Some Navbar Inspirations

Bressane

I like the simplicity of this design. Using no capital letters makes the site seem more friendly and less formal. The thin lines which divide the pages are subtle enough to be unobtrusive and spaced out enough so you know they serve as dividers.

Demi Creative

I like the idea of having the navigation always present on screen, and also the slight transparency which allows the background to still be visible. To me this mixes elements of boldness and subtlety and they go quite well together - it comes across as modern and professional.

Momentify

This one is another simple design. I like the slight glow for the page you are on and, again I like the transparency of the Navbar.

New Adventures In Web Design

This Navbar - as well as the site - have a colour scheme and a texture to it which is very friendly and not overwhelming for first time visitors. As opposed to the first example, all of the page options are left aligned.

We are VI

This one seems to most sophisticated of the screens I have posted. It comes across that way due to its double line border above and below the pages, and also the gold highlights on the selected or hovered page. Both the font and the use of capitals also add to this feeling. The centered logo is also something I could think about.

Current Sitemap

Here is what I have so far for my sitemap.

It will probably change/be updated soon.