Digital Media 1000 words

The Critical Report

Digital Media

Introduction:

 

This is my personal website where it will exhibits my personal, educational and professional life; also it will display my goals and aspirations.

 

I was always keen of having my own personal website but somehow I did not find the potential use and advantages for such work, but in the recent years and after taken many projects and achieved accreditation for my work it was time for me to share that and also be used as possible source of income, so it was an ideal situation form me to built the site and use it as part of my project and also to have a fully working version going live for my own purposes.

 

 

 

Specifications

 

The first step in the development of the site is to determine the site specification according to the brief were main goals, values and purposes is met and also will be the solid ground for every thing to follow.

 

“A good Site Specification should define the content scope, budget, schedule, and technical aspect of the web site. The best site specifications are very short and to the point. Webstyle guide (2002)

 

The purpose in personal website is to show your important personal details, clearly and efficiently in order to achieve the set goals and also to demonstrate the ability in portraying your self to others, so my next step was to outline my personal information and starting gathering contents.

After determining the contents for the site and the amount and the type of information that will be displayed. It was easy to extract the categorise “sections” and establishing the links between them, this also provided me on how the site will be structured “How my site will be divided into sections” and gave me a pre-visual looks concept for the Home Page.

 

 

 

 

 

 

 

 

 

 

 

 

 

Structure

 

Below are the list of section in the site, each section will have it own unique page with it’s content. It follows the brief and also will include section that will be get populated in the near future,

 

Homepage:

The home page will contain links to all the section, which I have derived from my content that I would like to present to my site visitors

 

 

 

Resume

Visitors can download a digital copy of my CV.

(I have deleted my D.O.B, address and telephone numbers in order to avoid any identity fraud)

 

Papers

This section will be populated with my study papers and assignment, including this paper and all the papers that be taken within this course or any further courses.

 

Personal and education

Details of my personal and educational life, also details of my interest and extracurricular activities.

 

Work Portfolio

Details of my professional life including history of my employment.

 

Projects

Details of previous and current project.

 

Contact Me

Visitors can contact by filling a simple feedback form, for any further correspondence.

 

Aspirations  (this section so it conforms to the brief)

My passions and where I see my self in future.

 

See Fig 1

 

 

Fig 1

 

 

 

 

 

Analysis and design approach.

 

 

“No matter how great the content on your Web site is, it seems viewers always pay most attention to the design and the image “

(Jane Warner, 2006: 93)

 

 

In my experience, the most important factor in a successful web sites are the visual look and the structure of the site, were it requires a lot of time and thought before and during the development of the site.

Without the visual look of shape, colour, and contrast, pages are graphically uninteresting and will not stimulate the visitors. One of the main aspect of visual look is the repetition of visual element throughout the design like colour scheme, font, looks, and graphics features places in the same position will help visitors to communicate better and navigate easily and it also will strengthens the design and intensify the bond,

 

“Repetition is one of the most important for web design”

(Robin Williams, 2006:118 )

 

 

The other factor revolves around the navigational interface of the site and how these information are organised and linked together in order to create a robust understand of the site and its functionality and also to establish a tie between the visitor and the site. The structural design approach I took was the Hierarchies approach, were it did corresponded with the pattern of information I was planning to use.

 

 

 

“Information hierarchies are the best way to organize most complex bodies of information. Because Web sites are usually organized around a single home page, hierarchical schemes are particularly suited to Web site organization. Hierarchical diagrams are very familiar in corporate and institutional life, so most users find this structure easy to understand. A hierarchical organization also imposes a useful discipline on your own analytical approach to your content, because hierarchies are practical only with well-organized material.  Webstyle guide (2002)

 

 

 

 

 

 

According to one statistics published, 80% of visitors well leave the site in under 5 seconds, what this means is the visual look or design and proper use of the colours and images has to create a good impression and establish the bonds between the visitors and the site.

 

 

If we can establish that bond then next step is making the visitors to understand the functionality of the site so they can navigate between the pages using the hyper links provided, in order to attain the information relevant to them. Here are the list important features that my web site own,

-Users can access key information easily from more then one place in the site

-Users can move back and forth and navigate between pages in the section

-Users can return to the Home Page in one step

With these simple features this site is organized both intellectually and visually. And thus it communicates more clearly. See Fig 3

 

 

In respect to the design of the site I have tried to create a simple but compact theme were I have tried to be consistence in the look and the feel of the site, were colours and page layout is similar, a visitor can quickly feel comfortable in navigation and retrieving information, sections are clearly defined and visible and easy to find, see Fig 2

 

Fig 2

 

The Home page in my site were initially designed and manipulated in Photoshop and by using and by using the slice Tools, I have divided the page accordingly, were I have sectioned each and every section according to my initial sketch, after that I use the function Save for Web and devices so I can imported into dreamwaerver and for on it accordingly.

The press, Contact Me, Personal and education, Work Portfolio, Projects, Aspirations was done in dreamweaver software in order achieve a perfect alignments between the boxes and using tables with pixel’s rather then percentage for a simple reasons so that the text and images would not stretch on a larger screens, the whole site was design to support the minim resolution size, in Resume section the link is will allow visitors to download a PDF file of my curriculum vita and in the papers this will include all my study material and will get populated hopefully in the future. Apart for the standard HTML language the design also uses CSS to make the site more consistent and more organised when browsing. The body, font, colour, text alignment in every page looks the same.

 

 

 

 

 

 

 

 

 

Fig 3

 

 

 

 

 

 

Domain Name and Uploading

 

I have purchased my domain name and a starting hosting package from an Internet service provider www.1and1.co.uk in order for the site to go live on line, The hosting package had many features that I may incorporate with my site in the feature like graphics archive applications, photo Gallery applications and few interesting marking tools like Google sitemaps and newsletter tools also the package provided me with a basic CGIs application which can be add to the site for enhancement, application like a guestbook, forum, feedback form, time/date display and visitor counter to my website.

In my case, I have used the feedback form applications where it allowed me to build a simple feedback form without the use of external code form different language like PHP. The site was uploaded to the hosting using Fetch; Fetch is an easy-to-use, FTP and SFTP client for the Apple Mac.

Under a different circumstance I would of liked to do my site differently from technology point of view were the whole site done in flash and for a an instant the section boxes animates when it get’s clicked and I would liked to include sounds to the background.

 

 

 

 

 

 

Evaluations

 

* Content and information’s has been careful selected to see to the goals of the site and to be informative and interesting.

* Element are organised and they are in some kind unique order

* Position of the elements are centred and away form the corners of the home page and ever page to avoided distracting the centre view

* Element and images are placed in same geographical position with size and    proximity are considered

* Minimal text alignments in every single page

* Colours are picked with great consideration; Gray and many shades give an elegant look and a solid look.

* Section ahs been considered for future expansion and the potential to accommodate up-to-date technology and service’s

* The Fonts Verdana is used on all the operating system, it will eliminate the compatibility thus it been used on the main body of my content.

* Keeping the site within a framework of the minimum resolutions so I can be viewed with most visitors

*The use of a contrast abstract image in the middle of the home page and the colour, shape and size that applied to the image created a visual interested and gave an indication of the language diversity and a broader geographical locations of visitors that can be attract.

*The site has been tested with different browsers running under different environments and operating system to ensure the highest compatibility.

*All links functional

*All images shows are viewable and can be seen and they load in quickly.

*Feedback e-mail fully tested functional and.

 

 

 

 

Software and packages  used

–      Adobe Creative suite 3

  • Adobe Photoshop CS3
  • Adobe Dreamweaver CS3
  • Fetch
  • Mac OS 10.5
  • Firefox version 2.0.0.11
  • Safari version 3.0.4

 

 

 

Testing

– Site has been uploaded to the hosting serve successfully

– The site has been checked on the following browsers

– Internet Explorer 6 (PC Environment)

– Internet Explorer 7 (PC Environment)

– Firefox 2 (Mac Environment)

– Safari 3 (Mac Environment)

– All links external and internal checked

– All images loads

– Resolution Testing using 800 x 600 and 1024 x 768

– All colours corresponds with the original design

 

Colour Hex Code used

 

#E2B002

#191C1D

#8C8D8E

#929292

#4B5260

#303030

#D0E7F2

#FFFFFF

 

 

Conclusion

 

It was great experience to build me web site using the apparatus and the learning process through and during my study period, it did require a special kind off consideration and pay attention to certain criteria’s, my next step is to keep the website updated and slowly introduce more facilities and functions to it.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

References

 

Jane Warner.,2006. Dreamweaver 8 for Dummies. : Wiley Publishing

 

Lynch and Horton., Webstyle guide. 2002. [online] [03/01/08]. Available from http://webstyleguide.com/process/specify.html

 

 

Robin Williams., 2006. The non-designer’s design book. : Peachpit press