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.
31 March 2010
Balsamiq
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...
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
http://hicksdesign.co.uk/journal/fireworks-alternatives-on-trial-acorn-drawit-and-opacity
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.
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.
The excellent background handmade texture was created by Pareeerica.
I'm looking forward to handing out a bunch of these tonight at Web Blast!
Fonts
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.
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
- A list of free e-books on design that might be useful...
http://arbent.net/blog/outstanding-free-ebooks-on-design - Fonts free for commercial use
http://www.fontsquirrel.com/fonts/list/style/Handdrawn - Looks like lots of useful resources and articles
http://woorkup.com/
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:
http://www.useit.com/alertbox/scrolling-attention.html
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...
http://www.useit.com/alertbox/scrolling-attention.html
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...
Subscribe to:
Posts (Atom)