31 March 2010

Version control

I used Subversion (with TortioseSVN and RapidSVN) when I was building Strine (including installing it on the team's machines and training them how to use it) and completely loved it.

Good version control on a project has always been important in my eyes after years of working in desktop publishing roles, where you go through any number of iterations and edits on a document.

I created my own version control system, where I label all of my documents with date, series label and owner initials, and sometimes time (e.g. File name 310310JTa 1745.ppt). I will save a new version any time I'm about to make a new set of significant changes (especially deleting), because you are guaranteed to have someone want that [page, chart, section] back right at the last minute. In a deadline driven environment, you don't want to have to recreate things.

Anyway, this system, although useful meant I chewed through space on my USB keys and after enough iterations on a project, it was a pain to scan through loads of files to look for the change you wanted to undo. When I started using SVN, it was like a dream come true - my OCD need for versioning could be satisfied easily! And across a whole team of people! Awesome tool.

Anyway, now I'm back to working on a solo project (LIF site redesign), I've reverted back to filling up my USB keys with versions of files. I don't like this system - I feel like I've flown business class and now I'm being forced to sit back in Economy again.

I was talking about SVN at the Web Blast evening last week with a gentleman named Sam, who told me all about other version control systems out there, as well as options for remote hosting. He suggested if I want to get into developing that this would be a good idea to set one of these up, as it would be an easy way to show people in interviews what my code actually looked like. I just liked the idea because I could work on my site build anywhere (including at work) and upload changes regularly - and save my usb keys!

Stack overflow had a useful thread on this exact topic. Tomorrow I'm planning to check out Unfuddle and Beanstalk and see which free hosting plan suits me best. They both also support Git, a different VCS. I think I'd like to try something else new, to add another feather in the cap.


OK, so as I mentioned on Planet J@net, I've been hard at work knocking over the redesign of the LIF site.

In the middle of all of this hard work, I stopped to attend the Web Blast drinks at the end of last week. Although I didn't land any job offers via my lovely new business cards, they did land me a great door prize - a Balsamiq licence! I love new toys :-)

Anyway, I spent a couple of hours on Monday playing with it, and re-mocked up a couple of pages page for the LIF site. I intentionally didn't read any instructions and just started fumbling around with it, to see how easy it was to use. Once I worked out what elements they had and where I needed to look to find them, it was pretty easy stuff.

I’m glad I did it, as it gave me a much clearer idea of how everything would fit on the new LIF page I was planning to build, which caused me to reconsider the proposed layout.

I liked the 'hand drawn' look of it (compared to say, using photoshop) because you could start to include some colour or style elements and there's no way a client would confuse your wireframes/mock ups for final designs. I’m not sure how far you could take adding style (I couldn’t work out a way to change the font type, but then you don’t need that for this stage in the build I guess), but I didn’t want to spend hours taking it through all its paces, as I have a site to build!

I think it would also be dead handy to use for things like user testing. It's also got a fairly good trial use (so long as you don't want to save anything or mind a message popping up every 5 mins asking you if you want to buy it). Anyway, I thought I'd post a couple of examples of what I built with it while I sat on the ferry (before I ran out of Macbook juice)

This is a mock up of the LIF home page (already code built). I practiced adding in colours and images - too easy! One issue I had was I chose to build it within a 'web page' element. This gave me a lovely image of a browser window (I could even edit the http: address) but it also added an inexact number of pixels to either side of the page and made it hard for me to judge exactly where things aligned (which is important as I’m using the 960 grid build). I don’t think the browser window added a lot of value (although a less savvy client might like seeing their site in a window). I think the better way to use it would be just to build the page on a blank screen, then group the finished piece and copy/paste it into a web page element before showing it to a client...

This is the mock up of the second page, training.html. Once I'd plotted out the images and took the grid sizing into account, I realised the text in the middle was going to have to stick to one column instead of the two I imagined in the PowerPoint mock up (see the grey shading in the middle). This saved me a lot of pain as I coded it this way directly.

I chose to use PowerPoint for my original mock ups as I am extremely familiar with it and can whip something up very quickly. I found Balsamiq offered a lot of the same controls and functionality (like easy access aligning tools), but had the added bonus of accurate scaling and very easy to use drag/drop controls. I would really have liked to have a ruler on both axis to work with (I know a window pops up when you resize objects, showing the dimensions but it’s not the same! I felt it was a bit too guess work/blind luck for my liking. I didn’t feel like I had enough control). This being said, I managed to get a couple of useful mock ups, very quickly, even though I was completely unfamiliar with the package. I look forward to trying it out again on the next new site build project...

26 March 2010

Fireworks alternatives


Fireworks alternatives on trial: Acorn, Drawit and Opacity

The best quote from the article:
"Why this post took so long
In order to trial these applications properly, you have to use them in anger. That is, on something real"

An interesting post. I'm always looking for alternatives to Adobe's $$$ software, and this has helped me to prioritise which one to learn first. I've tried using Acorn before but didn't have much joy. Quite keen to give Opacity a spin, based on this account.

25 March 2010

The business card!

I got my excellent business cards (thanks to Click Business Card's legendary turn around time)

I'm really happy with the way they turned out.

The excellent background handmade texture was created by Pareeerica.
I'm looking forward to handing out a bunch of these tonight at Web Blast!


So, now I'm starting to get the hang of the whole site build thing, I'm starting to want to do more with the style and design.

I know when it comes to web pages, I've been able to safely use a short list of fonts (Georgia, Verdana, Lucida, Arial, TNR), but if I wanted to create something more interesting looking, I've resorted to whipping up an image in Photoshop and inserting it in - which does no favours for me in terms of SEO or accessibility.

I came across an article via Smashing mag re Typekit, which opened my eyes somewhat to embedding typefaces - more of which was clarified by this article on Web fonts and standards and @font-face, which also had a handy link to the Tan method (clean 'hack') to make it work with IE, as well as a handy source of fonts available for @font-face embedding (free!).

Definitely an area to explore post LIF2...

I also learned a bit re fonts by reading this very useful (free!) Type classification handbook (and finally found out what san serif means :-/ I can't believe I never bothered to check before). It explained the 10 kinds of type classifications and gave examples of each. A handy way to increase my design vocabulary and gain some appreciation for the history and evolution of the different styles.

Free stuff!

I blame it on a left over student instinct to seek out free stuff

24 March 2010

The value of screen real estate

It's been a while since I've perused a Neilsen article, but this one popped up today and it seemed pertinent re my current redesign project:

Amusingly, the article requires scrolling to read in full, and just as Jakob predicted, I spent about 80% of my attention on what I first saw, and just scrolled down through the rest.
The reason the article stuck with me is because I bothered to read the last gem of a point, "Finally, while placing the most important stuff on top, don't forget to put a nice morsel at the very bottom". Excellent.

So, in the visual design course at uni I learned about page structure, and the bottom of the page being reserved for detail etc. But if people have short attention spans and loathe clicking through page views (as per Neilsen's article), how do you get the information to them? Is it just a matter of banging out a couple of succinct key points at the top to hook them into reading on? Or do we need to just keep everything that's not a novel, short and sweet? And then the big catch - how do you convince the client that this is the way to go ;-)

The other conundrum is - what constitutes the size of the first page view? People are using all sorts of devices, from full monitor screens, to laptops, notebooks, not to mention mobile devices, to view pages these days. I'm in the process of converting my mock-ups for the LIF2 redesign project (see the Planet J@net blog) - what I get to see when working on that first page on my lap top is different to what I see on my full desk monitor. That massive picture taking up the RHS of the page (which is larger that I'd originally intended, thanks to the 960 grid I'm using), now seems like a terrible use of space. Maybe I'll go back and use the 16grid instead of the 12...

Something to aspire to...


Watch the 25yr old graphic designer pull together this photoshoot wallpaper. A nice study in approach to a photoshop image build (and comforting to know this guy is awesome and it took him 6hrs and 1000+ layers to achieve)

18 March 2010

Articles to review

I've been so busy lately with website redesigning, job hunting, life and most annoyingly, actual work, that I keep coming across articles/resources I'd like to read/review, but don't seem to have a moment to do so. They're getting lost in the twitter stream, so I thought I'd log them somewhere for those down time moments...

Postition absolute - web design opinion pieces

Search patterns library

Free guides that teach you stuff

Google analytics in depth

Random password key generator (when mashing the keys just won't do...)

07 March 2010

960 grid - the plan

So, after reading up on the logic behind the grid system, as well as a couple of other papers/theories re grid design (incl. discussions from Khoi Vinh and Cameron Moll), I'm going to give the 960 grid a go.

I've already had fun downloading the bookmarklet gridder (http://gridder.andreehansson.se/) and applying it to lots of different pages. I think I'm going to realise it's worth more when I start building...

I'm going to try the css and html code generator at http://headless-studios.com/960.ls/# and see what I get...

960 grid system - the background

So I found a blog post by the creator of the 960 grid system

I think I'm going to try using for the LIF2 build for a couple of reasons...
1) It seems to make sense to me
2) It looks 'right' to me re total width of page as well as column division sizes
3) It takes into account accessibility issues and addresses some typographic ideas I didn't know about. e.g. Not having played at all with Linux browsers, I had no idea I should be considering choice of fonts for real cross browser compliance
4) It doesn't apply too much styling - appears to be less than Blueprint (http://www.blueprintcss.org/) so I don't feel like I'm 'cheating' so much using a grid builder
5) It doesn't claim to the best/better than everything else out there. I like the fact that the author just puts this forward as something that works for him, and if you happen to find it works for you, well awesome.
6) It plays well with IE6/7
7) It's free!

It's an experiment anyway, so lets see how it goes...

04 March 2010

Launch into fitness Mark II

As discussed yesterday, I plan to give LIF a face lift.

I've roughly mocked up the main pages in the new site using Powerpoint. I've blogged those over on the Planet J@net (www.jugger0.blogspot.com), which I used during the development of the original site, and will do so again for Mark II. I'll keep this blog development free as much as possible...

03 March 2010

Considering organic design...

I watched Ross Lovegrove's talk on Organic Design this morning on the way to work (http://www.ted.com/talks/lang/eng/ross_lovegrove_shares_organic_designs.html) and it got me thinking about creativity and design.

Looking at his design lab and hearing how he thinks/develops ideas reminded me of the start of each uni semester during the brainstorming stage - the way I'd seek out all manner of random 'cool' things from all over the place to get me thinking/inspire me to start churning out ideas for projects. You become hypersensitive and really see things in different ways. It can really be fun and quite exciting (once you finally come up with an idea that is - it can be a bit nerve wracking before that with deadlines looming and production time still needing to be factored in!)

At one point Ross was marvelling at some dinosaur skeletons in a museum. He remarked how looking at these creatures was daunting, as such amazing design evolved over a very long period of evolution - how on earth was he supposed to create/design new form in a much shorter time frame?

This sentiment is not dissimilar to lots of thoughts I've been having lately re my own design skills. It has been quite daunting for me to look at the portfolios of other designers/developers and think of how mine places (so poorly!) along side them (even though I'm just pitching at a junior/newbie level, I can't help but compare myself to more experienced peeps - I know employers will be as well...)

I think my best tact going forward is to:
1) use other people's experience and design knowledge that has evolved over the web years to bring me up to speed e.g. sites like Smashing Magazine or the Yahoo! pattern library
2) be patient with myself and understand the knowledge/skill will develop in time

I also think a good plan would be to update the design of the Launch into Fitness website. When I built it, I did so mainly as an exercise in learning how to use different types of code. I've learned a bit about design since then, I think I'd be doing myself a favour by showcasing how I've evolved...


OK, so my very good friend Marla did me a massive favour and had a developer at her digital agency (someone that I don't know!) review my academic portfolio. What came out of that exercise was an honest evaluation and constructive feedback, which is exactly what I need right now.

He didn't have a great deal of time to view it and it was interesting to see the sorts of things he picked out to look at (and they weren't necessarily my best work - which isn't what I wanted!). I don't know why I sound surprised - you'd think with all of the awesome success I had with user testing feedback in all of my uni projects, I would have thought to 'user test' before now.

The portfolio, as it stands, shows the work I completed for each subject in my degree, in chronological order. I was hoping it would show how much I evolved/improved over the two years. What I didn't think about was people are more likely to just flick through the site and scan through the work, and the current set up doesn't really suit that. It looks like I'm going to have to create a new (abridged) portfolio site, with just the main pieces that I think best demonstrate my skill set (and somewhere I'll be able to start collecting new things I working on).

I cringe thinking about the agencies I've sent the link to, not to mention the job I applied for (that I was really keen on!!) - people have seen it in it's current sub-optimal state, it's no wonder I haven't heard back from them!! Oh well. I think before I start chasing those up I should probably sort out my online presence...like getting a hair cut pre-interview :-)