If I am stuck with a budget of next-to-nothing, can I still design for the web at the level I normally deliver? Can, ultimately, web design be free?
“adobe” is web-design for “wealthy”
I have been fortunate enough to work on Adobe products for most of my web designing life, so creating lovely interactive buttons, shadows on the side of frames, and other delicate graphical goodies has been easy. Now that I am temporarily working in Communications, however, I am stuck using free software or those items I am willing to pay for out of my own pocket. Adobe products do not qualify, they make my eyes water and my wallet whimper.
adobe is the standard
Adobe really is the standard. If you want cool visuals: Photoshop. Reusable elements, image slices, resizable items and easy export to pdf/html-css: Fireworks. Prefer hand-writing code with some well-built assistance (auto-complete, ubiquitous ftp, a GUI for image maps, …): Dreamweaver. Creating a booklet / ebook to distribute on your site: InDesign. Working on a logo or other smooth visual elements for your site: Illustrator. Seriously. Whatever you need, Adobe’s got it covered. Except wireframes, really, but a pen and paper works fine for those and Balsamiq really isn’t too onerous.
what am I using?
Photoshop -> GIMP Photoshop’s ugly cousin is still fairly powerful, but clunkier in its use. Happily it’s free, can export to all the standard image formats, and is basically the best thing you can hope to find for manipulating photos. If it were less clunky, I’d use it more. I’ve noticed I’m slowly moving towards Inkscape instead for my daily graphical needs.
Illustrator -> Inkscape I am being unfair to Illustrator, but the closest free thing out there to “replace” it really is Inkscape. It creates SVGs (simple vector graphics), which means your artefacts are scalable, easy to modify, can contain paths you can move around, and you never have blurry text.
Dreamweaver -> Coda Coda only exists on Mac, has nice ftp in the background, syntax highlighting, and other similar niceties. But it costs money. It’s now on special for $75, so you get the idea. I’ve paid for it given I tinker a lot in code (html, css, php, python, C) and find it very useful.
InDesign -> Scribus I absolutely love Scribus. It is easy to set up palettes, textboxes that flow, page templates… No styles yet, or the ability to select multiple text boxes and set them all to one style… But other than that, it’s genius! I actually think I prefer it to InDesign as it’s easier to learn. Thing is… it just exports to PDF.
For wireframes: Balsamiq The most amazing little piece of software. It works on a foundation of XML, and creates simple, easy to edit on the fly, doodly sketches of websites, applications, or anything else you want to quickly do a mockup / wireframe for. I bought it in 2010, and have loved it since. Would never be without it!
anything else?
I confess, I’ve also used the (in)famous axure. Turns out it’s powerful enough to make some things with, but it has several limitations that mean it will not be your one and only tool for building everything, from wireframes, to prototypes, through graphical elements. Don’t get me wrong, it’s pretty powerful, but it’s also immensely dumb (text styles: yes. But only if you put every piece of styled text in a separate box… so the header is separate from the text it heads. awesome for flow) and lacking in shortcuts, indeed forcing you to (ab)use the mouse in getting nearly everything done. I have a coding background. I like my keyboard. I don’t like Axure. Most people find it amazingly powerful. I think it’s too weak. Decent for a quick test of interactions (excellent in fact), but anything more in-depth, and you’re toast. Given the pricetag, I’ll stick to my hand-made graphics and hand-coded html/css/javascript. Because I can.
why hunt for more?
Because I need something that allows me to set up text styles and reuse them. Elements (like a button) and reuse them. Gradients, colours, shadow styles, and reuse them. I do not have the patience to do all these things manually. Why do I need to? Because I’m putting together a UXArcise (UXA exercise) for my portfolio so I’ll have something I am allowed to show people. And none of the tools above really enable me to do that painlessly. So I’m looking at this Gui prototyping tools post on c2.com for some ideas on what else I might be able to make use of. So far, no replacements. I’ll let you know if I find any.
i’m not the only one looking for that je ne sais quoi of web design tools…
- Jason Santa Maris’a article on the quest for a real web design application is beautiful and spot on!
- I landed on it by following Schlomo Goltz’ post of a spreadsheet to compare all prototyping tools.
- Which I in turn found through a Google search that landed me on this Gui prototyping tools post on c2.com. Look at the comments. Enlightening!
so is it free?
No. It’ll cost you in endless hours of time spent tinkering with Inkscape to repeat a shadow effect just the right way. Or in a plain text editor, hand-coding css and looking up the precise name of the property you want on w3schools.
Ultimately, yes, you can probably make mockups on paper, take photos and email them. You can also write code in notepad. And create graphics with Inkscape. But if you want to do this professionally, sleep, and have a bit of a life on the side, you’ll be coughing up some cash pretty quickly. I’d personally recommend focusing on one good graphics package (unless you find Inkscape’s got you covered), one text editor, and one wireframing tool (much as I love it, Balsamiq does have competition, so do some googling). Or just shell out for Axure, and live with the fact that you will ONLY be making prototypes, not real websites.