Initial Portfolio Designs

A8 Online Portfolio: Website Goals

Validation: The Website should be validated with XHTML 1.0 (strict) and CSS 2.1 using the W3C validation service. This will help to ensure that the website functions correctly across all common browsers and is a good method of checking for errors in coding.

Size (KB): In order to provide fast load times, each web page should have a global size of no more than 500KB. Although this is slightly larger than the optimal recommended maximum file size of 60KB, it is more realistic given the high image content of a portfolio website.

Readable Content: The content of the web page should be written to a FOG Index of 10 to 12, this is a recommended level to ensure readable content of written English accessible to a wide range of target audience.

Accessibility: The website must conform to CS3 Web Content Accessibility Guidelines (WCAG) 2.0, to levels 1.1, 1.3 and 1.4. This will help to ensure that my site is accessible to a wide target audience.

Coding: The website will be coded using XHTML 1.0(Strict) and CSS 2.1, and may contain elements of Javascript 1.8.1(such as ‘lightbox image gallery’) and PHP 5.3.1 (such as feedback form and current date display’)

Display Size(pixels): The most common computer display resolution is 1024 x 768 pixels. I will design my website to be displayed in this resolution.

Target Audience Profiles

Target Profile 1: Tutors and Peers

With this group in mind, my web presence needs to emphasise both technical competence and graphic design competence. Within technical competence I will need to show my ability in semantic coding while also having a high degree of usability and accessibility. Additionally, my work needs to validate to w3c standards.

The graphic design competence will ensure that all websites are easy to read with information at the right level. The navigation must be clear and obvious. The websites need to have an appropriate grid layout and show evidence of PARC principles.

In terms of content, I would highlight samples of my work that I am most pleased with. Drawing on my strengths, I would want to showcase my work which has the most visual interest. On a more practical level, the site should be easy for me to navigate during the presentation of my work.

Target Profile 2: Potential Clients for Freelance Work

The aim for this target group is to attract sole traders, small businesses and individuals who want an attractive yet straightforward website to provide them with an online presence. This group will be interested in websites that not only displays their business or services, but also has effective Search Engine Optimisation (SEO.)

It is also important that websites provide key information at a glance. In order for clients to see that I am a competent web designer, my website has to appeal to them and show that I can deliver what they require, which is basic but effective websites. If I end up working freelance I might adjust my portfolio once I finish the course to highlight the work I’ve done for clients, for example, the websites we will produce during our team projects.

I might also add other information such as prices and services and change the content to describe myself as a freelance web designer instead of a recent graduate. I think the emphasis for this profile will be to show off live work together with a clear outline of costs.

The theme should be a balance between friendliness and professional competence.

Target Profile 3: Potential Employers

The emphasis with this group in mind will be to show off my work experience, as this is what companies will mainly want to see.

I want to accentuate my key strengths which are the graphic and illustrative side of web design together with my competence in basic coding and any new skills that I might acquire after leaving this course, such as Flash.

I would also highlight some elements that show technical flair, such as using image sprites in the navigation, a contact page that uses a PHP feedback form, and also using PHP to show the current date and time at the top of my website. However I don’t want to have too many gimmicks that could make the website cluttered and confusing to use.

My work should keep to a clean and professional feel to appeal to this profile group, with a clear emphasis on any live work experience as well qualifications. I will also include my experience in other types of design industry, worded to sound as relevant as possible. Even though it may be a different area, it shows that I have experience in the design industry.

Competitive Analysis of a Professional Website

Website: http://www.webbositedesign.com/index.htm

Location: West Yorkshire, Leeds area (exact address not given.)

Client group: Sole traders and small businesses, eg: Mobile make-up service, driving instructors, wedding dress shop, cycling holidays in the Yorkshire dales.

Introduction

As I am quite likely to start out as a sole trader or freelance web designer with the basic skill required and no specialist area such as flash or e-commerce, I concentrated my search on professional website designers who appear to have the same skills and a similar market.

The website I found is based in West Yorkshire (he doesn’t give an actual address but his portfolio clients are all West Yorkshire based.)

Although pretty basic in terms of not being Flash or Javascript reliant, his work shows an effective use of imagery and layout to produce sharp looking websites. His own site is quite clear and standard, with a large banner image and logo, and an introduction to his services on the homepage.

Navigation

The links are curiously spread out over two lines, the home and contact links are above the header, and the rest of the links are just beneath the banner. I personally think this could cause some confusion to a viewer as links are usually in a predictable line, either vertically or horizontally.

I would also add a ‘current page’ indicator bar to the navigation links, as this can be done quite easily using only CSS2 and HTML.

Corporate ID and Logo

The name ‘Webbo’ is perhaps a little bit cheesy but it does suggest immediately the nature of the business and is very easy to remember. The cheesy factor is played up by the friendly approach of the website, which may reassure client who have little or no knowledge of website other than being aware that they should have one for their business. A more technical and sophisticated look might actually put off some of his potential clients.

The Logo is friendly looking and uses a nice ‘Courier’ type font with a slightly degraded ‘typewriter’ effect, but the central letter ‘W’ should be reduced in order to have more of the orange background around it, making it more visible as a ‘W’. At the moment it could be mistaken for a small ‘v’ which doesn’t make much sense.

However it is still quite a nice overall effect. I also like the way it has been superimposed onto the header images to break up the linear appearance and make it more friendly looking.

The banner images change for each page and are quite a bizarre assortment of images.

I would at least keep them to one colour theme (orange) in order to improve repetition of the overall site.

Grid Layout and PARC principles.

The Website ‘content area’ uses a consistent column structure throughout: A central double width column and a half width column on either side.

This consistency adds to the clarity of the website and shows a competency of using the grid system, whilst also being quite a simple layout.

Repetition of the colour theme also follows the PARC principles.

The proximity is helped by having key information for each page in the central column, the left hand column remains constant, showing the price list of various packages, which could be immediately reassuring for a potential client.

Contrast is helped by using a white background and dark text. The clear headers also break up the content text making it easier to follow.

Overall I think this website would appeal to a sole trader looking for a simple but attractive website in order to create an online presence.

Competitive Analysis of a Student Online Portfolio.

www.beakable.com

As I wasn’t sure where to start looking for student website portfolios I started with Wakefield College graduates. However I couldn’t find many sites even though I thought they’d be the obvious choices.

The one that caught my eye was a friendly looking site by a ‘Web Development’ student at Glasgow.

The first impression of this site was that as well as being quite quirky and original it was also very clear to read, having well spaced out text and containing an appropriate amount of information on each page.

The Website uses a common layout throughout its four pages, having a common banner which stretches across the whole page. This adds to the Repetition of the overall website.

The background imagery of the website uses a mottled pale blue paper effect which blends into the header image, which is slightly darker and has more detail.

The background image spreads across the whole screen and is repeated, although this is not obvious at first glance.

The main content area of the website is centred on the screen. There is no obvious grid structure to the web pages, although it seems to be based on a simple two-column structure which is adequate for the site.

The overall website comes across as being fresh and energetic, with the content of the text being very positive about the author’s work and experience.

The Home page has horizontal links along the top part of the web page in a fairly standard position, followed by a very obvious introduction in large text briefly telling the user about who the author is.

Underneath the introduction is a box containing more detailed information. This box can be scrolled by clicking on a button just underneath it, however it is not a very obvious link and looks more like a background graphic, being a pale pink colour. I would prefer it to have some text instructing the viewer to use it, or also have the button as a stronger image to make it stand out.

Once clicked the box shows a sample of previous work, and provides more detail about his professional background.

The Portfolio page is nicely presented, continuing with the friendly fun theme as two image links to his recent work are displayed as notice board images on scrap paper. One link is for Website work and the other for Flash work.

In the website's portfolio the links show a screenshot of the website design, rather than taking you to the actual site. An ‘info’ tag then provides some background to each of the projects. It is very clear to follow and has an appropriate amount of information for each project.

The Projects page has some of the author's Photoshop and Flash work; and although in itself the digital artwork is not very impressive, it does show a high level of competence in Flash.

The Contact page has a fairly basic feedback form with some background graphics added to it to give the impression of a letter and envelope. This also fits in with the quirkiness of the overall website.

The Blog page is the final page containing posts about the author’s college course and his professional work, and written in a casual yet semi-professional manner.

The Second Year So Far..

This semester has been started at quite a pace, but I have felt generally more comfortable with the workload and pace of learning, as I feel more confident that I can apply my newly acquired knowledge and skills towards the new assignments. I am also more confident in online forums such as the WP CODEX Forum in order to find answers to specific tasks such as how to use Wordpress functions. I used the WP CODEX Forum for the A11 word up in order to learn more about the WP list items function.

I am pleased with my overall work on the A9 Up Your Street assignment. I wanted to create a humorous and mock-sinister theme for the subject as I had the idea to use the iconic Godfather movie poster as a basis for the website.

I struggled, however, with the java script element as I wanted film strip effect for the gallery using a 'scroller' along with a 'lightbox' feature. With a bit of help from
Two more technically-minded students I managed to get it working. The current A10 assignment is good fun and also helpful in pushing us to explore and practice our creative-thinking skills.

I am confident with drawing skills so I am trying to look at different subjects and also use a mixture of techniques and media in order to create artwork and patterns.
I have found that last year's sketch work has helped me to develop my drawing and artistic skills. This assignment doesn't suit everyone on the course, especially those that regard themselves more as 'coders', but I am in my element.

I'm looking forward to another week or so of generating ideas before developing a selected work into digital artwork for packaging design.

Web Design Interview Questions

What experience do you have which is relevant to this post?

This would be a good opening question, to allow the interviewer to get a sense of the interviewee’s experience. While the CV should show past posts and qualifications, asking the interviewee to highlight relevant experience will also show how a person can cope with being put on the spot. An interviewee who has prepared in advance should be able to answer this easily and well. A weak answer will illustrate a lack of basic preparation.

Of the portfolio pieces you have shown us, which are you most proud of and why?

This question also allows for an overview of past work, but this time in terms of specific work that has been done. Like the first question, it will also show if there has been preparation. But in addition, it gives a chance to see not only what an interviewee is capable of doing, but also whether they are able to talk about their work. I would follow it up by asking the interviewee to explain the technical basis of one of the pieces in the portfolio. This will go some ways towards showing whether the interviewee is able to communicate with potential clients.

Here is a sample script of PHP. What do you think it might be used for?

This question will show the technical knowledge of the interviewee. It could also show whether the interviewee is able to think laterally to think of a use for a website.

What is the value of teamwork, if any? Describe a situation which you have been involved which required teamwork.

This question moves the interview to more general job requirements. It’s important to not only ask what the interviewee thinks about teamwork, but to ask them to give an example because it’s very easy for people to give the expected ‘right’ answer to a question like this. Asking them to give a real example shows whether or not they actually believe what they say.

Here’s a brief for a logo. Please take ten minutes to sketch a design and prepare to tell us what technical tools you would use to design it.

This question could show the applicant’s ability in a realistic situation. It will challenge the interviewee in terms of both the more creative, graphic side of the job and the technical side. In addition, it will reveal whether the interviewee is able to talk about their work to a potential client (an important requirement in the job description). Lastly, it will show what a person is able to do under pressure.

Here is an example of a working brief. Can you comment on the design and say what you like about it, as well as any improvements you might make.

This question could show the interviewee’s level of knowledge design considerations such as PARC principles and use of grids in layout. It could allow them to show both what they know when they describe the brief, and their ability to solve problems or be creative in suggesting changes or improvements.