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.

Self Marking for the Self Managed Learning Plan

A8 WEBSITE LINK

For the Pass Criteria:

1 and 2. Investigate applications and learn the fundamentals of PHP and MySQL.
My sketchbook shows my exploration and investigation of the use of PHP and MySQL. The notes show research of the fundamentals of PHP script and the way it communicates with the MySqL RDBMS.

The sketchbook also includes annotated printouts of PHP script, screenshots and email correspondence to show my investigative efforts and the development of my website, along with a database table.

3. Create a Website which uses PHP and MySQL. (Creative Brief)
As shown in the sketchbook, I used a range of books, websites and online forums to gather information on the subject, and to write my evaluation.
Following a guide in the book PHP6 and MySQL5 by Larry Ullman I downloaded and set up XAMPP on my laptop to provide a local server in order to use as a test bed for building the website.

I followed textbooks, notably PHP Solutions by David Powers and PHP6 and MySQL5 by Larry Ullman adapting the examples to create the solution to the creative brief.

4. Evaluation.
I wrote a 1000 word (approx) evaluation of the SMLP, justifying the application of PHP and MySQL and my experience of answering the creative brief. After finalizing the website I reviewed it and highlighted the improvements that could be made.


For the Merit Criteria.
M1. The sketchbook includes notes and annotation of various sources, showing an understanding of the particular theoretical principles that are relevant to this assignment. Going beyond the gathering of information, however, the emails show an ability to synthesize information from a range of sources in order to overcome a problem that arose from initially relying on one source.

M2. The sketchbook shows the development of the assignment over time. The preliminary stage involved gathering information from a range of sources (books, online tutorials, online forums, and email correspondence). Drawing from the gathered information, I built the first element of the website, an include file. This required adapting PHP script and customizing it to suit my own requirements.

Problems encountered along the way are recorded in the sketchbook. The ability to overcome each problem allowed me to build the next element, leading to the eventual completion of the website.

M3. When devising the Creative Brief, I chose features which would require a number of variables to be used in combination. Specifically, I wanted the website to include a gallery, a feedback form and PHP includes to add further features.

These elements required a range of technical skills for example, in addition to using CSS for the layout, I wanted to create an online gallery which requires communication with a MySQL database. This retrieved information is specifically linked to each image as it is selected whilst the PHP script links a thumbnail image to a larger image. To do this, I had to adapt a PHP script from another source for my own purposes.

I also adapted an include file which highlights the current page; this required customizing a navigation script to suit the style of my website. Another include file is one I used on the footer element of my website, which will calculate the current year from the year the page was copyrighted.

The result of these creative and technical endeavors is a website of a near-professional standard.

In conclusion, this work satisfies the merit criteria.

Web Designer Role

Link to online job advert

The job I have seen advertised is for a front end web designer/developer based in Leeds. Though it is listed as an advert for a ‘Web Designer’, the description includes everything from design and development to maintaining and updating existing websites, as well as communicating with clients in order to understand their web requirements and to explain technical issues in a way that they can understand.

In terms of specific technical skills, the job requires knowledge of and experience with the following: CSS, (X)HTML, JavaScript, Photoshop, Illustrator and Dreamweaver. I have made a good start on mastering these skills, but am aware that I need a lot more hands on practice to gain confidence and professional working knowledge of these elements. I plan to develop my ability in these technical skills and to show how I can use them effectively in this current assignment and future projects.

I’ve noticed that this advert specifically states that all websites from this organisation are required to abide by W3C standards. This makes me appreciate the process of showing validation on the website work we are doing on this course as this is a web design standard expected in industry.

There are a few skills listed in this job advert that I do not yet have. One core skill requirement is Flash. I hope to have a chance to learn Flash, if not on this course then on my own or on an evening course. Not only does there seem to be a demand for it, but it also looks interesting to me.

The job also requires an understanding of online marketing tools such as SEO and PPC. While I have not yet had experience with these, I hope there will be a chance to learn about these types of tools. Additionally, although it’s not mentioned in this particular job advert, I’ve seen ads requiring Content Managing Systems (CMS) such WordPress and so look forward to learning this as well.

Finally, this job mentions Fireworks and Quark as desirable, though not strictly necessary. Obviously, the more technical knowledge I have, the better equipped I will be to find employment.

One current concern of mine is whether I should purchase a Mac. This job specifies both Mac and PC familiarity. To date I have always used PCs. I have noticed that many job adverts seem to require both. If not having a Mac means that I won’t be able to get a job, then I might need to consider it as an investment and overcome the cost issue.

The job also specifies other less technical skills that may not be as easy to demonstrate. According to the advert, this position would involve interaction with clients which would require both listening to understand their website requirements and the ability to explain technical issues, both verbally and in writing. While I have had to rely on my communication skills working with others on this course, I am also hoping to draw on my experience in other jobs to date for these less technical skills.