Tag: Design

Trying to make it unique

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

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.

Version V: “rize”

My website has entered its fifth incarnation. Its been a long time since I have neglected this space. Earlier the content used be just a blog at a different location. I have transferred all of the blog, portfolio and other content to this domain.

Platform

I did stick around with good ‘ol wordpress, entrusting it with a weak database structure that was inherited from old vestec modules. A few tweaks and it was good to go. The portfolio entries too followed suite and collapsed into the wordpress structure.

Archives

The depository containing the entries will sport a new look. I based the design on the beautiful typographical poster of Mike Geisser, called Weapons of Mass destruction.

Journal

The journal is about 3 years old. The styling is particularly inspired from Jonathan snook’s website, adapting his three-column goodness in a healthy way. Ofcourse! Nowadays, It simply wouldn’t do with your latest tweet basking in top-sidebar. The usual link-love, delicious crumbles and other connections are tucked neat into the elegant sidebars.

Compatibility

The biggest news for IE6 is that it no longer has any privilage for accessing my regular stylesheets. Earlier I had plans to just disable content for the imcompetent browser. I’ll go easy on it this time thanks to Andy Clarke’s Universal Style sheet for IE6.

So, What do you think about the new theme?

What do i look for in a designer?

I am assuming myself to be a client who is on the lookout for a good design for his blog. What do i look for in my designer?

Portfolio

Firstly, i go straight for the portfolio section in our designers’ website. It defines him in the realms of aesthetic designs, accessibility results and client lists. Portfolios should not be vague and misleading. If I have two websites with one displaying the screenshots of their work and one linking to the original websites, i would be definitely convinced by the latter. The reason simply means i get to experience what his designs would feel like.

Spiga.com.mx , thewebdesigner and WillBlackmore.co.uk are good examples of  portfolios. They give proper details of what they have done and links and screenshots wherever necessary.

Website Design

Though his portfolio gets me the maximum of his design capabilities, a good website with minimal project listings also gets my attention.

Services

Services that my designer provides is also a measure for selection. The reason is closely associated with ‘loyalty of the customer‘ and ‘future projects’. For example I get my blog done with a designer who is only offering xhtml/css design with no flash oriented websites in his services list. I find his work appealing but still I would still prefer a design studio with a wide range of services. In the future I probably will come back to the same firm for a different kind of service.

Client List

An impressive array of popular clients can be very effective. Tofslie is one such portfolio. It has a good client base ranging from popular sporting brands like Nike and Adidas to Winter X Games champion Shaun White’s official website. That is impressive! Almost all the doubts about quality, accessibility and all the other criterion for selecting a designer reduces dramatically as the result of my website will be surely a good one.

Popularity

Someone popular in the blogosphere with a large number of loyal readers will automatically qualify as a good designer. They wouldn’t have been popular if their designs were bad. Bryan Veloso’s (the message is distorted?) and Veerle’s  happen to be my favourite bloggers. And surely their portfolios show that they are talented designers’ too. Besides getting your website done by such popular blogger/designers is always good for me and my business.

 Rates

Last but not the least, the rates he charges. Obviously when ‘high-end clients’ are catered by the designer, the rates go high. If it is a blog or a simple website with minimal number of features i would select a smaller, less exuberant design house. Nowadays finding one such designer is not at all a problem.

So i ask, ‘What do you look for in a designer?”

Vector World

When i first started to read about web and its related designs, I was not aware of such a branch of design, people just love to see. There is no proper definition for vector art as such (not even in Wikipedia). Let me attempt on one. Its yet another world far away from the reality itself, with minuscule details of a real life entities wiped off with importance given only to one and one thing alone, BEAUTY.

My first contact with anime (Inuyasha,i suppose!) saw a slight reluctance from my part to accept the style of art (Huge eyes were a main cause). Later i realized that it was a totally different form of artwork from the conventional one. The exaggerated features of a manga art were later accepted by me with a renewed craziness. Yes i know, anime is not vector art. My first contact with vector came with deviantART.Oh! amazing. Beauty galore!!

I was reading through one of its members’ journal.[http://vbu.deviantart.com/] Boy! all we need to know about vector art!

I understood a few things now from his journal.

Vector Art is a technique, not a style. Perhaps a better term for the category would be ” vector-based art,” meaning art created in a vector-based program.

Vector is not a ” style” like anime, but a “medium” like charcoal. Asking what vector-art looks like is like asking what an oil painting looks like. It could look like Rembrandt, Picasso or a 5th grader. (A very talented 5th grader!)

Just because something is “cell shaded” or “flat colored” does NOT MAKE IT A VECTOR. The CUTOUT filter creates a raster-based image and thus is disqualified from ever being considered a vector image.

Not that i believe this is the definition for vector art but his statements are mostly true. Now then a few samples from heruka’s gallery.

rosario_dawson_vector_by_heruka.jpg

vectorice_by_heruka.jpg

Thats some classic example of vector art produced with Illustrator and Photoshop.

There are magazines dedicated to showcasing some of the finest vector masterpieces.Some of them are Vectorika, Kromag, Artzmania, and many many more ‘download’able issues from pdf-mags.

On a personal note i would suggest browsing through some fabulous vector art by Jeremy Prasatik .

Photoshop Tips and Tutorials

An excellent collection of Photoshop Tips and Tutorials.

Lafest- A designer’s tale

Well here i am…passed out of Loyola and my identity as a ‘male chauvinistic pig’ is wearing off rapidly (and presently taking part in the promising online alumini movement of Loyola.)Lafest!Ah,the sweet memories of classes we skipped for ‘genuinine’ reasons like “Designing the official website of Lafest”,”Designing the brochure”,”Tshirt designing”.For about an enormous chunk of the time alloted to this so-called “designing work for Lafest”,many of us used to lurk in the most darkest of maps in Counter Strike.

Yeah that’s right!.

Terrorists ..

We used to gun down every single one of them….brutal,barbarous..

(We had to finish the website,brochure,tshirt after that!!!!).

“Guys!2 more maps to go!Lets give them all we have ”
“Ahoy captain!” replied other members of the “Lafest designing team”.
Battle after battle,the war was far from over.(We still had to do the website,brochure,tshirt.!!!!!)

Just when we thought we had wiped off terrorists from the face of the earth,an ominous figure emerges from the server room,smiling devilishily.

“Poyi!LAN connection poyi!!!!Sir..please sir”

Shijo Sunny interrupts a typical start to the ‘Lafest designing works’.

I used to sit in front of the computer with a Photoshop blank document in front of us.Adjacent to my (pentium 4,64 MB RAM,20GB)computer,Arun (fellow counter terrorist) had just finished completing ‘a state of the art’ Tshirt design and was busy polishing with some techniques i still don’t have a clue about.With sounds like “Oooo” ,”Wow!”,”Aaaaa” rising and mixing into a weird tempo,DP comes in.

akri

“You boys have worked hard!”.(Sure we did!).

I stretch myself to look at another computer monitor.Norton scanning for viruses.Please refer the image below because i was speechless back then.I still am.

scan

To my back i find a very optimistic Sidarth Aredath working on a innovative brochure layout.Impressive indeed!.It was an instant hit.

We had a ‘Computer Co-odinator’ for the first time in the history of lafest.We has doing what he knew the best.Typing!I had never seen a guy use MS Word like that before.Typing in all the schedules,Result sheets,Tabulation sheets.He was truly dedicated to his job.Lakshya Sharma!(Sigh!..Wish he had thought about the video coverage of Lafest 2K5).

Lafest is always a good experience for loyolites….School students excercising their talents in things they have done never before….Like hosting a event website,designing what they wear,brochures.

Redemption CD


Lafest 2K4 had a unique post Lafest CD compilation.It was so unique that it had seperate activation module for every single CD which included CD copy protection,The video was encrypted in new formats and could not be be hacked into easily.The only possible way to view the events was to buy a copy for 20 rupees.The interface was truly professional.The most amazing fact is it was done by one person. Rahul ‘Asti’ R(our senior).The stress is on ‘one’ in the previous sentence as i find it impossible for a 12th grader to setup just an extensive array of applications for a school event.I don’t think anyone currently studying in Loyola can acheive that singlehandedly.We, a group of 5,tried to do a similar presentation,ended up studying just how to make good buttons in Flash. What it proves is Lafest brings our the best out of the student be it designing,managing or organising.Our unsuccessful but spirited effort was a way of learning new things.It gave us sufficient knowledge into imaging,certain computer softwares and most importantly how to put up a good,decent and a decorous presentation.

Lafest did that for us.

Vishnu Gopal,another senior had prepared a slideshow on the creation of Lafest websites.The guidelines were to keep the site,simple short and sweet.

2004

2004

2005

2005.jpg

2007

2007.jpg

What actually began as a frantic effort to make ‘any website’ now has become quite a task.The evolutionary process of Lafest websites finally brings out the uniqueness and the singular form of every year’s designing team. Evolutionary in every sense?.May be not.Over the years the lafest websites are seen to have a gradual increase in complexity well disguised under an evasive cover of ‘a good design’.But then Doesn’t it look good?