Retrobadger V4.0: The Website
April 1, 2013Project Brief:
To build a new website as part of the 2013 (re)branding of retrobadger.net. The site must be easy to keep current whilst requiring minimal time for upkeep. It should also be a good way to promote my work, so building in Drupal and designing myself was an important approach to take. My personal feelings towards designing/developing my own site are huge, due to the opinion that otherwise it could be said there was an element of false marketing.
The primary objectives of the site were:
Promote the work I have done
Give me a platform to share things I learn
Allow potential clients to easily contact me
As you can easily see, the 3 above points, as they are the core objectives, are addressed on the site homepage, and similar/related pods are currently scattered around the site.
Pre-planning:
So, the initial creative plan for this site was to keep it clean, whislt keeping it current using a mixture of news articles, reviews, and projects. There was also an initial plan to integrate twitter/delicious into the site, but the recent restrictions on integrating this into your own sites made me step back for the time being, and readdress when I look into future improvements to the site.
The first step, as always on any project, is research. I already knew that Drupal would be the underlying technology to build the site, this was due to it being a strong skillset of mine, also the current site is already in Drupal, so allowed me to simply improve the current project. Most design research was done using pinterest to look at some nice designs, and consider how this could work.
Whilst this research was happening, I was working on wireframes to ensure that all the content I wanted to be on the site was there, and that I wasn’t trying out too many new ideas in build (which always wastes time as opposed to trying ideas in Photoshop).
Design:
Next was the turn of Photoshop for a couple of weeks, working on mockups and getting pages put together which would cater for what I wanted. This is where a certain elements absence was made obvious, this was the brand logo, along with other forms of constant branding. Whilst I have worked with others on branding projects, I never did my own, and so designing around such a loose concept is near impossible. Hence the starting of a second project in this series, logo/branding for retrobadger.net
Once the initial branding concept was done, it was integrated into my site design ready for development.
Build:
The build was a relatively simple affair, as I was just using the same technologies I use every day at work (drupal, features, context, less, omega) and so just needed to piece the elements together. But to keep things fresh, as always, new technologies were trialled to keep things fun, and allow me to learn on these projects.
Testing was a little more complicated than I would have liked. I develop on a Linux computer at home, so had to fire up Virtualbox every time I wanted to test on a windows machine. Also, to add complexity to this, MAC/iOS/mobile testing had to be done elsewhere, as I do not have the breadth of devices to do this testing at home. This was mainly to prove that it all worked more than anything, as desktop browser testing these days, so long as the site is simple and responsive, is a pretty good way of testing.
Copy was another large element to the site, as you start piecing it together, you realise that to a user, certain pieces may not make sense (such as technologies) so copy needed to be added to explain these. Also, how do you describe what your skillset is, it’s a surprisingly hard skill, so work on that took time to get perfect.
Successes:
This project was a success in terms of how it looked, and my own creative learning with some of the new Drupal technologies. It also pushed me into some more print design elements which was fun and interesting to try out.
One big success which wasn’t expected was in the fact of doing strict designs pre-build. Often with my own sites I would do a design, then try it out in-build, then do another, then tweak it (again in-build). So much time is wasted this way, and so doing a design that I am happy with stops unnecessary tweaks, which are often more to do with having stared at the design for too long than there being an actual problem.
Learnings:
Okay, so whilst learning more print design tools is great, it did mean I came onto issues I wasn’t used to. One of these was the style guide. I am often a strong evangelist for having such things, but for some reason skipped that step on my own site (probably usual reasons of there not being enough time). Whilst this didn’t cause huge issues, it has meant that there is an element of inconsistency between the site and print materials. This will need to be addressed in the coming months to bring the site more inline with everything else.
Next?:
Where do I go now that I have a site, well, first step is to stop it going stagnant. I need to keep doing posts like this one, adding new projects, posting to twitter, and generally being more active in the community. Whilst I do some of these, I don’t tend to constantly post it to the world at present.
I also need to take a look at GA over the summer months and see if there is any sign of improvement. To be honest, the current traffic is low, so I think a 5%+ increase would be fantastic, once I have more consistent traffic, I can look into where things are slowing down and what to improve.
Finally we have the design enhancements in that it all needs bringing in line to a single style guide. Not only this, but certain parts need some work, mainly on getting what are generic uploads (screenshots/logos) to have an element of ‘punch’ to them, possibly using css3 effects and animations.