Category: Design

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.

Color Cross

May 24th, 2010 · Jacob · Code, Design, Experiment 2 comments - Tags: , , , ,

colorcross

Recently, I came across Alex Girón‘s experiment with CSS3 and @font-face. It really captivated my mind and intrigued myself with the possibility of creating good banners with just some html code and css attributes. So I quickly fixed up my own experiment to satisfy my curiosity.

The idea was to spread a list of square boxes behind a random quote. So I decided to use an ul list and style each li to random width boxes and spread even more sparsely. Then I used a function to color them with varying intensity and creamed on it more transparency using the opacity attribute. Some -*-transform and a good font substitution was in line until I was almost there.

View it here. Make sure to refresh it until you say, “Its cool!”. :)

Get ChunkFive font kit.

Quotes from designwashere.com

Update: You can download the script from here.

The funny world of web design

June 30th, 2009 · Jacob · Design, Web No comments - Tags: , , , , , , , , , ,

Its been quite a while since I have been focusing on web development and related avenues. One thing is for sure! It is a really funny place to be in!

PLATFORMS

Web designing is no longer about some html-tags and css attributes concerning only the normal computer user. There are a variety of platforms that are being used for accessing information. It leads to more and more developer environments with newer functionality. The designer branches out to specialize in each one of them at each stage of development leading to multiple roles.

CATCHING UP

The biggest problem for a web developer nowadays is staying updated with the latest advancements in the web-o-sphere. The amount of content related to the field is getting enormously large by the minute. New technologies change the way content is being perceived. Just when you finish trying out and experimenting with some prevailing method, you find a better method already  available and then you turn your  focus on it. The notion of browsers and feed readers to just relay the articles has now changed to providing  the content that is relevant. Intelligent systems rely on the user activity to chuck out what is not needed for the user. Thanks to some really nifty web applications, we can still survive.

DOC-TYPES

There is  clearly a lot of buzz related to the future of web standards. There are people who support either xhtml 2.0 or html5, bombarding each other with valid reasons that cannot be dismissed by any at this early stage. There are people moving from xhtml 1.0 to older doc-types  like HTML 4.0 stating it would be easier as it provides the ‘minimal mental shift’. Other people just want to choose a side when its ready and supported by all browsers and would gladly continue the current standard of xhtml 1.0. I think people should start using the next level of specifications and only then we can elevate them to the next standard! Fortunately there are a lot of examples and good articles  that can give newbies a taste of these processions.

FONT-EMBEDDING

CSS3 @font-face is going to relieve the old web-fonts that have  served us well over past years. It is time to give them a rest and give a look into new types .  It may take some time but it seems to be the way we are going. Embedding fonts in websites seems to have disheartened many type foundries as fonts can be easily downloaded. Even when typekit was announced, people were unhappy. This time it was the customers who already had a license and expressed discomfort is buying a license through typekit again.

BROWSERS WOES IE6

Everyday I hear people cursing the hell out of IE6! I mean it is a ‘trending topic’ that just refuses to die. I wish it did! Many designers have nightmares when it comes to optimizing their website with IE6 which still many ignorant people seem to love.  Microsoft is desperately trying to make up for some lost ground by some rather weird advertisements and campaigns for IE8. Many netizens deal with IE6 by simply ignoring its existence,  use hacks,  javascript workarounds or by simply blocking the browser access. A smarter option would be to use a generic stylesheet for IE6 that simply displays the content in a structured manner.

AND MORE NEW PROBLEMS

Its like Microsoft keeps on committing new and new mistakes with Outlook 2010 deciding to go with table based layouts for viewing HTML emails disabling the goodness of CSS. Okay! So what do people who care do? Send a strong word! Fix it! Microsoft responds and defends their reasons to use the Word rendering engine and the discussion rages on. Just when we thought about the standards support of IE8 and the browser moving towards the right direction; Imagine, having to do table-based layouts for your emails.

With all these different options and  methods prevailing, its really amazing how the developer community sticks together and engages in generative discussions to push us all towards a future that is  bright and promising. After all its our funny little world of web design! :)

What do i look for in a designer?

December 27th, 2007 · Jacob · Design, Writing One comment - Tags: , ,

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?”

Coding Style

August 16th, 2007 · Jacob · Code, Design Comments Off - Tags: , , ,

For a beginner like me certain articles really helped. One of them would be ‘Coding Style‘ by Dionyziz. This article deals with a detailed description of why coding style is very important to a developer and how these can be used to improve the readability of the code. Since i have never worked in a real professional group, i haven’t yet felt the need of a coding style. Anyway from now on i may be forced to develop an own coding style focusing on readability and usability. He has also outlined some styles which can be used in very popular procedure oriented languages like PHP, Python, C, C++, Java and Javascript. However a structured presentation of CSS and XHTML is also beneficial.

Vector World

August 5th, 2007 · Jacob · Design, Writing One comment - Tags: , , , , ,

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 .

Inspiration = Rip?

July 29th, 2007 · Jacob · Critique, Design, Writing 3 comments - Tags: , ,

At one glance , an innocuous word, ‘inspiration’ may seem to be related to the great paintings by Leonardo Da Vinci produced due the influence of Verrocchio, his teacher. Inspiration is usually associated with art and design.

In olden days, inspiration was thought to of a divine nature. The people believed it to be a gift of god. As time traveled across centuries of development, renaissance and revolution this inspiration found new meanings. Nowadays it is concerned with education,personality, paintings (abstract art too) and websites . Inspiration has found new galleries to showcase themselves in different mediums. They are umpteen inspirational personalities, masterpieces, materials and products available now(which makes me think that there is hardly anything divine in it anymore.)

I would like to center this post around ‘web inspiration’ a rather new term which has many possibilities of advancements and ramifications in different directions (and the way it gets corrupted by rippers and plagiarists). Before we get into this topic let me show you one of my works. A simple cover i did for my college magazine and the art that inspired me to do it(the one on the left is mine).

MomentThe Time

Well as you can see the better one is the original found from here .

 

First Question!.Is my art a rip of the other? The fact that I’m calling the other one ‘an original’ is itself an assertion of the fact that i borrowed a lot of ideas from ‘the time‘ by Nazan Dedeoglu. Borrowed? uh oh! I don’t know Nazan. Borrowing without his consent is stealing right? Assuming the above case to be true i rephrase my statement. I stole his art!. But then in my defense i have a sweet word which is manipulated by every known ripper artist in the world(i’m not one,in any way).

Inspiration .

 

Boy!Haven’t we always wondered what the difference between the words Inspiration and a Rip means.

 

Many websites have been on the lookout for Web rip off! On such site is pirated-sites.com.(check out their more believable Flickr account with screen shots) Obviously the hapless culprits tried to model upon the the original site,(starting from pure inspiration), slowly accumulating a lot of the parent website features and finally transforming into a truly fascinating rip of the former. Most of the websites under attack are from people in the same circle of involvement, say Web design studios. The best part is the style how the original creators write about their ripper counterparts! They go commenting from ‘shameless f**king @#$%@’ to ‘nice try buddy,better luck next time. While most of the counterfeits are dismissed off with a ‘disgraceful act’ tag, the clicks to the uri keep increasing dramatically, (increasing the link popularity dumbo!). The ripped sites are usually replaced with more impressive original creations in very short time.

 

Inspiration usually is accepted if it is about using the styles of the original artist in a different way with his/her flavor mixed in it to produce an completely different art.Whoosh!Thats all i can squeeze out of me. Besides it all depends on what the original artist thinks about his alleged rip off art.

 

FOOTNOTES:

1)My art was not used in any profitable venture or my college magazine( ,they rejected it because it was too complex a concept of time!) or was not sold to any enterprising group. Besides i still think it is an inspired art. Oops there we go again!…