Wednesday, May 14, 2008

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.

Wednesday, April 02, 2008

A14 Learning Journal Posts

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

Wednesday, February 27, 2008

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.

Thursday, February 21, 2008

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.

Wednesday, February 20, 2008

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.

Wednesday, February 13, 2008

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.

Saturday, February 09, 2008

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.

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.

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