Ian F. Hunt

Cinematographer and Filmmaker

By

Portfolio and Showreel

Portfolio and Showreel

Portfolio and Showreel

I’ve been researching showreels on YouTube and in Google search results. The conclusion I have come to is that like a CV you really need to put together a selection of showreels to showcase your skills and target a specific role or company – very much like a CV and covering letter.

Showreel Guidelines (Obtained from a variety of online sources)

  1. showreel-clapper

    Make the first 10 seconds of the showreel count – unlike other films don’t build up to a climax you need to make an impact in the opening of the showreel.

  2. Keep it short under 2 minutes
  3. Only show your best work
  4. Don’t put your contact details in the credits – put these on the DVD sleeve (Not sure why but this is what my research recommends)
  5. A showreel should include supporting work – Personal Statement, links to websites, storyboard sketches, it’s best to put this all on the disk as documents can  get separated/lost at the receiving end.
  6. Think about presentation (eye catching)

The showreel I edited together (above) is to showcase my camera work if I was targetting a photography role then I would put forward a showreel of my photographs most probably in a slideshow.

Showreels online Information sources

  • My Portfolio website can be found at click here
  • Computer Arts – Showreels a Dummys Guide click here

By

Website Design – SEO and Website Traffic Analysis

Website Traffic


My Blog website Clickformedia.co.uk has been up and running for 3 months now and so I thought lets have a look at the web statistics and see what are the most popular posts, search engine terms and categories – that is, SEO and Website Traffic Analysis.

The Numbers – Website Traffic

Website Traffic

Website Traffic

There has been over 3,000 new visitors during this 3 months, that’s an easy equation to see that I get an average of over a 1,000 visitors a month. That’s unique visitors, my visits are not counted and I’m not including re-visits, although I have this information to hand via Google Analytics.

Search Terms – Website Traffic

The Big surprise is what visitors are entering into the Google search box to land on my Blog. Mostly they are seeking the keywords found in the Media Studies, Film Studies and English Posts that I produced while attending Bournemouth & Poole College. I can only assume that there are a lot of Media Studies students out there looking for inspiration/guidance for their assignments (don’t copy me guys I was OK but not amazing at College). This is followed by Images of Harry Potter Book Covers or Film Poster examples. One odd search term is for one of my BPC lecturers by name but I suspect that Philip is searching for his own name to see what I have written on my Blog Posts (Nothing Bad  – I promise Philip).

Here is today’s keyword listings

fight club scene 3
final cut express 3 snapshot 2
philip shakeshaft 2
curley punches lenny of mice and men 2
goblet of fire book cover 2
hipstamatic to pc 1
ultimate force 1
hipstamatic pc 1
curley punches lennie of mice and men 1

For the last 7 days

Home page 136
Photoscape – Giving your photos that Hipstamatic retro look 45
Media Studies – Semiotic Codes 18
Media Studies – Effectiveness of Media Texts and use of Language 15
Ian Hunt AUCB Digital Media Production 8
Graphic Design – Research Portfolio 5
English – Assignment: Short Story 4
Digital Sound – Music and Audio, Digital Sampling 4
Graphic Design – Typography – Book Covers 4
Moving Image – Storyboards 4
Head Tracking using a Laptop/Netbook. Webcam Tracking 3
English – Assignment: Discuss how emotions are portrayed in three literary texts 3
iLike this 2
Green Screen – A Midsummer Nights Dream 2
Hipstamatic photography without using an iPhone for your MAC – Image Tricks 2
Video – Ophelia Project, Studio Lighting Setup 1
Website Design – WordPress on your MAC 1
Computer Graphics for Animation and Film – Animation Storyboard 1

Where are they coming from?

Easily, most visitors are being directed to my Blog via Google but since adding automatic posting of new Blogs to my Facebook wall and dedicated Facebook Page I have started to see visitor growth from Facebook. Although there is a long way to go before Facebook visitor numbers can catch up with Google referrals.

The SEO Plan – Website Traffic

I now have SEO software with control over individual Posts including Titles, Keywords and Meta Descriptions, armed with this I should be able to better target my audience and hopefully raise the profile of the work I am now doing at University. After all the majority of the Media Studies posts are now 2 years old and hopefully I have progressed since these were added.

Conclusions – Website Traffic

SEO and Website Traffic Analysis, why this is important? basically you want visitors to your website, but you also want to target your audience. It is no good just aiming for the most traffic all this creates is visitors that quickly lose interest and move on which effects your bounce rate. I’m happy that most visitors to my website stay to read more than one post and watch a video or look through the photographs on the site. The current bounce rate is a relatively low 58%.

Of course the whole point of the Blog is to not only showcase my work for University assessment but also to present a portfolio of work to potential employers and clients.  SEO and Website Traffic Analysis helps me to do this making sure that I deliver my content to the right audience.

By

Website Design – WordPress on your MAC

While researching website design and dynamic web hosting for WordPress it became apparent that few hosting companies were able to offer complete support for this application. It was however, while conducting this research that the alternative of hosting WordPress on a Personal Computer or Macintosh Computer was identified as being a possibility.

In order to host WordPress the computer would need Web Server software, one example being Microsoft’s Webmatrix for the Personal Computer and the alternative MAMP for the Macintosh.

MAMP for the Macintosh

MAMP Screenshot

MAMP Screenshot

“What is MAMP?

MAMP stands for Macintosh, Apache, MySQL, and PHP. MAMP is an application you can install on your Mac which allows you to have access to a local PHP server and MySQL server. Essentially, MAMP gives you all of the tools you need to run WordPress on your machine, for development and testing purposes.”

For more information and installation procedures refer to:- download from WordPress.ORG

Download MAMP from the MAMP website download here

The installation and set-up of MAMP is technically involved, but it is covered in detail on the WordPress CODEX pages as linked above.

Once MAMP has been installed and run for the first time the default web browser will start up with the configuration settings page where it is possible to create and name a database which will hold the data for the WordPress site.

The next stage is to download the WordPress files from download here and once downloaded follow the installation instructions, which basically are unzip the download file and then drag the unzipped files into the root directory, that is the location of the site folder on the Macintosh usually /Users/USERNAME/Sites/wordpress/.

The WordPress Test SIte Running Locally on a MacBook Pro

The WordPress Test SIte Running Locally on a MacBook Pro

The next stage is to start the browser at address localhost:port/wordpress, which should be in the form http://localhost:8888/wordpress this will open the WordPress installation page. Follow the instructions on this page and the WordPress installation should be completed automatically in typically five minutes.

This should complete the process, the home page of the WordPress website design will be http://localhost:8888 and the default theme, initial pages and example posts will be uploaded.  The WordPress Website is now ready for testing alternative Themes, Designs and Plugins.

13/07/2011 Updated to latest version of WordPress 3.2 with some problems encountered, some Themes were identified as being incompatible, for example the loss of sidebars. Some Plugins required either updating or removal as they caused the website to hang. This proves how useful running WordPress can be when  run locally, testing the design and upgrades before uploading or making significant changes to a hosted WordPress website.

Bibliography
WordPress ORG. “Installing WordPress Locally on Your Mac With MAMP.” http://codex.wordpress.org/Installing_WordPress_Locally_on_Your_Mac_With_MAMP 12. July 2011.

 

By

Work Placement – The Report and Website Design Project

Website Design

1.0 Introduction

Work Experience at LifeStyle Computers


The Agreement:

4 Workstation computer network

Fig.1. A 4 Workstation computer network

Following an in class meeting with Liam it was agreed that I would document my work experience while working at LifeStyle Computers for a 10-day period, commencing Monday 9th May to Friday 20thMay 2011.

LifeStyle Computers is a small company forming part of the TOGA Group Partnership, specialising in Computer Network Installations for the Business and Public Sectors. LSC is a preferred installer for 2 large national retailers of home technology.

Home Theatre Installation

Fig1.1 Home Theatre Installation

The type of work we do is varied and can be anything from a simple home PC or MAC installation up to and including a large computer network or Media installation. We do not do as many Home Media installations as we’d like to do, by this I mean Home Cinema systems incorporating a projector, large LCD screen and sound system all controlled by a central device a configurable control panel able to control a variety of devices including the Lighting, Audio, Video and sometimes a Media System PC.LSC has full Public Liability Insurance a Health & Safety Policy and is registered with the Data Protection Agency.


2.0 Organising and Planning the Working Week

I generally Log into my job listings account at the beginning of the week and see the available jobs for the week, which I can accept of reject as I choose, usually depending on the type of work, location and price. I also have to factor in our own work commitments and any long standing service arrangements we have.Typically I am only able to accept only one or two jobs a day from these job listings due to other commitments.This is an example list of the sort of jobs we can expect to receive at any one time. There is another list, which relates to the Audio Visual installations including Home Cinema set-ups and large screen TV installs.

Online weekly work order listings

Fig 2.0 Online weekly work order listings

In addition the company also receive new jobs orders by email on a daily basis. We can also choose to accept or decline these depending on workload. We also receive a number of calls each day from new and existing customers seeking a new PC or Laptop, support and/or upgrades that we manage to fit in around all the other work. We produce quotations for Small to Medium Network Installations on a regular basis. As you can imagine sometimes the workload can be overwhelming and therefore we pass work onto our business partners or engage contractors when required.

 


3.0 Typical working day

For example my typical working day would consist of two or more site visit’s usually to customers homes. When a customer buys a new computer from a major High Street retailer they will have also purchased installation and setup services, which we provide on behalf of the retailer. Todays first job was to setup an HP laptop, connect to the Internet and then transfer settings and data from the customers old PC using Microsoft’s Transfer Wizard.

Windows Transfer Wizard

Fig 3.0 Windows Transfer Wizard

In the afternoon I unpacked and setup an iMac, this was 1 of only 2 that I’d worked on this year. Macs are still not that common outside of the Media Industry. The customer was especially pleased when I also set up his email, backups and instructed him on how to use some of the pre-loaded MAC applications. (The customer completes a feedback form at the end of the visit)


4.0 Working on Accounts – The VAT Return

One of my regular back office jobs is to chase any outstanding invoices, complete the accounts and submit a VAT return to HMRC. I have designed a range of office processes and documentation, which makes this job relatively easy to do. One of these is my Quarterly VAT sheet which I use to record all my Outputs (that’s money coming in) and my Inputs (that’s my expenditure), which sounds the wrong way round but this ties in with HMRC’s VAT Return. The VAT sheet is automated, by this I mean as I manually enter the separate figures the totals and VAT amounts are automatically updated. This process continues until the last figures have been entered and then the totals in the 3 Boxes at the bottom of the sheet Output, Inputs and Payable can then be entered onto the HMRC VAT Return. Of course these days I now do this online.

Quarterly VAT calculator - Excel Workbook

Fig 4.0 Quarterly VAT calculator - Excel Workbook


5.0 Website Design

5.1 Design Choices

Website Design - WordPress Logo

Fig 5.0 Website Design - WordPress Logo

I decided that while I’m on a work placement with LifeStyle Computers that I would look at some long standing web projects and take the opportunity to research and prototype a new Website Design for the company. For me this new Website Design must make use of my new familiarity with WordPress, having used it over the last year to Blog and document my work during my first year at University. So it was an easy choice to look at using this platform for the basis for a new company Website Design.

Fig 5.1 Lifestyle Computers current website screen shot

Fig 5.1 Lifestyle Computers current website screen shot

One off the great things about Website Design uasing WordPress is that it is easy to test your Website Design online by opening a free account and picking one of the 100s of Themes (Website Design’s) to help you get started. When it comes to Website Design I tend to want to get something up and running very quickly and then go back and re-design/modify the Website Design rather than start with a blank sheet and map out a Website Design from scratch. I know the latter choice should be the preferred way to Website Design but it’s not my way of doing things.

Fig 6.0 WordPress Dashboard - Screen shot

Fig 6.0 WordPress Dashboard - Screen shot

Over the year I’ve been looking at the range of Website Design’s, Blog/Theme designs and most fit into a basic structure of a choice of number of columns and sidebars, some themes include Footers and the option of modifying the header image. This means that I can basically choose a theme to start and modify this at any point in the future without dramatically changing the look of the Website Design, of course if you start with a Website Design that has sidebars and then switch to one without, this data will not be displayed so it’s probably better to work from the other way round, that is pick a basic theme one column and one sidebar. Then if you want to change designs later to say two columns and two sidebars no data will be lost.

5.2 Pages, Categories and Custom Menus

One of the things I’ve come to understand about Website Design and Blogs is that essentially all the posts are stored in one file/location in post date order so the most recent post is the one shown first. The way that a Blog displays posts other than date sequence is by the use of categories, by selecting these the posts set with this category are pulled from the Blogs database and displayed in category/posting date order.

Fig 7.0 WordPress Theme example version 1

Fig 7.0 WordPress Theme example version 1

WordPress Pages and there are two types can be set as Static Page or default dynamic. What this means if you set a Page to be static this Pages and it’s data are fixed which makes it ideal to become the Home page of a Blog site or for any Data that you always want to be displayed regardless of Post Date order.One of the great things about Blogs I’ve become aware of is Custom Menus, using this option it is possible to design a navigation menu using a mix of Pages and Categories so for example I could have a Menu that includes a static page for my Home Page and Categories as Menu options which would look like dedicated pages on the Menu bar. But Category Menu links would work differently from Page menu links because the data they hold will be dynamic. By this I mean the content would change depending on Blog postings using this category. For example say I had a Menu Heading using the category ‘New Products’ when a site visitor clicks on the Menu Heading ‘New Products’ all the Blogs with that category would appear on this Menu option latest displayed in date of posting order with the most recent shown first.

Fig 8.0 WordPress Theme example 2

Fig 8.0 WordPress Theme example 2

Now what’s even more exciting about Website Design using WordPress  is that the site owner can just Blog to their site in the normal way, but by setting the category they automatically tell the site under which Menu heading they want the content to be displayed. This effectively gives the writer an effective content management system without the writer of the Blog article having to understand anything about Website Design. Even better if they use a Blogging tool such as Microsoft’s Writer they can just add content to the Website Design as simply as they would say write a Word document.

Another great thing about Website Design this way is the ease of adding more Menu headings, just add a new category and include this in your custom menu and it’s done. You can even choose sub categories and parent these to the main categories giving you Menu sub-headings.

5.3 WordPress Theme Choices

I’ve tried some of the Website Design Themes freely available on WordPress rather than design one from scratch, which I plan to do when I have both the time and the tools to do so. But for now the off the shelf Website Design Themes will do while I concentrate on designing Menu options and deciding on what content I want to show. I’ve added some examples of some of the Website Design themes I have looked at, the most promising of which is the single column and two sidebar Website Design with the orange coloured header (see Fig 9.0).

Fig 9.0 WordPress Theme Example 3

Fig 9.0 WordPress Theme Example 3


6.0 Conclusion

I enjoy much of the hands on computer work, particularly systems building and network installations that I do. However there are some things that when running a business you have to do, for example accounts which I wish I could avoid doing. Working in computers is no longer so much of a challenge and this was one of my original reasons for going back into education, to pursue new challenges and to take my career in a new direction. I do enjoy dealing with the general public, in fact I’d say most of my time on site is generally spent interacting/instructing the customer rather than working with the technology. For example most of the customers I interact with are new and/or unsure about computers and need instruction on how to use applications, how to connect to the Internet and send and receive emails, the basics really.

On another note as part of my work experience fortnight I looked at re-designing the company website which I had originally designed many years ago to fit a particular need. The company Website Design works well as a localised site bringing in enquiries, particularly from local people seeking computer support and upgrades. It also catches the eye of local businesses looking for network installations services. But I’ve begun to realise that some of the traffic it receives is now not so relevant to our current business. For example we used to specialise in a particular brand of Media Center Computers, which we no longer supply or support but for which we still receive enquiries. I also wanted to re-design the site so that anyone in the company could update the content without having the need to understand web design or web applications hence the decision to base the new Website Design on WordPress.

To summarise the last two weeks, I think this has re-affirmed my desire for a new career path away from computer hardware. I have re-discovered my interest in Website Design by researching and working on the Website Design project and to this end have downloaded a number of Website Design tools and demos in order to research new Website Design techniques and methods. I’ve also purchased dynamic web space suitable for hosting the new WordPress based website.

I still enjoy the customer contact aspect of my job, in particular instructing/ educating the customer regarding the computers operation, which brings to mind something that I had already considered as a possible future career path i.e. something leading into IT Training or Education. To this end I will try and source some work experience in Training and/or Education at some point in the future and confirm if this is really something that I’d like to do.

By

Work Placement – Website Design Project

Friday 13th May 2011 – updated Friday 10th June 2011

Final Design for LifeStyle Computers Website

LifeStyle Computers Website Design - Modified WordPress Theme

LifeStyle Computers Website Design - Modified WordPress Theme

Design Choices

I’ve decided that while I’m technically on a work placement with LifeStyle Computers that I would look at some long standing web projects and take the opportunity to research and prototype a new design for the company website. For me the key to this new design is my new familiarity with WordPress, having used it over the last year to Blog and document my work during my first year at University. So it was an easy choice to look at using this platform for the basis for a new company website.

One off the great things about WordPress is that it is easy to test your designs online by opening a free account and picking one of the 100s of Themes to help you get started. When it comes to design I tend to want to get something up and running very quickly and then go back and re-design/modify rather than start with a blank sheet and map out a design. I know the latter choice should be the preferred way to design but it’s not my way of doing things.

Over the year I’ve been looking at the range of Blog/Theme designs and most fit into a basic structure of a choice of number of columns and sidebars, some themes include Footers and the option of modifying the header image. This means that I can basically choose a theme to start and modify this at any point in the future without dramatically changing the look of the website, of course if you start with a design that has sidebars and then switch to one without, this data will not be displayed so it’s probably better to work from the other way round, that is pick a basic theme one column and one sidebar. Then if you want to change designs later to say two columns and two sidebars no data will be lost.

Pages, Categories and Custom Menus

One of the things I’ve come to understand about Blogs is that essentially all the posts are stored in one file/location in post date order so the most recent post is the one shown first. The way that a Blog displays posts other than date sequence is by the use of categories, by selecting these the posts set with this category are pulled from the Blogs database and displayed in category/posting date order.

Pages and there are two types can be set as Static Page or default dynamic. What this means if you set a Page to be static this Pages and it’s data are fixed which makes it ideal to become the Home page of a Blog site or for any Data that you always want to be displayed regardless of Post Date order.

One of the great things about Blogs I’ve become aware of is Custom Menus, using this option it is possible to design a navigation menu using a mix of Pages and Categories so for example I could have a Menu that includes a static page for my Home Page and Categories as Menu options which would look like dedicated pages on the Menu bar. But Category Menu links would work differently from Page menu links because the data they hold will be dynamic. By this I mean the content would change depending on Blog postings using this category. For example say I had a Menu Heading using the category ‘New Products’ when a site visitor clicks on the Menu Heading ‘New Products’ all the Blogs with that category would appear on this Menu option latest displayed in date of posting order with the most recent shown first.

Now what’s even more exciting about designing a website this way is that the site owner can just Blog to their site in the normal way, but by setting the category they automatically tell the site under which Menu heading they want the content to be displayed. This effectively gives the user an effective content management system without the user having to understand anything about website design. Even better if they use a Blogging tools such as Microsoft’s Writer they can just add content as simply as they would say write a Word document.

Another great thing about designing this way is the ease of adding more Menu headings, just add a new category and include this in your custom menu and it’s done. You can even choose sub categories and parent these to the main categories giving you Menu sub-headings.

Theme Choices

I’ve tried some of the Themes freely available on WordPress rather than design one from scratch, which I plan to do when I have both the time and the tools to do so. But for now the off the shelf Themes will do while I concentrate on designing Menu options and deciding on what content I want to show. I’ve added some examples of some of the themes I have looked at below, the most promising of which is the single column and two sidebar design with the orange coloured header.

Prototype Website Location

To see the progress of my website design so far click here

By

Website Design – Assignment, Publish a Website

Describe the processes involved in publishing a website onto the Internet. Summarise your understanding of online hosting services and the importance of having a web presence.

1, Obtain a URL and hosting account.

1st task completed by purchasing the domain http://www.clickformedia.co.uk , Which I hosted at http://www.lcn.com/ I chose this hosting company based on research and experience of having used this hosting company previously so I decided to use them for future hosting of site and purchase of the domain name. All the transactions were carried out online and then using the control panel I setup the web and email forwarding for the domain. I used the masking settings to forward the domain to some free web space where the site would be hosted temporarily – this can be anywhere for example a free hosting service which is what I used or even a subdomain of an existing website. Email forwarding was setup for a free web based email client which in this case was to a Gmail account.

LCN.com Hosting

LCN.com Hosting

2, Publish your website using a file manager, FTP, HTML.

Published website using ftp software:-

Core FTP Lite (Free FTP software which can be downloaded from:-
http://download.cnet.com

FTP Software download

FTP Software download

Using this free software it took just a few minutes to upload the entire website to its online hosting account. The application looks very similar to a PC’s explorer or MACs Finder application with the left side of the screen being the location of the local files and the right side the online location. You simply select all the files, directories, images, video and audio files on the left side of the screen and tell the application to transfer them queue for upload to the online side.

3, Submit your website to a search engine for listing and optimisation.

Web pages titles and keywords were added to each page for optimisation purposes.

Google Website Submission

Google Website Submission

Investigated the keywords and titles which would best optimise the site for searches on Google and added this information to the Header section of each of the web pages. Once this was done went online to Googles URL submission pages for addition to their next search update. Repeated this for other search sites including Microsoft’s BING.

4. Summarise your understanding of online hosting services to obtain a web presence:

  • Space
  • Bandwidth
  • E-commerce
  • Pop3 accounts

Space

This refers to the amount of storage capacity supplied when either purchasing or made available with free hosting services. This can vary greatly between hosting companies but typically is around 2Gb. This is usually more than enough for most websites unless the site is for e-commerce purposes in which case a large number of images are held online, together with a database for example MySQL. Fortunately there are ways around storage limitations for example linking to offsite images, video’s etc. which can be hosted on free sites such as Youtube (Videos) and Flickr for images/photographs etc.

Bandwidth

Bandwidth or more correctly data transfer rate is a measure of the amount of data transferred from one point to another over a given period of time. For web hosting a limit is usually applied for example a starter package is usually 2G (2 Gigabytes) per month. Ideally when looking for a web hosting company it is good idea to specify the highest bandwidth that you can. For instance, if you had say three 10k (10 kilobytes) images on your index page and a 2k HTML file, you would have 32k of data on that page. Multiply that by the number of expected page views that is the number of people looking at that page for example 100,000 per month and you get 3.2 G of data to be transferred that month just for that page. You then need to make a similar calculation for each of the sites other web pages to get the overall figure for your bandwidth requirement.

E-commerce

A simple definition of e-commerce would be conducting business online. There are many elements to an e-commerce web site; one of the key elements would be the e-commerce software. This would be needed to carry out all the functions of an online business for example a database to hold product information, to then display the product information, process transactions and to manage ordering of replacement product. This software resides on what is termed a commerce server which will also run or work in partnership with a secure payments system.

Pop3 accounts

POP or Post Office Protocol version 3 is the most current version of the protocol for receiving emails as opposed to SMTP Protocol or Simple Mail Transfer Protocol which is the protocol for sending emails on the internet. You can substitute the word format for protocol and therefore it means that the data or request for data will be in the required format which is common across the internet. The post office refers the pop server where email is held until a request is made by your email software to download the messages.

5. Explain the advantages of having a web presence.

There are many advantages to having a web presence, for example from a purely social benefit, examples being MySpace which allows you to share personal information with other MySpace users, to showcase videos, music and photographs not only to other MySpace users but to the Internet as a whole as search engines such as Google will index these web sites. However for a business it is now essential to have a web presence for not only advertising your business to potential customers but also as a means of validating a business, providing contact information or product listings etc.

For a Media Professional a web presence is vital, to be able to present themselves and their skills and abilities on the Internet where it is certain that customers or potential customers would look first or indeed only look on the internet when seeking a media professional or media skills and services. A web presence means that information can be updated immediately and therefore should always be current unlike a paper based CV or brochure which is only accurate on the date it was produced.

6. Review the completed website against your original brief [in assignment 1]. Evaluate its fitness for purpose. Review the quality of the published website with reference to the original brief.

The final web site exceeded the personal expectations set by the original brief, after having gone through several stages of design before deciding on the final design, in due consideration of the features and presentation of information for each of the web pages being finalised, again after several trails and designs before being satisfied with the overall final design.

Clickformedia.co.uk - Home Page

Clickformedia.co.uk - Home Page Clickformedia.co.uk - Home Page

 

Clickformedia.co.uk - About Me Page

Clickformedia.co.uk - About Me Page

Clickformedia.co.uk - Animation Page

Clickformedia.co.uk - Animation Page

Clickformedia.co.uk - Graphics page

Clickformedia.co.uk – Graphics page

Clickformedia.co.uk - Video page

Clickformedia.co.uk - Video page

Clickformedia.co.uk - Website Design page

Clickformedia.co.uk - Website Design page

By

Website Design – Plan a Website

Website Planning and Idea Development

Decided that the best way to promote myself as a Media Professional is too produce an enhanced CV styled website to sell my Media Skills as a Freelance Media Professional. A Portfolio of my college projects displayed in a website rather than by producing a company services styled website. Researching the Internet for examples of Media Professional CV’s, came across many types, for example, from a plain text based CV website to a website entirely produced using Flash.

Many of these websites appeared to be surprisingly, of either low or average quality when looking at examples from obviously newly qualified designers. Only established designers with a good range of client projects completed seemed to have good content to be able to build their web presence on.

I also looked at alternative websites, which used best practice design, or  an eye catching design to promote their services or products I came  across many examples with ideas which could be incorporated in my own website design.

Fig.1. Callum Rimmer @ Dead Trendy Ltd http://www.deadtrendy.co.uk/blog/2009/08/01/site-cvim-finance-app/ Accessed 24/03/2010

Fig.1. Callum Rimmer @ Dead Trendy Ltd

http://www.deadtrendy.co.uk/blog/2009/08/01/site-cvim-finance-app/ Accessed 24/03/2010

What attracted me to this site (Fig.1.) are the graphics and the simplified message “I make websites with Razzamatazz, Hire Me”. So even a simple site can deliver a strong message and entice visitors to look deeper into the site by clicking on the Portfolio and Web Apps buttons. The main issue with this site though is its lack of text content which will make it hard to achieve a good position on the search engines, in fact to find this site a very specific search term had to be inputted into the Google™ search box.

Conclusion even though this is a good visual website with a clear message it would unlikely generate any business or contact through a internet search due to its lack of text. However it would make a good reference site for the developer to redirect a potential client to, indicating the levels of design skills that the designer can offer, in other words a portfolio website.

The second CV styled site I came across seemed to incorporate many of the elements that are used in social networking sites for example MySpace having similarities in layout and the way that content is presented. The site is very clean and finding information fairly straightforward. But it has similar problems to the previous example in being very light on text content and therefore hard to find using a search engine.

Fig.2. Jason King’s CV http://www.kingjason.co.uk/index.php/about-jason-king/

Fig.2. Jason King’s CV

http://www.kingjason.co.uk/index.php/about-jason-king/

In fact to find a site that relies on its graphical content is extremely difficult it was much easier to find the basic text based CV sites because they have a lot of related text as their content.

The design of the Daily Prophet Online website although basic was because of its text content relatively at the top of the listings for the search terms I used that is “Newspaper website designs”. Although the site itself is very basic in design it works well because it uses a well proven layout using Tables and Columns with a large attention grabbing image in the centre of the home page.

Fig.3. The Daily Prophet http://www.thedailyprophetonline.com/

Fig.3. The Daily Prophet

http://www.thedailyprophetonline.com/

Looking at other Newspaper websites the design used by The Sun seemed to be the most effective with its graphic heavy eye catching design. Another example of a website using Table and Columns with the central area of the home page with a large image or in this case several images in its central area.

Fig.4. The SUN newspaper http://www.thesun.co.uk/sol/homepage/

Fig.4. The SUN newspaper

http://www.thesun.co.uk/sol/homepage/

This style of website seemed to be the best way to go about designing a portfolio based website, with its balance of images and text in an easy to read newspaper styled layout.

Web 1.0 Vs Web 2.0

The best way to describe the differences between previous web design and current website designs and trends is to look at what we would call Web 1.0 and compare it with what is now termed Web 2.0

In Web 1.0 the website was designed by an individual or company who then propagate the website with content and a web administrator (usually the designer) controlling access to the site and with it making any changes/additions to its content. The website surfers were on the opposite side, viewing and interacting with the content placed their by the designers. The difference between that and what Web 2.0 now offers and is best demonstrated by Social Networking websites is that now surfers can also add their own content to the website effectively taking on some of the roles usually the sole domain of the web master and website designers.

Another big factor in the change from Web 1.0 to Web 2.0 is the actual speed of the Internet, whereas in its early years the Internet was slow and surfers were limited to 512K surfing speeds, with the advent of Broadband connection now offering speeds up to 20MB (more if cable network available) graphics and/or video heavy websites are now possible. Hence the appearance of sites such as YouTube which could have been impossible without the improvement in download and video streaming speeds.

Industry Trends

Although there are always exceptions there is a trend towards some form of standardisation of design or conventions. For example it is usual for the websites navigation to be positioned to the left of the page and/or at the top of the page. Images are given alternate text tags so that the sight impaired is able to follow the websites design and impart useful information to the surfer.

As new development tools become available to the website designer this will also have an effect of the look and feel of a website for example as Adobe Flash was introduced many sites soon had at least an element of Flash incorporated in its design or indeed the whole site was developed using flash. Although as I pointed out earlier websites’ that are light on text tend to be much harder to find using search engines and some platforms such as mobile phones are not able to support flash only websites.

Mentioning Mobile Phones the proliferation of smart mobile phones, those able to surf the internet are growing in popularity and so websites are being re-designed to be able to support these devices. As the download speeds are much lower on Mobile Phones (unless they are connected via Wi-Fi) there will be a trend towards developing simpler less graphic orientated website to support these devices, almost coming full circle back to the less is more principal in website design, making the websites smaller in kilobytes to speed up the download process.

The most popular website design tool at this time is Adobe’s Dreamweaver which comes with its own range of templates; this will of course influence the design of the majority of websites, many using these templates and inbuilt tools such as Spry Menus in their designs.

Website Hosting

There is a huge choice of web hosting companies willing to sell you space on their servers, a domain name and email forwarding services. But not all are the same for instance many put limits on the bandwidth of your site what this means in real terms is now much traffic your site can service that is how many people can connect to your site and download content (Viewing content is the same as downloading, as a copy is placed in the cache of your web browser every time you visit a site). Some hosting companies offer special facilities such as hosting for a database (MySQL) or E-Commerce and secure transaction services. But for the majority only the basics are required which is the domain name hosting the amount of web space they offer for hosting your website and the bandwidth.

The majority of web hosting companies servers run Linux a form of UNIX and Apache for setting up and controlling your webpage, although some run Microsoft software and offer FrontPage extensions which mean you can run Microsoft’s software on them. (Sites usually designed using Microsoft’s FrontPage).

For the current brief of hosting a portfolio or CV website most web hosting companies would seem to be suitable and it would therefore come down to the price for hosting per annum and the ease and possibility of upgrading and adding additional services. But personal experience shows that not all hosting companies are the same, some offer an enhanced control panel which makes changes to the website much easier and lets the webmaster control all aspects of the hosting including email routing and control of the DNS etc. Choosing a hosting company needs careful consideration and personal recommendations from someone already using a hosting service is of real benefit.

Looking at hosting price alone there are many free hosting services available but in many cases these are only free for a limited time or have restrictions which may in effect make them unsuitable especially when upgrading a website. For example adding e-commerce features or a database may not be supported by a free hosting service.

Fig.5.0 Website Layout

The basic design of my website would follow the layout as right; consist of six pages in all including the Home page. Adobe Dreamweaver CS4 would be used to design the website and as this uses CSS (cascading style sheets) I would use an external CSS file to control the look of the entire site (see diagram).

Following on from initial research I determined that a 3 column design would be the best layout for my web pages this would accommodate a navigation menu on the left of the page, explanatory text in the 2nd column leaving the option for a graphic, video or flash animation in the 3rd column. The number of rows could be adjusted to match requirements as the design progressed.

Having determined the basic layout of the page this then set the design for all the pages in the website in effect a template from which all the pages in the site will be based.

Starting with one of the provided templates available within Dreamweaver chosing the option of a 3 column liquid with header and footer (see Fig.7) I then filled the columns with text using text from an online Lorem Ipsum generater. I then added a text based menu system to the left column using CSS to control the look of the menu, that is blue and underlined changing to red when the mouse hovers over the link and setting the link colour to a fixed red showing that the link has been visited once clicked upon. Adding a standard sized banner to the top left of the home page, the banner being designed in Photoshop and a small image of myself at the top of the page.

I then added two more pages using the same template for the Animation and Video pages linking these to the home page. (See Fig.8 and Fig.9)

 

Conclusion

Although the website design could have been completed using this standard Dreamweaver template I felt that the end result would be too similar to any number of websites available on the Internet and so I decided to scrap this design and to design my own template.

 

Fig 6.0 Basic web page layout

 

Website Design Version 2

 

Using the previously researched websites as a guide I designed an 8 column based home page to look similar in layout to a newspaper. Using 8 cloumns allowed much more options for varying the sizes and positions for both text and graphics on the page. The first design (Fig.10.) shows that the top half of the page has been setup into four large columns each headed by a graphic which would double up as the navigation to specific webpages. The idea was to have a basic description beneath each graphic on for instance ‘Web Design’ and ‘Animation’ with the buttons linking to deicated pages for each of these. The bottom half of the Home page had a placeholder for a graphic which could be either a .jpg/.gif or video link. Also space for news updates and other information not directly related to any of the dedicated pages. To this orginal design some heading text (see Fig.11) and a video link was added and then finally an image added to the pages header (see Fig.12).

Conclusion

Although this layout had the benefit of being more unique than the standard offerings from the Dreamweaver application it still had that sameness look and for this reason I decided to abandon this design and look elsewhere for inspiration and start again.

Inspiration

Looking beyond websites and other forms of media for inspiration, one of the everyday items always being re-designed and updated is cars. Looking at images and magazines on car design for inspiration, I came across pictures of carbon fibre manufactured parts used in sports cars and formula F1 racing cars. Further research on the Internet produced a Photoshop technique for reproducing this carbon fibre effect as a pattern. Car design influences also came up with an idea for a menu design based on the piano black type keys found in some premium German cars.

With a design now for the page background based on the carbon fibre effect and a menu system using piano black keys this now set the theme for the entire website, which I decided would have some of the look of a cars dashboard with it’s video style instruments for navigation systems being used to display video for the animation and video pages.

Website Design 3

With the overall theme of the website now decided upon it was time to look at the construction. The concept of using a 3 column table as a basis for the webpage design was determined to be still valid and so a move back to this approach was made with the addition of another table placed within that is the 2nd column which could be modified as necessary to accomodate the content on individual web pages. (see Fig.13)

With the layout decided it was time to look at colour schemes, using the orginal idea of creating a website with the look of carbon fibre, Black would fit in well for the backgrounds in the tables with White for the text. To bring some relief to the overall black design colour would be added to some of the borders to define the edges.

Background #000000

Text #FFFFFF

How the carbon fibre back ground was created

The carbon fibre effect backgrounds was created from an image of actual carbon fibre, using the Photoshop zoom tool to zoom in to 800% and then by using the marquee tool select a square 16 pixels by 16 pixels and save this as a pattern. Then by making a new image 100 pixels square then using the newly added carbon fibre pattern filled this to give a new carbon fibre image 100 x 100 pixels square. This was then set as the pages background with the background repeat setting set. This then repeats the carbon fibre image over the entire background. This has the benefit of although being a small file size but has the effect of covering a large area which helps the page to load more quickly than if say a 1280 x 960 image had been used. It’s also worth pointing out that by using this technique the background will support all browser page sizes. Using Photoshop again the original carbon fibre design was modified using an adjustment layer with the Hue settings then used to change the colours to give a red, blue and yellow version, which was applied to the borders of the tables on the right side and bottom with the blue used in the bottom right corner.

Page layout

By using the 3 column design mentioned earlier it was decided that the left column would be where the navigation menu would always be positioned. Column 2 would hold the text and the 3rd column would be utilised for all the media that is images, video or graphics.

CSS

Dreamweaver CS4 makes use of CSS (Cascade Style Sheets) to control and apply attributes to all aspects of a web page design, for example text; the size, colour, style and weight. These CSS attributes can be applied to just the web page of to an entire site, for purposes of this design and external CSS file was produced so that any change to a CSS attribute would be applied to all page in the site for example if all text with the CSS Style named .column_text was change to be the colour yellow rather than white, then by changing this CSS style it would cause a change in all the text in the website to switch to this yellow colour. This has several advantages when updating a site as you would only need to change the contents of the CSS file to give the whole site a new look.

 

 

 

%d bloggers like this: