Ian F. Hunt

Cinematographer and Filmmaker

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: