End of course evaluation

I have now almost reached the end of my HND interactive media course which I have been studying for the last 2 years. In my initial blog post I talked about my desire to produce “high quality, professional work in a large range of programs”. I knew that this was a long term goal, as I was unaware of the specific pieces of software I would be learning on the course, or what they were about.

When the design work started towards the halfway point of the first year, I felt a lot more comfortable with how the assignments were marked. This saw my grades getting better with each assignment, as I knew what was expected of me. I think my ability to understand what is required is one of my strongest skills, and is needed when creating websites for clients.

My initial pieces of design work were very tough for me to create, especially when it came to designing web pages. My first and second website design always felt forced and uncomfortable. I felt that because I did not know how to create web pages, that I could not be sure that the designs I had come up with could be made. This changed with the first major project of the first year, when I designed the Ambient World website. As I had only 2 colours, I could order them simply using boxes, to create a strong and simple design.

When creating this website I decided to try making it with XHTML and CSS. This was the first site I had made using this technology, and needed a lot of research and self management for me to get this completed. This was a forerunner to what the second year would hold, and I felt proud that I had got a good finished product to show after putting in a lot of time to creating the website.

Many of my pieces of print work which I created in the first year still look strong even now. I felt that the accurate nature of the programs used to create them gave me a lot of control over how the pieces would look. My ambient music CD box is one of my favourite pieces of work, as there is a lot of depth and thought as to how the product should be made.

At the start of the second year I set myself a goal to get 4 merit grades. So far, every grade I have got has been a merit, and I think I may have overestimated how difficult the second year would be. This is not to say that this year was easy, but it proves that the skills I had learnt in the first year as to providing what was required were well used in the second year.

With the CSS Beauty project I felt that the ideas for the website were not coming to me. None of the themes that we were allowed to use gave me any strong ideas. I then decided to see which idea I could think of the most ideas for, and then work from there. This technique worked well, and I created another solid piece of work.

The team project was a very long and testing assignment. I found that working in a team could be both rewarding and frustrating in equal measure. Our project was very large, and would need a lot of organisation to complete. I felt that as a designer in the team that I did not have much design work to actually do, as a lot of our website had been provided by college. Instead, I took on a more PA based role, where I would help arrange meeting and take minutes, as well as doing other pieces of work such as the usability test preparation. I was relieved to get the assignment over, but on reflection I think that I performed well in the team despite some difficult moments.

The reverse design process assignment was an interesting assignment, which left me with mixed feelings. I felt that my final piece of work was strong, but often felt that my creativity was not particularly deep. I often felt that I was just producing lots of ideas, but none of them were particularly strong or imaginative. When it came to making the website and piece of print work I knew the best direction to go in was simplicity. Even though my product was well made, it was rather simple. I believe that the process of producing work for assessment makes me cautious about what ideas I would pick, and that I needed to do larger project in the future.

The self managed learning plan was by far the most difficult project of the course. I chose PHP because I knew how important it was to job prospects after the course. Setting up the PHP took a large amount of time, and I had a lot of problems getting it working on a local machine. I eventually decided to use a tutorial in a book, and then modify it to what I needed for the project. I feel that this is what I would do in a job situation, because unless developing is your main job, using pre made scripts and modifying them is what is done when creating sites to tight deadlines.

I was proud that I got a good finished product out of the assignment, and it really tested me to the limit. I think the site looked clean and professional, and the function of my upload page was also pretty slick.

The interface design project always felt as though it was in the background as it ran along side the self managed learning plan project. As I felt that the learning plan assignment was more difficult, I needed to put more effort into it to get a good finished product. The designs for the interface project were simple and functional, and again unspectacular. I felt that I managed both projects well, and got merit grades for both.

The portfolio website was one of the most pleasurable sites of the course to make. I believe that this is because it was for me, and that I had a lot more control over how it worked and looked. I used a simple corporate identity, which I used on the website. I also used the Textpattern CMS system so that I could update my site easily.

The final project of the course was easily the largest website of the course. My choice to do a website on a collection of musical instruments and equipment gave me a lot of ideas about what I could do. Again, I created a simple CID which I applied to the website. This gave me practice of both creating a CID, and applying it to a website. I also did a accessibility test of the website, which taught me a lot about how to create websites with the guidelines in mind. It required a lot of analysis to find out how accessible my website was, and I was pleased that I had the opportunity to do this.

My development over the last two years has been much greater than I could have ever expected. Before the course I had a very limited knowledge of a lot of the programs, technologies and issues that the course would teach me. I am now able to manage my own time much better, as well as teach myself new pieces of software or programming languages.

I still feel that there is a lot more development to come. I still understand that I will need to be better at the programming languages, as I think this is going to limit my job opportunities in the future. I believe that I need to create some project for myself to try out new ideas. I also feel that my creativity is still limited, and that I need to find more ideas generation techniques. Again, I will have to create or find new project for me to experiment and develop these skills with.

A14 Learning Journal Posts

All posts for the A14 assignment are available on www.juliandyer.net for your reading pleasure. Go to my portfolio now and read my articles.

A10: Portfolio Designs - Final

My final portfolio designs are available for viewing. I have now made the content fit the full width of the page, and at 500px this should be narrow enough to make text easy to read. On my 'interim' portfolio site I have made a page to see if this works. The character length is around 70 characters, which is between the advised 60 and 80 mark for websites.

Screen designs in include the main page and the displayed articles page .

A site structure diagram for the website has also been done.

Comments appreciated.

Self managed learning plan evaluation

At the start of this project I have extremely limited experience of using PHP. I did not know anything about the syntax, and had only modified tiny bits of code when using the Cutenews content management system on a personal website. After asking around at Christmas about what resources to get, I got a couple of books which I was going to use for the project.

When it came to planning the project, I split the process into 5 stages. Firstly, an initial research stage, in which I would find out about PHP and its uses in interactive media. Secondly I would use tutorials and learn about how to create applications with PHP, which I would later apply to stage three, where I would plan my project, and stage 4 where I would build my project. Lastly, an evaluation would be written of the planning and execution of the project.

The project I outlined was to create a content management system for an image gallery. I knew that this would be a lot to try and achieve in 96 hours, but based on how quickly I had picked up using software I felt that it was time to give myself a big challenge.

When evaluating the uses of PHP, I found it amazing as to how many different applications could be made. Automation of tasks has always interested me in interactive media, and I could instantly see the potential that PHP would have for using in the future. I wrote an online journal post about how PHP could be used, and placed in links to my research.

As it came to learning PHP, I used the PHP5, Apache, MySQL web development book. The initial stage of setting up an offline Apache server was difficult and testing, and took nearly 3 hours to get working correctly. This frustration set the tone for the early part of the project, as following the tutorials took a lot more time than I had envisaged. Small mistakes made when copying code out of a book would lead to the code not working at all, and fixing these issues took time. I realise that I could have used online tutorials which I could have copied and pasted, but I thought that in the long term it would be better to practice writing out the code as this may have helped me remember the syntax.

Problems with my offline server only got worse when I tried to connect the PHP to a database. After much frustration, I decided to test the WAMP program, which would set up all of the Apache, MySQL and PHP in one go. I found this program to be invaluable through the project, and as it uses PHPmyAdmin which my server has, I felt that I was going to be able to get to grips with the database side of the project much better.

During the learning part of the project I felt that creating evidence was tough to accomplish. I had written notes in my sketchbook for reference, but as the tutorials took a long time to complete, the quantity was ultimately unsatisfying. I also found that very little of the code was ‘sticking’, as I was just copying code out of the book. Luckily this changed when I started building my project for real.

When it came to building the project, I found that chapter 7 of the PHP5, Apache, MySQL book would give me a good skeleton site for me to work with when building my project. This allowed a user to upload an image, give it a name, and have it displayed in a gallery. Although my initial plan was to use a login system, I decided that I should concentrate on getting a solid finished project instead of being tied down to my plan too much. I would after all have a website which did 90% of the things I wanted it to do in my initial plan.

Creating the skeleton site was relatively easy, as I had set aside a lot of time to really concentrate on getting it made correctly. I think that this large amount of exposure to the code helped cement some of the theories I had learnt about in second stage of the project, which came as some relief. I often find that the most important things to learn are the seemingly trivial things such as getting the project to work online and the correct directories placed into the code.

Once the skeleton was completed, I moved the site to an online environment to check that it would work on my web server. This process was not quick or easy, as many books simply explain how to set up the documents to work on an offline server. Issues such as setting up a user and database were not completely new to me, but connecting to a live database were. The PHPmyAdmin software certainly helped, as I could simply export my tables of data from the offline server and then import them to my online one. After a few user privilege issues, I managed to get the site working online, but only in part.

My tutorial used the greyscale from the GD library. However, my web server only had PHP 4.4.4, and possibly due to changes in the code between versions my greyscale feature would not work. Although this was annoying, I felt that my intentions to use it were valid, and that I had been struck down by an unforeseen circumstance outside of my control. I simply commented out this part of the code, and my page worked again, all be it with a reduction in its functionality.

The next stage was to change my code so that it would look like the design I had posted on my online learning journal. I found it disappointing that I had taken the time to create and prepare the design, only to find that there were no comments left about the design. I do not believe that I should have to pester people to give feedback at this stage of the course. Despite of this, I felt that my design was pretty simple anyway, and that feedback would not have significantly changed it.

Altering my code became a daunting task after placing in the XHTML 1.0 Strict DOCTYPE. There were many errors in my code, as the book did not supply valid XHTML. I had to strip away large parts of the code and replace it, which in itself was a very valid exercise. Again, navigating my way through and altering small parts of the code taught me a lot about how the code worked in a ‘real’ sense.

On my gallery page I tried to alter the code for the tables containing the images. I did however find this task too difficult, as I was repeatedly met with PHP errors. I felt that this part of the site could legitimately be a table, as parts such as the date, name of the poster and title could be classed as tabular data. I decided to style the table appropriately instead, which I think was a good compromise in this situation.

Having gained confidence with using the code, I decided to see if I could alter it so that the images would open with the Lightbox application. After a couple of hours of tweaking the code, I finally got the images to open in this way. This was a big issue for me, because it made me feel as though I had been able to figure out what parts of the PHP code I could manipulate and change; I was now in control of the code, and it was not in control of me as it had been for the first three quarters of the project. I changed the images which made up the Lightbox so that it would match the rest of the website, which I think really adds to the cohesion of the design.

The final part of the project was to create an index page for my site which would link to all the parts which made up the project. This included my initial research and learning journal posts, as well as the finished project. Although many of my colleagues had created a blog to show the development of their projects, I felt it was more appropriate to link to my normal learning journal as it would not cannibalise the visits from other students. This has now created a one stop page to find all the resources which made up my project, and I think this works well.

In conclusion, I am very pleased with the outcome of this project. At some points of the project, I felt that I would not get a finished product of any kind. Although my finished project does not contain elements like the login or the greyscale image feature, it still did 90% of the things I wanted it to. The project has been a good introduction to PHP and MySQL, and I now feel that I can take it further in my own time. Usually it is the formalities which cause the most problems, and now that I have these sussed I can do more work with this coding language.

For future projects such as this I think that I will set smaller targets, as I believe the learning curve for a coding language is substantially larger than that of a software program. I found that the syntax of PHP was quite heavy, and remembering small parts of the code was difficult to do. I think setting smaller goals would also help with motivation when conducting a project, as during this one I did at times feel as though the work was getting on top of me and that I was not creating enough evidence for some parts of the assignment.

One of the problems when learning something completely new is not knowing how well you will ‘pick up’ the knowledge. I believe that constantly evaluating and tweaking the approach can help to move the project along. There were certainly a lot of strategy changes during my project, such as when I decided to switch to the WAMP system or to not do the login system for the site. This did allow me to get a much better finished product, which will be a solid foundation for the future.

Wordcount: 1748

SMLP update 27/02/08

I am now entering the final stages of the self managed learning plan project. Over the past week I have been creating the final image gallery website which was the basis of my SMLP project. In my original plan I stated that I would use the knowledge I had gained from the second stage of the project (which was the learning stage) to create my website in the building stage of the project. However, as the project went on I found that I underestimated the amount I would have to learn. This meant that I would have to create my site with tutorials from books, which I would then apply my own design to.

After building the skeleton of the website, I tested the function of the site online. This took a while to get working, as I had to change the MySQL connect setting in my code, and set up the appropriate tables in my online database. I used the export feature of phpMyAdmin so that I could quickly set up the databases on my online server. After uploading my site, I checked the functionality of the code which I had put into the offline version, to make sure that it all worked online.

This is where I met a problem. My online server only used PHP4.4.4, and my site had been created offline in PHP5. The 'black and white' option I had enabled to manipulate my image would not work online. I found that this was frustrating as it was a substantial feature of my website. I decided that I would comment out the code, so that my website will still work. I have also added comments explaining the situation, so that when my work is marked it shows that I had the intention to support other features.

Once I knew that my site worked online, I set about converting the skeleton code to the full working design. Converting the table and cells code into valid XHTML and CSS took up a substantial amount of time, and required a lot of persistence and patience to get it working correctly. I found that this process made me understand how the code worked, as I had to modify parts to get the page to display as I wanted. Applying my website to a real project has helped me understand what the PHP code does to my site, and I created my design I added in some other features. I altered the code so that the images would open using Lightbox, and that the thumbnails would use the caption as an alt tag. This automation is exactly what PHP is created for, and I found it very satisfying that I was able to get this to work.

The project is now entering its final stages. For this project, I decided that I would use this blog to record my progress as the plan came together, rather than creating a new blog to display the SMLP project. This would make it easier for potential employees to find, and for colleagues to comment on as they would not have to search round for my other blog. I will be creating a front page to my online image gallery with links to all the necessary blog posts, resources and my finished website. This will give potential employers a 'one stop' location to find all the information about the project, without having to look through an entire blog. I will also be writing my evaluation for this project, to asses how my learning plan unfolded in practice.

iTunes interface redesign

My iTunes redesign is now available for viewing . For my design, I have decided to cut out a lot of the clutter which the currant iTunes store has. I have also used the 'Recommended' box to show users what albums may be of interest to them, in a similar way to the Amazon store. I have used a drop down box so that users can select genres, which is a more compact way of allowing access.

The main feature is the prominence of the search facility, as currently the search box does not look like part of the interface. I have taken YouTube's idea of having the search under the header, as this is in a part of the screen where viewers look when first arriving on a page. I have used this 'F' shaped pattern for the layout of my navigation and search bar. The 'Albums' area of the page would show the display results of any navigation or searches. Constructive criticism of my design is appreciated.

A10: Portfolio design v2

After gaining feedback from my first screen design, I have made amendments to improve the look and function of the website. I have had a rethink about how the website will work from a mechanical basis, and from a visual perspective too.

On the 'Web' page, I will show a list of the projects as 'article excerpts' with a thumbnail picture of the project . Textpattern allows you to have an 'excerpt' of the full article, which can then link to the full article on another page. I hope that this system will allow visitors to have an overview of my web work in a more compact space, and can choose to read about the product in detail .

Overall I have cut down the amount of blue lines on the site, to make a much cleaner looking page. I have also rebalanced the content in the header, and specified a few more fonts and colours in my design. As usual, constructive criticism is appreciated. Thanks to all the others who commented last time.

SMLP update and screen designs

Over the half term break I have been concentrating on putting together the elements needed for my website. This involved constructing the upload page, image processing page and the gallery which will show the uploaded images.

I have found that a lot of time is spent putting code together and checking for errors, making the production of a 'finished product' relatively slow. I have found that my error detection has improved significantly over the project, and now have a better understanding of what is happening when my PHP code is run. I can now make small changes to effect the outcome of what is generated, for example the file directories the images are placed in, and the variables that I can add in to increase the functionality of the website.

I think that some of the things I have been doing are now beginning to 'stick', certainly much more since my last SMLP post.

One hurdle I will need to overcome this week is finding out how to upload my PHP code to my webspace. In theory, this should be fairly easy as I have created my databases with the PHPMyAdmin software, so tables and the like should be easy to export from offline to online.

Now that I have a working prototype of sorts for my image gallery, I can now focus on how the page will look. A lot of the code I have used has tables and cells for its layout, and this will obviously have to be converted to CSS if possible.

For my screen design I have chosen to use a dark background, as this will allow the pictures to stand out from the page. There will be 2 main parts of the website, one will be the upload section, and one will be the gallery page showing the uploaded images. Between these sections is a page which allows the user to alter the image, by adding a caption, changing it to black and white, or adding a watermark to the picture.

Below are the designs I have done for the site. I have chosen to make the background and the column all the same colour, as using a pattern or repeat background would break if a large image was uploaded to the website. This design should stop this from happening.

Comments are appreciated.

A10: Profile screen design v1

The first version of my portfolio screen design is now available for viewing (PDF, 96kb). I have gone for a clean and simple look, which I beleive defines my design 'style'.

After an overwhelming response to my CID post, I have chosen to use the 'Brody' type logo for my personal logo. As well as a font, I have created a CID sheet showing the fonts used for both print and web, and have created a mock up business card. This is available for viewing in PDF format, at 101kb.

A10: CID logo ideas

Today I have been putting together some logo ideas for the portfolio website. These will form the basis of my personal corporate identity. I would be grateful for any feedback you have on my initial ideas.

Blockout
This logo uses the letters 'JD' as negative space, and would be used in a variety of colours. It would use the canvas to fill in the negative space, allowing the logo to blend into whatever it was put on to.

Brody type
This logo uses a Neville Brody font. The light pastel blue colour would be used for the main CID colour.

Custom Letters
I have created these letters as vectors, and have tried to keep the balance of size and shape equal between the two initials.

Face
I have taken the concept of a corporate identity one step further, by using features of my face to create the letters.

A13: Interface design analysis

Ministry of Sound – Download

The Ministry of Sound download website essentially consists of two columns, the left being for the navigation and the right being for the content of the website. The top of the website uses the Ministry of Sound logo, plus the secondary ‘Download’ logo to identify what the website is. The orange accent colour used is used throughout the website to identify parts of the website of significance, such as the navigation button and tabs. This visual cue indicates what can be clicked on.

Other visual cues include the use of an underline when the cursor is hovered over the album name in the main content area. This indicates that this can be clicked, and it also changes the cursor to the hand icon which also helps the user to identify the links.

When the cursor is placed over the top of an album picture, a block appears with information about the album. Although this information is useful, it does take up a lot of space on the screen which can make it difficult to read at lower resolutions. I think that this system could have been altered so that only a brief description of the album appeared, so that it would not interfere with the viewing of the page.

Login information appears under the header at the top end of the page. The use of a grey background differentiates this element of the page, and is positioned in an area of the page where users spend a lot of their time looking when they initially look at the page. The search box uses a lighter grey background, which provides greater contrast to the black background than the grey used for the login box. As this part of the page will probably be used by a greater number of users, it is emphasised with the greatest contrast.
When accessing one of the ‘Channels’ from the navigation, the site moves to an area where music from different genres is displayed. The header image on the page changes depending on which channel is clicked. This visual clue indicates which genre the user has accessed, while keeping the navigation of the rest of the site the same. This continuation of the layout and colour scheme aims not to alienate the user, regardless of which genre they are looking at.
In conclusion, this website is simple to use due to its consistency of colour and layout, and uses the small but significant differences such as the header images to differentiate alternate parts of the website. The key design principle of this site is the predictability – almost every part of the website does what it is expected to do, with the possible exception of the album roll over description.

Mbop
The Mbop Megastore website’s most prominent feature on first appearance is the ‘Featured Releases’ section in the centre of the page. This is highlighted with a graphical image border, which houses the album covers of the featured albums. This is the densest use of colour on the page, and draws the viewer’s eye in this direction.
On the left of the page the search box appears at the top of the left column. This is interesting because the navigation is secondary to the search box, as it is positioned below it. This could be because many users simply do a search instead of using the navigation features of the page. Due to the high amount of content on the website, this would make much more sense rather than going through endless pages searching for the right album.

The top sellers section appears immediately below the navigation. I think that the pictures of the album covers are too small, and many of the song titles or album names are cut off because they do not fit into the box. The images look badly optimised and pixelated and I question weather an album could be easily identified from an image so small.A scroll box at the bottom of the left column contains information about the website. I think that this information is far too long, and could be condensed down into a more succinct section. Having to scroll through the box is also difficult, especially when using the mouse wheel which does not always pick up the scroll bar for this section of the site.

In the central section of the site, a range of albums from different categories is displayed into a series of blocks. The text under the album names on this part of the site change to purple when the cursor is placed over them. This visual clue indicates a link, but I think that the colour is not strong enough, and that additional emphasis with an underline or highlight would have made it more obvious.

The right hand column features the login box, which uses the grey colour to emphasise itself, much in the same way the Featured Releases and search sections do. This is done to differentiate them from the other parts of the site. This is a familiar place for login and basket information to be stored, as it is only required as a reference and is not the main focus of the page.
The only animated icons on the website are the roll over colour changes which occur on the logo in the top left corner, the ’Go to Checkout’ button and the buttons in the footer. These again highlight in purple, to indicate that they are interactive. This is again also signified with the appearance of the hand icon.

Nokia Music store

The top banner of the website contains the name of the store, sign in section as well as a search box. Within a relatively small amount of space the website displays all of the main controls for accessing content on the website. The search boxes assume that the viewer understands what they are for – they do not specifically say that this is what they do. This may because the web savvy target audience understands what input boxes at this part of the page are for. The use of a small image instead of the traditional ‘Search’ button may also confuse some users.

Below the header, there is a large Flash based section, which contains a number of vertical tabs to view different features of the website. A simple animation moves across the page to reveal the next slide. I found it difficult to read the vertical text, as it not very legible to see on a screen when it is rotated 90 degrees.

Graphical icons are used throughout the website, and the “Learn to” box acts as a key to explain these. This is given the prime location at the top of the left column, with the text description using an underline when hovered over with the cursor.
Overall this website is substantially more graphical than the other websites, but this does effect how the interface works. If the cursor is left over an album picture a box appears with graphical buttons for buying or trying the music. This box does take a couple of seconds to load, which can make the website feel clunky. I believe that using text instead of pictures may have allowed them to create a system similar to the Ministry of Sound website, and it would also have loaded quicker.
Overall the majority of the site is easy to use. I do think however that less experienced users would find it hard to understand how to navigate the Flash banner, as the vertical buttons are not easy to read. Personally, I think this could have been made simpler with the use of XHTML/CSS, and it would have been quicker to load. Understanding what page you are looking at is simple, as there is a sub heading which uses a darker grey to attract attention.

The colour Orange is used to on smaller buttons, and this colour stands out from the pale grey and white background colours. All of the buttons indicate some form of interactivity, such as purchasing or previewing tracks. This continued use of a colour to activate certain types of content allows the user to see where they can access key controls. This in effect makes it easier for people to buy music, as many of the orange buttons are for the ‘buy’ function.

Itunes Store

The front of the Itunes store essentially consists of 3 columns. The left contains navigation to the genres, the centre is where the body of content is displayed, and the right is where top songs and albums are displayed. The top of the page is dominated with adverts, which change while the viewer is using the page.

On first impression the page looks cluttered, as the size of the text used in the columns is all the same size. A simple underline is used when the cursor is placed over the navigation elements, to indicate which links are clickable. I found that when looking for other mediums, such as TV programs and podcasts, that the navigation elements for these were not entirely obvious. I have the feeling that the Itunes store has been added to over a number of years, and has outgrown the amount of content that it could comfortable hold.

The search box for the Itunes store is located in the itunes interface in the top right of the page. I can remember that when I first used the itunes store that I was unaware of this search feature. I believe this is because it is placed so far away from the main body of content, and I believe that users expect that search bars will be in the centre of the screen, or in the top right area of the header.

Much of the login information is held in the program, rather than in the interface. I have found it difficult to find how to log into the site when buying product from the website, as there is no indication of where the user can log in. As other websites have areas where the user can see their basket and login information, users coming to the Itunes site may not understand how these features are used.

The general look of the page is simple and consistent. The headers are highlighted by using a dark background colour with a white font. This visual device is used throughout the page to inform users of which content block contains what information. There is, however, no logo for Itunes on the front page. I believe this visual device has been removed because it is contained within a program, but if the store was simply a website it would be added to give a greater feeling of identity.

In conclusion I feel that the front page of Itunes is too cluttered, and has grown beyond what the website can hold. Despite the colour scheme and typography creating a consistent look, the function of the page has been compromised by it being placed into the Itunes program rather than being used as a website in it’s own right. I think that my own design will remove a lot of the content, and condense down the information viewable on the main page. Integrating the search into the main page will also aid in the usability of the site, much in the same way that YouTube has a search as a prominent feature of the website.

Sound in interface design – Windows XP

Windows XP uses a variety of sounds for different actions which the user conducts. For example, when the user empties the recycle bin, a sound of scrunching paper is played. This is reinforced with the image changing from a full waste paper bin to an empty waste paper bin. This feedback cycle is repeated with other functions, such as beeping noises when devices are plugged into the computer, or when files are moved around within the operating system.

On the web, sounds are not usually part of the user interface. This could be due to a number of factors. Firstly, there are no standard sounds which all computers have installed on them which could be used. This means that the user would have to download sounds when they are used, which would increase the amount of data which would have to be transferred. Secondly, the more commonplace sounds are the less effective they are. Constant use of different sounds would become confusing, and the visual and audible feedback process would be damaged.

Portfolio: Competitive analysis

Design studio - Frontmedia

The homepage of the Frontmedia website looks very simple and clean on from an initial impression. The logo is small and is placed in the top left of the screen. This links back to the home page, and is the only piece of the navigation which does so. Below this, a javascript based nested list navigation is used, which expands and contracts depending which category is clicked on.

After clicking on web, a large list of websites appears. I think that this list is too long, as the rest of the navigation moves a substantial amount down the page. Also, as several topics can be extended at once, the navigation can run off the bottom of the viewable page at some resolutions. I would have wanted the amount of content reduced, and only the best pieces of work shown if I was a prospective client visiting this portfolio.

At the top of the main body of the page is a Flash based banner which displays various statistics. This uses typography and colour to display various pieces of statistical information, the colour being used to highlight the key point. I liked the use of the dark red, as it provided enough contrast to the light gray, without being too intense for the design of the website.

Below the banner on the main section of the page, the primary information appears. Currently on this page are two pictures, followed by a block of text. I think this text was a little too small, and may be difficult to read. However, the generous leading makes this easier, and has just enough contrast to stop it slipping into the white background. A ‘read more’ tab also appears, and uses the red accent colour used in the Flash banner. I like the way this one simple colour was used throughout the website, as it provides a feeling of consistency.

At the bottom of the page a footer appears under a dotted grey border line, which contains a secondary navigation and the copyright information. A button for increasing and decreasing the font size are included, but only makes a marginal increase in each direction. A dark grey rollover is also used on these buttons, which complements the rest of the website. Again, I like the simple and consistent look, which creates an efficient and clear presence on the page.

This page does validate, but only in XHTML 1.0 Transitional, with 1 warning error. I believe that I will still aim for a strict validation when I make my website.

Overall I think that this website uses a simple and clean layout, which allows the work on the site to be looked at without being tainted by the portfolio design. Even though there are a few small usability problems with the navigation, the site uses features familiar to most web users, such as the nested list. I think that some of the Flash parts of the site are a little unnecessary, and could have been simplified by using images and a random image loader.

Student Portfolio - Harry Roberts

The first thing I notice about this site is how dark the page looks. The background patters is almost indistinguishable from the main body of the page. The part which says “Web : Print : identity” looked to me as though it was a piece of navigation, and not just an image. I do like the strong lime green colour which the site uses as its accent, but I think this may have usability problems. Also, the top of the site is quite a distance from the edge of the page, which leaves an awkward amount of space. If this moved up slightly, I think the whole page would have a more cohesive look, and would show a greater amount of content to entice the user to read the page.

The large navigation buttons look bold and are easy to find, and are well spaced for the size of web page. The green and white colours are used in the article titles, and also in the Javascript buttons which show and hide the article content.

I found that these buttons could make the browser slow and unresponsive. Although I realise the importance of showing technical skill on a portfolio such as this, I question weather that is worth sacrificing usability for in an ever more usability conscious world. Simply organising the file structure better would have allowed for links to other articles, and would have limited the amount of scrolling needed on this page.

In the bottom right of the screen there is a return to top button which slowly scrolls the page upwards. Again, although this is an impressive features, a simple link to the top of the page would have been a simpler and more elegant idea.

When the cursor is placed over the top of an image on the website, a small description of the project appears. This is one part of the site really liked, as it looked very clean and functioned well. It was quick enough to load and allowed me to find out about projects without having to ‘open’ the article to see the content which was hidden away.

The information given about the project is also succinctly shown. The ‘breif’ part simply states what the website or piece of print work was for, and allows the work to speak for itself. I however believe that on my portfolio that I will want a small piece of prose which will sum up the project, but I will consider using this format myself.

In conclusion I think that this website provides a strong corporate identity with its use of colours, shapes and interesting fonts. I do think however that it is slightly too reliant on technologies such as Javascript which I think could have been left out of the design. The site provides a reasonable insight to the work done by the student, and a good representation of the skills which they have.

SMLP: Progress report 1

After 2 weeks of working through my self managed learning plan I have been finding out about PHP, and have been going through my PHP, Apache, MySQL web development book.

I was aware that PHP could be used to construct CMS systems, as I have used the Textpattern system to make websites in the past. I was however unaware of how diverse the uses of PHP could be, from creating and manipulating images to creating mailing lists.

Over the first week of conducting my PHP work, I had many problems wetting up an offline server to test my PHP work on. After much trial and error I managed to get the system working, which enabled me to start working. This loss of time due to trying to fix operational problems is something which I did not consider when making my learning plan. I have been surprised at how difficult it has been to get set up and running, and is something I would have to investigate the next time I plan to learn something new for the first time.

My initial pieces included making a simple login system (Login is Joe, PW 12345), which could then arrange a list of information. I learnt about features of PHP, including variables, constants, if/else arguments and includes. Although I have used these in my examples, I am finding it hard for the information I have learn to ‘stick’. This is one of the unknowns when undertaking planned learning, and the problem is compounded by knowing that you must create a finished piece of work within a set amount of time.

Over the past week I have started using PHP in conjunction with MySQL. This again was difficult to get working correctly, which lead to me removing the apache server I had been using and instead decided to use the excellent WAMP program. This allows me to set up all of my Apache, MySQL and PHP in one package, and even uses the PHPMyAdmin for use with databases. Once this was working I could continue my SMLP. Again, it was frustrating to lose precious time out of the 96 hours allotted to completing this part of the assignment, and I can see a lot of hard work being required to create any kind of end product.

My work with databases has also been frustrating in places. Often, a whole script of code will not function because of simple mistakes. Once space or bracket out of place will sometimes stop the code being processed, and again more time is lost through finding errors and fixing mistakes.

Over the next week I may have to try other means of learning PHP. I have ordered the Visual Quickstart guide which will look at over Easter. Although not on my original list of resources, I feel that I must try a new tactic to try and learn what is proving to be a difficult coding language.

As I have followed the early part of my learning plan, I feel that more initial research would have given me a better start. This is something I will implement in the future, by looking on forums and asking other people what resources are the best to use.

Overall a frustrating couple of weeks with the learning plan, but I aim to continue getting what I can out of the time allowed for this part of the unit.

Portfolio Delivery Requirements

This is a list of the technologies I will use for my portfolio webpage, with an explanation of how they will be used.

XHTML 1.0 Strict

This coding language will be used for displaying the content of the webpage, and will generate links and other interactive content such as navigation on the website. The XHTML code will also be validated, as this is the best practice when creating websites. It will also ensure that my website remains future proof, ensuring that users will be able to view the website in the coming years.

CSS2.1

Cascading Style Sheets version 2.1 will be used to alter the presentation of the website. This information is kept separate from the content, which will make it easier for me to update. This will also be validated to ensure that it is future proof, and will enable browsers to display the website to give a near identical end user experience for the user regardless of which browser they use.

Textpattern v.4.0.5

Textpattern is a content management system (CMS) which will allow me to alter the content of my website quickly and easily. I will create a page template of XHTML and CSS which I will copy into the system, before setting up the CMS to allow me to input different content into different areas of the site. I have chosen this system because it will allow me to update my website with new projects, so that a potential employer will be able to see the quality of my latest work.

Textpattern also allows me to input a range of plugins, which can enhance various features of the application. This should allow me to continually develop the portfolio after I have finished the course.

Smd_smimbox (Textpattern plugin)

This plugin for Textpattern will allow me to use the popular ‘lightbox’ application. This will allow me to show pictures of my projects and development work in an interesting way. Using Lightbox will reduce the amount of pages needed to display images, and will also give the user the option of downloading a higher quality image. This should reduce the bandwidth usage of the end user, giving them control of what content they decide to access.

This plugin also requires smd_lib to allow it to work, which contains a library of functions which various Textpattern plugins utilise.

Fire FTP v0.97

I will be using the Fire FTP plugin to upload my web information to the internet. This FTP client is free and simple to use, and works within the Firefox 2.0 browser.

MySQL 5.0

I will have to set up a MySQL database on my web hosting so that I can install the Textpattern software. This will keep all of the data I input into Textpattern organised into a relational database, which the software can then use to display information.

POP 3
I will be using the POP3 email system to allow viewers to contact me. This will be done through Textpattern, which will be able to build a tag which I can insert into my site. It also allows for a newsletter system to be set up, so interested users could be informed of new developments on the portfolio.

Portfolio website profiles

Primary - Educationalists
This part of my target audience is aged between 30 and 55 and has high computer experience, and has access to high speed internet connection at work and at home with a connection speed greater than 1mbps. The user has also used sever e-commerce websites to order products and services, and uses the internet to research while at work. They use both Internet Explorer 7 and Firefox 2.0 for Windows XP and Mac OSX to use the internet. These users are also highly educated and read several magazines and books each week.

Secondary - Potential employees
These users are aged between 30 and 45 and work in the interactive media design industry. They are very experienced internet users, and use the latest browsers (IE7, Firefox 2.0, Opera V9, Safari 2.0), and use both Mac OSX and Windows XP systems. They have a substantial knowledge of XHTML, CSS, as well as CMS systems. These users are also experienced designers, with interests in bitmap, vector artwork as well as typography. These people are frequently online, and have experienced many online shops, which they use frequently to buy products.

Secondary - Potential Clients
The typical user owns a small business and would like to increase it’s exposure to their client base. They have limited internet experience, and use the internet in the evening at home for an hour every day. They use Internet Explorer 6 for Windows and have occasionally bought products from online shops. They mainly use search engines to find the websites which they would like to browse, and have an internet connection speed of 512kbps. This user also uses the internet to contact friends by email and instant messaging systems.

PHP & it's capabilities in Interactive Media

PHP stands for Hypertext Pre-processor, and is a coding language which generates HTML content for use in web pages. The server side scripting language allows web developers to write scripts or small programs which can read and write to databases to record information. It can also be used to edit documents remotely, and can even alter graphic content, such as adding watermarks for photographs or reducing the canvas size.

Common uses for PHP in products can include content management systems, such as Textpattern. These interfaces use PHP to allow users to input content which is then displayed through the front end of the website. These systems are usually connected to a MySQL database which will then house either the content itself, or links to folders which contain the content. Using a CMS system makes it much easier to update the content of a website and also has a large appeal to clients wanting to look after their own websites.

E-commerce websites can also make use of PHP systems. This can help to store and manage information on customers, products, personal information as well as adding search features to aid the usability of a website. Due to the large volume of data stored, MySQL databases have to be managed to remain efficient. Knowledge of MySQL and PHP go hand in hand when creating and managing large amounts of information, and the architecture of these databases is crucial the function of the end product.

Graphical content can also be generated and edited by using PHP. Information such as stock exchange prices can be rendered on the fly into a graph, which will display when the source information changes. This dynamic ability is useful for keeping content relevant and up to date, and will therefore continually bring end users back to a website.

Further manipulation of images can be achieved with using PHP, to does automated tasks such as resizing images and adding watermarking to photographs. These automated systems can greatly reduce the amount of work files need to be prepared for the internet, making the end user experience much simpler.

The end user experience has the potential to be substantially better when using PHP. A website where the content changes will entice users to return for additional information, which will help client to keep their business exposed to customers. This is of course reliant on the system being easy to use and manage, so that the minimum amount of technical knowledge is needed to use the application.

Many job vacancies ask for knowledge of MySQL and PHP. As this language is firmly embedded into the makeup of the internet, it is a very valuable skill to learn. Knowing how to manipulate the language of PHP will be of great interest to employers who are looking for skilled employees, and also for clients who will want easy to use CMS applications for their projects.

Portfolio website goals

XHTML 1.0 strict and CSS 2.1 valid

To measure this goal I will use the w3 validation service on both my XHTML and CSS documents. The reason for doing this is because it is good practice to validate code in this way, and will therefore appeal to potential employees. Validation can help to future proof the website, and is an essential skill required in many job adverts which I have seen.

Use a CMS system to make all the content of the website updatable

Using a CMS system to update the website will allow me to keep the site up to date, and will also show that I can use these types of systems when creating interactive media products. Again, I have seen that this appears on many job adverts, and will therefore appeal to potential employers. Te evaluate this, I will to write a report explaining how each section of the website is accessible, and will asses how each one has been set up to supply the content needed in this area of the website.

Website should comply with W3 accessibility guidelines 1.0 level A conformity

For my portfolio website I will want to make it accessible. This will be done by using the W3 accessibility guidelines to assess if my website meets level A conformity. This will be done in an accessibility evaluation, where I will go through each point and assess if my website meets these guidelines.

Accessibility is a very important issue, and again is a skill which many employers advertise in their job adverts. This will produce a number of design challenges which I will have to consider both in the design and construction of my portfolio site.

Create a professional looking website which will appeal to potential clients

This goal is aimed at making my website appeal to potential clients. I will want to do some user testing for the website, and I will create a questionnaire which will contain a number of questions for potential clients to answer. These will ultimately indicate if my website is seen by them as being professional – ie if they would consider in contacting me with a request to produce some work.

I will assess this using an evaluation of the questionnaire results. This will assess if my website appeals to part of my target audience, and will highlight any changes needed to improve the website.