Tag Archives: HTML

Evaluation of Project – Illumina

Standard

For this project we worked in groups.

I was working with Katie Waldock, Clare Haldon and Mark Smith.

As with any team, we each had individual strengths and we tried to utilise this diversity.

My skills lie mainly in design, project conception and testing and so my input fell mainly in the inception stages. as we designed the layout and content of the page, and at the end, when the site required rigorous testing in multiple browsers. I worked in the meantime creating some of the animated Gifs.

Mark is a great organiser and pulled together the folder required for the brief, locating all the information required and setting it out coherently. He also produced some of the graphics, the logo and the About page.

Clare’s expertise lies in Illustrator and so we turned to her for the page’s main graphical layout. She produced the larger vector graphics which formed the basis of our page.

Katie is the coder of the group, having worked in programming previously. She coded the website using Dreamweaver, pulling together everything created by the group.

Our initial research led us to look at various sites. One which stood out was Ben the Bodyguard.

We were impressed by the way the figure appears to walk down the street as the page is scrolled. In face it remains in the middle of the screen, but the impression was one we wanted to use in our website.

After some discussion, we decided to us a tall building, with a glass elevator on the front. We would place a figure in the elevator and as the page scrolled down, the lift would appear to descend the building.

Clare got to work making the building and lift in Illustrator.

building-illuminaOur project required us to produce some animation, so we decided to decorate the building with neon signs, which Mark and I made in Photoshop, animating them into gifs. I produced the clickable signs (the ones which let to other pages)

about-us

Location

Contact

 

and Mark made the static signs.

lips_neon_sign_110-A06-A

neon-cup

neon-girl

only-god-forgives-neonposter

we're-open-neon

In the meantime, Katie produced a couple of animations for two of the windows:

frame-party-window

frame-spy-window

and Clare built a taxi and helicopter for a “spy-getaway” animation we wanted to make to start and finish the page experience.

final-taxihelicopter-animation

 

Mark put a folder together of all the administrative work we needed and made an illuminated sign for the page.

illumina-logo-neon-with-stars_final

 

Gradually, the pieces were coming together and it was mainly down to Katie to write the code and bring it all together.

Owing to illness and work commitments, my input througouht the project was minimal, so I tried to redeem myself a little by testing the site in several browser and offering constructive feedback.

With browsers differing so much in the way they display pages, we found it very difficult to present a website that worked in every one.

The best we found was Safari, which seemed to have fewer glitches than the others. firefox and chrome both had display problems, rendering the whole image too large and off to the right of the page.

The secondary pages, which Mark put together, mostly displayed well, so it was the large images and animations which were causing problems in the web browsers.

The final piece can be seen here.

 

 

 

Website Production – Needle Exchange

Standard

My prototype website, “Needle Exchange” is complete.

 

HOME

My Home Page has links to YouTube videos. I wanted to put the videos on the home page as this is unusual and it creates a lively, dynamic site right from the first landing.

My navigation buttons are at the bottom and I spent a long time making them animate nicely when pressed.

The page also has three blocks at the top, which do not currently link anywhere, but do have the potential to link to other parts of the site, as it grown.

I used cheeky phrases, coupled with cute pastel colouring to provide interest and irony.

 

Alternative Knitting Resource How To Knit

PATTERNS

The next page I created is the pattern page.

I needed to produce an anchor and back to top links, so I was forced to set out the page differently to how I would prefer.

I wanted to make the section boxes on the patterns page link to new pages, each featuring patterns for that section, but this would not provide me with the need for an anchor link and back to top link, so I put everything on the same page, floated the navigation at the bottom of the page (which I do not like) and back to top links at each section.

As a result, the page does not look as I would prefer it, but it does meet the brief set in the project.

patterns1 patterns3 patterns2

At the top. I made a slider showing books. These link to Amazon.

 

CONTACT

The final page I created is the contact page.

This is a working contact page, which will send straight to my email. I have added an option to attach a file, so that users could submit content for the page.

I realize there are security issues with this, but I have not at this point addressed them.

 

Submit Alternative Knitting Patterns Comment and Contact

 

I have added meta tags to the page, describing the content and created a favicon using online software:

favicon

 

There is room to expand the site to include a “forum” and “projects” page, which I will do with the next project.