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’.

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.

Take an example. Google’s default search engine results number is probably set as 10 and documented the same in its early development stages.

I was able to bring the number to 1 result per page by simply modifying the value of the first option entry by firebug and blindly believing there was no validation for the lower bounds.

It is pretty sure from the interface Google doesn’t want a single result to be listed. Though this does not create any concern to integrity of the database, it clearly brings to light how weak the constraints set by the designer are.

SQL injection through input forms and Header injections to manipulate cookie information and authenticate websites are prevented to some levels now. However a large number of basic validations are not done just because the backend programmers believe the data received through interfaces are safe. The information relayed across these containers have least amount of respect for the limits set by designer. This works almost everywhere and the validation is often implicitly neglected. The interfaces today are very highly manipulative and unless a refined form of validation is applied to the process logic level some back-doors can create unexpected results.

I was able to a process an online recharge of 5 rupees when a certain telecom company’s basest recharge option was 55 rs. This is no fraudulent action. However it denotes the decreasing credibility of the bounds set by the designer and increasing amount of validation that needs to enforced at the business end. A much more substantial implication would be on the resources. The company let me process the recharge denomination through the online banking portal of a third-party organization and reverting it back when it finally detected the anomaly at an inner core level. Thus creating an alarming denial-of-service (DoS) scenario taking advantage of this hole. This signifies the importance of a refined way of treating interfaces.

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.

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!

• One who wears washed and well ironed clothes everyday to college is abnormal.
• He/She who visits the library often wants to replace their existing backpacks.
• Define ‘Optimism’- When you leave college…
• College canteen is the first place where you start to appreciate your moms cooking.
• When a teacher approaches, catch your topmost button of your shirt. It gives you satisfaction that they got the wrong notion of your respect.
• If you enter the computer lab and everyone suddenly leaves, wash your feet and come back.
• The beautiful girl standing in front of the library holding a file is your new stand-in lecturer who will leave in two months.
• The college bus always stops 100m away from where you are standing.

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?

The concept is not new and has been tested with some added features every passing day. Blogs surely were the pivotal point towards Web 2.0. Many aggregrators are been developed, some of them being Friendfeed, SocialThing, Tumblr and Profilactic. I have checked out a few and found it to be really interesting. I think, people simple love to share, boast and ‘blah blah’ a lot about their life. This simple fact is going to take forward the concept of lifestream probably with some new features. The old personal log with comments is restrictive and has found a whole new ramification. Much of these stream elements revolve around twitter, flickr, Del.icio.us and Last.fm.

Of course I like custom designs and code snippets. Jeremy Keith has given me a sound base to get one such application working in php. Yay! Now I can experiment a few and look forward to my next redesign.

I’m extremely sorry for inactiveness of this blog and will strive towards a better maintained personal log. Duh! I feel kinda weird after that line. Maybe this post will become the last one in the next 3-4 months. The suscribers to this blog must be of some really patient species branched from apes some 5-8 millions of years ago and from humans some one and a half years ago. You didn’t get it? My blog is nearing its second birthday. yay! hmm. What do I give my tolerant readers as a gift for bearing with me?  Maybe a free WordPress theme. Maybe some screencast series. Blah! If you could have wasted precious mbs of bandwidth of stupid ‘geek’ pastimes like screencasts, then you surely would have seen a steamy youtube clip by then.(or maybe something that steams even more.)

So I will speak about about a few things I learned in the past few months while I was away from my blog. After Tejasvi, I found Vestec CMS didn’t have an edge in todays market if it were to based on just a bunch of functions and methods. MVC is the buzzword. So I may implement this either with a standard MVC platform like Cake PHP or Codeigniter or even try to model one myself. As for new changes, I added a new, improved interface to the admin section.

Moving away from code, I designed a few web interfaces for some companies and found out some bare truths. The most prominent among these is the fact that designs with more white in it are guaranteed to be a sell. According to my experience, a blue-white color scheme is the most liked scheme. A dark design is the riskiest thing you might want to do. Unless it is exceptional, clients are sure to have some second thoughts.

My N73 and its wide possibilities made me Google about S60 application development. After some persistent use of the ‘submit’ button, I found out it that it needs some time and dedication. Maybe a bit extra than the usual. Some newer version of the platform is due to change the level of knowledge so it is better to go into mobile development until I get used to the terms and jargon of their codex.

Well then, I seem to be in pretty good form right now! Calculating this spirit, I think you guys can expect some more posts before the blog nerve gets blocked. Yes! Do expect some goodies from me soon.:-)

1) Website Design – Tejasvi’s official website needed to look serious enough so that we would get some participants. A new festival is seldom welcomed with less interest and vigour.

The entire website was crafted in PHP/MySql with each event details being loaded into the decent interface dynamically. It included some new features and algorithms, of which most were devised together with Asti. Unique ID system, Online participant tracking, suggestion portal, mailing lists and a custom inauguration module… Tejasvi ’08 is the web project I enjoyed working on the most. It soon became the best reference of the festivals’ rules, regulations and prizes. Over a period of one month, it hit whopping track records in Google analytics.

This simply shows how influential a website can be on a festival’s success.

2) Flyers

Over 3000 flyers were printed at the efficacious St Joseph’s Press. Orangish, 2 fold papers spread across Trivandrum did make Tejasvi’s presence felt!

3) Poster and Brochure Box

One glossy poster based on multi laser light streaks proved to a sincere reverberation for the theme of the festival. ‘The radiant you’.

The brochure box is the most innovative design productof Tejasvi. This is modelled on Japanese origami techniques with two 170 GSM papers used. The box when unwrapped would unveil the entire schedule and prize money of all the events. ‘Event cards’ depicting the event format and rules were the contents of the box.

4) Certificates

The most hurried part of the entire design process. Still it looked decent. (er..I think so.doesn’t it?)

5) Badges

6 types of square badges were printed. The Design, derived from the poster but based on different colours.

6) Registration Software

This PHP/MySql Web application was devised in such a way that all six computer systems got updated informations regarding festival schedule, timings, participant details, order of appearance and team codes. Dedication counters too worked effectively with systems though it cost us 100 m CAT-5 cables and two 8-port switches for the LAN at Tagore Theatre. The system’s highlight was a fully computerized registration procedure with the details being retrieved at the ‘Certificate processing’ team. Monetary particulars were also dealt through this efficient, transparent and dynamic arrangement.

If I were to market all these designs, I would have got more than 35K bucks. I thank everyone who helped me in this endeavor. I have worked with true interests and in a honest attire. This means that I would refuse myself to take part in next years’ festival. When i briefed my juniors, I said.

“Next year! We would have already made a platform for you to continue, To begin anew is a hard task. To emulate on a existing model, is much more easier”. To my friends, I say. “Don’t stop with what is already available. Do build on it! Make it taller, stronger and mightier”.

Oh come on! I am starting to sound like John F Kennedy in his famous presidential address. “Let the word go forth…’