From the start I knew I wanted something very simple to allow the focus to be on the photos. I jumped into my sketchbook & after about 20-30 minutes I knew the direction I wanted to go in.

Fireworks was my next port of call, I laid out a twelve column grid & brought my sketchbook concepts to the screen. As I went I leaked a few previews to my Dribbble account, which was awesome getting constructive feedback.

Building the site was the easy part, I’ve used HTML5 & some trick CSS3 bits, like box-shadow, opacity, transition & nth-child, this made for some pretty rapid development as well as some beautifully light & semantic markup.

For the image slider on the gallery pages I used the jQuery powered the Nivo Slider which I fell in love with a few months ago & have been dying for a reason to use. With the help of Jamie Thompson, & his ninja JavaScript skills, I customised the slider a little bit to automatically attach the thumbnails for each image to the page, oh I did some ninja CSS to give the images a bit of pre loading before they start running on the slider too, it makes the view experience so much better.

If you’ve got this far through this blog post you are probably expecting a link to the site right now… well I don’t like to disappoint so here – Go & check out my new photo site!

As always I would love some feed back on the site, good bad, black, white, anything goes.

If you are a web geek you might want to have a look at my style sheet, it’s OCD gone mad…

Anyway, enough of that, it’s been a really nice project to work on, James & I both had some really strong ideas. Three words came up over and over – Simple, Strong, Clean and I think this has translated nicely into the final product.

The Brand

First thing I thought about was the logo, I got some ideas down on paper and then translated them to screen. I actually ended up sending a whole bunch over to James, loads more than I would normally send.

In the end we settled on one of the simplest concepts, you might groan – Oh it’s Helvetica… but I don’t care, it works and it looks good.

The Site

I actually came up with quite a lot of the idea for the site while sitting next to Ashley at the FOWD Tour Glasgow, in the form of random sketches in the back of my Moleskine. Then they went into my layout pad at home, and I showed them to James, he got really excited about the concepts and could see exactly where I was going which was great.

After the sketches I did a proof of concept or two and once I was happy with how it was working I started translating that to WordPress. Man I love me some WordPress!

The Home Page

Roll on a few months and the build is complete, the home page features a giant background image for some wow factor (always guaranteed with a James Arnold photo).

The About & Contact Page

The about and contact page carry on the full size image, with a nice layer of content over the top.

The Galleries

The galleries are defiantly my favourite part of the site, so simple, it’s just throwing the images right up in your face. The images automatically scale to the height of your browser window, when you are on a gallery you can use your arrow keys on the keyboard to easily flick between photos, nice. I’ve done something pretty hot with the menu too, (thanks to Jamie for help with the JavaScript here).

The Blog

The blog is a bit of a contrast to the other parts of the site, more structure, more white space. Hopefully James will keep this updated, I’m hoping for some behind the scenes stuff!

Anyway, check it out – James-Arnold.co.uk – and let me know what you think!

Presentation

Whole site does a really good job of presenting user content. The user home page its self (Mine is pictured above) shows your ten most popular photos in a cover flow style gallery as well as an about section, your friends, your recent activity… the usual sort of stuff. Clicking through to the image gets you, as you would expect, a nice big version & the ability to start content. Awesome. The site still being developed & new features are being added. Being a camera geek I’d love to see the EXIF data from photos presented nicely along side the photos, & maybe some slightly nicer presentation when the “View Full Size” link is hit.

Community

The site has a really nice sense of community & the Hellamega team make them selves very accessible, this is rare for a site like this but it’s something I really like. Michael does a these awesome spotlight videos, featuring contributors, sharing news, photo adventures & generally just being excited. There are some great contributors on the site, right now I’m loving work by Benny & Michael Petralia.

It’s Invite Only

So this might seem an odd move for a social networking site, but it makes a lot of sense IMO. It means they have an extra level of regulating quality. It means you don’t really get spam users, it means you don’t get that guy who signs up when he is bored one night – uploads 20 pictures of his neighbours dog and then never uses the site again. It also makes the contributors feel special, everyone likes feeling special!

I guess it also doesn’t hurt that two #of #my photos have been featured in their “Photo of The Day” section on the site. So in closing, get on the site, tell ‘em you want in, & get contributing!

Link Round Up

• Live for Fame The site!
• Hellamega The guys behind it
• Andrew Cornett On twitter, give him a follow
• Michael Perry On twitter, yeah follow him too
• Rick Nunn My page on live for fame
• Benny Check this guy out
• Michael Petralia Check this guy out too
• Invite The invite request page

Lately at work we have been receiving a lot of emails from school/college/uni leavers wanting to get into the web design industry & I’ve been sending them back emails with bits of advice as best I can. Today I thought I would take all the best bits out & make a standard response & while I’m at it throw it up on my blog too.

So You Want To Be A Graphic Designer For The Web?

Of course you do, chicks dig designers, they all drive sports cars, it makes you the life of any party… What you have to remember is there is no right or wrong answer with design, it’s all subjective. Even so there are some things you should understand to help with the design process.

Typography – Have a good understanding of it & why it’s important. Text exists to be read & good typography should help , not hinder. There is a nice guide to web typography at ilovetypography.com.

Colour Theory – Colour can bring a website to life, it can also bury it in the dirt. Understanding how not only colours but also contrasts work together is essential for delivering your message with a punch.

Understanding Web Technologies – this one is seriously important when designing a website. There is no point in doing the most amazing design if it’s not possible, or not possible with our sacrificing web standards/accessibility. As a designer you should fully understand the medium you’re working with no matter what it is.

Usability – is commonly defined as having three core components: effectiveness, efficiency, & satisfaction. Basically make the interface easy for the end user to use as possible. If it looks good but is impossible to use then - FAIL.

There are a million other points to consider when designing any thing, I couldn’t possibly cover them all but these could help you out along the way.

So You Want To Be A Web Designer?

Yes this is a whole different job to the other two, yes there is of course some over lap, & you will quite often find a graphic designer who is also a web designer or a developer who is also a web designer, & on a very very rare occasion you will find some one who is all 3, but that hardly ever happens.

Semantic HTML – Tables are out. Well formed semantic HTML is in. It brings you accessibility, usability & search engine optimisation. Make sure you don’t use any inline styles in your HTML, that’s best left for the CSS. If you are learning there are some really good HTML tutorials on htmldog.com, I also recommend reading HTML Mastery.

Well formed CSS – Important to understand CSS fully, adding class after class to a style sheet just to get some thing to look right is bad practice. There is a difference between knowing CSS & understanding it. Again there are some really good CSS tutorials on htmldog.com, I also recommend reading CSS Mastery.

Accessibility – The W3C (World Wide Web Consortium) have a set of guidelines that deal directly with accessibility on the web. It’s a very worth while read for any serious web designer. It can be found here.

Cross Browser Compatibility – All browsers are not equal. It’s important to try & get your message to as wider spread of people as possible. Different people use different browsers. Browser checking from the very second start developing your web application really will help with this. There is nothing worse than getting to the end of a project, & opening it up in IE6 to find than it doesn’t render correctly or worse won’t run at all. I like to check all my sites work as best they can in IE7+, Firefox 3+ & Safari (Mac & PC).

So You Want To Be A Web Developer?

Well who wouldn’t, what’s more impressive than telling your friends you’re a developer & its sure to woo the girls too. Read on for some points that a good developer should pay attention to.

Server Side Language – There is a huge choice of web technologies available today. Proficiency in at least one sever side language (eg. ASP(.net), PHP, Ruby On Rails) is important. Regardless of which you chose we recommend developing it in a text based editor (e.g. Notpad++ (PC) or TextMate (Mac), not a WYSIWYG editor (e.g. Dreamweaver (although the code editing section of its good)). This gives you much greater control over the outputted code which should lead to you fully understanding every aspect of your Website. This also applies when you are writing HTML & CSS.

Database Normalisation – Normalisation is the process of designing a database in a way that removes data redundancy. It keeps the database fast & efficient. Un-normalised databases generally end in tears.

Commenting Code – This is important especially when working in a team. Not only does it stop you from forgetting what part of your code does, but it helps others not to break stuff if they need to work on it too.

Further Reading:

• A List Apart – Bit of every thing here, well worth following.
• W3 Schools – Ok It doesn’t look nice but its fantastic for reference.
• PSD Tuts, Vector Tuts, Net Tuts – Three fantastic sites with tutorials for doing all sorts of things.
• Google Doctype – Jamie reminded me about this one. Very good resource & it keeps growing. Defiantly worth looking though.

Got any more advice for the guys who will be replacing us in a few years? Leave a comment. :D

Edit:

My friend Jamie has just done an amazing post for current developers who don’t work in web related fields looking to get into web development. I would probably recommend n00bs looking to get in to web development full stop to have a read of it too. So go check it out!