Project Page Construction

Leave a comment

Once i’d sorted out the making of the home page, I had to start constructing the project type and specific project pages. Using the PSDs I was provided with, I decided that both pages would be constructed a the same page, with differing content. The pages consist of a left sidebar containing titles, headings and information relating to whatever was held on the page, a footer containing navigation to other pages in the website, and an area on the right in which to display the work or relevant page content

design pg2

To begin with, I simply created two divisions on the page – aptly named ‘left’ and ‘right’.  I coloured these in red and blue for visual benefit, as they hold no content currently and it was a good contrast to be able to see the proportions and dimensions of the divs. The background is not the background I plan to use for these pages.

basic div construction pg2


Navigational structure was left up to me. I thought that the navigation used on the home page was pretty much what I wanted to see on these pages, and as long as it fits it was worth plugging into this page as something to work with for the time being. I repeated the code used on the home page, translating it to the right hand div in the footer, along with links to the other pages. I’ve also added two headers in the left, and an area for information which like in the design, is made to scroll if there is excessive information. I’ve simply used lorem ipsum to fill this gap.

basic page construction pg2

The image below shows how i’ve tidied up the  footer to allow the links to project pages to fit in. I’ve also set the right hand content div to have white borders which like the red and blue left and right divs, is being used so that I know the constraints and dimensions of the div whilst i’m working in and around it.  I’ve also made sure that the left hand div lines up with the right.

less basic page construction pg2

Underneath the information, I’ve added the three hero images from the home page as featured links on these pages as well. I’ve also downloaded the websafe version of Bebas Neue – the font being used for the title banner on the home page. I’ve assigned this font to the h! headers, as well as the h2 headers. This is the primary font in this design and will be used as the headline font on every page. Finally, I set the font to white on everything, as the black background is best contrasted with the colour that stands out on it the most.

even less basic page construction pg2

Now I have created the page itself, I can begin translating content into it, by plugging in some jquery sliders – I will research a few good ones if I cannot find one exactly to the specifications of the PSD, and will go through these with my client to see if he likes any of the alternatives.

E-mail to designers

Leave a comment

Two of the items that I am doing my first design board about are ‘Tiara for Maxima’ by Ted Noten, and ‘Thinking of You’ by Benjamin Lignel. Unfortunately, I was unable to find out what the methods of production were for these items, so I decided that instead of wasting another 4 hours trying to find out this unobtainable information, that I w0uld send emails to both of the designers directly, and see if I got a reply.

I sent this email to both designers:

“Hello, I am a student at Canterbury Christchurch University, and to cut a long story short, one of your pieces is now the forefront of one of my theory modules. We’re studying contemporary design, and I’ve been doing research on [NAME OF PIECE] after seeing an exhibition at the Design Museum in London recently, but I cannot find anywhere that describes the methods you used to construct this piece. I was wondering if you had the time to perhaps fill me in on this missing information! All I want to know is what production methods and processes were used to craft the piece as a whole, as I already have a list of materials (which I understand to simply be [KNOWN MATERIALS]) sourced from the exhibit – Thank you for your time, and I look forward to hearing from you soon. – Daniel Tooley”

I wasn’t hopeful, but I did actually get replies from both of the designers!

Here is the reply from Ted Noten regarding ‘Tiara for Maxima’:

“Dear Daniel, Nice to hear that you are touched by my piece the tiara from Maxima. Your question might delete a myth but I don’t mind. Most people think I made it completely by hand the helmet. Pitty. I bought it for 120 pounds and cut the tiara with a simple tool from a jewellerymaker -a handsaw- of course it shows my craftsmanship and to be honest i was also very lucky that nothing went wrong. So you are right: (which I understand to simply be a chrome plated polo helmet). I love to make nice pieces with simple thoughts and simple tools. – best regards – Ted” 

This means that the only real production method used here was the tiara being cut from the helmet using a handsaw. I was quite interested to find out just how simple this was to achieve, as I thought a piece with intricate details on it such as this would have been more complicated to do.

Here is the reply from Ben Lignel regarding ‘Thinking of You’:

“Hello Dan, Ok – below is the text I usually use to introduce the series. As for the technique employed: I first take pictures of the ear I am making a portrait of, then I spend some time redrawing that image, and translating its features into simpler, recognizable elements. Once I have a sketch of the form I want to produce, I must find a way to get to that shape using flat sheet: this is the long part. There is much back and forth between my models (I use stiff card) and the sketch I made: usually between 4 and 8 versions. When this is finished, I have an outline, which I then cut from silver sheet, shape, solder, clean, and paint. Sometimes the pin in the back (which is added last) is a bit fiddly: but all in all, the process takes around 15 hours. Voila: does that work for you as a description? – b”

I guessed that there would be a out of sketching involved before a card version was constructed. I didn’t realise that this would then be used as an outline to cut the silver.

It was definitely worth sending the emails!

More Home Page Construction

Leave a comment

I’ve done some more minor tweaking to the home page.

Firstly, I’d done this last time but forgot to blog about it: I have added titles to the main images. They aren’t exactly the same as in the design, but I thought that a less obscuring approach was probably better for a visually heavy site. These will be linked to pages that contain multiple projects based on the link clicked on. These will then be further linked to individual projects where you will see multiple images of the same project.

I created the titles using the <span> element, and incorporated <h1> tags into them. I set the background to an opaque black, whilst keeping the font-color at white so it stood out.

titled images


I have also added <p> tags underneath the images below the banner so that they have titles. These will not be turned into links, as I intend to use the images themselves as links. These will be linked to the same edited template pages as the hero images will be.

I’ve done some further work to the other pages, although still not enough to document. I’ve begun work on the arrangement of divs just no real visual styling. I will show progress in the next blog, where  I will have most of the page done.

Remix Culture

Leave a comment

Author – creator of the artifact
Consumer – the audience that views the artifact
Ownership – the author/company that owns the artifact
Rights – the author/company that owns the rights to sell, distribute and appropriate the artifact

Remix culture has not so much changed over the last 15 years, but the scale, quantity and media have. For example, the introduction of YouTube on a public domain meant that for the first time millions of people could upload their own and edited videos, giving birth to the mash-up culture we see today. This is not to say that it did not already exist in other formats.

Example: Gene Roddenberry (creator of Star Trek)

Fan based stories relating to star trek, using the same characters in homo-erotic imagery as front covers
Not so much a parody as a tribute, although imagery used may counter the message being portrayed by the original creative

The implications of remix culture are huge. Many people now view media with an eye to see what it can be re-appropriated into rather than creating something new using the original as inspiration.

This is what I have done with my piece. I have used a recognisable image of the current chancellor along with a picture of someone filling their car up with bio-fuel  however I have mixed them together to create something new with a completely different meaning.


Adding Images to Home Page

Leave a comment

I’ve been pretty busy with other assignment work recently, but I’ve managed to finish cutting and editing the images for the home page and place them in the correct places.

Here is a picture of the updated home page:

home page images + span

I have also been in contact with my client, and his feedback so far is simply that he is happy with progress so far, and is glad that he can be kept updated by checking where I am currently hosting this site:

I have created two html documents for the project page templates, and have begun div structure but haven’t finished it yet. I will update on here as soon as I have something worth putting on here.

Initial Website Construction

Leave a comment

After reading through all of the information sent to me, and looking at all of the psd files in detail, I have decided to begin the construction of my client’s website.

To begin with, I have created a folder called ‘craig’, and in this folder I have created the following folders: ‘images’ for any pictures, ‘css’ for any web-fonts and stylesheets relating to the site and ‘js’ for any java-script documents. Then, using Adobe Dreamweaver I created a blank html document and called it ‘index.html’, along with a blank css document, linking the two in the head section of the html document.

Using Adobe Photoshop, I opened the psd relating to the home page, and began to cut the images out of the file. I did this with the main banner, the three featured images at the top of the design, and the five images underneath the banner.



Leave a comment

Overall I am really pleased with how this project has gone. From seeming like I was never going to be able to do it, to seeing a finished product is a great feeling. I am particularly pleased with how clean the keying was, and the fact that all of the effects worked and mainly the fact that I managed to do them at all was quite good.

Although i’m glad it’s some extra work off my load, I’m still sad to realise I won’t be doing this again all year, as it’s been an enjoyable project from start to finish.

If I were to do this again, I would definitely use tracking points in the shoot to capture some motion in my scenes, as I feel that this is really lacking in my work. I think a few action shots where the camera is all over the place would have been the finishing touch I needed to make my project look much better, however, I am still happy with the backgrounds I chose and the way they portray the scene I wrote a few months ago, and it’s nice to see that script finally on a screen.

Here again is the link for my video:

Older Entries