Screen Design Changes

Here are changes I have made to my porfolio screen designs:

I have used a more formal grid system (as seen above), 14 columns.

Any feedback would be greatly apreciated! If you are a member of dasforum please comment there in the showcase section.

Thanks in advance!

Portfolio Designs

Here are two initial screen design for my portfolio.

Design 1:

Design 2:

If you are a member of dasforum, please comment there.

Competitive analysis

Student Portfolio

richardfoley.co.uk

The website is clearly set out and takes advantage of a two column layout. Visual content is consistently at the top of the page spanning across both columns leaving the bottom half of the page for explanations and other text. I feel the space could be used slightly better. Whilst it is advantageous for the viewer who only wishes to see pictorial content people may have already clicked elsewhere before they have reached the text.

The body text throughout the website is rendered in a large typeface which takes up more space. By reducing the default type size more graphical content could be added keep the viewer interested.

Content has been split into two quite definite spaces, Web and Print. This allows the user of the website to quickly navigate to content they want. It is easy for the viewer identify which section of the website they are currently looking at from the breadcrumbs at the top of the page. However; once three levels into the website (from the home page) it is not possible to return to the upper page without using the main navigation. I think a great opportunity has been missed to add hyperlinks to the breadcrumb system which would further aid the user.

Professional Portfolio

thedesignmechanics.com

Throughout The Design Mechanics website there is reference to the portfolio, giving snippets of visual content. It attracts the user’s attention and entices them into the full portfolio.

The website is quite dynamic with visual content changing on the front page. Into the actual portfolio like richardfoley.co.uk the content is split between web design and print design to allow their customers to see the type of work which is required for them.

It is obvious from the portfolio that only selected designs have been entered into the public portfolio. This creates a very dense image regarding the high quality work which the company undertakes.

The work is displayed in a very clean, clutter free way making excellent use of the light box effect. This adds interaction between the user and the website, users are more likely to stay on the page than a static page simply because ‘it does something’.

The large white spaces around the content in the content viewer allows users to look at the work without distractions of other colours and articles.

This website has made use of hyperlinks within the breadcrumbs which aids users’ navigation around this large website.

Web plan

Goals

XHTML 1.0 Strict/ CSS 2.1
• Aids cross browser compatibility
• Reduces load times
Measurable via the W3C validation service

Maximum of 3 clicks from home page to get to desired content.
• Aids usability of the website
Measurable during usability testing.

Implementation of CMS
• Used to tailor the website for specific purposes
• For quick updates and to manage content effectively

150k page size limit
• To control page load times
Measurable using the Firefox Developer's Toolbar.

Long Term Goal

High Search Engine Rank
Measurable by monitoring the rank in popular search engines over a long period of time.

Target Audience

Primary Target Audience – College
Steve is an academic primarily a Mac user but on occasion uses Microsoft Windows. Internet access is through the college’s high-speed Internet connections. The purpose of his visit to the website is to assess the work contained within the portfolio. The website will also be seen in a presentation, displayed on a projector.

Industry Professional
James is a 36-year-old industry professional. He runs his own design agency web and computer savvy with a keen eye for clean design and usability. Paul is primarily an Apple Mac user but is also familiar with Microsoft windows. He accesses the website using a MacBook Pro using a high-speed broadband connection. Paul’s primary purpose for visiting the website is to view the online portfolio of a potential employee. He has found the portfolio by copying the address from a CV.

Student
Scott is an 18-year-old sixth-form student who is looking to enter into higher education. After finding the HND Interactive Media website for Wakefield college he is keen to find more about the learning on the course and therefore heads to find previous student’s work. Scott is very creative but has basic computer skills.

He is looking to find a very clear and easy to follow portfolio showing an obvious progression. Scott is unsure whether he wishes to take a career in web design or solely graphic design, therefore he is wanting to see a wide variety of techniques and final products on show.

Scott is a life long Microsoft Windows user who accesses the Internet through a shared home broadband connection.

Delivery Requirements

XHTML 1.0 Strict
XHTML will be used to define the overall structure of the web site. It will contain content, either for static pages or as an output from the CMS. Using well-structured XHTML documents will aid search engine optimization as well as usability.

CSS 2.1
CSS will be used to stylize the pages in the portfolio. It will be used to define the layout of each page as well as typographical styling, managed from a single document. This will allow for site wide changes to the layout quickly. CSS enables the style and content of the website to be kept separate making it easier to add, remove or update content without the risk of styles being changed.

PHP5
A PHP Hypertext Preprocessor is needed to process PHP elements of the CMS as well as my contact form.

MySQL
MySQL will be used in conjunction with PHP by the CMS system to access, display, store and edit information contained within a database. All data managed by the CMS will be stored within the MySQL database.

CMS
A Content Management System will be used to manage dynamic content such as portfolio work. The use of a CMS will allow content to be changed at ease from a web based GUI (Graphical User Interface) and allows the portfolio to be tailored to specific purpose.

IMAP
IMAP will be used to access emails stored on the remote server which have been sent via the feedback/contact form on my portfolio. IMAP is the new standard for email, all messages are kept on the remote server.

PHP Resources

www.ineasysteps.com/books/details/?184078282x
PHP 5 in easy steps. Book explaining the functions of PHP and MySQL in easy steps, going from very simple tutorials to more advanced functions.

www.php.net
Holds a wealth of information regarding php, including functions, downloads links and resources.

www.w3schools.com
Tutorials for SQL, tests, resources and quizzes

www.w3schools.com/php
Contains many PHP tutorials

tutorialized.com
A community aimed at self learners offering tutorials for just about anything. There are hundreds of php tutorials.

freewebmasterhelp.com
Introduction to php including step by step tutorials.

The PHP Anthology
After using sitepoint’s CSS book which is very useful I will be using “The PHP Anthology”.

Learning PHP3
“Learning PHP5 is the ideal tutorial for graphic designers”. Begins with a soft introduction moving to more advanced features.

safari.oreilly.com
You can sign up for a free trial of Oreilly's Safari service and read their books for free online.

killerphp.com
Video tutorial website. The tutorials assume you have no programming experience therefore you learn from the very basics up, by creating a foundation to work on.

PHP

Over the last few weeks I have been trying to make the decision of the technology to go with for my self managed learning, I couldn’t decide weather Flash or PHP was the answer. After looking at several job advertisements PHP appeared to be more popular than flash.

I think it would be beneficial to my learning and in the future to know PHP 5 and MySQL. If learning PHP 5 it would almost be necessary to further this learning to MySQL as the two technologies fit hand-in-hand.

I think as the web changes it is important to keep up with current technologies. The internet is changing, people don’t want to just visit websites, they want to interact with them. It is ever more important for websites to contain dynamic information.

In the past I have “dabbled” into the previous version (PHP 4). I have had no formal tuition in this subject and my understanding was basic.

• Changing configuration files on script installers
• Very basic statements

Many employers are now looking for people with a wider range of skills such as server side programming languages, XHTML/CSS are now seen as expected. With larger website implementing content management systems PHP is becoming more and more important.

After the self-managed learning plan I would like to understand the uses of both PHP and SQL; what programming language should be used for what purpose. It would also be necessary to know how to use the code correctly and securely.

Most internet websites now collect information from their users, either in the background or by asking the viewer directly. I would need to be confident with the use of a database, how to set up and manage all aspects, from inserting information, creating it’s structure and updating. Outputting information is also a must.

5 Months Left

I really can’t believe I am sat here writing this, a third of the way through the second year. It has flown.

I’ll start off with grades:
A8 – Pass
A9 - Merit

A8
A8 was completed over the summer holiday period. I was quite nervous about the this one as it was all written. Some of the topics were quite interesting and will help me a great deal in the future both in and out of college.

I am glad this assignment was gotten out of the way over summer. It leaves now some more interesting assignments to look forward to.

A9
To be honest I imagined this assignment to be significantly harder than it was. Having said that I have learnt a great deal from John.

One of the biggest learning curves in this assignment was the practical tests. I learnt more in these situations than anything else in the assignment. There is nothing like a little pressure and a realistic situation to keep you motivated.

A11
The team brief is still ongoing but is quickly nearing it’s end. It has been a valuable experience, but also an exact clone of the atmosphere of past team assignments I have worked on in other courses. In my experience of them they never work. However things are getting better after a few hiccups towards the start of the team. Things are starting to move along.

It has been a very good experience designing for real people, who need real websites. The clients we are working for at the moment are not very exciting or inspirational, but I guess these jobs do come along in the real world.

Unfortunately we were unsuccessful in our efforts for ND Photography and Games Design, but I enjoyed the design tasks.

A12
A12 has just started, after a “Shaky” start it is set to be a nice assignment. By shaky I refer to my presentation on Concorde. As usual my nerves get the better of me in these situations and start shaking and it is noticeably visible to both the audience and myself.

I have been given the opportunity to re-present next week which I am confident is going to be much better. The thing that gets me is the fact I was presenting to someone I know, not a complete stranger. I feel I would not be so bad if I was presenting in front of a stranger. I have done it once and I know it’s not so bad, I shouldn’t be that nervous on the re-present.

Today has been spent being creative as part of the reverse design process. I am really enjoying it, once you get over the “ERRR what do I do stage”. I have been able to express myself much more fluidly, rather like upstairs, which scares me to be honest.

In summary, there has been so much happening over the last 3 months and I still feel as though I’m learning. I am looking forward to the CMS unit.