Greg Carrick – HND Interactive Media

Below are the final designs for my portfolio website and the sitemap.

Here are my initial designs for my portfolio website. I’ve done three pages so far; the home page, first year page and a page detailing the work. The images and text are not final yet, just there to give you an idea.

Any feedback would be appreciated.

Thanks

Ensure the XHTML 1.0 Strict and CSS 2.1 are Valid

Valid code increases cross browser compatibility and accessibility. It also makes sure that you website will be viewable in future browsers, without the need to change the code. To check for valid code I will use the W3C validation service.

Keep each page global file size under 40kilabytes

Even though many people now use broadband connections, it is still important to keep small page files sizes so the website loads up quickly for the visitor. To make sure the pages global file size is under 40k, I will check each page once they are uploaded to the web using the web developers add on in Firefox.

Viewable in a screen resolution of 1024 X 768 pixels

A 1024 X 768 resolution is still a popular size with 20% of people still using it. So it’s important to keep the website viewable to them. I will check the goal by viewing the website on a computer using 1020 X 768 pixels screen size.

Cross browser compatible

There are many different web browsers out now and it’s important to make sure the website not only works but also views the same in different browsers. To measure this I will test the website using the most common browsers according to W3Schools.

Delivery requirements

The website will be created in Komodo Edit and will use XHTML 1.0 Strict, CSS 2.1, PHP 5.3.0 and Java Script.

XHTML will be used for the content of the website and CSS for the layout. PHP will be used to pull the pages together and also the send the contact form. Java Script will be used to add interactivity to the website, with the validation of the contact form and Top-Up LightBox to display the larger images.

FileZilla an FTP program will also be used to upload the website to the web server.

Primary Audience – Steve

Steve is a course leader and the purpose of his visit to the website is to assess the work shown within the portfolio. Steve is an experienced web user and mainly uses a Mac but occasionally uses Microsoft Windows. He has access to a high speed internet connection, both at home and work and mainly uses the latest version of Mozilla Firefox. Steve regularly visits design and sport related websites, but also has an interest in websites containing the latest news and Apple products.

Secondary Audience – Potential Employers

Michael is 45 years old and owns a design company based in Leeds. His company specialises in delivering standards compliant websites at affordable prices. Michael is looking for a new web developer to join his team.

At work and home Michael has access to a high speed internet connection and is a very experienced web user. To browse the internet he uses a Mac Book with the latest version of Mozilla Firefox. Michael spends at least 8+ hours online a day, most of those at work.

Tertiary Audience – Students

Stacey is a 19 year old college student, currently studying ICT. She is looking to enter into higher education and has become interested in the FdA Web Design course at Wakefield College. She wishes to view work that previous students have done, to make sure the course is right for her.

Stacey uses Microsoft Windows Vista and IE8 to browse the internet. She is an experienced web user and has access to a high speed internet, both at home and college. She spends around 5 hours online a day, mainly visiting social networking websites and performing research for her college work.

Charlie Gentle – www.charliegentle.co.uk – is a web developer currently working for Chemistry Digital in Nottingham. But also does some small freelance projects on the side.

On first viewing the website, it looks very welcoming and has a simple lay out. The first thing your eyes are attracted to is the content in the centre of the screen, as there is a lighting effect around it, which gives the impression of a spotlight shining towards the centre of the page. Your eyes are then drawn up towards the top of the page where there is a multi coloured circle pattern, like those that appear in photography when spots of light are out of focus.

The header is a simple thin transparent rectangle that is above the multi coloured circle pattern and stretches across the whole width of the page. In the header; the developers name is to the left and there are three links to the right. At first the links don’t appear to be links as they are in very large type, just link the developer’s name. When you hover over a link everything else in the header, including the developer’s name becomes blurred. This is presumably to act as the highlight, but as the link is white and stays white when hovered over, it does not make it obvious as a link, because at first you don’t notice everything else blur in the header. I’m not sure the blurring of other elements in the header is a good idea, but then changing the links colour probably would not suit the websites colour scheme either.

The main element on the home page is the large outline image of a camera, video camera and laptop, which is next to some large text saying “Digital Portfolio” that lets the visitor know what the website is about. Under this is the main content of the home page, that consists of a little introduction about the developer and a latest news section, which is kept up to date regularly, as the latest news date is from the day I visited the website.  To either side of the content are two arrows which can be used to scroll between the different pages of the website. When you click on the right arrow the centre section of the page scrolls to the next page, this adds a very nice affect to the website and even the multi coloured circle pattern at the top of the page scrolls in the same direction. The only problem with the arrows for the scroll is that there is still an arrow showing on the last page, which means it does not do anything when clicked; it is also the same case on the home page as you are unable to use the left arrow. It might be better if there was not an arrow when there is no page in that direction.

The next page on the scroll is the developer’s web work. This page consists of a little description about the developer, an outline image of a laptop and thumb nail images of recent projects. When you click on a thumb nail, a light box style feature appears that has been customised to suit the websites design. On this feature there is an image of a page of the website and a description of what he had to do for the project. There is also a link to the website and if you click on the image it also links you to the website. The only down side with the custom light box feature is there is no close button, so you have to click on the faded background to close it. Also there is no link between each full project description, so you have to close each box and then click on the next thumb nail to view the next project.

The next page is laid out the same as the web work page, but this one contains photography work he has done and an outline of a camera. There are thumb nail images that open up in the custom light box, but this time you are able to link directly between each image, instead of having to close and reopen images.

The final page on the scroll is the contact page. This contains a contact form and links to other things he’s involved in, such as, Twitter, You Tube and Flickr. Next to the contact form is an outline image of an old style post box, which goes well with the other outline image on the website.

Overall, the website is well laid out and appealing to look at. There is room to add a few more projects to the website, but he’s limited to only been able to show 12 of his recent projects, with the current lay out. Showing 12 recent projects is quite adequate to demonstrate his ability, but it’s always nice to show quite a lot of work and have the ability to expand easily in the future.

Jarred Badillo – www.jarredbadillo.com is an America website designer and is currently in his first year of employment after leaving University last year. He is working freelance at the moment and is in a similar position to what I will be within the in the next several months, trying to find work to build up a portfolio.

On first viewing of Jarred’s portfolio website, the layout looks clean and simple to understand. There’s a wide narrow header, with three columns underneath, containing the navigation, a blurb and some featured work. Under that is a set of extra navigation, imaged links to his social networks and bookmarks and a nice clean footer.  There is ample space between everything, so it’s easy to distinguish among different page features and nothing seems squished together.

The website has a white background and uses mainly grey text with black text been used in the header for his name and the titles of work he has completed.  This colour combination is simple and gives a good colour contrast for easy readability, but he could maybe have used a slightly larger font size to make it even easier to read.

The header on the website is very simple and works quite well, to the left is the designers branding identity and what he does (website designer). The centre of the header says “/Index” and at first it seems to be there for design purposes, but when browsing the website it changes to the title of the page you are on, so acts as the page name. To the right of the header is a link to the sitemap, it’s aligned to the top right hand corner of the header and could seem out of place but I think it’s their so it’s viewable when you first visit the website and is not included in the main navigation.

One part of the header I’m not sure about is the width, as it’s wider than the content underneath, so the alignment between the header and the main page seem a bit odd. After looking for a while I can see some cases of alignment, such as the page name aligns with the page content and the designers name is right aligned with the blurb. Also the link for the sitemap hangs over the content more than on the other side of the header with the designer name.

The navigation for the website is quite obvious, with the large grey box round the top link for the home page, which also highlights the page you’re on. The text for the navigation is also grey and then turns white when the box appears on hover. Each link has a different coloured box, but the text remains white. The coloured boxes use flat, quite dull colours, which work well with the white and grey colour theme. The colour for the boxes is also transferred to the links on that page.

Next to the links is another column which contains a short blurb about the designer, the text size is quite small but still easily readable. The column is quite narrow so the blurb has short line lengths and it could do with been slightly wider as the line lengths are probably too short.

Next to the blurb is the column containing some of the websites featured work, the column is the main element of the page and is a lot wider than the other columns. The work in the column is in a list, with the company title and date of completion above a rectangle shape image of the end product. Underneath the image is the description of what was undertaken for the project and a grey patterned line, which separates the different projects. The main problem with the featured work is that none of the designs are linked to the full description, which I would have thought would be a must.

The bottom of each page contains spare navigation, social networking links and the footer, with the copyright notice in. I’m not sure if the spare navigation is needed as the website is only small and the pages are not very long in length, plus the home page is the only page that uses the scroll bar. The social networking links are a nice touch as they use the logos from the companies and are in grey scale, so blend into the website well. When you hover over a social networking logo, it shows in full colour.

There is quite a lot of white space on all pages under the navigation and blurb, but this is to be expected because the main page content is over to the right and stays in line within its column.  The white space does not seem to overly substantial as the website uses quite large white spaces to separate different features.

The portfolio page of the website which contains examples of his work is split into three categories; web, print and logo. This arranges the page well and splits up the different types of work he has done. For each of the sections there is a large image scroll, which scrolls through his work showing a few different images. There’s a description section on the image scroll, but there’s not very much information on each project he’s undertaken.  The image scroll may look nice to start off with but it’s not very user friendly, as you are not able to stop the scrolling and the short description for the project covers up most of the larger image. On the image scroll there are links to the full websites, but none of the links work and there are no URL’s listed so you can’t view the websites in action.

The other links on the website are to his blog, which he has integrated into the website, an about page, which tells you a bit more about him and shows his CV and a contact page that contains a contact form and his email and home addresses.

Overall the website has a nice look and feel, it’s easy to navigate and it would be simple to extend and add new work to. The main downside is that it’s quite bland and could do with a bit more colour to liven things up a bit. It could also show his work in a more improved way than the image scroll and have more of a description about the work. The images on the home page could do with been links to make it easier to find that work and they could also do with a description to explain the project and what he did on them.

The last few weeks have been very enjoyable and I feel very pleased with the progress I have made on the assignments. I’m quite surprised how much I’m enjoying the Culture Vulture assignment as on previous assignment I’ve always found the ideas generation stage the hardest. Before the assignment, the thought of two weeks trying to fill a blank page was quite daunting and I wouldn’t have thought I’d be enjoying the process.

The music in college really does help with my ideas generation; it seems to put me in a good mood and helps to clear my head a bit. I might have to spend sometime this week thinking of a few songs to help me out during the college day.

I’m pleased with some of the designs I’ve done so far, but I feel I need to produce a fare few more patterned designs to make sure I have a good choice for the product. Also none of my designs seem to ring out or look as though they will work for any product, hopefully this week I can get one that does.

The CMS (Content Management System) project has taken me a bit of time to get my head round, with the number of different templates needed for the website. I can now see the advantages of it, especially on larger websites and although I’m still learning about them, I feel quite happy with using one.

I don’t feel like I’m too far from completing the CMS website, I’ve still got quite a lot of tweaking to do, but you can see the basic layout’s done. I think the tweaking might take longer than I want, but I’d rather get it working spot on, than have a few bugs on it.

1. Why have you applied for this job?

They should show that they have applied for the job because they have an interest in what they do and can bring something to the company.

2. What skills do you currently have?

Showing skills in more than coding is important as it proves that there is more to you than just writing code. You should talk about you personal skills and mention the soft skills you have acquired.

3. What is your opinion of web standards?

The need to know about and apply web standards is very important. There are now more people using the internet than ever and the need to make the website viewable to as many people as possible should be something you should be thinking about all the time.

4. Which coding languages do you feel will become popular in the future and do you spend time learning about new languages?

Showing that you have an interest in the industry and its future shows you know the importance of how fast the web is changing and will be able to keep up with future trends.

5. What is your best working style, group or individual?

The ability to work in a group is important as there will be many times when you have to work and contribute in a group. It is also good to be able to work well by yourself as it shows you can get on with thing using your own initiative and don’t need to be guided.

6. Where do you see yourself in five years time?

Talking about your future shows you have thought about where you want to be and have set yourself goals. It also shows your commitment to a company and true ambitions, whether you see yourself progressing through the company.

Learning Outcome One

Investigate the use of PHP 5.3.0 and MySQL 5 in the Interactive Media Industry.

In my research I looked at background of PHP and the number of websites using it. I then looked at the number of current jobs requiring PHP and MySQL and found high statistics on them, showing how much the need for both skills has increased recently. Also I found out that many jobs asking for PHP skills would prefer the knowledge of MySQL to accomplice it. I then presented my findings in a journal post at http://gregcarricksmlp.blogspot.com. When researching the languages I looked more into how popular they are in the industry and not into their uses in the industry. This has still covered the requirements of learning objective one as it has shown how popular the use of PHP and MySQL are in the industry.

Learning Outcome Two

Create skills in PHP 5.3.0 and MySQL 5 ready to be used in a simple website.

I kept an illustrated learning diary and showed my progression in the knowledge of both PHP and MySQL, from basic code to the more advanced code needed for the end product. After I learned the basic PHP and MySQL skills, I mainly concentrated on the code required for the website and didn’t expand into other areas of the codes. This would have been more useful to me in the future but could have made too much work for me to do. I didn’t record all the evidence of my development in the skills, as fully as I should have. This has still covered the requirements of learning outcome two as I have kept a illustrated learning diary and used both paper based and online resources to develop skills in both languages, ready to use on a simple website.

Learning Outcome Three

Plan and create a simple website using PHP 5.3.0 and MySQL 5.

I created a simple website at http://www.gregcarrick.co.uk/a8 and kept it to the plan I created in the creative brief and my sketchbook. There was one change to the original plan, which made the website use two pages instead of one, but the website still kept the simple design required. The website is web standards compliant using XHTML 1.0 Strict and CSS 2.1. I didn’t plan the website as fully as I could have and an accurate plan could have prevented the slight change I had to make. These still have covered the requirements of learning objective three as I developed a simple website using PHP and MySQL, taking into account web standards.

Learning Outcome Four

Evaluate the simple website and the use of the self managed learning plan.

I kept a journal at http://gregcarricksmlp.blogspot.com and wrote a weekly post evaluating how I was progressing on the self managed learning plan and any problems I was having. At the end of the assignment I then wrote a summative evaluation of the whole task and uploaded it onto my journal. My weekly journal posts mainly exceeded the 300 word limit I set myself but I kept to the limit on the final week and my evaluation. These still have covered the requirements of learning objective four as I kept and weekly evaluative journal entry and concluded with a summative evaluation of both the SMLP and the simple website.

M1: Relevant theories and techniques have been applied

I investigated into the use of PHP and MySQL in the industry.

M2: The appropriate structure and approach has been used

I used both a sketchbook and an online journal to monitor the progress of the assignment.

M3: Complex problems with more than one variable have been explored

I did not meet the requirements of this criteria.

Final Grade – Pass

For the assignment I have given myself a Pass as I feel I have met all the required criteria to achieve this level. I have not met all the criteria for a Merit level and I am quite disappointed with myself that I didn’t put enough work into the assignment to get a Merit.

Junior Web Design role

My client is an award winning creative digital agency with a growing reputation for quality and success and works with a wide-ranging client base. They require a Web designer to join their expanding team!

The successful candidate will have the opportunity to work with a wide portfolio of client relationships and will be responsible for designing websites from start to finish. In-house support and guidance will be provided.

The ideal person will have a genuine passion for the web, HTML and CSS skills, and a strong portfolio showing creativity and innovation. You will be motivated, have multi-tasking skills, be pro-active, and will possess great communication skills. You will also enjoy working within a team.

They are looking for talented individuals who want a challenging and exciting career in the digital marketing industry.

Link to advert

I initially chose this job as it is aimed at someone in a junior position and requires skills that I feel I have started to gain and will hopefully acquire by the end of the course. The advert states that “in-house support and guidance will be provided”, which is a really big bonus for me as it would enable me to move steadily into employment and not be thrown into the deep end without getting any guidance.

The coding skills required for the job are HTML and CSS, which I feel I have already required to a reasonable standard, I am no were near at an advanced level but over time I feel I can progress to a high level. Though this advert does not state the level of HTML and CSS, I would be expecting they would require quite high skill levels.

The other skills required are more soft skills and I feel fairly confident that I can fulfil the requirements of these skills. I gained these skills are mainly through college with multitasking assignments and on previous courses were I have done team work. I will also be able to test and improve on these skills with most of them been required in the up and coming team assignment.

The main part of this advert I feel I cannot fulfil at this moment is the part needing “a strong portfolio showing creativity and innovation”. I feel my portfolio is not at a stage where I can use it to show off my full potential and gain a job through it. As my portfolio is still a work in progress I think this would be the main area letting me down. Hopefully during the rest of the course I will be able to create work I am proud of, that can be used to improve and expand my portfolio.

Although the job only requires HTML and CSS skills, I feel that the current skills I am developing in PHP and MySQL can be used to my advantage, to show I have knowledge in other areas and can bring something with me.

At this moment in time I would not feel confident to apply for this job, although I feel I have most of the skills required. This is mainly due to me not feeling ready to progress into employment at this moment, since there are still things I feel I need to learn and improve on first. The rest of the course will help me prepare for employment as I will gain firsthand experience of working in a team and the environment that goes with it. I will also find out what it is like, working at a faster pace than I am used to, which is one of the things I don’t feel ready for at this moment.

Word Count: 470