It’s no surprise that Adobe decided to drop future releases of Fireworks. It’s one of those applications you wished will continue to evolve, but I think the entire Fireworks community knew for quite a while that Fireworks life-support system had to be turned off eventually.
Fireworks has been my main tool of choice for all screen related projects. It’s support for both vector and bitmap artwork eliminated the need to jump between apps like Photoshop and Illustrator. All the features in Fireworks where developed to make the design workflow from technical wire-frames to final design schemes easy and quick.
Overtime the performance of Fireworks diminution and bugs have never been addressed by Adobe. Nonetheless Fireworks was simply the best tool for web projects (and for many still is).
Working on some new user experience and user interface projects I decided it’s time to put Fireworks aside for a bit and try some alternatives. Already departed from Dreamweaver and Flash I knew the ‘cloud’ had plenty to offer as long as you where willing to adapt and be open minded.
From within Adobe Cloud
Naturally the first place I looked was just nearby at Adobe’s own stable of old and new products. Photoshop never was an option for me but for many, mostly graphic designers Photoshop is a natural application for web design. I use Photoshop for photo manipulation and desktop publishing projects and the efforts to make it as a web tool (remember Image Ready?) simply didn’t work for me.
Chances are you either a Photoshop user or a Fireworks user so if you are the latter you know that Photoshop is not an alternative.
Illustrator, Another tool from Adobe that went through hula-hoops of incarnations in order to justify itself and to suck some more cash out of us. I would love to use Ai for web projects but it is simply designed for creating illustrations not web layouts. You can change it to be a web oriented tool but it doesn’t feel like one. Illustrator is still the industry’s vector graphics tool of choice and I would use it for UI and SVG graphic elements but not for full-blown web projects or UX paradigm processes.
Another option I explored for a while was to use InDesign. I actually found InDesign to be a very good tool to create layouts and wire-frames. The ability to use master pages is a very helpful and necessary feature when creating website designs. Also it’s pretty easy to create a grid system using the grid column and move elements in pixel perfect positioning.
But InDesign is not a web tool after-all and lacks the ability to export slices or modify bitmap elements and some of the processes that should be straightforward are too complex and time consuming.
All in all, deep inside my left inner brain I wanted to depart from Adobe’s grip and start using small and independent-owned applications. I am finally at a stage where I don’t need to comply to an industry may it be printing service bureaus or advertising agencies.
So off I went to the ‘cloud’ to search for suitable alternatives just to find plenty of semi-baked apps that based on the price I knew it will be a waste of time to even download them.
Two apps though did make it to my ‘Download’ folder. Sketch from bohemian coding and Antetype from ERGOSIGN Technologies.
I am still in the process of evaluating Sketch but from what I can see and produce it’s worth the price ($49.99). It does what it’s title suggests and some more.
If you’re a professional designer who got accustomed to other graphic applications then the learning curve for this little app will be very quick.
In no time I was already laying out my first home page grid. Speaking of grids Sketch comes with two types of grids, a regular grid and a column-base grid which is set to 12 columns in a 960 pixel width document. This is pretty handy especially if you plan to use a framework such as Zurb Foundation or Twitter Bootstrap or designing responsive design layouts.
Sketch allows you to create atrboards in various sizes, more or less like artboards in Illustrator or Pages in Fireworks. You can create as many artboards as you want under one page and you create as many pages as you want. One crucial thing which is missing is the ability to create a master page or master artboard but yet again it took Fireworks almost a decade to add this feature.
The toolset is down to the bare minimum for web and vector designs. The window layout is very simple and straight-forward. Although I do find some annoying user interface elements here and there they are not elements that are often accessed so it doesn’t degrade the overall usability.
As many other graphic applications Sketch offers a basic style preset library. Instead of converting elements into symbols Sketch uses a Linked Styles library which basically allows you to link elements to a shared style. If you change one element’s style such as a background color or border, all linked elements will update. It’s pretty easy alternative to Firework’s symbols but not as powerful. Pages, layers, masking and vector manipulation tools such as combine, union, scissors etc’ are all included and work as expected. Some bitmap effects and blending options are also included and will be enough for most bitmap content creation.
You can also use Sketch to create slices of elements and save them in different formats. I didn’t find the slices option that great at least not anywhere close to Fireworks but it’s usable considering that no-one really exports a fully sliced document anymore.
If you into effects Sketch offers shadows, inner shadows, gaussian blur and reflection.
One cool feature which was introduced in Fireworks CS5 is the ability to copy an element’s CSS attributes. This is very useful for CSS3 complex rules such as gradient background.
All in all, I find Sketch to be a very useful tool and a viable replacement to most of Firework’s features. In today’s rapid prototyping and frameworks an application like Sketch is more than enough to create quick sketches, wire-frames is even final artwork. For such a low price it’s more then just a ‘sketching’ tool.
I found Antetype mentioned in a forum thread a while back and decided to give it a try. Antetype is an application developed by Ergosign a UX company based in Germany. Maybe it’s a good thing that Antetype is developed by UI designers for UI designers (a statement mentioned on Antetype home page).
What is Antetype and what it’s not
Antetype is a UI design and prototyping tool. It’s not a graphic design tool and doesn’t offer blending and bitmap effects or vector tools such as a pencil or path. In fact there is no path tool at all so you can’t even create a line.
In many ways, Antetype is not comparable to Fireworks but if you use Fireworks for UI design you will be surprised by Antetype’s unique ways and different tools and processes.
As a UI tool it takes a while to get around Antetype’s workflow process. I found that I need to know what I want to create before launching the application. Sketching on a piece of paper prior to using Antetype is a good idea.
Know what you want to do before launching Antetype
Cells and Tables
Every element is based on a shape parent called “Cells”. You can choose between a rectangle, circle and a triangle. You can also use a table grid for layout purposes. The rectangle is most often used for both layout containers and graphic elements. Each cell can be resized to fixed pixels or to stretch or shrink to it’s parent container’s boundaries.
When you create a cell you have 4 layout options. Vertical, horizontal, stacked and free. You can also add margins, padding and other style properties which later-on can be copied as CSS code.
Antetype’s layout and sizing options are tailored for both static and responsive dimensions so from the start you will notice that you can size your screen to be a 100% wide and all elements in it will be flexible as well.
As mentioned each element (cell) including the screen offers 4 types of layouts (I prefer to call it flows). The layout options are very powerful and it takes time getting used to.
Almost everything in Antetype is based on a parent’s layout option. if you are like me and have been using Adobe for too long you might prefer using the free layout option until you get used to the idea of “layout oriented objects”.
One thing to mention is that Antetype doesn’t have any grids or rulers, so you basically snap to other objects or the parent container. This is why knowing which layout to use is important.
Antetype comes with many pre-built widgest such as form elements, sliders, date pickers etc. The widgets are styled in various OS schemes such as iOS, Android, Mac OSX, Windows and vanilla wireframes.
For quick prototyping you will not need more then these built-in widgets but you can always alter the existing ones, copy and rename them.
Every element you create can be changed to a widget which resembles Firework’s symbols but slightly more flexible.
A widget doesn’t have to be a small element such as a button. An entire screen layout can be converted to a widget which is pretty powerful if you using many screens and want to use the same grid layout. Basically this approach eliminates the need to use a master page. Simply change the layout widget and all of the screens using this widget will adjust accordingly.
When you make a change to a widget a red icon will appear next to the property that was changed in the inspector window. Once you click on the red icon you have the options to make the change an individual change or share the change across all other widgets the use the specific element.
Tools and viewing options
Most of the tools if not all of them are based on HTML and CSS. As Sketch and Fireworks you can copy the CSS attributes from a selected element or a widget. The class of the CSS will be the elements name, pretty useful if you’re in the middle of coding and want quick access to a prototype CSS.
The export and viewing options are also minimal but probably all you’ll ever need. There is no slicing tools instead you can export a selected item or the entire screen as a graphic file (PDF, TIFF and PNG).
An option for viewing your prototype in action is to export it as a Web Viewer Version which will create a web page that will open in a browser. Due to Google Chrome’s security limitation it’s not supported at this time. You can send the entire exported folder to your peers for review locally on there machines.
Another option to view your prototype live is to use the Present mode which will basically create a quick local screen/ testing view.
A iOS viewer option is also available but I have yet to test it.
Antetype as mentioned is a UI tool. Period. It does it well and in clever ways. There is a learning curve to take especially if you coming from Fireworks but it’s not a steep curve and pretty quickly you will be creating UI layouts and elements without a problem.
Fireworks is an all-in-one application so any other alternative will only cater for parts of Firework’s possibilities. Antetype took Firework’s crippled functions and made them more powerful and bug free (at least during my trial period).
Not having bitmap or complex vector tools does free-up the mind to focus on UI and UX paradigms instead of focusing on look and feel or content creation. This clearly separates layout from content which is in my opinion the right way to produce and manage web/screen projects.
More info, video tutorials and help can be found at: