I thought I would share my thoughts after building my Twitter-Mashup,
Helveti-Tweet. I adopted new methodologies for this project and it’s been an absolute breeze, this is as a set of semi-rules to building a mashup/app.

Keep it simple, plan it & then run with it!

Big projects have a habit of dragging on over months, even years. Keeping a project simple is often the enabler, especially for those of us that aren’t blessed with a 9-5. Before you start (yes, from personal experiences, that did have to be stressed) decide exactly what it is you are doing and define, if only mentally, the scope of the project and it’s phases…

Helveti-tweet could have been a massive resource of all things Helvetica. It would have taken 10 times as long to build and may have been more impressive… If I want, I can do that in the future. As things stand right now though, I have a working mashup – focus on the now.

Use existing tools & methodologies to make your life easier

I am a designer by preference and profession – I do, however, have a pretty good understanding of CSS/HTML and that’s enough to get by when it comes to prototyping this sort of thing. Moreover, there are so many resources on the web – made by people who are experts at what they do. Use them to your advantage. Grid Systems, Plugins/Extensions & Frameworks can speed up development time massively.

To Build Helveti-tweet I used WordPress as the CMS, a twitter aggregator to bring in the feeds and then sorted out the CSS. In regards to design: I am a big fan of swiss-design (hence the mash-up) so therefore I had a good idea about what I wanted before I had even started drafting it.

Do something your passionate about

This is the most important lesson I have learned from the apps & mashups that I have been involved in. If you are doing something you are truly passionate about, it doesn’t matter how much heart-ache it takes. It will be worth it. To paraphrase Gary Vaynerchuk – If you love what you do, 5.30-2am is plenty of time to do damage.

Visit Helveti-Tweet

Announcing Schmancy Box, a jQuery based LightBox plugin for WordPress
Based on the jQuery plugin FancyBox.

I fell in love with the original FancyBox plugin when it first came out. It’s a refreshing, more stylish lightbox than many of the other variants. I do a lot of WordPress work for clients and thought it would be nice to have a One-Click install. Hence SchmancyBox.

This plugin was co-created with Jeremy Desvaux, an awesome, uber talented PHP / Zend developer. I’m more design lead and don’t have the tech skills to get the tech PHP, so a big thanks to him.

The current iteration does not offer control over every fancy box element, only over the controls I considered to be key (please feel free to scream and shout), the current feature set is

• Screenshot of the menu
• Div (id or class) for lightboxing e.g. gallery
• Default iFrame dimensions
• Overlay Show/Hide (background darkening)
• Overlay Opacity
• Hide Gallery on click

Download the entire plugin, including how-to (zip)

Download the How To Use guide

Update – 20th Feb 09: Now fully working with WordPress 2.7 and below.

Update – 25th Feb 09: Now on the official WordPress.org PlugIn Database

I am designer, these are the add-ons that I consider essential, the one’s that get used on a daily basis & that if you havn’t tried, you should.

Web Developers Toolbox

Some say this is the most handy toolbar there is for firefox… i’m probably one of them. If your designing / deconstructing websites this is a must have.

Top 3 Features

Firebug

I use this in much the same way as I do the view style information with the web developers toolbox. The key difference between the two apps’ features is that Firebug has a much more in depth & easy to use ‘Styles View’, moreover you can click the layout button and it gives a you a diagram of how the padding, border & margins effect the object your working with.

Screengrab

Not just an average screengrabber this mod can screenshot the whole page from top to bottom. Great if your working on a long design – e.g. blog, for a client. Also helps you get a better grasp of the overall layout consistency etc.

Colorzilla

If you ever find yourself thinking, “by gosh! that colour’s bloody lovely!”, but then find yourself screenshotting and taking the screen into PS/FW etc etc then this is the tool for you. It works by adding a built in eyedropper into your Firefox, allowing you to get RGB values and Hex codes straight from their… Colour without the bumph.

Gridfox

Grid based design is really coming to the forefront of web based, usability at the moment with more and more people adopting systems such as the 960 Grid System. I’m a bit of a late adopter but have lately started implementing it heavily on client based CMS websites – it really helps keep things like mediaplayers, banners and other fluid-cms-elements.

Long story short Gridfox allows you to drop a grid over your live website helping you keep your design within the constraints.

If your still not a believer in grid based designs, this is the BBC websites style guide (grid based) and makes a very interesting read for any Grid lover/adopter… jeez i’m such a geek haha.

Hang on just a minute son, it’s all good and well telling me what you use for your designing & that but what other add-ons are you sporting…

• GR Apple Yummy Blue Theme – Makes my FF3 look like Safari
• Download Helper – Can strip out FLV’s from flash players e.g. youtube (i convert it with isquint) & generally makes downloading web videos easy
• Growl Notifications – For using with Growl (mac only – currently incompatible with FF3)
• Stealther – Allows you to browse the web anonymously

If your interested in how to Become a Power User with Firefox 3 this link over at Lifehacker is a good guide.

I’m debating a re-format soon and I was trying to think of a list of software I want to take with me when it’s done, this is a condensed version of that. My top 10 leopard apps i couldn’t live without!

In short it’s an application launcher. From a shortcut menu it tries to auto-guess what you’re looking for allowing you to not only launch apps but use functionality from within them. E.g. Play an album in iTunes or Open an FTP session in Transmit. Another good feature is the ability to bind hot keys to nearly any app/website/function. Its features are well documented (link) so I won’t go into them here.

Visit the Quicksilver website to download

Growl is a notification tool. It brings up a very nice looking notification box (customizable) to tell you what your various apps are up to. It’s compatible with all my everyday apps, Apple Mail, Safari, FF, Transmission, Twitterific plus lots of others and it can even tell you hardware updates like when your I.P. Address has been released or if it’s found an open wireless network. Very handy, especially if you’re a control freak!

Visit the Growl website to download

Changes the log-in background of your mac to whatever your desktop background is at the time. It’s a real one click solutions if your a designer/control freak like me (lol) it gives you a complete brand.

Visit the Desktop2Login website to download

This is another handy app for the control freaks in the room. It allows you to monitor your system (ram/cpu/network usage) from the system bar in osx. Great for keeping an eye on things!

Visit the MenuMeters website to download

A must have for any Photographer/Flickr user, Allows you to upload pictures to your account from your desktop, retain full control over titles, descriptions and privacy status.

Visit the jUploadr website to download

I can’t even begin to explain how much I hate this apps icon! haha but it is amazing at what it does. It can pretty much turn a dvd into ipod mp4 or avi in one click. Put it in your drive, select and bang! Really handy for keeping a backup of scratched disks or copying your films to your ipod.

Visit the Handbrake website to download

@Johan is to thank pointing out to me and @James Ling that this is in fact now available on the PC! My bad for not knowing, sorry bit of an apple fan-boy haha thanks for the input. Always welcome.

Check out the Replacement Handbrake Icon (thanks @James for this)

audio format converter. Converts nearly every major format. Most importantly, WMA to MP3, reclaim your music from Microsoft once and for all!

Visit the Switch website to download

Allows you to copy songs/video off your (or anyone else’s for that matter) ipod – really useful if you delete your tunes by accident (it’s happened) or if you want your mates.

Visit the Senuti website to download

A bit of no brainer this one but it still amazes me at how many people don’t have this app. It can play nearly every form of digital movie including those from mobile phones etc. It has a really handy playlist feature so you can slap in a bunch of films and not have to start the next one manually. The only downside is that it doesn’t work with apple remote (as of writing).

Visit the VLC website to download

As @Roy pointed out in comments Perian is a really cool plug-in for quicktime that enables most file-types etc. If you want to keep it apple, check it out.

This is the ultimate torrent downloader for mac, in my opinion, far more efficient than Azureus. You can set it to watch a folder (e.g. downloads) and then add torrents automatically as they are downloaded. No sooner have you clicked in FF has it started torrenting in Transmission. Also has a very handy bandwidth limiter (perfect for web based designers), you can cap your up/down speed at the click of a button. Great for when its FTP time!

Visit the Transmission website to download

Other free apps that I love and should have given more love are: Twitterific, Firefox, Cyberduck, Img2icns & Adium.