Final Screen Designs

April 27, 2011

After getting some feedback on my initial designs I decided to keep the layout, but be more creative with the design. The theme for the portfolio is bubbles, and it should work in the presentation. It also gives the site a bit more personality.

Here is the sitemap for the website.

Below are images of my final screen designs which will eventually become my portfolio website.

Figure 1: Home page

Figure 2: Work page

Figure 3: Example of a work page

Figure 4: Self learning page

Figure 5: Learning journal page

Figure 6: Contact page

Word Count: 95

Ideas for portfolio site

April 6, 2011

During the past week I have been creating and developing ideas for the portfolio website. In my last post I wrote about trying to keep the website simple, but try to be creative as well. So far my development has been through thumbnails, and wireframes which have given me different layout options.
Below are three different home page designs which I have developed during the past week. Feedback would be appreciated.

 

 

 

 

 

 

 

 

 

 

 

Figure 1: Screen design one

 

 

 

 

 

 

 

 

 

Figure 2: Screen design two

 

 

 

 

 

 

 

 

 

 

 

Figure 3: Screen design three

Word Count: 83

Delivery Requirements and Competitive Analysis

March 30, 2011

I have now identified my project goals and target audience. Now it is time to consider the technological aspects and the competition that my portfolio will have.

Delivery Requirements

The portfolio site will be put on the domain name http://www.luke-crossfield.co.uk and it will be hosted on This* Web Host. HTML (HyperText Markup Language) and CSS (Cascading StyleSheets) will be used to hand code the portfolio website. The site will be using the WordPress content management system, this will allow any of the content to be edited when I would like to change it. PHP will used for the contact form, so the website can allow users to contact me via email. Lightbox will be used to show the full size of any images that I put into the portfolio.

Competitive analysis

Most portfolio websites that I have seen online have a simple, minimalist look. In my opinion the designers have given more emphasis of showing off their work. I have chosen to look at Shaun Bellis’s online portfolio. Shaun is a former student of the FdA Web Design course, and he now is in the web design industry. His portfolio site must have been of a good standard to get into the web design industry. First looks of the website show of a simple and easy to look website. The navigation is very simple and easy to navigate throughout. The work he did on the course stands out to which would give an indication into the simple style of the site.

However it does look too corporate in my opinion. It does not have the personal feel that I think a portfolio should have. The colour scheme is bland and too safe in my opinion. White and blue  shows a cautious approach to a portfolio website. The typography is very easy to read which goes well with the overall look of the website. Shaun has used a fat footer to put all his links to external websites. In my opinion this gives the website too much white space and does not implement the alignment aspect of the Proximity, Alignment, Repeat, and Contrast (PARC) principles.

Overall though I think Shaun has created a great portfolio website. The simplistic and easy to use approach would be great for a presentation scenario which is the main aspect of the project. I would be looking at creating a similar site to Shaun’s, but I am going to put some personal touches to the simplistic approach that I feel my portfolio needs.

Word Count: 419

Project Goals & Target Audience Profile

March 23, 2011

We are now on the final stage of the FdA Web Design course and the objective of the final stage of PPD 4 (Personal & Professional development) is to create a portfolio of my learning. Then to deliver a presentation of my experience on the course. To achieve a good portfolio and presentation I will need to determine my project goals and my target audience.

Project goals

  • The website will follow the World Wide Web Consortium standards [W3C] for Extensible Hypertext Markup Language [XHTML] Strict 1.0 and Cascading Style Sheets [CSS] 2.1.
  • All users will be able to contact Luke Crossfield through the website, this will be done by a contact form.
  • The portfolio will work on most web browsers. Internet Explorer 6 and above; Firefox 3.5 and above; Google Chrome 4.0 and Safari 4.0.
  • The website will be content managed using WordPress.
  • The portfolio will demonstrate my learning on the FdA Web Design course.

Target Audience Profile

My main target audience will be:

  • Academic Staff – As the presentation will be delivered in front of my course tutor and any other staff who might come to sit in my presentation, I feel it is vital that the portfolio and my presentation is good enough for the academic staff at the University Centre of Wakefield. The academic staff will be interested to see what work I have done on the course. I feel that as the presentation will be given to the academic staff at University Centre of Wakefield that they will be my target audience.

My secondary target audience will be:

  • Employers – The course is based on employability and a portfolio will have to be provided for any potential job interviews. Employers will be interested in the work, and the skills that I have learnt whilst on the FdA Web Design course. By providing a high quality portfolio of my work I should be able to achieve my goal of getting a job in the web design industry. Employers might also be interested in the journey and the passion into web design and the portfolio should be able to show that to them.

My tertiary target audience will be:

  • My peers, family and friends – The portfolio site will show my best work on the FdA Web Design. My family will be interested to see what I have done during university so it would be great for me to show my work to them. My peers will be interested to see the portfolio to compare and contrast our portfolio’s, especially if we was competing for the same job. My work on the course could also help me to get some web design work from my friends and family.

Word Count: 450

Evaluation of the learning contract

December 1, 2010

The process of the learning contract has been a challenge for me. For the first time in my educational life I have had to create and complete an assignment. It has been a very interesting experience for me and I feel that this assignment has helped me prepare for entering the web design industry.

I have developed a yearning for coding websites since the web development one assignment in the first year.  After learning CSS [Cascading Style Sheet] and HTML [Hypertext Mark-up language] the next coding language I wanted to learn was PHP [Hypertext Preprocessor]. I wanted to learn PHP as I was eager to learn other coding languages and the fact that I had to borrow PHP scripts for my websites in the first year made it easier for me to choose which coding language to do.

As this assignment was based on learning PHP by myself I decided to try and use different techniques to try and get an understanding of PHP. Using a learning diary was an excellent way for me to write my thoughts and feelings of the learning process. I felt comfortable in writing my problems and the successes of learning PHP. Reading back through the diary has given me time to reflect on how I could have improved my own self learning.

Researching how PHP went into the industry I felt was the right to approach learning PHP. This was my opportunity to speak to professional web designers on how they use PHP and what the benefits would be for me to learn PHP. Most of the professionals that I spoke to were pleased that I decided to learn PHP whilst at college.

Learning PHP was very difficult to understand at first. The reasoning behind that was I had not been able to put PHP into practice. I feel that I learn better by putting some code into practice . Books are not usually my method of learning, but I found them to be much better to understand PHP than a simple tutorial online.  Aaron Corby’s recommendation of the Build Your Own Database Driven Web Site Using PHP & MySQL by Kevin Yank was an excellent recommendation. I found the book to be very easy to use and easy to follow. I also read the PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide, but I did find it very difficult to understand.

I looked at Youtube videos as a way of learning, but I found the tutorials on there to be were going too quickly for me to understand what was happening. The benefits were that you can actually see what the person was actually doing, which did help me to understand what the code was actually doing.

Once I realised what PHP can do I realised I should have learnt it much earlier than I did.  From contact forms to creating content management systems, PHP is vital for a website to meet the operational capabilities for a client.

I gave myself the task of designing a website which included a members log in page and a database driven statistics page. At first I thought that I had bitten off my than I could chew. The website was going to have many different elements that I had only around three weeks to create it.  The creative brief I gave myself was very different to what I have done in the past. Creating a stock management site which allowed only specific users to log in and update the site. I decided to go outside my comfort zone to challenge myself.

Creating the website was easy on the HTML & CSS side, but when it got to the PHP side I struggled at times. The log in form was very easy to code up in my opinion. Using a MySQL database to put in the user name and password information was very easy to use in my opinion.   From reading the Build Your Own Database Driven Web Site Using PHP & MySQL by Kevin Yank I was able to use PHP to connect to the database which allowed my website to have logging capabilities. I was proud of achieving a fully functioning login page.

The stock management page was very stressful to create. One minute I would be happy as I would have got a solution to my problems and the next I would lose my cool when problems were occurring. After around 15 hours of being at the same place it all clicked into place and my stock management page was completed. I had decided to allow my users to enter the information into a form, which would then go into a database, and then it would show the information in a dynamic table. To make the table update itself I created a delete function which would delete a specific row of information.

The testing went through smoothly and the website did not present any problems which gave me a huge smile on my smile.

Reflecting on the self learning process I feel that I have learnt a lot in a short amount of time. It was not only learning PHP that I benefitted from. My time management and organisational skill improved throughout the process. At times I did worry about not being able to complete my learning contract. Now looking back I should not have worried and just been focused on completing the learning contract. Self learning I feel has been of a huge benefit to me and I hope that it bodes me well for the future, especially with the professional projects after Christmas.

Word Count: 935

 

Creating & testing PHP pages

November 24, 2010

The last three weeks of creating my PHP [Hypertext Preprocessor] driven website has been a challenge  for me, and I am glad it is all over now.  My task was to create a log in form and a database driven statistics page.  I decided to create a stock management site for a company called Dynasty. This will allow only their workers to log on to the site and update the stock management page.

To test to see if the website fufills Dynasty’s requirements I have used a local testing server called XAMMP. This will allow me to check to see if the site that I have created  allows users to log in and update the stock management sheet.

With the login page I have decided to put the members onto the MySQL database myself, this will only allow Dynasty to change the users that can log on to the website.  I have created a username and password for myself to test to see if the log in page works. Once I entered the correct username and password it then sent me to the stock management sheet, but when I entered a wrong username and password it would tell me to enter a correct username and password.

Onto the stock management page where I have created a form which allows me to enter  data. This will then be processed through a MySQL database and then be shown in a dynamic table using PHP. A delete function has also been created to allow data that has been entered to be deleted at any time.

To test it out I entered information into the form and pressed the update button. Once I pressed the update button a row apperaed on my dynamic table below. This had all the information I had entered into the form and also a delete button. I then pressed the delete button which sent me to a page where it showed the message “Data has been deleted”. Then it had a link which sent me back to the stock sheet. The dynamic table had deleted the row of information I had put into the form.

Overall the testing went through smoothly and I have correctly used PHP to create a log in form and a database driven statistics page. I am proud of achieving one of my objectives and to be able to use PHP which I never thought I would be able to do at the start of this year.

Word Count: 412

Learning PHP

November 7, 2010

My first thought of learning PHP [Hypertext Preprocessor] was that this going to be much more complex than learning HTML and CSS. As I am learning a coding language on my own I decided to retake the Honey & Mumford learning styles questionnaire to help me decide how I should learn PHP. The results were astonishing as it was even spread between all the learning styles. At first the results made it difficult on my approach to learning PHP. In the end I decided to try and learn PHP in many different ways.

My first port of call was to read the Build Your Own Database Driven Web Site Using PHP & MySQL book by Sitepoint. This was recommended by one of my fellow students who read Sitepoint books regularly. I found the book really easy to follow and it really gave me a great introduction into using PHP. The chapters in the book were like a step by step guide into PHP which really impressed me. It even helped me installed the local sever that is needed to test PHP and MySQL pages. I did also try to read PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide, but I felt that the book did not have as many features as the Sitepoint so I decided to stop reading that particular book.

Before I embarked on PHP tutorials on the internet I decided with the Sitepoint book to try out some PHP. At first I felt frustrated because I was trying to make subtraction using PHP, but I seemed to always get an error page. Once I calmed down and looked at the code I found out that I used had a spelling mistake with the subtraction variable.

Internet tutorials were the next stage for me to learn PHP. Tim Stringer gave me a great website [www.tizag.com] which had some great tutorials on PHP. This was unlike any other tutorials on PHP that I had seen. I found it more useful than the others because it also explain how the strings,variables,echo and other functions were been using to create your PHP page. After I undertook this tutorial I built my first contact form in PHP. I had been borrowing contact form scripts for my websites in the first year, so to be able to create a contact form script made me within myself. Now I feel that I have achieved something I would never think of this time last year.

Trying to think out of the box to learning PHP I looked at Youtube as a possible way to learn PHP. My theory with Youtube would be that you can see what the person is actually doing rather reading the information given. This should be able to show that a tutorial has actually been successful. However when I did try to understand how the person was using PHP it was too quick to know what the tutorial was doing.  This frustrated me as I felt that this could be a great way to learn a new coding language. Youtube is no doubt a new way of how to learn, but I reckon that sticking to reading text at this current time is the right way to learn complicated coding languages.

With the tutorials on the internet and the Sitepoint book I started to further learn what PHP can really do. Experimenting with the code is the best way for me to learn, so I decided to learn how the code is used for in different areas of PHP. I was fascinated in how PHP can be used. Getting error messages does not throw me back, it gives me a challenge which I thrive on with code.

Being sceptical on tutorials in the past I have now realised that you just have to look far and wide to find a good tutorial. Once you do then you know who to trust to provide a good tutorial on whatever you are learning. Reading books in the past have been boring for myself, but I think that the Sidepoint book has change my opinions on books due to it being very easy to understand.  With the wide range of possibilities of learning PHP, I reckon that it caters for most people’s ideal way of learning.

With the learning of PHP all out of the way I hope that I can now go and create my two page website containing only PHP.  It has not been fun all the time, but I have enjoyed it immensely. I feel that I made the right decision to learn PHP because the possibilities are endless.

Word Count: 773

How is PHP used in the web industry part two

October 14, 2010

Continuing on from part one I am going to delve further into how PHP is used in the web design industry. As I have already asked some web design professionals on how they use PHP in their normal working day lifes, I feel that it is time to research the internet for further information.

From the first year I knew that PHP can be used to create contacts form for websites. But from speaking to web design professionals I have found out that their are many different uses of PHP.

PHP is a free open sourced software which I think is one of the major benefits of PHP. Content management systems seems to be based on PHP. WordPress; one of the leading content management systems uses PHP and MySQL to develop their systems. This is commonly used to create web pages with multiple pages.

PHP is also used for creating forums which is now a common for some websites to have. Shopping carts on websites such as Ebay and Amazon are such uses of where PHP has been used. A new way of using PHP has been the development of apps that you can use on the social networking site Facebook.

From both entries it is apparent that PHP has many uses for the web design industry. This does vary from content management websites for corporate businesses to apps for Facebook. I feel that from researching how PHP is used in the web design industry that  it has show to me that is vital to learn.

Word Count: 256

How is PHP used in the web industry part one

October 13, 2010

From investigating what I should for my learning contract it soon occurred to me that PHP [Hypertext Preprocessor] would be preferable to learn. Before I embark on learning PHP I decided as part of my learning contract to learn how PHP is used within the web design industry.

My first port of call was to ask web design professionals on how they use PHP in their normal working lives. Mr Tim Stringer tweeted that PHP can be “used to reduce the amount of html like CSS does for styling”. I also got a reply from Julian Dyer on Twitter saying that it can product content management systems, automated procedures, includes and manipulating data. Alex Ward also gave me the same answer as Julian Dyer but he delved into the subject further. He mentioned that learning PHP is a back end language.

The information provided from the web design professionals shows that PHP has many uses for people working in the web design industry. Alex Ward uses PHP all the time to create his own content manangement systems for his own clients. He also said that it depends on where you are in the industry to learning PHP. If I ever went into freelance he recommended me to learn PHP as it would allow to design the website all by yourself.

In my opinion web designers use PHP in their work. It is a common language that most web designers have learnt to progress themseleves in the industry. This has also allowed  them to be more employable with a web design agency.

Word Count: 262

PPD3 Learning Contract Part One

September 22, 2010

Today is the day we begin our journey into self learning. The course contains the basic technologies and skills of web design, but this is our opportunity to learn about a different skill or technology that we feel is needed before we go into industry. Learning the skills of HTML [HyperText Markup Language] & CSS [Cascading Style Sheets] in the first year I feel was the first step into learning how to build websites. Many other web designers know different coding languages as well as the two mentioned above.

The basic idea is for us as students is to research what different skills & technologies there are available and decide which one is the most appropriate to prepare ourselves for the web design industry. First of all I decided to look at what skills are needed to become a web designer in the industry. To help me accomplish this I decided to look at job adverts for web designers.

Whilst looking through the job application websites on the internet I can see a demand for web designers to have more skills than HTML & CSS. In most of the applications employers wanted people to have a good understanding of PHP [Hypertext Preprocessor].

I have also spoken to professional web designers in the past, and PHP is the one skill that the professionals have said that I would need before I go into the web design industry. I have also recently tweeted “Apart from HTML & CSS, which other web design technologies do you feel is essential to become a web design professional?” on Twitter. The reply from LiquidSquid on Twitter was that jQuery, PHP, and MySQL experience is essential.

From gathering information on which skills or technologies I would need to prepare myself for industry. I have now decided on three different skills or technologies which I could learn in PPD [Personal & Professional Development] three.

PHP is my first choice. When it got to developing websites in the first year I decided to use a contact form, but I realized that I could not use CSS or HTML to create a contact form. Realising that PHP could implement a contact form I decided to look for ways on how to create a contact form in PHP. With no prior knowledge of PHP and in the timescale that we had to create our websites in, I decided to use a PHP script from the internet. Knowledge and understanding of PHP I feel would be important for me to prepare for industry.

jQuery is my second option. During the summer I was asked to do a website with a slideshow of pictures on the gallery page of the website. Without the knowledge on how to do this I decided to hold off doing the website until I learnt how to make a slideshow of images. Then I started to look at how I could possibly do this, and that is were I gathered information about jQuery. I have only been reading little amounts of information of jQuery and not implemented any jQuery into any of my websites. jQuery is a coding language I would like to investigate further.

I would also like to learn the basics of how to use Adobe Illustrator. Learning Illustrator would be beneficial to me as a web designer. With the assignments that are heading my way I feel that having a basic knowledge of Illustrator could benefit me in the short term and the long term too.

The vital component to learning any of the three skills or technologies is how I get the information that would assist me in learning that particular subject. Books I think are the best way to learn new skills.
The following books are what I would like to purchase if I decide to do that particular skill:

I will also use tutorials from the internet to help me develop my skills, but a good book I think will be essential to learn new technologies.

My decision to concertrate on PHP for the duration of my learning contract is because this is the next skill I need to prepare myself for industry. Also I beleieve that PHP will allow me to make better websites whilst I am still studying on the FdA Web Design course.

Word Count: 759