Research Project: First Artefact - Organic vs Sponsored search results

Throughout my five artefacts I have decided to follow an internet marketing campaign for a test website with the aim of increasing the website ranking in search results.

Through my first artefact I wish to discover the most effective strategy for marketing a site for search engines.

There are two types of search results; these are organic results i.e. websites which achieve their ranking through search engine optimization and those which are sponsored results i.e. websites which pay for the listing through services such as Google Ad Words. Through surveying members of the public I wish to enquire which type of search result people actually pay attention to so I can start my campaign in the right direction.

Using the image below I have asked people:

When you do a search on Google do you first click on the links in the red area or the links in the blue area? 

I have not indicated this on the survey but the red area is sponsored results and the blue area is organic results.

So far I have had 19 responses to my survey; here are the results:

I have spoken to Google to enquire about the price of Ad Words and found out that paying for a sponsored result for just one keyword would cost at least £5 per day. From the result of my survey it is clear to me that sponsored search results are generally ignored by the public so paying for this expensive method of marketing would be a waste of money.

Organic search engine optimization is clearly the best way forward for my campaign. I now need to learn how to effectively optimize a web page for a selected set of keywords. In my second artefact I will look at keyword placement in page titles/headings and how this impacts a page ranking in organic search results.

Client Project: Second Draft Website

After showing my design to my tutor and some friends I received some feedback about the look of the home page; I was told the brown textured background wasn't a suitable colour to represent the urban grunge look, it was also suggested that I could make it look more interesting by changing the position of the logo to the left and overlapping it with the navigation. My tutor advised me that it was not clear for the user what they should do on this page as there were images and links but no clear order to things; I resolved this issue by adding steps 1 to 3 to guide the prospective student to first find a place to study, then apply for a place through UCAS and finally apply for student finance. Again I used the red, amber and green to make the order more obvious. I also removed the footer as I didn't feel this was needed and it didn't look good on my new background. Below you will find a screenshot of the amended home page.

I achieved the overlapping of the logo using the following styles:

position:absolute;
z-index:2;
left:10%;
top:10px;

Client Project: First draft coded design

study/home page (desktop view):

Based on the idea of traffic lights I have created three states for the colour of the navigation; the inactive page is red, the hovered link is amber and the active page is green. There is also a 0.2second delay in the colour change from red to amber, I did this by adding a css transition:

nav a {
text-decoration:none;
color:#d20000;
line-height:100%;
-webkit-transition:color 0.2s ease-in;  
-moz-transition:color 0.2s ease-in;  
-o-transition:color 0.2s ease-in;  
transition:color 0.2s ease-in; 
}

nav a:hover {
color:#eeb70e;
}

The page is responsive; here is the tablet view:

and here is the mobile view:

I also added the content for the second (work) page:

This page includes a rss feed from two sources:

http://www.jobsite.co.uk/cgi-bin/advsearch?rss_feed=1&job_title_atleast=Part-time,ttttt&location_include=Nottingham&search_currency_code=GBP&search_single_currency_flag=N&search_salary_type=A&daysback=7&scc=UK&compare_resolved=TO_NG1_NOTTINGHAM&compare_search=Nottingham&channel_code_include=PARF&channel_page_code=PART

and

http://www.mynottinghamjobs.co.uk/rss

The two feeds are combined using feed informer. (see http://feed.informer.com)

I will seek some feedback from my tutor over the next couple of days so I can make changes and finish the website within the next week.

Client Project: Photoshop Mock-ups

With the design of my website I wished to incorporate graffiti art along with a 'grunge' style. Here is my design process:

Design 1:

After showing my first design to people in my class I was told this looked too dark and lacked colour.

Design 2:

The second design is similar to the first but uses a lighter textured background and semi-transparent container. I still felt that I could add more colour.

Design 3:

The third design made use of the new logo and a different textured background. I found this at this location: http://www.webtexture.net/photoshop-resources/patterns/15-high-resolution-grunge-textures/

The next step will be to code the design in html.

Client Project: Graffiti Logo

My initial logo design made use of  the graffiti style in a subtle way. See below:

I wanted to develop the logo into a more colorful and intricate design so I began experimenting with different custom graffiti fonts on http://www.graffiticreator.net/.

Here was my first attempt:

Here I used a different font:

I liked the shape of the lettering on the first attempt but the colours didn't work well together. The second attempt is a bit more difficult to read and the colours are messy.

Here was my third design:

I liked this the most as the colours are easier on the eye.

I then created a full logo using my new graffiti font along with the font used in the original design:

Client Project: Website content

My responsive 'Nottingham Loves Students' website will have 3 pages called 'study', 'work' and 'play'. I have come up with some ideas for the content of each page:

Study
This page will have information about the universities and colleges in Nottingham as well as links to services such as UCAS and Student Finance. The page will contain a jquery sliding gallery with images linking to different institutions; these will include Central College Nottingham, New College Nottingham, North Nottinghamshire College, Nottingham Trent University, University of Nottingham and West Nottinghamshire College. I am thinking of using css mouse hover effects to make the links to UCAS and Student Finance look interesting.

Work
This page will have links to employment agencies and a RSS feed with information about the latest student jobs.

Here are a few relevant job agencies I have found:
http://studentjob.co.uk/info/parttimejob_Nottingham
http://e4s.co.uk/jobs/nottingham.htm
http://reed.co.uk/jobs/nottingham

I will pull in rss feeds from sources such as gumtree (see http://gumtree.com/rssfeed/student-graduate-jobs/nottingham)

The feeds will be put together using a resource such as http://feed.informer.com

Play
I am thinking of making a page which shows a map with locations of the most popular cinemas, theatres and night-clubs in Nottingham. The map will have colour coded pointers for each type of entertainment spot and basic details will pop up when the user clicks on each pointer. I have found a website which allows me to upload a spreadsheet to create a Google map with multiple colour coded locations. See http://batchgeo.com

Design
As I will be incorporating graffiti imagery into my website I have done some research about fonts and found a useful website which creates custom graffiti fonts, see http://www.graffiticreator.net/. I am thinking of using this for the website logo.

My next step is to create design mock-ups in Photoshop then begin building the website in Dreamweaver. Watch this space for further details.