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.

Client Project: Assigned Client - Nottingham Loves...

For my first client project this year I have to create a piece of work for the Nottingham Young Creative awards based on the theme 'Nottingham Loves...'

Full details of the brief can be found here: http://www.youngcreativeawards.org/

I have decided to go with 'Nottingham Loves Students' and will create a 3 page responsive website which represents my theme. I will be working off three main ideas; these are entertainment, education and employment. My aim is to create a website which promotes Nottingham to young people who are looking for a place to live and study by showing the services the city has to offer them. My target audience is mainly 18 to 20 year olds.

I am currently working on a presentation which will structure my ideas and set the website build in motion. More details to follow.

Research Project: Proposal

Research Topic. Outline in no more than 150 words what your project is going to explore. Is your topic concerning an issue, concept, processes or application that you want to acquire deeper knowledge and understanding in? Is it an area that you have not been able to fully explore?

Looking specifically at search engine optimization I wish to explore and understand the processes and techniques needed to give a website a high ranking in search results. One of the main search engines, Google, is constantly changing search algorithms so what practices must be maintained by a company or individual to keep them above their competitors.

This is not an area of web design that has been explored in my course but I feel it is essential so I am keen to learn as much as I can about SEO through my own research.

Your Background: Outline in no more than 150 words how familiar you are already with this topic? Does it build on personal interest? Have you done any formal or informal investigation of this project already?

In my second year of university I was given a few tips in the use of page titles, meta descriptions and page headings from my lessons with Giselle Leeb but I did not yet fully understand how this impacted a website's ranking. In the same year I also began researching Google services and made use of Google's Webmaster Tools and Analytics in my client projects. In May 2013 I redesigned my portfolio website with the intention of starting freelance design work; I began looking into ways of paying Google to appear higher in search results but I soon realised that this was not financially viable for me. In the summer I did a ten week placement with a SEO company called Easy Internet Services (see http://www.easy-internet.co.uk/ ); this gave me a deeper insight into organic SEO and really sparked my interest in this topic.

Research sources. In week 2 of your final year you will be doing a presentation. At that presentation you will be asked for a number of specific research sources that are already aware of that will help you during the initial stages of the project. List as many of them now. They might be films, magazines, interviews, websites, You Tube links, etc.

Here are a few of the SEO articles I have read online:

http://searchengineland.com/21-essential-seo-tips-techniques-11580

http://www.tutorialspoint.com/seo/seo-tactics-methods.htm

http://www.homestead.com/blog/05/2013/7-basic-seo-techniques-all-webmasters-must-know#.Uk_89YYjK-k

Here is an interesting video about sponsored vs organic search results:

https://www.youtube.com/watch?v=Bt0v_RUb3Yc

Here is a very useful video about SEO techniques for a new website:

https://www.youtube.com/watch?v=OD12ZCvr0XE

I have signed up to an email newsletter from http://www.hobo-web.co.uk/ which is an internet marketing company referred to me by my tutor.

I am currently looking into finding books and papers on the topic of SEO; these will be included in my presentation. 

Goals: In no more than 50 words outline what do you want to achieve as a result of working on this topic.

I wish to further my understanding of SEO to the point that I can offer this as one of my services as a web designer.

Problems: What initial problems can you see?

- Search engines can take weeks to fully index a website and build an accurate picture of it's ranking so it will be difficult to see immediate results when creating my artefacts. I will take this into consideration when planning a schedule for my research.

- There are methods of SEO known as black hat which can be harmful and ineffective in long term website ranking; I need to recognise these methods exist early in my research so I can avoid using them in my work. I wish to use reputable white hat methods of SEO which will help both me and my clients. 

Summer break: list the things you can be doing over the summer break to help you prepare.

My summer break was mainly focused on the work placement I mentioned before which helped me practice web design and start to understand the practical application of SEO. I have started to read about my chosen topic and used newly learned techniques in my freelance work.

Client Project - Website for Ready Steady 60s

For my first client project I will be designing a website for a Nottingham based 60s rock band called Ready Steady 60s. This client was suggested to me by my lecturer, Shaun, and then I got in contact with the singer/guitarist of the band who also works in the university.

The client has asked for a site that represents the 60s style and includes the band's logo and colour scheme (see above). The client also wishes to be able to update the website without having any html or css knowledge so suggested a content management system such as Wordpress.

The project brief states that the web site should be fully accessible on a mobile device. Over the past three weeks I have been learning how to create responsive web designs by using percentages for widths rather than pixels; this makes the sections and content within resize when the browser window is reduced in size. I have also learned about using media queries to create cut off points (in pixels) when the web content changes to accomodate for a resized browser window.

I have created a simple responsive template in Dreamweaver just to put the responsive design techniques into practice but this is not yet ready to show to the client. I am currently looking at the sites of other bands and also researching 60s imagery to get a better idea of what I will incorporate into my design.

I feel the biggest challenge of this project will be transforming my custom design into a Wordpress theme. I have learned a little about the Wordpress language (PHP) in my Tuesday seminars and also read magazines and online articles about the Wordpress interface which should give me a good foundation to work on this project. I also started looking at editing Wordpress themes this morning and will continue in further detail next week. I have been told that Wordpress design is very popular and an essential skill for web designers so the knowledge I gain in this project will be very useful in the future.