For example, on my Web and Flash pages, I wanted a sleek mouse-over on my images to display more information about my work without taking away from the visual appeal of an image gallery. A few moments later, I had a simple hover effect in JQuery for it. Easy, simply toggle the visibility of my CSS class as follows:

First, to set my div to hidden: $("div.iFade").css("visibility", "hidden");.

Second, simply reveal it with a simple function:
$(".rollMe").hover(
function(){
$(this).find("div.iFade").fadeIn(500).css("visibility", "visible");
},
function(){
$(this).find("div.iFade").fadeOut(500).css("visibility", "hidden");
}
);}

Nothing to it. Now you see me – now you don’t, type of scenario with a fade thrown in for shows.

All happy, I test it in Firefox, as usual and it works like a charm. I then test it on IE8, fearing the worst but it works like charm also! Wonderful – I can’t believe it! And then I try IE9… and then Chrome… and finally Safari… and discover that the hidden visibility property is not working while using inline styles with those browsers. The only way to make it work was to use the property in my external style sheet, which, in this example, would not work.

This is XHTML, after all, and for a second, I forgot that even if I am not directly typing my style in my div tag, I am still committing the cardinal sin of adding mark-up to my XHTML instead of sending it to it’s happy style-sheet. Bad Jquery!

As a result, instead of switching visibility on and off, I can achieve the same effect, without the browser freaking out, by switching the classes instead.

$(".rollMe").hover(
function(){
$(this).find("div.iFade").fadeIn(500).removeClass("iFade").addClass("IShow");
},
function(){
$(this).find("div.IShow").fadeOut(500).removeClass("IShow").addClass("iFade");
}
);

In my CSS, iFade is set to hidden, IShow is set to visible et voila!

This is a little longer, requires a second class in CSS to avoid inline style but it is well worth it! And next time, I will remember that JQuery does not justify to forget how to code in XHTML!

Further reading:

The significance of proper markup

Sometimes, time constraints are a big factor in design.

Usually, I will receive a project, do some research for inspiration, throw something together and mop over it for a while. In some case, it just works and I end up with a nice design. Other times, when inspiration is nowhere to be seen, I’ll scratch the idea, restart, try another concept, do some more research until eventually, I figure something out.

But none of that is possible when you have a very tight deadline. It’s happened to every designer. For one reason or another, the client needs the finished product for yesterday, and there you are, scrambling to get your wits together, it’s crunch time. All the procrastinating and thinking goes out the window. So does you sitting back on your chair sipping coffee and browsing for ideas.

All that is left is pure creativity and experience. You sit down very straight, not tasting that gallon of coffee and all the sudden it just happens. You set up your file without thinking, it just happens. You never designed a CD, or this specific poster size? Not to worry, you have the basics and use just that. All the worries that you may have are irrelevant. You don’t think, you just keep moving.

The essential is to get something decent that can be worked on and modified quickly. I find the best way is to use some old fractal or graphic element I have laying around, or even a bokeh I did for another project. I know I can always republish an old render or tweak the bokeh if the client likes it. Now is not the time to try to re-invent the wheel. I’ll test my square peg in a round hole next time!

I use any material the client sent for inspiration, everything is useful. This also when working with another designer becomes a huge asset.

Sure, I can do it myself but it’s always faster to show a half finished product to a fellow designer. Why deprive myself of another eye and another sensibility? All I need is a quick critique, “I don’t like the layout, I think you should use another color scheme, make it pop more” etc… to adjust instantly and go beyond what I would have done in such a short amount of time.

The thought process isn’t the same under pressure. The adrenaline must be converted into creativity, not panic. It’s what makes you think faster, move faster and get things done. It should be used exactly for what it serves: keep you alive, and that applies to how fast you can create!  Sure, you could run faster, but would that keep you alive? probably not. There’s nothing more lethal than an unhappy client!

A flash animation designed for Seamless Solutions. This is truly a teamwork effort. I worked on the video itself, Jena Rodriguez did the voice over and Alex Rodriguez added the music. The result is what you see!

Flash Animation
Programs: Photoshop, Flash
2011 for AROD Web Design

Programs used: Photoshop, InDesign

2010 for Stella and Philippe Coupe

Programs used: Photoshop, Illustrator, Apophysis

2011 for AROD Web Design

A fictitious Beer label, we had to design an alcoholic beverage label. I chose a Belgian Beer whose logo was not that interesting, and based on other labels for Belgian beers, came up with a Art Deco inspired design instead. I drew Death, traced it and Illustrator and colored it Photoshop. The background of the label is also a mix of of Photoshop and Illustrator.

Programs used: Photoshop and Illustrator

This was a fun project. The client wanted something very colorful and cartoony to match their logo. I designed the layout in Photoshop. They also wanted a lot of pop so we added animated sprinklers designed in Flash in the header and on the irrigation page.

Interface Design
Flash Animation
Web Development
Programs: Photoshop, Flash
2011 for AROD Web Design

A WordPress site for Tournament to a Tee with a Jquery slider. I designed the interface as well, based on a very clean soft concept to match the colors of their logo. We also design their newsletters on a monthly basis.

Interface Design
Web Development
Programs: Photoshop
2011 for AROD Web Design

Interface Design
Web Development
Programs: Photoshop
2011 for AROD Web Design

A wordpess site for Wilma J. Brown. I designed her interface keeping in mind her fiery personality and used a strong color combination of reds and oranges. I still wanted to keep a clean, white feel to match our company’s aesthetics.

Interface Design
Web Development
Programs: Photoshop
2011 for AROD Web Design

A WordPress website for Finance Rx. Jena redesigned their logo and I worked on the interface. They wanted something very clean but with a lot of visual appeal. I got another chance to use my favorite image generating program, Apophysis for the footer.

Interface Design
Web Development
Programs: Photoshop, Apophysis
2011 for AROD Web Design