So I asked some of the members of my development team what they liked and didn’t like in Fireworks comps. I was expecting the usual complaints that you hear from Photoshop files: layers are a mess and unorganized, too many hidden layers, no grouping, etc. A lot of these problems either stem from a lazy or unorganized designer, or even just from a rushed project, but, to my surprise, these weren’t complaints associated with Fireworks files. Probably due to the fact that you can easily click and manipulate layers without digging through the layers menu. Of course an organized document is always the best way to approach any comp, but here are some other tips and suggestions that I hadn’t thought about that I received from my developers.

Grouping Dynamic Content

Want to really impress your markup guy? take all your dynamically generated or html generated content in any given section of your comp and group it together in a group or folder. That way when they go in to slice up a button or background they can just turn off the dynamic folder and get all of that stuff they don’t need out of the way.

Set Canvas Color to Transparent

I’ve always preferred saving an extra layer and setting my document background color to the actual background color of my design, but I’ve now seen the errors in my ways. If you use an object to create the background color instead and lock it to the bottom of your doc (I usually do it in a folder so that when I’m in another folder and ’send to back’ it doesn’t go behind my background), then the dev can just turn that layer on and off when he needs to export a slice with a transparent background. Otherwise they have to turn your canvas color to transparent, export the slice, then undo or remember the correct background color to return it to what it should be.

Don’t Group Layers and Apply Attributes to the Group

I’m very guilty of doing this. I’ll create a complex design element constructed of many different layers and group them together, then add a drop shadow affect, or lower the opacity to my liking. This works fine at first, but if the dev needs to break that group apart to slice it correctly then those filters or attributes that you applied will disappear and they’ll have to figure out how to get it to work again. Examining your filters, opacity and blending modes to figure out what you did or what they just messed up isn’t going to win you any friends.

Don’t Use Opacity and Filters to Change Appearances

Sometimes when I’m in the zone, I’ll make a headline black, then lower the opacity to get the right shade I want. Unfortunately, when the dev goes to write the css, he’s only looking at the hex number for that element. So he’s going to put in a hex number of #000 when really it should have been #333. This results in unnecessary changes later on that could have been avoided. The same is true for any element. If you created a block of color and have it set to #0066FF, then lower the opacity down to a nice 35% to get that baby blue you’re looking for, the dev is going to have a hard time figuring out that #A6CAFF is really the color you were after. The same goes for using filters such as Hue/Saturation to change the color of objects.

Contribute!

Give us your input on the subject. What tips do you have for creating better comps?

Special thanks go out to Scott Wilson and Joshua Kappers for their advice, contributions, and putting up with my comps.

EVERY TIME I enter my pin number, then hit Cancel. I have to start over and it drives me crazy. I hope I’m not the only idiot user to hit cancel every time I go to the store to buy some fancy beer. But that’s not the only problem (ignoring the horrible color palette). What if we got rid of the cancel button, I still wouldn’t know what to push without looking closer. Credit, Enter and Clear all look the same requiring me to read them one by one to figure out what I’m suppose to be doing. What if couldn’t read/speak English? I’d never be able to figure out what my next step is after entering my numbers. I think its safe to assume that since I’ve done it several times that I’m not the only one, so lets analyze this situation a bit.

The Goal

The goal of this screen is to allow a debit card user to enter their number into the machine, see that numbers are being recorded as they type them for reassurance, and to hit “Enter” to proceed to the next screen. The natural motion for a user after entering their pin is to move to the right or lower right to hit Enter, and since that’s the goal of this screen I think it’s usually safe to assume that it would be appropriately stylized to show that it is the most important button or action, but its not. Its the same color as all the other buttons, but what does stand out as the most important button on this screen? CANCEL! Why? I have no idea. I’m not here to cancel. I’m here to enter my pin, but it’s too late and the momentum of my fat finger and slow brain (thinking about drinking that beer I’m buying) has pushed it before I can stop myself.

Secondary Objectives

There are several other actions on this screen that are important. ADA Keypad (I’m going to have to push this next time cause I’m curious what it does), Credit (in case you don’t have a pin), Cancel, and Clear. These are all needed, but not as important as Enter.

Simple Solution

I’m assuming there are many display limitations and rules regarding the steps involved with using a credit card, thus I’ve created this solution to our Enter problem keeping the design as close to the original as possible.

Look at that! One color change and everything makes sense. It’s always a good idea to use logic instilled into users from other situations they encounter in everyday life. In this case we’re obviously playing off of “green means go, red means stop”. Its so simple, yet so effective in this case.

Redesign

Still not totally satisfied with that solution, I wanted to do a quick redesign and see what I could do in 10 or 15 minutes to improve this design with some common design and user interface principles.

I didn’t go all out here since I don’t know the limitations of the display itself, so I didn’t use any gradients or a subtle color pallet. Instead I tried to concentrate more on the layout and contrast. Once again I chose to stick with red and green to quickly convey “go” and “stop” to the user. I also kept the “Enter PIN” and display field centered above the key pad to show their relation and to make it easy for the user to see that their inputs are being recorded. If that field was centered within the window instead, it would require the user to look further away from the key pad to see their inputs, and we don’t want to cause any more work than necessary.

The other thing I tried to do was create a visual hierarchy. Most important are the numbers, enter, and then cancel. The Clear button is in white to draw some attention to itself if being looked for, and the ADA Keypad and Credit buttons are even more subtle since these two are also buttons only necessary for certain people and certain situations.

Conclusion

The key to great application and interface design is to make it as easy as possible for the most people to do what they need to do. Some serious thought about the end goals and how the user is going to complete those goals can go a long way, but this is also a perfect example of lack of user testing. I guarantee that this problem could have been discovered and fixed even without the help of a knowledgeable User Interface Designer had they just done some user testing.

Integrated vector & bitmap tools & objects

You could say Fireworks isn’t the best at anything. If you need to create a rich, bitmap/raster based image or site, then obviously Photoshop is your tool. If you need to create an official vector logo file then you need to be using Illustrator. Neither one of those scenarios encompasses what I do on a daily basis. I need something that handles raster and vector equally as well, and Fireworks does just that. There’s no need to switch between applications and 99% of the time I can create exactly what I need right then and there. Not to mention it’s pixel accurate rendering which means that even vector elements get rendered to the 72ppi (pixels per inch) grid, and I can edit those bitmap based elements to display exactly how I need them. Fireworks is a vector based program at heart, but it handles bitmap needs well enough that I rarely need to open Photoshop.

Great Optimization Capabilities

Fireworks is a great tool for exporting your finished designs to slices ready for markup. It’s exported, optimized files are just as small and great looking as anything you’d get out of Photoshop or Image Ready. The workflow itself is great for slicing and output of files as well. One of my CSS Ninjas, Ken Hanson, didn’t know a thing about Fireworks, but once i showed him the basics of slicing and exporting files he ran with it. I could hear the excitement flowing from his office as he discovered how much easier Fireworks just made his job.

Small File Size

The Brutal Legend comp pictured here is probably the largest fireworks file I’ve ever built. It’s just under 30mb, and that’s only because of the huge amount of bitmap textures and images used to build the record, paper, and the large image used for the background. Exported to a PSD that same file is over 85mb.

Your typical community, blog, or information based project is likely to stay under 5mb. Even if you use the page functionality to design multiple pages of a single site into one document. The second comp pictured is a blog I designed for the Vista team is under 1mb. To put it into perspective, every project I’ve worked on over the past 3 years is in one folder. “Documents Info” tells me that folder contains 8,536 items for a total of 25.5GB. If I’ve done my math right, that’s an average of 3mb per file. Pretty good average considering there’s a lot of large image files, powerpoints, word docs, etc., but most of it is Fireworks files.

Just Dewit

These are just a few highlights and advantages of using Fireworks. In the end, you just have to give it a chance. Obviously its going to slow down your work flow for a few days, but once you get the hang of the basics I think you’ll fall in love with it just as I have. Simply put, Fireworks was built from the ground up to design websites, and its work flow, tool set and capabilities reflect that. Its got everything you need in a beautiful, seamless package.

For further reading check out Why Choose Fireworks, and Adobe Fireworks Tutorials and Downloads. You can also check out a free trial from Adobe. If there’s interest, maybe I’ll write a few tutorials showing some tips and tricks I’ve learned.

As designers, we’re never going to be satisfied with our own work. There will always be something better out there, and we’ll always strive to have the coolest, slickest web portfolio. It’s a never ending loop that ends with frustration and an unfinished design. The key is to stay simple and set a deadline.

Keep it Simple

Think about why you’re creating a portfolio site. Is it to impress your friends? No, not really (although its a nice bonus). Is it to gain respect in your industry? Possibly. Is it to land job leads? Yes. To impress the people with money? Definitely.

The people you need to impress aren’t designers. They don’t care if you’ve used the latest and greatest piece of technology, cutting edge trends, or crazy typography that they can’t read. They are the boss. The people in charge. The people with the pleated pants and control of the company payroll. You need to impress them, and they’re impressed by someone who knows business, someone who knows how to design for the project they have in mind, and most importantly, someone who knows the value of a simple-to-use website that shows them exactly what they need to see without them having to look for it. That leads me to my next point.

Show What’s Important

Don’t show every website you’ve designed since your high school graduation. Chances are, a large chunk of that work is mediocre at best. Show only your best work. It’s a good idea to have more work on hand to show a potential client if they ask to see more samples, but I don’t think that more than 5 to 8 projects in your portfolio are necessary.

Blogging, on the other hand, may be a different story. The general consensus seems to be to blog as much as you can. Everyday even. It shows activity, thought, and hopefully some knowledge. You may even gain a “fan base” which will only improve your chances for more work, job leads and contacts.

Create a Deadline

Another very important aspect in creating your online portfolio is to create a deadline. Personally, I have a hard time keeping motivated with my own projects such as this portfolio site, but when I light a fire under my own ass and set a reasonable deadline, I am able to keep cranking through the different steps of a project. Otherwise, I probably would have created my design, and let it sit for a week or two while I decided if I liked it or not. Then, assuming by some miracle I still thought my design was good enough to move forward with, I’d spend another month trying to figure out how to develop the site (or pay someone else to do it for me).

In the end I probably wouldn’t have ever finished the site, but since I set a deadline and made a personal commitment to finish in a timely manner, I cranked through it.

This was my train of thought when I set out to design my site and one night of research proved that I was on the right track. Smashing Magazine has a great article about portfolio design, as well as Astheria.com. In the end, you just have to get it done. Work with what you have and get something out there. You can always build on it and learn from your mistakes.

Online Social Media and Networking isn’t really all that new anymore, but it’s relationship to your professional life is. If you’re like me, you’ve got accounts on sites like myspace, facebook, flickr, delicious, twitter, brightkite, a personal blog and professional blog that are all recording and broadcasting your life to your friends, family and co-workers. I share lots of personal experiences on these sites, as do a lot of other people, that may or may not represent myself as a reliable and professional person. There wouldn’t be much of a problem with this except that my professional life has taken over just as much a share in my online identity as my personal life has. The fact that I’m an interactive art director specializing in social media applications plays a big role in my professional identity growing, but i think this is a phenomenon that is spreading to other fields as well.

So, how do you manage this? I don’t want my employer, future employer or client to find those drunken picts from last new years, or discovering my odd collection of “dickbirds”, but i do enjoy sharing these things with my friends. On the other hand, I think its valuable to show that you have a strong online presence as well as an active and creative lifestyle. These are all important to keeping a creative mind healthy, and the fact that you have a life, online or off, is a very positive attribute. Showing that you have a sense of humor, that you’re sincere about who and what you are, and not afraid to express yourself can do wonders for how you’re perceived in the workplace. No one likes a fake, and its almost always obvious when you’re persona totally changes at work (especially if your facebook page shows otherwise), but where and how do you draw the line?

The only answer is restraint. I know, its not fun. Its muffling the real you, its censorship, its whatever…. but face it, thats the way life is. you can’t show every part of yourself to everyone in the world and not expect to be judged by it. A few years ago you could post up anything you wanted to your social applications and only expect your “friends” to see it, but now most of my online buddies are professional contacts. The good thing about my industry is that most of them are in the same boat as I am. We’re all trying to figure out the balance while combining their personal and professional online presence into one. Everyone has to evaluate their own career path and their lifestyle and decide how much they can be publicly intertwine in a productive fashion.

Times are changing and i can’t wait to see how this evolves social media and the workplace.