Archive: January, 2011

Trying to make it unique

January 16th, 2011 · Jacob · Design No comments - Tags: , , , , , ,

While trying to annul my unread feed count in my reader, I stumbled upon Jason Gross’s article on Six Revisions about ‘10 Ideas for Creating Innovative and Unique Web Designs’. I liked it as it echoed most of my practices when it comes to creating unique websites. So instead of adding just a comment there, I thought I should resound the opinions on this topic here.

CSS Galleries

Avoiding CSS Galleries for inspiration would be a good tip for experienced designers but for newbies who are learning about web design, it familiarizes them with common styles and practices followed by the general community. You may get inspired by it so much that sometimes you tend to replicate the same style. It may not even occur to you that you may have ‘ripped’ the style. I have been following such galleries for about 5 years now and have noticed a lot of trends emerging.

The Bandwagon effect

‘Most designers are doing it, Why not me?’ We are unknowingly saying these lines. A simple example would be the use of bold, 32+ px slogans appearing as the banner nowadays. Even though, it is the perfect canvas to experiment with today’s web fonts and typographical clusters it is making the layouts more or less same. I have found myself filling a 300px wide area just below the menu and pondering about a good text to make the site banner. Why? I just saw 10 websites like that. Infact my new redesign is still in the drafts folder because it looks very familiar. Community instills in one person the ‘herd instinct’. There is nothing wrong following the herd but to stand out, you have to lead the herd to a different direction. Where design is much better, more refined and when a new trend starts.

I take inspiration from milk cartons, sweet wrappers, print ads, and origami… anything that is not a website. I try to adapt them into design that can be rendered in a browser. This works for me as there will be at-least some part of the design that is refreshing.

Constraints

Knowing that it is going to be a wordpress blog immediately renders a 2 column layout in my mind. Because I know how websites are coded, the developer in me screams out to keep the design in a way I can quickly do it. The time set by my clients’ ticks out my design into one that was churned out from a template. Some constraints are always there. To manage them and still produce a unique design identifies a great designer from a herd of good designers.

I have never tried collaborating with 2 or more designers before. Maybe this is one exercise I should do very soon. The blend of different softwares, practices and techinques can do the trick. ‘To make it unique’.

Ringing in the New Year with some Fireworks

January 6th, 2011 · Jacob · Design, Work No comments - Tags: , , , , , , , , , , , ,

I’ have always used Photoshop for designing interfaces. Always. Maybe it was because I have mostly designing 5 paged blogs or small corporate websites till now. In the last month of 2010, I got myself into designing larger screens; interfaces that required detailed interface flows to be demonstrated.

Prototyping

I’d never given importance to prototyping. Maybe yes. On paper. I used to do Pencil sketches to visualize what I was trying to do. The next step would always be entwined inside a PSD. If there had to be any changes I would wrestle with the layers to mold it to what I want. There was a problem. It had to be presented to and approved by a client. A client feedback can do grave things to an existing design. He may have many suggestions. His suggestions may affect my brain nerve centers which can ultimately translate to my layers in Photoshop. More changes come. More concepts arise. A frantic attempt to reorder positions, renaming layers to maintain hierarchy of interface states starts. One button color change may have to be replicated across 10 others just to preserve consistency.

Done. I’m doing it wrong.

Soon I was hunting down good software that could produce prototypes that demonstrated the flow of forms, use cases of design elements and error displays. These final screens had to be designed for the client. Not the paper sketches. I came across softwares like MockFlow, Mockingbird and Pencil Project. I tried a few screens in then. Though these generated good results in terms of screen flow, It lacked in portability. Yes. To Photoshop. The same elements needed to reused in a software I’m comfortable with. The same layers needed to be designed. I needed to concentrate on just the typography, layout and placement of elements.

Finally I had to turn to Adobe Fireworks. I simply didn’t acknowledge its existence till now. For me it was just a yellow icon sitting somewhere in the programs menu. The 1998 version of this product (then Macromedia) was originally use to create optimized web graphics. But over the years, it has snowballed into a good web design and prototyping software. Spread across 3 planes of work areas; layer, states and pages; It is ideal for progressive interfaces. Pages could inherit master pages. Hotspots provided me an option to interlink each states and control interaction between then. Of Course, for the client to view interaction in design even before development would be an added advantage. Export formats vary from an interactive pdf to clickable html using map areas. 9 Slice Scaling is also a very convenient method to create reusable buttons, text areas etc.

Ok. My Prototype went well. What next? So what happens to these mockups then? Should I ‘refer’ to screens while designing again in Photoshop? No way. I would like to reuse them. Reuse every single layer in then. Be it a line object or text or even element in the Fireworks Common Library. I want to take it to where I’m comfortable, designing; Photoshop. Here I could play around with tools, style and filters that would produce that end product which could look flamboyant and aesthetically pleasing.

Many people still are ignorant that Photoshop is primarily an Image Editing software. I’m happy to see new year resolutions like these which can change this mindset and adopting new programs for designing. New programs can release unseen styles and creative elements that can never pop out if we continue to use beloved Photoshop. So I would be using more alternatives this year.

On the other side, I found Fireworks immensely unresponsive for files which had more than 22 states and had many link properties. The lack of OpenGL hardware acceleration like Photoshop nulls out my graphics card. The 1GB Geforce card watches in pain as my workspace crumbles under pressure. :(

Now to find a companion for Fireworks. Why? Well. Fireworks gives you just basic interaction capabilities. It expects a developer to ‘realize’ all these interactions in the final stage. But sections like sliders and widgets can be actualized without a development process. Due to common FXG format, Flash Catalyst easily fetches the design elements into its domain and ‘deploy’ actual webpages for a designer. It simply bridges the gap between the design and development processes. But Flash Catalyst relies on other software like Photoshop, Illustrator or Fireworks to supply it with high quality bitmaps and vectors. They should have perfectly complemented each other but for round-tripping. Alas!

Adobe seems have such an impressive array of products. Is it good for us? Sure. But by dissecting a large feature set into multiple products and calling it a family of products has induced a certain fervor into its revenue model too and stretching the consumer purse. We need stronger alternatives, that can push this level one up. Till then let me just enjoy these current favourites(and Photoshop, Of Course!), this new year.

What are your thoughts on these products? Have you found some software good for the prototyping stage? I would love to hear about them.