Below are some examples of my final portfolio designs.
Home Page
Portfolio Page
Portfolio Individual Page
Contact Page
Any feedback would be highly appreciated.
Introduction
In order to build a creative and professional online portfolio I need to set specific delivery requirements. Setting these requirements will give me a technical brief to work from.
In the article “Creating A Successful Online Portfolio” Sean Hodge talks about how important it is to discipline yourself in order to create a “usable and nice-looking design”.1 Setting specific delivery requirements will allow me to prioritise and organise
my project appropriately. These requirements will also help to determine if I’m setting myself an appropriate amount of work.
Delivery Requirements
I will be using XHTML 1.0 [strict] and CSS 2.1 to create my web site. For any parts of the web site that need to be interactive I will use PHP and Javascript. To test the validation of the code I will use the W3C validation tool.
To ensure my portfolio is viewable in as many browsers as possible I will test my web site on the most common browsers listed on the W3Schools web site.
The portfolio will be hosted by ThisWebHost under the domain name www.kelly-scholey. co.uk.
I will be using Photoshop to draw mock-ups of my final designs and I will be using InDesign to present my final designs in.
Competitive Analysis
The site I have chosen to competitively analyse is gummisig.com. The reason for this is because the portfolio work of Gummi Sig is spectacular and impressive and my aim is to someday be able to develop work just as creative and professional as this.
First Impression
The initial feel of gummisig.com is pretty and summery. This inspired me to browse the web site further. The summery feel is complimented by the summery background image at the top of the opening page which is displayed in pasted colours and includes flowers and trees.
The main draw of the web site was the bold header, “Scandinavian freelance web designer gummisig”, it stands out and has the perfect contrast to the images shown in the background. This theme is followed on every page of the site.
Sidebar
The navigation is funky, modern and compliments the layout of the web site beautifully as well as offering a young appeal. The navigations hovering effects overlaps slightly on the adjacent links, making the site potentially difficult for the visually impaired to use.
The sidebar also includes an “I am” and “I do” section that appears on every page. The spacing above and below each of these sections does not seem to match and I think that the “I do” section needs more emphasis as I believe this is an important aspect of portfolio.
Layout
The layout of the web site is simple but effective, incorporating a two column design. The sidebar is located to the left and the content to the right. The width of both these columns compliment each other making it modern and clean in style.
Portfolio Page
The main feature of this page are the hyperlinks in the form of images. When hovering over the images a black border and drop shadow appear helping navigation by highlighting the hyperlink function. At first glance it wasn’t apparent that the
images were slanted but I found it very appealing. The rest of the content of the page is consistent with the rest of the web site with large headings, style, format and sidebar.
The two image per row design results in the images being large enough to see the contents clearly. The simplicity of the web page helps to keep the user from being overwhelmed with too much information.
I’m impressed with how the information about each portfolio piece is located on a serperate web page and is not only displayed in a lightbox.
Blog Page
The way in which he has displayed the recent entries section is positive because it helps users to browse through the different posts and select a post they would like to read.
Typography
The web site uses the Helvetica typeface making it simple, clean and easy to read. He uses a nice variation of weights within the portfolio which helps to emphasis certain parts of the web site.
Footer
The footer is one aspect of the web site I really find disappointing. Firstly, the footers background image has broken. This could have possibly looked better by using the solid colour of blue which is displayed in the body of the web site.
The ‘latest stuff on site’ section appears too long in comparison to the rest of the footer. There is inconsistency on the hover effect of the links and the spacing between elements incorrect.
Word Count: 755
1. Sean Hodge, 2008. Creating A Successful Online Portfolio. [online]. Smashing Magazine. Available at: http://www.smashingmagazine.com/2008/03/04/creating-a-successful-onlineportfolio/. Accessed on: 28/03/2010.
Introduction
I am in my final semester, nearing the end of my two years on the FdA Web Design Course at Wakefield College and I am now in the process of completing my final assignment called Personal Professional Development 4. The object of this assignment is to develop an online portfolio which reflects and displays the work I have produced during the course.
Project Goals
By choosing a selection of goals for this assignment I am able to determine what the most important aspects of my portfolio should include and how the website should be produced. Experience gained in previous assignments has taught me the advantages and importance of following set procedures. Setting project goals enables me to keep my priorities in order and allows me to look back and reflect on my progress as a student and web designer.
I have selected the following goals I believe will help guide me towards creating an online Portfolio that will help gain employment in the web design sector.
Project goals:
Target Audiences
Persona One – Potential Employer- Jack Scott, 38, is the manager of a local web design firm. His office uses iMacs and they run on Mac OSX, they browse the internet using the latest versions of safari. He takes home a salary of £30,000.
At home Jack uses a family PC which runs Windows 7 and browses the internet using the latest version of Firefox. As he uses the computer at work all day he prefers to spend his spare time with his family and friends.
Persona Two – Course Leader – James Fallon is the course leader of the BA(hons) Design Digital at Leeds Met. He is provided with PC which runs on Windows XP and uses Internet Explorer to browse the web. James is 50 years old, married with no children. He lives in a 2 bed detached house and spends his spare time on his laptop creating digital graphics.
Persona Three – Potential Client – Frank Ajaz is the current owner of a local cleaning business. He employees 6 staff who clean houses for a fixed fee. He is currently in the market for a website and is looking to have a website designed and build by a web design graduate.
Word Count: 429.
As part of the Personal Professional Development 3 (PPD3) assignment I was asked to create a learning contract that had specific and direct learning outcomes that I aimed to achieve. The overall task was to learn and use PHP 5.3 and MySQL 5.
I struggled to understanding how the session start works and how I keep pages private. Throughout this assignment I spent every hour I had spare studying and looking at different examples of how different elements of PHP works until I came up with the solution that worked for me.
I think my turning point on this assignment was completing the contact form as things started to click. I think completing this form gave me the confidence to carry on steadily away with this assignment.
PPD entries
Unfortunately I didn’t manage to keep to my limit of 400 words for most journal entries throughout this assignment as I felt that I had too much information relevent to discuss. If I was given the chance to do the assignment again I would have given a word count of around 700.
Study time
As this assignment is coming to an end I am feeling a huge weight been lifted, this assignment has truly been the hardest of them all. I think what I found most frustrating was reading through the books and not quite understanding what I am meant to be learning. Looking back I believe I could have prioritized my time more by spending more time trying to practicing what I’m learning. Fortunately, I now understand what things do within PHP and MySQL.
Code
I found that putting into practice what I had learned was the most exhilarating experience for me as I slowly watched a website form. If i were to do this assignment again I would have given myself more time to practice what I’m learning rather than just learning as I found it to be real beneficial.
PHP and MySQL
By understanding PHP and MySQL I am fascinated by the fact that I am able to look at code and have a good idea of what it is doing. I do feel that I will need to keep doing php to be able to get a good hang of it as I did find it very difficult to grasp in the first place. The worse part of learning php for me was the session start stuff and how to make pages private etc.
Overall
With the exception of the journal entries going over there limit I believe I have reached all my learning outcomes specified within the learning contract. If I were to do this assignment again I would have given myself more time to practice learning whilst I am creating the site as I feel as though I would have benefitted more.
Word Count: 470
I had created many thumbnail sketches to come up with a suitable design I believe would suit Christpher Marshall’s Photography web site. I messed around with colours, sizes, position and layout and finally came up with a sketch I thought stood out.
Photography Websites
According to Wikipidea “Photography is the process, activity and art of creating still or moving pictures by recording radiation on a radiation-sensitive medium, such as a photographic film, or electronic image sensors.”
I believe that by calling a photograher an artist is incorrect. I do not believe that been able to hold a camera to a model or scenery automatically makes a person an artist. However, what the camera infact does is what I would call an artist as it has the capabilities of recording anything infront of it and ‘painting’ the image onto film. This recalls back to a previous journal entry I wrote about titled “Artist vs. Designer” and the different rolls I believed where involved with both possitions.
Final Draft
After much thought and consideration about which sketch I would take on to a final design, I went for one that doesn’t follow the medium that most photography websites seem to follow. I thought by going for a website which has a more structured layout than others as this would appeal to be more visually pleasing and attract a wider range of browsers. Most websites also had either black or dark backgrounds so for my design I decided to a experiment with light backgrounds.
Screen Designs
The screen designs I found to be quite fustrating as I had to create a design that was universal and suited all kinds of images. I had decided that the layout had to be simple and clean to allow maximum user accessability but in the end I felt that my design lacked a creative flare.
Word Count: 317.
I have continued to read the PHP 5 in easy steps book by Mike McGrath and decided to start to miss out some of the tutorials that I felt wouldn’t help me in this assignment. I was spending too much time reading through the book rather than putting into practice what I have learned.
Multiple Arguements
By applying a multiple arguement in a PHP script this allows several values to be passed to the function code. By applying a multiple arguement it allows the user to add up two or more values in which will allow a result. The php function can be added as many times as you want into a html code and if you leave a number blank within the bracets of the function in the html that blank number will be the number that is in the php function of the php.
Server date & time
Allowing users to see the date and time on a web site is something I have a keen interest in learning to do so when this opportunity came along I was rather excited. It seems that adding the date or time to a web site can create a nice little addon to the page. Writing out the code, which is shown in figure six, seemed a rather easy and straight forward thing to do. There there is alot of variation in ways you can display the time or date which I find quite pleasing, example shown below.
Getting form values and submitted values
Creating a form was a interesteing task to complete as you learn about only been able to select one radio button and how its value is sent to the server when the form is submitted.
I’m starting to get a little fustrated in how uneasy the PHP in easy steps book actually is to follow. Okay, saying it’s uneasy to follow is a little dramatic the simple truth is that the book doesn’t go into depth about what each bit of php actually does and so therefor I am having to rely on Google to tell me.
Calculations
The one thing I did find surprisngly easy to follow was the how to manilpuate submitted values example. The form I learnt enabled me to enter two numbers and then select a method of manipluation to apply to them chosen numbers. To make this work you need two seperate documents, one of which has all the information on which enables a result to be formed from it and one which has the result on. The second document has the code on it which adds, subtracts, multiplys or divides the two numbers together.
String manipulation
The example I am shown demonstates how strings can be mainpulated using some of PHP’s string functions. The function name is sent to the server, when the form is submitted, as the value associated with the key “fcn”. The first image below shows what I was able to create using a range of functions and the second image shows the form submitted.
Creating an upload form
I intend on creating an upload form for the photography website so that my client has the ability to upload images of his own computer. Using the example from the book I recreated the code, shown below.
This little bit of code resulted in;
Creating a feedback form
On almost every web site there is a feedback form of some kind and the web page I intend on making is no different. The one I am asked to create has three fields a name, email and comment field and also includes a send form. The coding itself is surprisngly simple and easy to follow.

Sending plain text emails
For previous websites that I have created I have outsourced feedback forms so when it come to building my own feedback form I was rather excited. I started by making a simple feedback form as stated above and then I had to create the php document that transferred the information entered onto the form to an email and also leaves a message on the html page allowing the sender to know there message has been sent.
Creative Brief
As part of my self managed learning I had to produce a creative brief. I found this quite interesting as it allowed me to choose the level of my own input and creativity. I decided in order for me to feel satisfied with the web site and my learning that I would include a feedback form, a log in area in which Christopher Marshall (the photographer) can login to upload his own images of his computer and so therefor an upload form.
I started my research by looking at other photography websites and coming up with an overall conclusion on what to include. I then went on to produce spider diagrams and mood boards which reflected my understanding of photography websites and produced many thumbnail sketches until I came across a design I felt was adequate enough to forfil the specification of the brief.
Word Count: 840
Older PHP scripts
Just like HTML the PHP code has to be included within the special markup tags. Each PHP code tag begins with “<?php” and ends with “?>” unlike older versions of PHP which began with “<?”. The reason this is discouraged is to avoid confusion with other server-side languages.[1]
Hello World
I am told that the most basic PHP instruction is the echo function and to my understanding the echo function is used to write content into a generated html page. In Komodo edit 5.2, which is the text editor I am using, I wrote the code “<?php echo ( “<h1>Hello World</h1>” ); ?>” which transformed to visible text “Hello World” on my web browser shown in the figure below.![]()
I feel as though I’m getting of to a pretty good start with learning PHP and feel as though reading PHP 5 in easy steps by Mike McGrath helps to make the language easy to learn as it has step by step instructions on what to do.
Comments
I feel the ability to comment your own work is very important when persuing a career in web design as this leaves any person able to view your work the ability to understand where or what you are working on. I had never really understood the reasons as to why we comment our own work to begin with but as I have progressed as a web developer I have come to see html files get so long that when you scroll through the document it would have been nice to see comments.
When it came to learning how to impliment comments within a php document I was rather excited and delighted with how easy it was to actually use and remember the code to write a comment.
Variables
I had a little trouble understanding what a variable actually was and even though I had wrote the code and managed to get it working on my browser I still didn’t understand what I was actually doing. I couldn’t pick up a clear discription in the book I was using so I searched google for “What is a variable in php?” and it came up with many different explanations. One link went on to say that a variable is a way in which to store data that can be used over and over throughout the php script as long as you give it a name. [2] To test this I repeated the variable and as a sucessful outcome had double the text. To define a variable you must use the dollar sign followed by the title of the variable.
Multiple functions
I thought learning how to multiply a number was rather interesting to learn and seeing how easy it is to actually change the number you would like to multiply made the process much more forfulling. The only thing I did find quite fustrating is how long the code actually is for such a small project. Surely the creators could have found a way to create shorter code to achieve the same outcome.
To create the code you first had to enter the php script that enables the multiplication to enter, as the image shows,
then to show that code on the page you had to then enter a html tag and within that put the essencial php code that shows the multipied number on the page as shown below.
1. McGarth, M. PHP 5 in easy steps, Publisher: Computer Step, 2004, Page 20.
2. Tizag.com, PHP – Variables, Retrieved 19/10/2010, http://www.tizag.com/phpT/variable.php
Wamp Server
Reading through PHP 5 in easy steps by Mike McGrath, the first thing I am told to do was install Apache. The file it told me to download, unfortunately, no longer existed and at that point I was a little confused on what to do. Looking through www.google.com I had come across other forms of virtual hosts that you are able to download such as Lamp, Wamp, Mamp and Xammp. I needed hosting that was windows equivalent so decided to use Wamp.
To begin with I thought I had a problem getting the Wamp server to work. I had written <?php phpinfo(); ?> into a new PHP document and this should have tested the PHP environment I am using. When I saved the file and opened the browser I got a blank page. I had tried different things to get the page working including reinstalling the programme, restarting my laptop, reading blogs and tutorials, using other sources of downloads and so on but I just couldn’t get the programme to work.
I eventually ended up spending the whole day trying to figure out what was up with the programme and ended up feeling very exhausted and frustrated. I ended up caving in and asking for help from other students, one of whom mentioned that I was dropping my PHP files into the wrong folder. I moved the PHP file to the other folder and thankfully it all started to work properly. Knowing that I had spent a whole day attempting to get Wamp to work when in fact it actually was felt very frustrating.
Testing PHP
Once I had WAMP working I decided to start again. I opened a text editor and wrote the code “<?php phpinfo(); ?>”, which enables me to view the PHP environment I am using. Saving the file as phpinfo.php I went on to place it into the ‘www’ folder within the wamp servers folders. Opening the file in Mozilla Firefox I wrote the web address http:// localhost/phpinfo.php and as a result ended up with this.
Testing MySQL
The next stage of my learning was to test MySQL and see if that works. To do this I had to embed the php within a html document. Thankfully, the connection worked fine and I was shown the “Congratulations – You are connected to MySQL” screen, like below.
Word count: 400
Objective
As part of the PPD 3 (Personal Professional Development 3) assignment I am required to learn a new language in relation to the course I am studying, FdA Web Design. Through extensive research I’ve come to understand that to xHTML (Xtensible Hypertext Markup Language), CSS (Cascading Style Sheets) and PHP (PHP: Hypertext Processor) are some of the main skill employers are looking for. As I already have experience in the use of XHTML and CSS I have decided to study PHP.
A brief history of PHP
Using the book PHP 6 and MySQL 5 by Larry Ullman I came to understand that PHP used to be called ‘Personal Home Page’ and was created in 1994 by a Ramus Lerdorf in order to track visitors to his online resume. As Personal Home Page became more and more popular and even became used in more professional careers it came to be known as PHP: Hypertext Processor.[1]
The latest version of PHP is PHP 5 and it incorporates the “Zend” engine which allows the PHP scripting language to be used with any web server, operating system and platform. It also has better security features and adds support for eXtensible Markup Language(XML).[2]
What PHP does?
According to www.php.net which is the official PHP web site, “PHP is a widely-used general-pupose scripting language that is especially suited for Web Development and can be embedded into HTML.[3] It helps to create a web page that enables users to interact with the site.
From previous experience I know that when PHP is embedded into the HTML it only appears to work after something occurs, such as the submission of a form. To confirm this Larry Ullman wrote “you can take a standard HTML page, and drop in some PHP wherever you need it, and end up with a dynamic result.” He also went on to say that “PHP very approachable for anyone that’s done even a little bit of html work.”[4]
PHP works by a web browser requesting a web server that is PHP-enabled. The server will call up the PHP parser, parser is an engine which has to be installed so that the html page can be generated and read by the web browser, to process all the PHP elements on the page. The PHP parser carries out the PHP script instructions on the page, generating a HTML document that is sent to the web browser in response. PHP parsers can also be used to retrieve data from a database.[5]
From looking at the list of available PHP scripts on http://www.phptutorial.info you are given an insight into the type of scripts you are able to create. Some of the available scripts on this web site are:
A brief history of MySQL 5.3
MySQL, which runs on a cross-platform operating system, was named after the original developer Michael Widenius’ daughter, My. The initial release date was the 25th May 2995.
What is MySQL and what does it do?
Licenced under the “GNU General Public License or proprietary EULA”[6] “MySQL is the worlds most popular open-source database.” “Like PHP, MySQL offers excellent performance, portability, and reliability, with a moderate learning curve”. To my understanding MySQL is a database management system. Which in simple terms means “a collection of interreled data, be it text, numbers, or binary files, that are stored and kept organized by the DBMS.”(Database Management System).[7]
How well do they work together?
Overall, I believe that MySQL and PHP can work well together to create good dynamic web sites which are “flexible and potent” and “more accurately described as applications than merely sites.”[8]
References
1. Ullman, L. PHP 6 and MySql 5, Publisher: Peachpit, 2008, Page xi.
2. McGarth, M. PHP 5 in easy steps, Publisher: Computer Step, 2004, Page 9
3. The PHP Group, 10/09/2010, What is PHP?, Retrieved: 28/09/10, http://www.php.net/
4. Ullman, L. PHP 6 and MySql 5, Publisher: Peachpit, 2008, Page xi.
5. McGarth, M. PHP 5 in easy steps, Publisher: Computer Step, 2004, Page 10 & 11.
6. MySQL, 12/10/2010, MySQL, Retrieved: 13/10/10, http://en.wikipedia.org/wiki/MySQL
7. Ullman, L. PHP 6 and MySQL 5, Publisher: Peachpit, 2008, Page xiv.
8. Ullman, L. PHP 6 and MySQL 5, Publisher: Peachpit, 2008, Page x.
Word Count: 649.