Final Screen Designs

28/04/2011

As I touched upon in my previous post, I wanted to try and combine a more conventional portfolio layout with some neat features. I decided the first thing I could do to make my portfolio stand out from the crowd was use striking colours with lots of contrast. I wanted to include the flip over effect I talked about previously with my playing card design, so decided to apply this to the thumbnails. Also when the user hovers over the thumbnails, the logos change from white to full colour. I think this design achieves both my goals, as it has a more conventional feel but still manages to stand out from the crowd.

home

about

portfolio

project

Word Count: 113

Initial Screen Designs

06/04/2011

My first task was to produce initial screen designs in Photoshop for my portfolio. As I have been tinkering around with different ideas and trying to produce something a bit different from the norm, I have produced three very different approaches.

My first idea was a clean minimal looking portfolio, which is very standard and a safe option. I created this as a safety net in case any of my other ideas didn’t work out.

minimal design
about page
My second idea was to produce something completely different that would create a talking point when users visit my portfolio. I went for a card table, where the user can click on the cards and flip them over to reveal my work on the other side. I knew this would get people talking about my portfolio and probably create a split in opinions. I imagine it would be seen as being creative by some and irrelevant by others, but by creating a talking point, I feel that this idea would attract more visitors than my original idea above.

playing-cards

description of work
My third idea was to display my portfolio on a macbook on screen. I know this can be seen as being a bit cliche but I intended to add extra details that I have not seen done before. I wanted the user to be able to turn the macbook on and off via a power button. I also wanted the navigation to be the icons the on the dock at the bottom of the screen, which when selected would open a window on the mac containing that page.
power off

Power off - user would click the red button to turn on

power on

Power on

web portfolio

When clicking on the Web (W) icon in the dock, the window will appear displaying my web work

I have not settled on any of the ideas above and plan to keep on looking for inspiration and ideas. Although I am looking to produce something a bit different, I could still achieve this using a more conventional portfolio layout and incorporating some of the features from the examples above. This will be something I am looking to explore.
Word count: 338

Delivery Requirements & Competitive Analysis

31/03/2011
  • Use WordPress as a content management system [CMS] to allow me to easily update my portfolio.
  • Ensure the website validates to both CSS 2.1 and XHTML 1.0 [Strict].
  • Ensure my portfolio is compatible across the following browsers: Firefox 3.5+, Internet Explorer 7.0+, Safari 4+, and Google Chrome.
  • Include a secure easy to use contact form.
  • Use a lightbox function to enable users to see my work in greater detail

Competitive analysis

Previous students on the course will form a large proportion of my closest competitors. Therefore I have decided to analyse the strengths and weaknesses of one of their online portfolios. I have chosen Richard Foley as he lives in the local area and I like some of the work he has produced.

Richard’s portfolio has a very clean, minimalist style and there is a lot of white space, which I feel works well as it encourages the user to focus on the work in the portfolio. The main focus on the home page is a large image which displays three pieces of his best work. This is definitely a strength of Richard’s portfolio as it will encourage the user to want to view more of his work.

The typeface Richard uses is very easy to read and has good contrast against the white background. The subtle uses of orange for headers and links also has good contrast and catches the users attention. The consistency of the navigation makes it very easy for all users to navigate around the site.

The thumbnails Richard uses to give the user a preview of his work are a good size. They allow Richard to fit different snippets of his work into the thumbnail to give a better impression of the work at glance. I also like the rollover effect on the photo restoring print project. When hovering the mouse over the old image, it changes to the new image, adding some interaction to further engage users.

Despite all of the positives of Richard’s portfolio I think there could be some slight improvements. It’s a bit run of the mill, and has nothing that makes it memorable or different to a lot of the other portfolios out there. It does the job of displaying his work well but it doesn’t provide any sort of talking point which could attract more visitors to view the portfolio.

I think the contact page could do with the addition of a contact form to encourage users to submit queries. I am also unsure about the arrows on the left of the of the page that allow the user to click to the next page, as they seem a bit out of position and would maybe benefit from being higher up on the page.

I feel that Richards portfolio does provide strong competition and is a good example of why I need to make my portfolio slightly different to create a talking point to attract more visitors.

As well as previous students, there are a lot of other professionals around that make up the rest of the competition. I came across a portfolio for a freelancer called Mike, which I feel is a bit quirky and therefore has stuck in my mind.

Like Richard’s portfolio, Mike’s has a very minimalist look. Although the predominant colour is green, it has a very clever gradient applied to make various different shades to avoid it looking flat. The main image that remains on all three pages is a pair of legs wearing brightly coloured stockings. This is what makes the portfolio slightly different and stand out from the crowd. I feel this provides a talking point and therefore would attract more users to visit the portfolio and look at his work.

Another strength of Mike’s portfolio is his usage of different typefaces. He provides a very elegant feel by using a script typeface for titles and headings, but keeps the main body text in a simple sans-serif typeface. Also like Richard’s portfolio, Mike has placed six pieces of work on the home page. I would imagine these are some of his best pieces and therefore grab the attention of the user.

Although Mike’s portfolio stands out from the crowd, I feel there are still some weaknesses that could be improved upon. I think the thumbnails of the work are too small and when clicked on, the image opens in another window rather than using a lightbox. I think it would look neater and more professional using a nice lightbox feature to display the work.

There are no links to any live websites which would help the user see the websites in working order. The navigation is simple to use but there is no change to the links when hovered over or selected to let the user know what page they are on. Also, the inclusion of a contact would be beneficial on the contact page.

Overall I think that Mike’s portfolio is designed to a very high standard and balances quirkiness and functionality well. I think the usage of the brightly coloured stockings adds a talking point that would spread around and attract more visitors.

Word Count: 853

Project Goals and Target Audience

23/03/2011

The aim of my online portfolio is to attract the attention of selected target audiences, so that I can gain leads, work and ultimately employment. I believe the main three audiences I must be targeting [in order of importance] are: potential employers, academic staff and friends & family.

My primary audience would have to be potential employers as employment in the web design industry has been my ultimate goal since enrolling on the course. I believe my portfolio will be my most important tool in interviews and can be the difference between employers choosing me over my competitors. This means I need to be selective with the work I include and showcase my best pieces. I have the chance to make my portfolio original and innovative which will hopefully make me stand out from the crowd. I also think the employers will be interested in the brief for each piece of work, as this will show that I can come up with appropriate solutions to fit the brief.

My secondary audience would be the academic staff as they will be the ones with the power to determine whether I pass or fail the module. This means I need to show an array of skills which I have learnt on the course and use them to good effect. Leading up to the this I will need to show development and reasoning behind my ideas, as well as the willingness to give and receive feedback in a positive manner. I also need my portfolio to include pieces of college work that demonstrate significant points amongst my learning curve. My portfolio must also be W3C standards compliant and my HTML and CSS must validate. This has been a constant focus throughout the course.

Finally, my tertiary target audience will be my friends and family. There are a number of reasons why I would like my portfolio to be attractive towards this audience; I feel one of the main reasons is to generate leads. I believe that if my portfolio is perceived well, friends and family will have belief in what I do and it will encourage them to spread the word to others. As well as generating leads, I would like my friends and family to be proud of what I do and the quality of work I produce. I need to ensure my portfolio is easy to navigate around to ensure all members of my family and friends [with different levels of computer skills] can access everything easily.

To summarise, I need to take into account all of the above to ensure my portfolio meets all the requirements of my target audiences. To ensure I do this, I have put together a list of project goals to act as a guide.

Showcase my best work.

•   Include some explanation of the briefs.

•   Show some innovation and originality.

•   Include pieces of college work that signify my biggest learning points.

•   Ensure the portfolio is easy to navigate around by all age ranges with different levels of computer skills.

•   Validates to both HTML and CSS W3C standards.

Word count: 511

Evaluating my Learning Experience

07/12/2010

Learning PHP was more difficult that I could have ever imagined. I have managed to read and understand the language, but writing my own script from scratch with nothing to reference is going to require more time. Understanding the individual functions and statements was rather straight forward as PHP is mostly written in plain English. The difficult part is knowing where and when to use them.

I started off my learning by going through the Sitepoint book page by page. This was a good starting point as it explained what PHP is, how it works, and the purpose it serves. This introduction helped me understand exactly what goes on when using PHP. The first half of the book was also very easy to follow and explained basic functions and statements in simple terms.

However, after completing the first half of the book, I realised that time was running out; and although I now had a basic understanding of PHP, I had not attempted to create the scripts I needed to meet my requirements. I felt slightly under pressure now as I had spent a considerable amount of time completing tutorials out of the book but had nothing tangible to help meet my deliverables.

This led me to searching the internet for tutorials specific to what I needed. First, it was the log in form which was very frustrating. I come across multiple ways of writing the script and found myself confused as to which way would be the best. I wanted my log in script to be secure but at the same time wanted to avoid delving in too deep, causing my mind to go into meltdown. I feel as though in the end my script is a happy medium.

Moving on to the image uploader; I hit a brick wall when trying to upload the images to a MySQL database rather than a designated folder in the root of the website. I spent hours trying to implement this but after several million tutorials [or so it felt like] and mixing and matching bits of PHP, I gave up. Creating the table in MySQL was easy enough but the PHP needed to upload and download them to display got too complicated. As I was approching the end of my time frame, I was forced to move on.

Looking back I would still like to learn how to upload and download files from a database rather than a folder as it gives you more options. For example, using a database would have allowed me to create a delete function for each individual image by calling the ID set to each image. As my images were uploaded to a folder, you could not differentiate between them to call them individually; therefore I had to settle for a clear all function to allow the user to manage the gallery.

Overall I am happy with my achievements, and now when I come across PHP I can usually understand what is going on. On the downside I would have liked more time to learn it thoroughly, but at least I have some groundings to build upon.

Word Count: 521

Ready to Go!

30/11/2010

Having started online tutorials, the first thing I have noticed is the variety of ways in which people write PHP, hoping to achieve the best result. This has lead to a lot of confusion and leaving tutorials uncompleted. It’s taken a lot of trial and error and also speaking to people to try and confirm the best way of achieving the right results.

The main thing with the log-in form was ensuring it was secure. When looking at, and completing tutorials, I was noticing that something was missing or advised by others that there were glitches in the security. Finally I came across one which has all the security necessary and works fine.

Having altered my original contract from producing a football website to a nursery website, I am now trying to produce an image uploader for the gallery page. The image upload part was manageable, and I found a good tutorial to show me how to achieve this. The part I was struggling with was displaying the image. I was confused to how to do this and struggled to find a website that explained this in simple terms. Eventually I arrived at www.w3schools.com and a simple tutorial solved my problem.

Now having my tools working, the difficulty lies with implementing them into my website. I am particularly worried about displaying the uploaded images within a gallery but hopefully this will be achievable.

Word Count: 233

Buckling up for the Ride Ahead

16/11/2010

Having now began to learn the basics of MySQL and PHP, I can see this is going to be one long roller-coaster ride. Just following the book* and completing the tutorials has had its up’s and downs. I can now see this is going to be every bit as difficult as I had first anticipated.

I started by learning the basics of setting up a table in MySQL, which I must admit went rather well. It seemed quite logical using the terminal to set up the table, but only afterwards did I realise this could be done much simpler using the MyPHPAdmin section. I’m not sure why the book* didn’t advise this way of doing it from the start?.

MyPHPAdmin

MyPHPAdmin

 

Once I had created a fictional database, I went on to try and learn some basic PHP to pull information from it and display it on a webpage. When first looking at PHP, it seemed very alien to me; I mean, why are dollar signs stuck at the beginning of words?, and why the random usage of various types of brackets?.

More reading and several basic tutorials later, I was starting to get to grips with reading and understanding the language. Most of the functions were quite logical and written in plain English. Despite this, I know that if I come away from the book and start writing PHP on my own, I would have great difficulty. I think this is going to be the biggest challenge for me, but it doesn’t worry me too much, as I know there will always be great resources for me to refer to.

My next step will be to start looking at some tutorials relevant to what I want to achieve. I think time restraints will mean that just understanding and writing the things I want to achieve from my learning contract will be difficult enough, without delving too deep and trying to learn PHP on a broader scale.

Word Count: 332

* Yank, K. [2009], Build your own database driven web site using PHP & MySQL, 4th Edition, Sitepoint.

 

The Tools are Ready

08/11/2010

Having now completed my research into the various usages and capabilities of PHP/MySQL, I have now began the self-learning process. Following my book[1] and assistance from the internet along the way, I have taken my first steps in PHP/MySQL.

The First step was to install a local server on my computer so I can test my database driven website without having to publish it live. To do this I had to install something called MAMP [Mac OS X, Apache, MySQL, PHP], which I have never used before.

The installation process was very straight forward, and learning some of the basic commands using ‘Terminal’ on the Mac was quite simple too.

 

 

MAMP Setup

MAMP installation complete

 

Simple MySQL commands

Simple MySQL commands using the Terminal

This filled me with confidence as setting up the tools I need went well without any hiccups. I know from previous experience of learning new computer languages, that this would be easy bit, and the many hours of head-scratching was still to come.

Word Count: 165

[1] Yank, K. [2009], Build your own database driven web site using PHP & MySQL, 4th Edition, Sitepoint.

 

Understanding the uses of PHP & MySQL

01/11/2010

The first of my learning objectives was to try and discover exactly what PHP/MySQL can add to my repertoire as a web designer. To do this, I needed to try and gain a basic understanding of its capabilities and find out its most common uses within the industry.

I started by emailing a practising professional within the industry, a freelance web designer called ‘Tim Holmes’. He creates content managed websites and ecommerce sites, which I understand a certain level of PHP/MySql knowledge is needed.

Tim replied, stating “With regards to PHP and MySQL, in my opinion it is the largest open-source entity on the Internet[1].” He explained that because it is free, it is more commonly preferred to Microsoft .NET, which has a similar function[2]. Tim also advised me that PHP is used on a variety of websites ranging from banking to sports, and online shops[3].

As well as speaking to a professional, I have also researched the main uses online. Many websites come to the same conclusion, that the main usage of PHP is to communicate to databases [MySQL being one of them], and allows the developer to build dynamic web-pages. This means that they can become interactive, easy to update, record and store information.

I understand that the demand for these skills is also on the rise, due to many people wishing to update their own websites without having to understand the ins and outs of HyperText Markup Language [HTML]. Content Management Systems [CMS] are looking very much the future, and understanding PHP is essential when it comes to developing these sites.

After taking my first look into PHP and MySQL, I feel I have already realised the importance of understanding and putting these skills into practice. I feel as though I am very limited as a developer without these skills, and acquiring them will open up many exciting opportunities for me.

Word Count: 311

1. Holmes, T. [13/10/10 at 13:27]

2. Holmes, T. [13/10/10 at 13:27]

3. Holmes, T. [13/10/10 at 13:27]

PPD 3 Learning Contract [Part One]

22/09/2010

As the second year starts, the focus has intensified on the ability to self teach and become more independent, as this is the norm for the practising web developer.

My task is to learn and develop a skill which will aid me when looking for employment. This lead me into searching around at various job advertisements, and picking up on any common trends. Here are a few examples of the kind of adverts I found for the ‘Junior Web Developer’ role:

I came across three key skills that appeared regularly, and would consider these as necessities to learn to at least a foundation level before having any chance of becoming employable. I also found them to be present on the on the skillset website. These were:

  • PHP
  • MySQL
  • JavaScript/JQuery

As these three skills each cover such a vast area and can be learnt to the nth degree, I have decided to concentrate on one to start with and keep my learning plan manageable. It seems that now CMS [Content Management Systems] are becoming ever more popular, it would be good to start by gaining a grounding in PHP, as this is the language that makes these systems tick.

In order to enable me to self teach PHP, I need to have various learning materials to hand. I intend to use both books and online tutorials to assist me. Two books I believe to be good sources for beginners are:

Build Your Own Database Driven Web Site Using PHP & MySQL

PHP for the Web: Visual QuickStart Guide

Hopefully by self teaching this skill, it will help me to become more independent and keep up to date with the continual advancement of the Web Design industry. Ultimately, I also see this as taking another step towards becoming employable.

Word Count: 318