News feed

An Ethical Industry

Sun, 19 Feb 2012 17:51:00 +0000

Last night I watched Bret Victor talk for an hour about finding your purpose which prompted me to write about something that's been on my mind for a while: ethics within our industry.

As DMCA, SOPA, PIPA, and ACTA have shown, our industry is a shining bastion of honestness and transparency compared to other media industries when centered on copyright but I feel we can do more. For example, collecting analytics. I'm aware of Mozilla fronting an effort to anonymise the web by telling advertisers and analytics software to not track users which is a great start in giving people choice. I'm not sure any other industry has the pervasive detail that we have access to: the location of the request, browser, language, etc. and it's important that we use that information with care. There was a tool that proved that you could be uniquely identified (or almost uniquely in some cases) simply from the details your browser exposes to the site. Just the concept of that is scary enough, let alone the actuality.

Another thing that's been bugging me is the industry's obsession with clients. The mindset of 'as long as I have a client and do my best then life will be good' I find irksome. You have a choice about who you work with and who you work for, and that is a profound choice to make. By choosing your clients by their ethics you start to shape what you want to be and I believe this guiding purpose is paramount in having a fulfilling life. This is all much easier said than done of course, saying no to someone is hard (especially when they're waving money at you) and takes courage (to paraphrase Ben Templeton) but ultimately it can help define who you are, as an individual or company.

Ethics are never a primary concern when working, as evidenced by Path and their Contacts fiasco, they never did it because they thought it would be unethical, only that they needed it to enable a feature to help users. It just illustrates the point that ethics get left at the wayside in a bid to push new features out. Yes users are really important, clients are really important, but so are the principles on which you base yourself and your work.

In truth, I love our industry, as I said before it's much more ethical than most other media industries (probably because of our origins in the 60s and relative youth) but I feel that ethics are often forgotten when we're waist-deep in a project. We need to step back and look at ourselves, "I started to look a little deeper into what I do. I started to ask what exactly it means to be a web designer […] Long may that feeling last. May it never go away." (from We, Who Are Web Designers, an article I highly recommend).

Authorising a Twitter app with Ramaze and OAuth

Thu, 12 Jan 2012 13:06:00 +0000

Recently I've had great difficulty trying to authorise a Twitter app with Ramaze but today I finally cracked it and I'm going to share the solution in case anyone else needs to do this. I'm using twitter_oauth and the twitter gems to achieve it.

First, we setup a TwitterOAuth client with our consumer key and consumer secret. These are the keys that you're given when you register an app on Twitter.

client = TwitterOAuth::Client.new(
    :consumer_key => 'xxxxxx',
    :consumer_secret => 'xxxxxx'
)

In my scenario, I have a button that is pressed on my site that launches the authorisation process so the page 'twitter' doesn't actually exist but is where the form is posted to and then redirected to Twitter. To achieve this we do the following:

def twitter
  client = TwitterOAuth::Client.new(
        :consumer_key => 'xxxxxx',
        :consumer_secret => 'xxxxxx'
    )
    request_token = client.request_token(:oauth_callback => 'http://domain.com/auth')
    logger = Ramaze::Logger::RotatingInformer.new('./log')
    logger.info "setting request token = #{request_token.inspect}"
    session[:request_token] = request_token
    redirect request_token.authorize_url
end

I found using Ramaze's built-in logger to be extremely useful in debugging the application. I've left this example in so you have an idea for how to do it.

We store the request_token in a session as we will need to use it in the next part of our app. It's also expecting to be redirected to a site on your domain called 'auth' so this is what we'll write next in our controller. This is known as the callback URL and is set both here and on your app's Twitter settings.

def auth
  client = TwitterOAuth::Client.new(
        :consumer_key => 'xxxxxx',
        :consumer_secret => 'xxxxxx'
    )
    access_token = client.authorize(
        session[:request_token].token,
        session[:request_token].secret,
        :oauth_verifier => request.params[:oauth_verifier]
    )
    p = access_token.params
    if client.authorized?
        Twitter.configure do |config|
            config.consumer_key = 'xxxxxx'
            config.consumer_secret = 'xxxxxx'
            config.oauth_token = p[:oauth_token]
            config.oauth_token_secret = p[:oauth_token_secret]
        end
        redirect MainController.r(:index)
    end
end

Once the user is redirected to our application from Twitter we need to exchange the request token for an access token. The twitter_oauth gem works the ins and outs of this for us and we simply supply it with the request token and request secret from before they were redirected and then an :oauth_verifier which is found in the query string of the URL so we use Ramaze's request.params to access it.

Within if client.authorized? we then configure the Twitter gem to make authorised requests on the user's behalf so we can do cool things like display their followers or friends or whatever you've setup your applications level of access to be.

auth is another page that doesn't have an explicit view made for it. I found that when it did, I was getting 401 errors meaning that the user was not authorised. One Stack Overflow answer suggested that this was because other requests on the page would mess with OAuth's process.

I hope this has been useful, let me know if you have any questions in the comments below.

Edit

I kept getting intermittent sessions with session[:request_token] sometimes returning nil and other times being populated with the right data. It turned out that when setting up my environment I had set Unicorn to have 2 workers so the sessions were being stored in one fork but not the other. Setting Unicorn to have 1 worker 'fixed' this but I'll have to look into another way to persist this data across sessions, any ideas?

An Airside Tribute

Thu, 15 Dec 2011 20:18:00 +0000

After 14 years of exceptional service to the design industry, Airside will close their doors in March 2012.

Airside are my favourite design company. I first discovered them through a friend that introduced me to Lost Horizons by Lemon Jelly, who himself only picked it up because of the gorgeous artwork. We both wanted to learn more about the design company and ended up buying multiple T-shirts, calendars and prints. My second blog post lists them as the inspiration for the first revision of this site. In short, I love Airside.

So when they tweeted to say they were closing, seemingly out of the blue, I was a bit shocked. I just want to extend my gratitude to them and make anyone who wasn't aware of their greatness, aware.

Myself and Sean were lucky enough to have recently been discovered Glug and when I saw that Airside were on the bill I couldn't help myself but go to see one of their last talks. After a late departure from Bournemouth we made it in time to see the last part of Mr. Bingo's talk and the whole of Alex's emotional talk on his 14-year-old company.

It was amazing to see just how much the company had done over the last decade and a half and to see the transformation that they had been through.

I'm sure everyone part of Airside will go forth and either become part of new, awesome teams or do their own thing. I wish them all the best.

Stay Another Day - Frank Eddie RMX from Airside.

Follow Airside on Twitter.
Follow Alex on Twitter.
Follow Fred on Twitter.

Forcing Symphony CMS to Update

Fri, 09 Dec 2011 12:30:00 +0000

I love Symphony, it's my CMS of choice and I've written about it a few times before.

One thing I don't love about Symphony is updating. It's fine if you're running your own server and can install git but for those of us on shared hosting, it's a very manual process.

I have two Symphony installations on 2.2.4 and wanted to update to 2.2.5 (everyone loves updating to those minor point releases, right?). The first one I updated went without a hitch, copy across the files and click update and life is good. On my personal blog though, I wasn't so lucky.

After I copied the files over to the server Symphony plainly stated "Your Symphony installation is up to date, but an updater script was still detected. For security reasons, it should be removed. Remove Update Script" I quadruple checked it was definitely the latest release I had uploaded and set to work finding how to force an update.

After a little rooting around the source code I found that if you type into the address bar:

http://your-symphony-url.com/update.php?action=update

This will force the installation to update and your Symphony installs will giggle in excitement as they get a new batch of code washed over them.

I hope that this has helped anyone that's found themselves in a similar situation.

Organising a Web Meet 101

Wed, 02 Nov 2011 13:54:00 +0000

The first of November saw the first B&W Meet at The Slug and Lettuce in Bournemouth. Myself and Sean organised it in around a week which had it's advantages as well as it's disadvantages. I've outlined six simple steps to help setup your own web event (I do love my niches).

1. Let people around you know. This sounds obvious but it takes some courage to put your name to a new event. We firstly told members of our course in seminars and lectures saying that we were organising a meet, we kept this fairly consistent so people were aware and eventually we started to hear people talk about it independently ('are you going to this thing on Tuesday?').

2. Let people who aren't around you know. This is harder than the first point. Firstly, who? Who are you targeting? As I interned within the Enterprise Pavilion I knew it was full of cool digital businesses, we firstly got permission to go round the businesses there by asking the manager of the building (see point 4) and in turn got more access than we thought we'd ever get. We found that making the effort to go to businesses face-to-face is very important; it shows commitment and gives them a face behind the 'brand' that, when they (hopefully) arrive, will recognise. Also e-mail newsgroups and any other companies that you can't get to in-person, be sure to reply too!

3. Let the venue know. We were very fortunate that our venue cornered off an entire section of the pub for us to host within. They were very hospitable, letting us put up signs and generally be quite loud!

4. Ask. Ask and you shall receive. This is probably the most important point, most people are inherently nice and will do what they can to help you. Whatever it is, ask and you'll probably be pleasantly surprised by the reply.

5. Spread it. Talk to other connections you've made, be it businesses you've interned with, other events that you've attended, even if they don't act on it, it makes them aware and they can point you to other things.

6. Connect with your guests. Make a Twitter account and use it, reply to people, retweet potential guests, people like to be talked to. Don't forget to do the same at the event, be friendly and welcoming to new people. Put yourself in their shoes especially if they've come alone!

As a closing note, I'd like to put out a tremendous thanks to Tom Kentell who co-hosts Heart & Sole, he advised us on many of the decisions we made and I cannot thank him enough for it.

Of course, it wouldn't have been the success that it was without the people that were there so thank you all so very, very much for coming! It was great meeting you all and brilliant to meet so many new people. We're working on the logistics of the next one and hopefully those that couldn't make it this time around will be able to next time.

Thank you.

5 More Quite Interesting Links

Tue, 27 Sep 2011 20:25:00 +0000

Here's some more Quite Interesting links I've found while traversing this big ol' 'net.

Man O' War
The Man O' War is not actually a jellyfish, it's a colony of individual 'zooids' collectively known as Siphonophorae.
HTTP Dynamic Streaming
You know how some sites won't let you jump to a certain part of a streaming movie until it's loaded? That's because they're not using RTMP, and now there's a way to do this using Apache without using Flash.
Structure and Interpretation of Computer Programs
From MIT Press available online for free, twcamper has converted it into .mobi format to read on eBook readers. This has been required reading on many computer science courses but I'm sure even a humble web developer will be able to take something away from it.
One of the Best Bits of Programming Advice I ever Got
Some useful advice on object-oriented programming.
Virtual Monkeys Write Shakespeare
A 'team' of programs that bash out random 9-character strings is close to finishing The Complete Works of Shakespeare.

An Introvert Online

Sun, 25 Sep 2011 23:22:00 +0000

Social networking sites have opened us up to an unthinkable amount of potential interactions (yes, it's going to be one of those posts). The recent Facebook updates have brought these to the fore with the 'ticker' showing exactly what others (I'm going to avoid using the word friend) have interacted with. As a side note, I feel Facebook is on a slight decline as it tries to encompass Every Feature Ever™ while other networks stick to what they do well, Twitter is relatively light on features but has a robust API and is built around a single, solid concept and is doing better than ever.

I don't share things (i.e. links or thoughts) as often as most and this blog is probably the most outward facing thing I have in terms of opinion sharing. I self-censor every tweet, post, and thought before sharing it online; this probably explains why I haven't yet put anything on Google+ and haven't explicitly set a status on Facebook since mid-July. To be honest I don't know if this is typical of other introverts or not but what I do enjoy is sharing with no-one.

I finally got an invite to Diaspora, an open-source social network, like Google+ but without the sinister undertone that it already knows everything about you. With it, I've posted a few things that I'm not confident enough to post to the world (Twitter) or even accepted people (Facebook); it's a scrapbook of would-be updates.

You're probably wondering what the point of this is. Quite frankly so am I, perhaps something about an outlet for thoughts without the risk undertaken of possibly upsetting anyone or coming across too nerdy (most often the latter). Maybe.

On the Beta BBC Site

Wed, 21 Sep 2011 10:19:00 +0000

The BBC have done it once again, they've launched a beta site that's got the web talking about what it likes and dislikes.

I love the many hover effects that make the site feel responsive and quite organic despite it's rigid appearance. But this rigidness indicates something greater - it's overall information architecture is great. I can easily choose which areas I'm interested in, the most popular is divided into read, watched, and listened in a way that's easy on the eye as well as the brain.

The last point is very important, the new page doesn't make me search for anything, it's exactly what I've wanted from the BBC site in that it's sensibly arranged, gives me the content I want and all encapsulated in a strikingly good design.

The source code, while minified and hard to read, is valid XHTML reflecting the high class of workmanship that's clearly gone into this redesign. It's simplicity in design belies the vast complexity that has gone into shaping it. I tried accessing it through the iOS Simulator but it redirected me to the regular mobile site so I guess that's still being worked on. As Mark Boulton tweeted, it's a shame there's not a tablet version ready yet as the design lends itself especially well to swiping and tapping.

The only niggling things I found that I'm not keen on is having to hover over the weather to get a 5-day forecast and the selected 'More from...' category rises up a bit too much and should probably be consistent with the behaviour of the Most Popular box (i.e. the blue stays inside the box with the arrow pointing outwards).

All of this and it's still in beta, I'm looking forward to seeing what changes and hope that it doesn't become distilled down.

5 Quite Interesting Links

Tue, 20 Sep 2011 17:07:00 +0000

Here's a new feature for my blog, my five quite interesting links of the week. This has arisen from my tab bar looking like this and me being fed up with it.

Breaking Dev: Responsible & Responsive
Luke took notes on a presentation given by Scott Jehl on responsive web design and the recent Boston Globe redesign. It gives a really good insight into how they accomplished their responsive design and a number of helpful tips.
Mapalong
A cool looking web app that taps into powerful human emotions. "Save the places and share the memories that matter to you" this definitely has potential.
Exclusive preview of the hottest CSS specs
A quick overview of what's being discussed by the CSS Working Group. I think my highlights include reworked CSS floats, new selectors and conditional rules.
stream.js
A library that adds something called a 'stream' to JavaScript. I think of it like an array with more features and the ability to be infinite.
Huge Collection of Code Snippets
A (probably carefully selected) dump of code snippets ranging from fairly useful to invaluable; includes HTAccess, PHP, WordPress, jQuery, HTML, CSS.

Distributed User System

Fri, 09 Sep 2011 21:29:00 +0000

Last night, I had an idea.

Using the web storage API I thought it would be possible to create a login system that doesn't depend on a centralised server. Instead, local storage would contain the username and encrypted password as well as any other user data. On waking, I realised there were a number of very serious drawbacks with this idea (I'm sure you already think I'm barmy).

With local storage it is easy to clear everything.
It's tied to your browser.
Only allows one account per browser.
You can't control the security on a user's computer, you can on a server.

There may be scenarios where these disadvantages don't matter, but I doubt a use case exists.

Having said that, just because it's not a possibility right now doesn't necessarily mean that it's a bad idea. Having gone through the disadvantages, lets look at the advantages.

No server to hack
Same infrastructure gains as peer-to-peer software
Places power in the hand of users

I'd like to expand on the last point, that it empowers users.

No longer do we have situations where accounts are hard to remove from a system, the user has full control over their details. I think that's a very exciting prospect. The site is simply a front-end interface to the data that's already on the computer.

I think that this is what Opera Unite aims to do by making each computer (and therefore, user) equal. I'd like to spend more time trying to make this a reality but would be very interested in hearing your concerns and ideas about this.

Edit (12/9/2011): Following my thoughts through to conclusion, what I was thinking of is exactly what Opera Unite provides, a platform where you control the content and share it by making your computer (or rather, browser) the server. I think that Diaspora will include elements of this too. Either way, it's beyond the capabilities of the web storage API as I originally thought.

In Defence of CSS IDs

Fri, 19 Aug 2011 18:26:00 +0000

Thanks to current best practices the use of CSS IDs has been scorned and mocked apart from when absolutely necessary. I'm all for objects in my CSS and reusing code but there are a few things to say for the humble ID before we throw it by the wayside.

Speed

It's probably not the first thing you think of when you consider CSS, but IDs are the fastest selector according to this study. Although it's more a case for devices with slower processors, if you have a large site with an object-oriented CSS file it might render slower than one with a healthy amount of IDs and classes.

Usefulness

It has to be said, IDs can come in fairly useful to quickly target an element when mocking up a design or even outlining wireframes for clients to give them a better idea of what content will be there.

It works well with JavaScript

getElementById() is probably the easiest way to start manipulating the DOM and therefore is extremely useful. There is of course getElementsByClassName(), but this doesn't work in IE 5.5 - 8, so you can't rely on it without using an external JavaScript library that will add the functionality. Of course, if you don't want the extra heft then the simplest solution is to add an ID!

These are the three main reasons I don't think we should abandon the ID selector just yet, and perhaps should be more forgiving to those that use it extensively. Myself, I've been playing devil's advocate and try to write object-oriented CSS in my projects because of its many practical benefits but it's worth keeping in mind and questioning why you're doing something, rather than doing it because you've been told you should.

.htaccess Social Network Redirects

Wed, 13 Jul 2011 19:26:00 +0000

Today I saw a rather ingenious idea in action. Syd Lawrence, who's been very busy with Google+ recently, redirected sydlawrence.com/+ to his Google+ account. It works best on domains after your own name and would probably be effective on business cards where space for text is limited.

To achieve it, simply paste this line into your .htaccess file:
Redirect /+ https://plus.google.com/[userid]/posts

I came up with a couple of others, too:
Redirect /face https://facebook.com/[username]/
Redirect /tweets http://twitter.com/#!/[username]/
Redirect /listens http://www.last.fm/user/[username]

Year 2: A Review

Fri, 01 Jul 2011 20:24:00 +0000

My second year is officially over, I find out my results on the 11th.

It feels like it's gone really quick but looking back, I've managed to accomplish a lot.

The year started with a week of talks from industry professionals and my first experience of getting a business card. From there I was in the first group to run BUstation, where we put out a live video stream every lunch for a week. Although not part of the broadcasting side, I developed some simple PHP quizzes for viewers to complete that related to the theme of each show and encoded and uploaded each video — thrilling, right?

After that, if I can remember correctly we had two-weeks on each new web technology, so PHP, HTML5, Unity, and Flash — a brief crash course through each with a brief and project at the end of it. This was an intense time, punctuated by many moments of frustration and delight (although I can't say I ever found delight with Flash). This brought us up to Christmas where I had another first experience, my first web conference. A simple evening do called Heart & Sole. It had some great speakers and it was fun to mingle and talk to people, gaining insights into what people do and all set in a beautiful location (the Spinnaker Tower, Portsmouth). This was quickly followed by Rob's hack night where we spent a few hours playing with canvas and looking at the tip of it's capabilities. On a similar note, I also went to my first barcamp (brief, practical/random talks) where I attended many supremely geeky talks but loved all of it; I didn't know that 'Teach Me JavaScript' meant that we had to teach the guy JavaScript!

From the beginning of 2011 to March we had a major 8-week project, which I briefly blogged about. First, I built the basic HTML structure for the site using best practices as well as I could and then concentrated on the game. It was fairly gruelling and I definitely know that I don't want to touch Cinema4D again! Game work just isn't what I'm into and it was good to realise that at this stage.

After the 8-week marathon I wrote an iOS web application that I'm yet to write about but it was extremely beneficial. Using Sencha Touch vastly boosted my JavaScript knowledge. One of the reasons I chose Sencha Touch was for it's cross-platform deployment, and so I was hesitant to only target iOS with it but the general look of the app lends itself more to that platform. I'll probably add Android support when I have time to download the SDK and get it looking a bit more native.

Now, during my 'time off' I'm still hard at work both at Fishrod and on a couple of other projects that I'm hoping I'll be able to announce shortly. Suffice to say, life is pretty sweet.

Edit: My results are in, overall I got 68.5 and my second letter of commendation. Put me in the happy chappy pile :)

Node, Web Storage and a dash of Ext

Thu, 30 Jun 2011 19:49:00 +0000

I'm coming to the end of my first week back at Fishrod and today was our first 20% day. A whole day that we get to dedicate to technologies that have piqued our interest but, for one reason or another, haven't got round to playing with yet. As the title gives away, I experimented with Node, Ext and web storage.

Node is pretty cool. It's really easy to get up-and-running and using Express my development sped up even more so. Express introduced me to Jade, which is very similar to HAML from what I gather, something that I've known about for a long time but not been interested to learn. Writing this very blog post in HTML feels ugly and heavy compared to the lightness that Jade, HAML and Markdown offer.

I ended up making the beginnings of a traditional PHP+MySQL user login application, fairly unsuited to the technologies I had—that's what I thought until my boss told me that there's a module for Node that lets you interact with MongoDB (another product I've been meaning to get to grips with). Before I knew about this, I introduced Ext to try and get some sort of data storage into the application but it was too reliant on using AJAX to get a server-side response and as far as I can tell, Node isn't for that kind of thing. Instead, I ended up using localStorage which is only good if you want one user at a time per browser, (although I'm sure that must have some application!).

So apart from some other bits of web storage tinkerings that was my day really, I'll get the code tomorrow to post on here (as terrible as it is) for prosperity more than anything. It was definitely a good thing to setup a Node server and see how it works hands-on and be introduced to some of the programming culture that surrounds it. I've only dipped my toe in the water but the idea of just having a web server you can deploy so easily is exciting to me.

As a closing note, I think it's awesome that companies do have days purely for self-improvement, it really makes businesses and individuals stand out and I'm lucky to be at one that encourages it.

From WordPress to Symphony

Wed, 15 Jun 2011 08:29:00 +0000

For a long time I've been displeased with WordPress as my blogging system, it got the job done but it all felt quite Frankenstein's-monster-after-a-heavy-night-drinking-esque, mostly because I did just take as minimal a theme as I could find and tweak it until it fitted with the rest of the site. Since my internship with Fishrod, I've been working with a CMS called Symphony quite a lot. My original plan was to convert my whole site to use Symphony but I quickly realised that there wasn't much point in doing this when it was only the blog section that I wanted to change, so that's what I did.

With Symphony, I have complete control of what the outputted HTML is thanks to every bit of data being stored as XML and transformed through XSLT. Do give Symphony a try because it is absolutely fantastic, I baulked at it's strange terminology and alien way of doing things but, ultimately, it gives you a tremendous amount of power. I spent a couple of days dedicated to learning and applying it and it's really paid off (although only figuratively, so far). If you do decide to give it a spin, also check out XPath as it comes in extremely useful when you're trying to access specific nodes.

The blog has basic functionality at the moment but hopefully you'll appreciate that it looks a bit nicer and I plan on adding other bits that WordPress had over the next few months (things like searching, archives by month, and previous/next links to easily read more). I also plan on open sourcing this so people can use it if they wish, although if you do want a pre-packaged solution I recommend the blog that comes with the default Symphony install, I built this myself simply to teach myself but there is definitely room for improvement!

Header Design for Portfolio

Fri, 16 Oct 2009 01:17:00 +0000

A couple of days before I received the One Day Project brief I had, coincidentally, started working on my page structure and header design for my own portfolio. I'll take you through the steps that brought me to my current design but with the new brief, I'll probably scrap this design and start afresh but we'll see.

Firstly, I drafted and brainstormed what I believe would constitute 'me' on the web. You can see these below:

From this, I decided that it should be personal, but in an almost non-identifiable way. So I took a fairly low quality picture of myself with iSight and used the Cutout filter in Photoshop to stylise it - giving it that slightly more anonymous feel. I then used the smudge tool to give the header some more fluidity.

The font used is Garamond with -75 tracking so it's all quite close together. I used Garamond in this simply because it's my favourite font and, hopefully, adds to a more 'professional' feel. The red and blue used I liked because of its simplicity. I keep thinking of the 'Marley & Me' logo, (not that I've ever seen the film, mind) although I just looked at it on iMDB and they don't share much resemblance so it must be the Marley & Me logo in my mind.

As you can see though, the colours look atrocious and ugly, far too brown and not the kind of image that I want to show to prospective employers. I think it would also be hard to design a whole site with that kind of swatch so, as you'll see in the next design I lighten it. The smudging I don't think works particularly well either and I'm left with the problem that when viewed online it will look like a box because of the lack of fading and block colours.

I quite liked the fact that the background seemed to be coming out of my head in the first one, like ideas. So I've tried to keep the same sort of thing going in the second one by adding the words 'Graphic' and 'Web'. The overlay circle is quite nice because it lightens the colours and gives me something a bit nicer to work on in terms of a swatch. Circles are also representative of protectiveness as well as being quite dynamic. As Mark Shufflebottom said, they're good to use on the web because it breaks out of the grid in a kind of Dadaist way, mainly because they're quite a bit harder to setup and look good!

In this one I've also extended the image to include my hand holding my mouth (yes, that is what it is). Unfortunately, the image still doesn't flow well with the page. So I resolved to fix this in the next design by adding... lines!

In this design the thick lines have been added to be quite bold and give some structure as to where and how to read the image. I also added the word 'Games' to give a third addition to my repertoire but I don't think we cover any of that until the second year but no harm in putting it in now. However, when I imported this design into my rough HTML structure the thick black lines obscured the menu and was too low down so...

My final design so far now is cutoff below the line, taking out those hands and mouth once again like the initial design. Because of this you also get a semi-circle which I think are quite fun looking. The colours for the words are all colours from the face as well. I am quite happy with this design there are just a few things that I know I can improve upon. These are:

The font colours simply don't look right, they look nice enough but I don't think they work when coupled with the face image. I think I need a more 'block' like font to match the lines.
The browns, although lighter, are still brown. I could completely change the hue to something quite exotic or use shades of grey to make it monochromatic, I'll play around in Photoshop after this post and some lunch to see what looks good and update from there.

Apart from that, I'll add some other ideas and perhaps go down a different route as I seem to be slightly ahead and, at the moment at least, have the advantage of time, which I haven't had since I started this course it feels!

One Day Project

Tue, 20 Oct 2009 01:15:00 +0000

Tuesday has arrived and that means the One Day Project is upon me. The brief is basically to design a theme for my site whilst referring to at least one other site and another source, in my case a music video. Also, design a basic structure and then if I've got time to build a simple mockup in Photoshop.

Lead up to deciding on the music video looked like this:

After spending a good portion of yesterday looking at things that I like it suddenly struck me that Lemon Jelly's 'Stay With You' video was possibly one of my favourite pieces of design ever. Designed by Airside it is amazing, I'll post a YouTube link when I have time. So, I'm thinking of using that wave design and colour palette as a place to start. I also really like the art style found in Okami with the watercolour effect and texture so I could desaturate some of the colours and add that.

All sounds well and good but I need to find some sites that deal with a structure that I can use. I've been looking at some blogs that have the 'Top 20 Best One-Page Portfolio Designs" and it's intimidating to say the least! I think I'm best off at sticking with something quite simple for today... but where? Hopefully I'll find something.

I was talking about the watercolour feature, you can see an example of this here. Online, Heiko Brömmelstrote has a nice example of texture in the background adding a bit of 'reality' making it feel less like a screen. An example I've just found showing what I mean by overlaying texture with colour and making them look right is nineliondesign.com.

I've just found a beautifully laid out site, Theatre Website. I like the fact that the navigation comes first (usability) but this doesn't detract from the wonderful header design that then leads to the rest of the site. I think I can incorporate this sort of design with the idea that I have, I'll draw some sketches and see what comes out of it.

Update at 12. The sketches have been sketched, I'm now grappling with a logo design. I like the idea of Jason Reed, simply using a stylised signature. This makes the site feel much more personal, adding a small profile picture would be good idea. I like one guy, Kino who had a Flash header with his own head interacting with what you click on, I could do a similar thing with an animated face of myself, simply looking around.

13.30 I've got some sort of Photoshop sketch, I don't like the fact that it's black though and the header design isn't how I imagined so I'll change that at some point to what's in my mind when I find out how! I also need to figure out fonts and colours, I know what to do just not how to do it yet! Photoshop tutorials ftw. I'm going to have the waves as a block of colour coming from the side so it will flow better with the rest of the web layout. I'd quite like a non-serif font contrary to what's there already, something quite curvy too akin to Alex Coleman's site.

A very quick rough version in white:

I'll add to this throughout the day as I find more.

Changes to Portfolio

Fri, 23 Oct 2009 01:14:00 +0000

The one day project really changed my perspective as to how to design my portfolio. The header I made was kind of nice and all but it had no context. The design that I'll spend the next week over (as well as my essay) should be much better and add more coherence throughout the site. This is basically a note to say that that's now what I'm up to and I'll try and get proper hosting for this blog and get my .com back online =). Anyone know any cheap reliable hosting let me know, kay?

Site Progress

Sun, 01 Nov 2009 01:10:00 +0000

Hello there,

My site's taking form nicely. I've decided to construct it in HTML 5, the reasons being 1. It shows I'm up with web trends, most modern browsers can render the basic tags I'm using. 2. I want to push both people and browsers to supporting the new standard rather than waiting for 2020 or whenever the W3C believes it's going to become the de facto. Get in touch if you think that this is a good or bad move. So far all the pages validate apart from the main page because it uses Dreamweaver's built-in script for the rollover image, I'm sure there are alternatives though so I'll research that. Interestingly, (for me anyway) I'm still using Espresso as my main editor, I guess mainly because of the really easy FTP access it gives and Quick Upload on save. The fact that it's so much nicer looking, quicker, and better organised than Dreamweaver, I just wish it had better lazy code writing like Adobe's beast but it's a small sacrifice to make tbh.

I've got a nice contact form that uses PHP and has basic JavaScript validation with the help of Kirupa and a few Google searches. It's been quite fun building that portion and learning some PHP and how it works, same with JavaScript, I've never managed to get into it and understand it but the more I spend in it's company the more it's starting to make sense. Most of the pages now have content and are coming along nicely, a couple of images to spruce things up. Also there's a custom error page that I'm rather fond of but definitely not the best out there.

I'm still not happy with the design; I can't get it to look how I want it to be. The only cure is more hours on Photoshop but already I'm tiring of it =p.

The next things for me to do are: complete and upload my CV, build a site map, build a WordPress theme to make this blog consistent with the site and finally, get the design and colour schemes right.

Site Criticisms

Tue, 03 Nov 2009 01:09:00 +0000

I can't help it, I'm really not liking the site as it's turning out so I'm going to propose some changes. Leave a comment if you agree/ disagree with any of my suggestions.

It looks unbelievably amateurish, probably because it is.
The silly bubble things don't really make sense.
The header is ugly and hard to integrate into a good site design.
Meh.

On the plus side, apart from the nav element, it looks relatively consistent across ~50 browsers although I've had a few complaints about screen issues which hopefully will go away with the redesign anyway. So I'm going back to my visual diary and going to kinda start again. Here's hoping.

Update at 8.50pm: I've had a change of heart, I'm going to give my design one more chance and build it from scratch (again) but this time with a couple of ideas I picked up from brainstorming a separate site. I'll post the results up here