photoFor the longest time I have loved war games, not your battle of Britain or real army games re-enacting real battles but the fantasy kind where you get to play with elves and goblins.

I was always amazed by those who painted these models and even though I love to paint never thought that i could do it.

One day after browsing eBay and adverts (again) looking at warhammer models and wishing once again that I could paint like that, I saw a great deal by a guy who was selling his old army. Warhammer can be really expensive and I was always reluctant to get into the hobby as anyone who knows me would tell you I have a tendency to spend a lot on collecting things.

This however would give me a lot of models for very cheap and I would be able to test paint a lot of them as they were badly painted to start with. So this was it I was about to start painting miniatures!

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Fireworks for Prototyping

As you all know I love Fireworks as a design tool and have been using it as my primary web design software for years. Now I have heard all the arguments in the Fireworks v Photoshop argument but for me they are not even in the same category. Fireworks is a web design or prototyping tool and Photoshop is for digital art and creative image creation. Nuff said.

For the last few weeks I have had the opportunity to really give Fireworks a workout, designing a new UI for a web & AIR based application. The project required the mock up of all the major screens for the application to decide work flow etc. Now if I had used Photoshop this would have required numerous files to handle all the screens or groups of layers. Fireworks however allows me to have “pages” within the document and better still have a master page with elements that will be shared by all pages.

This piece of functionality could be done in Photoshop with layers – but the fact that this is a feature of Fireworks and not simply a way of setting up my layers points to the fact that this is exactly the type of work Fireworks is designed for.

My boss was delighted with the way I could make changes to the master page and have it immediately update all the other pages, equally he was even happier when I created links between pages in the document which allowed me to preview all the pages in the browser and click between them as if it was a working application. Add to this the ability to create a pdf document with that same click through functionality which we were able to send to board members and the true benefits of Fireworks become evident.

Last but not least is the fact that the development company which normally receive Photoshop files from designers to slice up to skin the application marvelled at the fact I could send a single file with the entire application screen set, with all the slices set out, named as they wanted ready to export. All in a file of under 3mb!

If you have not already tried it out, I suggest your next project should be to download Fireworks and give it a 30 day whirl!

Hello Stranger

God has it really been that long since I posted here… eek!

Well there is a good reason, really there is, you see I have gone Freelance full time and as such I have been a very busy bee indeed. Now the decision to go freelance was not shall we say mine. I was in fact made redundant – got a few quid and decided why not finally give it a go.

So 3 months in and things are looking good. The market is ripe for freelances at the moment with companies unwilling to take people on full time, the freelancer is a great resource. Finding work is much easier at the moment and with a few steady gigs from companies looking to outsource a few projects things are definitely looking good for the next few months.

The whole experience has been really good so far and has helped me with the “sales” aspect of freelancing which I was never very comfortable with before. Now however it is about paying bills and the mortgage so the shyness about asking for payment or a contract is out the window and it is very liberating!

On the whole it has been amazing how much more appreciated your design work is as a freelancer, when compared with an in-house designer because there is direct cost involved. As an in-house designer people ask for change after change because they don’t need to worry about the money aspect only the time spent. Now when money comes into it, you find people will think project through more, give more information and be more open to your ideas if it delivers a better product.

So far so good and now that things are settling down I hope to be back posting here more often (promise), in the mean time if you are interested check out my portfolio www.lunasadesign.com to see some of my latest work.

The AIR that I need

Cheesy title I know, but AIR apps are becoming a very important part of my daily freelancing life. The fact that I can get these apps for free and that no matter what system my client is running I can get them to work on their machine too has been a God sent.

I also like that the people putting together AIR apps seem ( for the most part ) to really understand that usability doesn’t have to mean an ugly interface.

So here are my top 5 AIR apps for Freelancing:

1. Google Analytics Suite

This little app lets you tap into the data in your analytics and generate some really nice reports, including my favourite, the overlay map, showing you were people have accessed your site from. Now all this can be done through the web but it is the easy of use and beautiful layout and navigation which makes this app a winner. When I have to show a client the stats for their site this is the way I do it.

2. kuler desktop

Now this is one I am sure you all know about already, but take time to see what the AIR app version has to offer. It nice compact design means that you can have it open as a companion on screen as you work and Drag and drop themes as transparent “tear offs,” to scale and view over any application. Also try out COLOURlovers desktop

3. Klok

This great little project timer, lets you set up multiple projects and sub projects, has an easy to use interface to start and stop time on the projects you are working on, and generate reports too. Simple, easy to use and looks good. What more could you want!

4. Fireworks Autobackup

Now you all know me, I love Fireworks ( even with the text engine issue ) and so I simply can’t live without this app.  Auto Backup is an AIR app that automatically creates backups of all your .png files  while working in Adobe Fireworks application. A file is automatically saved at a user-specified interval inside a folder named FWAIRBackup which is located in the same path as that of the original file. This means you can use, File > Revert option and if there is a crash, you can restore all your work

5. Snippely

Your working on a project and you have a piece of code you want to use later, or want to make a note or store a detail / password etc about the project, what do you do?

Me I used to open notepad and save a little .txt in the project folder. This after time gets confusing. What did I call it, did I save it after the project went live or is that the latest version of that.

Well Snippely saves all that hassle, instead of storing bits of code, quick notes, and memos in text files all over your hard drive, this application will let you save and organize “snippets” in one convenient location.

There are lots more cool apps over at AIR Marketplace go check them out and see if any of them can make your job a little easier!

The pros of pro bono

The debate ranges on, should you do design work for free? Should you only do it for family? friends? charity? or not at all, does doing work for free under value design work as a whole?

I don’t think there is an easy answer, I think that all you can do is see what works for you. I don’t work about what other  people think when I do work for free. I feel that it is my time and therefore my decision. Now mind you I don’t do  a lot of free work, but when I do I normally do it because:

a) the person otherwise won’t get anything done.

b) they really don’t have the money to get it done properly and it is a project I believe in.

c) My mother asks me to do it :)

Take for example a site I have done for friends of mine Trevor & Louise. These guys are getting married and Trevor was my best man, so I offered to but together a small wedding website for them. www.louiseandtrevor.com was a quick and easy site to put together and I was happy to help and save ther guys a few euro along the way.

But this is not all for their benefit either. Doing sites like this lets me create in styles I would not normally get to do, it exposes my work to people who would normally never see my work and it helps spread my name and reputation by word of mouth in a time when a personal recommendation from someone is worth it’s weight in gold.

For me doing free design is more about helping someone than anything else, but it does have benefits.

7 Things that you need to know about Fireworks

I was lucky enough to be sent to the Adobe max conference in Milan. The event was a great success and i really enjoyed myself & meet some great people. I have however one major complaint… the treatment of Fireworks at the conference.

A talk was given my by Donal Booth from the Adobe Dreamweaver team & admittedly he was not the author of the presentation, but all in all it was terrible!

Not only was it a bad presentation, when i asked a few questions, it was clear that he knew next to nothing about Fireworks CS4. So lets make some things clear.

7 Things people don’t realise about Fireworks that you need to know:

1. Fireworks is not just a design tool, it can export HTML & CSS of your design which is W3C compliant. You can use it to create an almost finished, coded site.

2. Slices in Fireworks can be named, and this name will become the ID for the CSS relating to that slice. This is very important when exporting as it means that the styles you get have logical names. To do this simply change to the following settings when exporting:

export

3. Text can be exported from the design, along with the text style. This is done my drawing a slice over the area where the text will be and changing the Type to HTML. This works best on areas where there are no background images behind the text. It can also work with images behind the text but you will need to edit the CSS after export to make this work. ( I will be producing a tutorial on this later )

4. When you export a design as CSS & Images, Fireworks will ad all the margins, padding and spacing to your layout. So all you need to do is add slices to the main areas of a page and ignore the “white” or “space” areas. Fireworks will add a div to include these and position everything accordingly.

5. You can create all the pages of your site in one Fireworks document. This means easier version control and smaller files sizes. This also allows you to add interactivity to the file by setting a master version of the site, containing all the common elements of the site. The linking the likes of navigation to separate pages so that when exported or previewed you can move between the pages as you would when the site is finished.

6. You can create drop down menus in CSS with Fireworks. Add a slice to an area, right click and add select add pop up menu to launch the pop up interface.

7. You can create a PDF of all the pages of your site, with all the interactivity you have built and send it to a client. they can see how the site would work with out any coding needing to be done. It also has the benefit of being secure and protecting your design.

Over the next few weeks I will be creating video tutorials on how Fireworks can take you from design to code faster than any other program.

Life Balance

Getting the right balance between work and life can be a tricky thing. It is especially hard if, like me you have a full time job and freelance. This is often the case with a lot of designers who want to go full time freelance but don’t have the clients or contacts to do it yet, so they like me have to keep the ol’ 9 – 5.

For me the biggest challenge is not spending all my evenings working these days as the volume of work I have freelance increases to the point where I can seriously consider going freelance full time.

I have develped a some what novel approach to balance. Simply I don’t follow clients around, I spend absolutly no time reassuring them, cajouling them or trying to get content or payment from them.

This sounds mad but has actually helped me a lot. The basic idea is that I charge a lowish amount for projects on the understanding that it is the clients responsibility to drive the project, that’s why I am giving them such a good rate. I set a time frame for the deliverables and the decisions, then I wait.

Most clients will get the information to you, make the decision or write the content in time to availe of the good offer they have gotten. This makes you life easier as you have less admin work to do and can concentrate on the design and coding.

Some however will do nothing, this of course shows that they are a dud client at a very early stage and helps you avoid working and not getting paid.

Finally you have the client that gets you some stuff, some content and makes some decisions, enough that you can produce a site albeit not a great one due to lack of content or clear goals. So you hand over this completed project only to be told, “oh that’s not what I wanted, I thought that I could still make changes… blah blah blah….”, and so you explain again about the good rate they got, why you offered it and ask them what exactly they want changed. If the changes involve more than 1/2 hours work I inform them that it will cost full rate for those hours.

This will result in one of two out comes. They will make decisive decisions and you get the project finished very quickly and can often then wave the extra fee if you want, or second they refuse to pay and threaten to pay nothing for the overall fee unless you make the changes.

Option two is by far the most popular choice. Well to avoid this scenario I have started getting an initial fee up front normally 1/3 of the total cost. This fee means that you at least get something from the project. This fee is always for the design. Once this si paid the client owns the design(s) you produce for the project. If the project collapses then you hand over the design files and keep the coded pages.

Some people would claim that I am losing out on money I have already done the work for by doing this but in reality, I’m just stopping myself spending hours arguing with a client which will result in me finishing the project but not caring about it and souring my relationship with the client. To avoid this stress and extra work I simply let go of the fee, write it off as a bad debt on my taxes ( so this saves you a little money ) and move on to the next project.

By doing this I have gained back more of my valuable time and decreased my stress and enjoy my work more as a result. Yes I make less money but as you get more skilled and confident you will deal with clients like this more effectively or spot them sooner and this becomes less of an issue. For me this works but letting go is not easy but i would suggest trying it to see if the well being it generates is better then the extra euro you might get in the end.

Interesting Blog Designs

This is a little round up of some of the really interesting blogs designs I have seen recently:

http://acko.net/ has a fantastic design ( even though it gives me a bit of a headache ) the perspective is something you don’t see a lot of and really makes the design stand out! ( Pun Intended )

http://www.wishingline.com/notebook/ Is it just me or does no body do left navs any more? Well this site does and I think the color combo and textures make this a really nice design.

http://www.cc-pays-sud-gatine.fr/ I just love the feel of this site, on my 24inch monitor this design is awesome. Its so fresh feeling that it makes me want to buy fruit.

http://www.alifelski.com/blog I really like progression on designs, where you start with one area and end at another, like sky to ground or sea as in this design. Sky as a header and ground as a footer just seems right to me and designs that use it always draw my attention. ( Love the Bird animation too )

PNG backgrounds

I have often tried to think of interesting aways to use transparency in background for my websites. The Silverback site is a great example of layering backgrounds to give the impression of depth. Yesterday i came across this site by Bryan Katzel which is simple awesome!

Go to the site and start scrolling down to see the amazing way he has used a transparent section of the background to reveal another underneath with spectacular results. I absolutely love his design and the rest of his portfolio is excellent too!