Edward G Development

I have just launched my new portfolio site. To view the new site click the image below.

Using WordPress for the CMS I created the design and coded it. I used Sublime Text 2, Codekit, SCSS, jQuery, Photoshop, and ImageOptim for the site.

In general I feel that I have achieved what I set out to do.

I have an online presence that displays the best aspects of my work. I also have a complete list of all the work I have done, both at university and commercially.

I have chosen to present myself using my blog, my online portfolio website, my twitter account and my few pieces on Deviant Art. I chose not to use Linkedin and Facebook as I believe that using Social Networks for showing a business face is not the right approach. I also believe strongly in only starting what you intend to maintain. Almost worse than having no presence at all is having a severely out of date page. It makes you look amateurish and out-of-date.

I also chose to keep my site simple by having all ‘showreels’ and previous video content constrained to my blog. With the inclusion of video content, showreels, plus any additional text content, the site would start to feel cluttered and would no longer fit within my chosen simplistic aesthetic.

My About text is also reachable through my blog rather than directly on my portfolio page. If my initial content generates enough interest that they wish to find out more then the user will click to contact me and/or to view my blog. If this tactic proves not to bare any fruit then I will re-consider this tact, but at present I feel this is the correct choice.

At this final stage, and before I launch my complete site, I tested for any accessibility or compatibility errors that should be fixed. As before I used Vis Checker, WAVE and W3C’s Mark-up Checker.

Vis Check Image Engine

At this final stage the site and its contents are all visible by people with visual imparities. This was achieved by having fairly contrasting background and foreground colours.WAVE

There are no accessibility errors detected by WAVE for my site. This is due to me naming all of my elements correctly and also having clean mark-up. WAVE warns you of Javascript elements within this page as this added functionality can sometimes cause the page to malfunction or not display correctly for some users. I ensured that users with Javascript disabled would still be able to use the site by combine CSS display: none and the Noscript tag. With this I serve a standard fixed navigation version of the site to users without Javascript. See Below.

This is how the site appears to a user with Javascript disabled.W3C Mark-up Checker

My site is now finished and is ready to be launched. At this stage I wish to gather some feedback to see if there any small changes I can make to the project, how people view my website, and how they rate it. Also, if a larger suggestion comes in I can plan for the future as I wish to continue to improve my site so as to present a professional and active image.

Final Portfolio Questionnaire

My site is now published and online. Thank you for taking all 3 of the questionnaires. Could you please give me some final feedback for commentating on the site at present and ways to improve it for the future.

1. At present, how do you rate the site? Is it a site that appears to be by an amateur, student, or professional?
2. On a scale of 1-10 how would you rate the site? Think of it in terms of design and also content.
3. Are there any quick fixes that you can think of that would improve the site?
4. Do you have a portfolio site? If so please link below.

Devin Bayer – Software Engineer at the RIPE NCC

1. At present, how do you rate the site? Is it a site that appears to be by an amateur, student, or professional? Professional. Good job eddy
2. On a scale of 1-10 how would you rate the site? Think of it in terms of design and also content. 8
3. Are there any quick fixes that you can think of that would improve the site? You could look at the gray background for a bit more contrast. Although it could be my monitor.
4. Do you have a portfolio site? If so please link below. Not really a portfolio site. http://t-0.be

Marcel Burder – Dart Group (AMS)

1. At present, how do you rate the site? Is it a site that appears to be by an amateur, student, or professional? Professional
2. On a scale of 1-10 how would you rate the site? Think of it in terms of design and also content. 10
3. Are there any quick fixes that you can think of that would improve the site? nope
4. Do you have a portfolio site? If so please link below. nope
   

Gerard Stroomer – Interactive Designer – Dart

1. At present, how do you rate the site? Is it a site that appears to be by an amateur, student, or professional? profesional
2. On a scale of 1-10 how would you rate the site? Think of it in terms of design and also content. 8-9
3. Are there any quick fixes that you can think of that would improve the site?  Check compatibility windows side. The site appears fine, but for the better browsers you could use font-face to fully support Helvetica. 
4. Do you have a portfolio site? If so please link below.  My DJ page. http://www.g3rst.com/

Sergey Polzunov – RIPE NCC

1. At present, how do you rate the site? Is it a site that appears to be by an amateur, student, or professional? Professional
2. On a scale of 1-10 how would you rate the site? Think of it in terms of design and also content. 9
3. Are there any quick fixes that you can think of that would improve the site?  All looks good. Nice noscript tag work. (checked on Chromium)
4. Do you have a portfolio site? If so please link below. https://www.quora.com/Sergey-Polzunov

Danny Marsland – Grapple – Technical Architect

1. At present, how do you rate the site? Is it a site that appears to be by an amateur, student, or professional? professional.
2. On a scale of 1-10 how would you rate the site? Think of it in terms of design and also content. 7-8
3. Are there any quick fixes that you can think of that would improve the site?  Maybe a little too plain for my taste, but it looks good. 
4. Do you have a portfolio site? If so please link below.

Erik Romijn – Freelance iOS/Python developer and App Maker

1. At present, how do you rate the site? Is it a site that appears to be by an amateur, student, or professional? Professional.
2. On a scale of 1-10 how would you rate the site? Think of it in terms of design and also content. 10
3. Are there any quick fixes that you can think of that would improve the site?  no.
4. Do you have a portfolio site? If so please link below. no.

Mark Dranse – Former IS Manager RIPE NCC

1. At present, how do you rate the site? Is it a site that appears to be by an amateur, student, or professional? Professional
2. On a scale of 1-10 how would you rate the site? Think of it in terms of design and also content. 9
3. Are there any quick fixes that you can think of that would improve the site?  no
4. Do you have a portfolio site? If so please link below. no

Reflection 

The feedback for the site was very good with the majority scoring it highly and saying it was professional. My next step will be to investigate using the font-face to display Helvetica to those windows machines without it already installed.

At this midway stage I have checked the site for the validity of the markup and also ran Vis Check and Wave. The primary reason for this is to catch any major problems early on, rather than producing a finished site that fails the majority of tests.

Vis Check Image Engine

When checking for people with Deuteranope Protanope and Tritanope the site’s key navigation is still visible.

Wave

At this early stag my site also passes the WAVE accessibility test.

The site also passe W3C’s validation test. With the one warning being due to the fact that I am using HTML5 for my mark-up.

Reflection

At this early stage I can assume with some confidence that I am on the right track. There are no accessibility errors and the mark-up is solid.

At this midway point I thought it would be useful to get the same users to see how the site was progressing. There is not a lot of content for them to look over, but there were still questions I could ask and also feedback that could hopefully stop me from making too many mistakes.

Midway Questionnaire

I am aiming for a clean single page portfolio site with a very easy to navigate page that degrades gracefully. There is not much of the site to look at now; with this in mind can you answer the following questions. Thank you for your time again.

Aims

Clean, easy to navigate, visually pleasing.

1. Looking at the aims above, do you think the site at present is on course to achieve these aims?
2. I am intending on only using a few basic colours for the site. Red, which you can see, and perhaps one more accent colour. Do you think this will be good, bad or do you have no opinion at this time?
3. Do you have any tips for me at this time? Am I already missing something, or going in the wrong direction?

Devin Bayer – Software Engineer at the RIPE NCC

Aims

Clean, easy to navigate, visually pleasing.

1. Looking at the aims above, do you think the site at present is on course to achieve these aims? Yes. It is indeed very basic/clean…
2. I am intending on only using a few basic colours for the site. Red, which you can see, and perhaps one more accent colour. Do you think this will be good, bad or do you have no opinion at this time? I liked the site you showed me before that was very similar and so I think it should be a good site. 
3. Do you have any tips for me at this time? Am I already missing something, or going in the wrong direction? nope.

Marcel Burder – Dart Group (AMS)

Aims

Clean, easy to navigate, visually pleasing.

1. Looking at the aims above, do you think the site at present is on course to achieve these aims? Yes
2. I am intending on only using a few basic colours for the site. Red, which you can see, and perhaps one more accent colour. Do you think this will be good, bad or do you have no opinion at this time?  Looking good. Kind of magazine-esque 
3. Do you have any tips for me at this time? Am I already missing something, or going in the wrong direction?

Gerard Stroomer – Interactive Designer – Dart

Aims

Clean, easy to navigate, visually pleasing.

1. Looking at the aims above, do you think the site at present is on course to achieve these aims?  Looking good dude. 
2. I am intending on only using a few basic colours for the site. Red, which you can see, and perhaps one more accent colour. Do you think this will be good, bad or do you have no opinion at this time?  Good
3. Do you have any tips for me at this time? Am I already missing something, or going in the wrong direction? Looking good, apart from the content…

Sergey Polzunov – RIPE NCC

Aims

Clean, easy to navigate, visually pleasing.

1. Looking at the aims above, do you think the site at present is on course to achieve these aims?  Yeah 
2. I am intending on only using a few basic colours for the site. Red, which you can see, and perhaps one more accent colour. Do you think this will be good, bad or do you have no opinion at this time?  Good
3. Do you have any tips for me at this time? Am I already missing something, or going in the wrong direction?  Maybe it is a bit boring, but it is hard to tell at this stage

Danny Marsland – Grapple – Technical Architect

Aims

Clean, easy to navigate, visually pleasing.

1. Looking at the aims above, do you think the site at present is on course to achieve these aims?  Not sure on the visual side yet ed. 
2. I am intending on only using a few basic colours for the site. Red, which you can see, and perhaps one more accent colour. Do you think this will be good, bad or do you have no opinion at this time?  I really would need to see it to tell
3. Do you have any tips for me at this time? Am I already missing something, or going in the wrong direction?

Erik Romijn – Freelance iOS/Python developer and App Maker

Aims

Clean, easy to navigate, visually pleasing.

1. Looking at the aims above, do you think the site at present is on course to achieve these aims?  sure
2. I am intending on only using a few basic colours for the site. Red, which you can see, and perhaps one more accent colour. Do you think this will be good, bad or do you have no opinion at this time? 
3. Do you have any tips for me at this time? Am I already missing something, or going in the wrong direction?

Mark Dranse – Former IS Manager RIPE NCC

Aims

Clean, easy to navigate, visually pleasing.

1. Looking at the aims above, do you think the site at present is on course to achieve these aims? The site is looking fine at the moment. Baring in mind it is just the navigation
2. I am intending on only using a few basic colours for the site. Red, which you can see, and perhaps one more accent colour. Do you think this will be good, bad or do you have no opinion at this time?  Good
3. Do you have any tips for me at this time? Am I already missing something, or going in the wrong direction?  Keep it up. I am interested to see where the site goes. 

Reflection

The majority of comments suggest that the site is going in the right direction, although it was also said that there needed to be more to judge. My justification for handing a questionnaire out at this stage is that I will be utilising WordPress’ CMS capabilities, and once this is in place then the entire site will be complete, therefore this is as much of a mid-stage as there will be.
I will continue with my course at present after these encouraging words.

After I had chosen upon a style which I wish to aspire to I sent out an initial batch of questionnaires to gain feedback before I started.

Edward G Development – Initial Research Portfolio Questions

I am aiming to produce a portfolio site promoting myself as a designer and developer. My specialist areas are design in Photoshop and Illustrator and web development using modern web tools. I personally have chosen 3 sites that I believe have something(s) that I would like to use as inspiration and or imitate in my final portfolio site. Could you please look at the 3 websites listed and answer the following questions. Thank you for taking the time to complete this questionnaire.

Website #1: http://craigjamieson.com/

Website #2: http://nadine-rossa.de/

Website #3: http://digitalmash.com/

Name:

1. Do you feel that you understand how to navigate the page?b. Do you think you will remember this?
2. Do you feel this site is efficient to serving its purpose? E.G. showing portfolio content, demonstrating a skill set etc…
3. In general do you like this site more than most which you encounter?
4. Anything to add?

Devin Bayer – Software Engineer at the RIPE NCC

1. Do you feel that you understand how to navigate the pages? the first site was a little confusing at first. The 2^nd site was fine. The 3^rd site was pretty cool.
2. b. Do you think you will remember this? Yes for all.
3. Do you feel this site is efficient to serving its purpose? E.G. showing portfolio content, demonstrating a skill set etc… The first one is nice to look at so if that is its purpose then yes. The 2^nd was a little cluttered but quite nice. The 3^rd was very simple and creative so yes.
4. In general do you like this site more than most which you encounter?all 3 were pretty good.
5. Anything to add?no.

Sergey Polzunov – RIPE NCC

1. Do you feel that you understand how to navigate the pages?yes. The first one is a little strange but kind of cool.  b. Do you think you will remember this? yes.
2. Do you feel this site is efficient to serving its purpose? E.G. showing portfolio content, demonstrating a skill set etc…I do not really know. All three are cool so I guess
   
3. In general do you like this site more than most which you encounter? hmm. Maybe the same. Check out http://www.31three.com/   
4. Anything to add? The site above has a cool texture background. Makes the site looks less like a webpage.

Danny Marsland – Grapple – Technical Architect

1. Do you feel that you understand how to navigate the pages?Yes         
2. b. Do you think you will remember this?yes.
   
3. Do you feel this site is efficient to serving its purpose? E.G. showing portfolio content, demonstrating a skill set etc…All 3 are good. I checked the  sites on my phone and the 1^st one looks the best. Responsive design I guess.
4. In general do you like this site more than most which you encounter?same.
5. Anything to add?Watchout for mobile compatibility for your site. Even if its just a basic fallback 

Erik Romijn – Freelance iOS/Python developer and App Maker

1. Do you feel that you understand how to navigate the pages? All 3 sites are ok. I like the digitalmash one the most.
2. b. Do you think you will remember this? why not?
3. Do you feel this site is efficient to serving its purpose? E.G. showing portfolio content, demonstrating a skill set etc… I am a little unsure as to what the first one really does. A few too many clicks and navigation away from the page to work out.
4. In general do you like this site more than most which you encounter? no
5. Anything to add? No

Mark Dranse – Former IS Manager RIPE NCC

1. Do you feel that you understand how to navigate the pages? Yes.
2. b. Do you think you will remember this? Yes.
3. Do you feel this site is efficient to serving its purpose? E.G. showing portfolio content, demonstrating a skill set etc… I was not a fan of leaving the main page for the craigjamieson site. It lead to little if any consistency.  
4. In general do you like this site more than most which you encounter? The digitalmash one was ok and the Nadine Rossa site was ok too
   
5. Anything to add?
   

 Reflection

In general people did not like having to navigate away from the main page for the Craig Jamieson site, even though some did like the overal graphics. Standard navigation, that of a top bar, seems to be the right choice. Non-standard navigation may look interesting, but can confuse and frustrate. I agree with those who said that they liked DigitalMash, this is the direction with which I will go.

Before I start to create my own portfolio site I thought it was important to look at what the industry is doing at present and have a few sites to aspire to.

Below are 3 sites which I have chosen for a varying number of reasons.

Craig Jamieson

http://craigjamieson.com

I chose this site because it was striking and different. I could not easily copy this website graphically without it being a total copy of the style. The repeating background to add a bit more of a textured feel to the site is something I will experiment with for my site.  The site in general is different and nice, although I don’t think the style is right for me. I wonder how I could incorporate portfolio work into a site like this.

Vis Check Image Engine

The site does appear different to people with vision impairment. However the contrast is fine and the content is very read-able.

Wave

The site has a few errors when run through Wave. Mostly being titles missing. This is pretty poor for a site with such a small amount of content.

Nadine Rossa

http://nadine-rossa.de/

My primary reasoning for choosing this site was I liked the simple one colour background. I thought that this was something very achievable for me and seemed to work quite well. In contrast to some of the other site’s I have looked at the person has decided to put all of their content on one page. Even though this may increase load time slightly, with proper asset management this shouldn’t be a problem. It is also worth considering that the target audience for this site and mostly likely mine, will have up-to-date machines with fast internet connections.

Vis Check Image Engine

Sadly, even after a number of attempts, the site could not be analysed by the Vis Check engine. It is obvious that the few colours that are on the site should make it fairly accessible by vision impaired people.

Wave

The site had a number of accessibility errors, mostly resulting from tags missing all of their arguments.

Digital Mash

http://digitalmash.com/ 

Of the 3 sites I think this is the one that I will try aspire to the most. I am a big fan of clean and simple layout, plus I am definitely in the Helvetica camp. The rollover for navigation is something I would like to try and implement using CSS3 with a CSS2 fallback. I also feel that the simple layout and colour scheme gives it a professional and appropriate tone.

Vis Check Image Engine

Vis Check failed to properly analyse the site. Displaying all 3 versions as the same with no discernable differences. There are multiple colours that make up the initial centred navigation and I can assume that this would alter a lot.

Wave

The site had no errors when checked by Wave. The clean and simple layout with nice mark-up has meant that the smaller details have been attended to. A clean design can enable for very readable mark-up and a site which degrades very gracefully. This is something I will aim for.

Reflection 

From the first site I will take the feel that a repeated background can give a site. I will also make sure that my tags have complete attributes.

From the second site I will take the clean simple colour and implement it in my own design. I will also try fit all of my content on a singe page, using internal anchor tags for instant navigation.

The third site is one I like the most. I will recreate the print/Helvetica style of design. Clean simple design, and accompanied by clean and simple mark-up.

I took an existing web site and design which was in an usable state, and powered by a poor CMS, and converted the project into an easy-to-manage WordPress site. Using Bones for the stating point and combining it with SCSS to produce a manageable and flexible site.

The site is temporarily stored on my site until the handover is complete.

I assisted in creating a centralised health and wellbeing knowledge tool, that was to be sold to large organisations and companies. For this I provided the interactivity by using jQuery, assisted in developing the front-end styling with SCSS for the styling, managed the site assets, generated some basic graphical content, and assisted in some of the Ruby on Rails development.

The project was created for NTI Leeds, with other credits for the work going to Edward Andrews.