designer

Adobe Fireworks Resources

Recently I did a search of resources for someone new to Adobe Fireworks. This is the list I came up with, and please feel free to comment and I’ll add to it. Should end up a pretty great list.
I did videos for Total Training on Fireworks CS5, but everybody here already knows that. Just do a search. I think most are on youtube at this point. Greg Rewis also did a slew of them on tv.adobe.

In CS6, make sure you have Auto Save turned on here >>http://www.stuffandnonsense.co.uk/blog/about/turn_on_fireworks_cs6_auto_save

Make sure you have all the good extensions from:
John Dunning – johndunning.com/fireworks/
Matt Stow – http://mattstow.com/
Aaron Beal – http://fireworks.abeall.com/extensions/
http://fwextensions.com/
http://fireworks.smashingmagazine.com/2012/05/25/blueprints-for-the-web-specctr-adobe-fireworks-plugin/

Resources:
http://www.webportio.com/
http://www.extendingfireworks.com/
http://www.noupe.com/design/an-explosion-of-adobe-fireworks-resources.html
http://speckyboy.com/2010/05/20/25-awesome-adobe-fireworks-resources-for-web-and-app-developers/
http://fireworkswireframingkit.com/
http://johndunning.com/fireworks/about/QuickFire
http://192.150.16.64/devnet/fireworks/articles/atv_fw_interaction_design.html
http://webdesign.tutsplus.com/tutorials/applications/whats-new-in-fireworks-cs6/ (and they have a ton of videos by Tom Green and Jim Babbage)
http://www.adobe.com/devnet/fireworks/articles/css-sprites.html
helpx.adobe.com/pdf/fireworks_reference.pdf
http://bootstrapfireworks.com/#!prettyPhoto
http://www.fireworkstoolkits.com/
http://mattstow.com/export-responsive-prototype.html
http://www.fireworkszone.com/
http://launch.fwpolice.com/
http://www.smashingapps.com/2011/09/14/40-extremely-useful-adobe-fireworks-tutorials-for-designers.html
http://fireworks.smashingmagazine.com/
http://fireworks.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/
http://fireworks.smashingmagazine.com/2012/06/25/create-interactive-prototypes-with-adobe-fireworks/
http://fireworks.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/
http://www.splashnology.com/article/adobe-fireworks-useful-articles-and-tutorials/2489/

http://layersmagazine.com/ – Tom Green has a ton of Tutorials here, and I believe Jim Babbage has stuff here also.

Oh… and one of the few Fireworks User Groups, Fire on the Bay. Tons of recordings http://www.meetup.com/Fire-On-The-Bay/

From my previous posts about extensions:

http://www.vcarrer.com/2010/09/fireworks-mini-web-wireframing-kit.html
http://www.dragnet.se/webbdesign/websitewireframes.html
http://buchok.com/blog/?p=56
http://speckyboy.com/2010/05/20/25-awesome-adobe-fireworks-resources-for-web-and-app-developers/ (this entire post is great and *filled* with wireframing extras)
http://www.fireworkszone.com/fireworks_annotation_command
http://vector.tutsplus.com/tutorials/web-design/build-a-promotional-iphone-app-website-wireframe-in-fireworks/

http://fireworks.abeall.com

Extensions
http://johndunning.com/fireworks/
http://speckyboy.com/category/fireworks-extensions/
http://speckyboy.com/2010/05/20/25-awesome-adobe-fireworks-resources-for-web-and-app-developers/
http://fwextensions.com/
http://orangecommands.com/

That should be enough to get you going for awhile. 🙂

Developers and designers – can they co-exist?

I see blogs all the time from a developer who is complaining about designers. I am both a designer and a developer. Many times I am the everything person, design, develop etc., but many times I have to deal with another designers file. Then I have to make it a live XHTML/CSS page. When I am working with some designers files, I often wonder if they’ve even seen a website.

So I get why it’s so frustrating. Why can’t designers and developers talk before-hand so the correct decisions are made before client sees it.

Common mistakes I personally see (some) designers make:
– Aliased fonts
– Strange fonts used in bad places. There are 11 common fonts for both platforms. Only use those when designing body copy and many other things. Logos don’t count.
– Tracking on fonts that interact with other important elements, like inside pods etc.
– No idea about CSS, so text ends up being on a curve. I can’t make that happen without it being an image. My rule #1: If it’s text, it’s live html text. Logos being an exception.
– Since many designers have rarely made a page live, they don’t understand the concept of structure on a page. Think in terms of background images for design elements. Text still needs a structure. 2 column, 3 column etc. for text layout. Keep the users eye in a logical flow for the text.
– Navigation – I’d prefer to make the text live too with navigation. Design a great-looking button, but leave the text live. Don’t use some crazy font. It makes it easier to change navigation when the client changes their mind, or adds another page. I and many others use a bulleted list to design the navigation in CSS.
– Don’t just think about the interior of the page, also think about the background. Is it a plain color, or does it have a texture.
– Is the page going to be a liquid layout (move with the browser width) or is it going to be a fixed width. Many designers have a hard time with this concept because they want things to be pixel perfect. It could also be a combination of liquid and ems.

Bottom line: bring the develop in sooner. Ask the developer if your page will work well. Yes, you care because if you didn’t design a page that is easy to make live, it’ll take the developer much longer to figure out how to do your crazy design. The developer shouldn’t be the last one to see a design, they should be the first before the client ever sees it so they can make sure it can be done in a manner that’s best for the design.

So lets find a way for designers and developers to work together. I think we should start a standards document, and a checklist somewhere like Buzzword and/or Google docs where developers can add to the list and distribute to their designers so they do have a clue.

The designer doesn’t know they are doing something wrong if we don’t tell them. OK, so I hear some of you saying, why should we go out of our way? Why don’t they take the time to learn html, or CSS or what we need? I agree to a point. I was one of those designers and I wanted to know more. But, many feel like all they want to do is design, and since no one is telling them they are doing anything wrong, they are going to continue to plow ahead and design things that make us want to throttle them.

I often work with a designer who when they put the designs on the table, I think to myself, they are showing me the print ad first, right? No, it’s always the web piece and you’d think by now I’d learn. She even took one of my Dreamweaver classes and learned that tables were no longer the standard. She had assumed that since she had learned how to do tables 10 years ago, they were still the standard. She even snidely put me down for using pure CSS. She thought I was incompetent for not using tables to lay out her designs. Wow!

At the class, she commented how different things were and how she now understood how she could design for the web better. Now we can’t educate all designers like that, but it is up to us to do something about it because it will only help us out in the end, or do you like complaining about designs and taking more time to figure out how to make it work for you?

The choice is yours.

Flex/AIR/Flash Catalyst – Things designers should care about

By now you know I am a designer, but you may wonder why I would even care about Flex and AIR. I do classify myself as a designer who codes, but still, I am indeed not a full fledged developer. When it comes to needing CF on my sites, I can do some coding, but not in any other language like PHP, or any what I call heavy lifting on the back end of my sites. Would I like to be a developer? Only if I can still design.

So I made a big deal about Flex to our members (KCWebCore), because Flex and AIR and eventually Flash Catalyst can literally change our lives. With an increase my skill set, I’ll be more marketable, and with an increase in my worth, it’ll change my quality of living. Why wouldn’t I want to learn this?

We’ll start with Flex and why us designers should care.

With every Flex application built, someone will need to make it look presentable and have the look of it fit in with the clients web site. This is where we come in with Flex skinning. Adobe has made Flex skinning easy to do with some downloadable (is that a word?) extensions on http://labs.adobe.com. They have one for Flash (which makes sense) Illustrator and Fireworks (which is awesome). As a matter of fact, if you don’t already, you should have Labs bookmarked for all the great information they have on there.

Flash Catalyst (formally code named Thermo) is a bridge between the design world and Flex. You can either design inside of Flash Catalyst or bring in a Photoshop/Illustrator/Fireworks file. Once you bring in, lets just use a layered Photoshop file for an example, you can target specific layers and turn them into working Flex elements and components. Plus, it isn’t like Contribute or some program that doesn’t let you touch the code, it’s more like a WYSIWYG, Dreamweaver like program that lets you design, but also lets you see the code you have just created. What it allows you to create is working sliders, visually wiring together events and bindings, and much more. Wow! Flash Catalyst isn’t even public yet, so we have to be patient for a bit unless you were lucky enough to be at MAX NA 2008. They gave out a ton of DVD’s with Gumbo on it as well. Gumbo is Flex 4’s code name. MAX also had a ton of  sessions and hands-on sessions. Maybe I’ll add a tutorial for those who have the MAX build very soon. Anyway, once the designer gets done, he hands it over to the develop in Flex 4 who takes the file and finishes up the functionality of the application. You can even round-trip back and forth from Flex 4 back to Catalyst, back to whatever design progam you used. Lots of new features to be added soon, so stay tuned. Visit Flash Catalyst’s page at Labs for more info.

There will be plenty of opportunities for us designers there, but what about AIR? So lets say Actionscript 3.0 is still a bit mystical for you just yet. (I know you are trying to learn it) Even for us Flash designers, turning to AS 3.0 for our code, even the simple stuff, has a learning curve. Even for AS developers, making the switch to Flex has been… shall we say, at times frustrating. (Flash Catalyst can also make AIR applications, or will when released.) You can also make AIR applications out of Dreamweaver and now Flash CS4. WooHoo! With Dreamweaver CS3 and CS4 and Javascript, you can make AIR applications. Yep, no kidding. So first thing, you go and download the Adobe AIR extension for Dreamweaver CS3. There is a ton of good support info, so don’t worry, I won’t explain it all in one blog entry. Just know that it is an amazing opportunity for us Dreamweaver geeks to explore something as cool as AIR.

Flex allows you to use either AS 3.0, or MXML. If that means nothing to you, that’s OK too. Just know that there are some subtle difference between Flex AS 3.0, and Flash 3.0. What this info makes me do besides turn to Colin Mook’s AS book from O’Reily is make me understand that only really good developers will be embracing Flex, AND that they will need a good designer to make their Flex apps look good.

So have I given you enough reason to lean more about these new Adobe technologies? I hope so.

See ya later

Dee