Ranjith Kumar

A User Experience designer with specialized experience in front-end engineering, i have over time developed a strong passion in being associated with product-based teams. The unified goal and challenges that a product's life cycle offers is simply unbeatable! For me, proficiency in tools takes the back seat when it comes to User Experience Design, and i believe one has to be passionate and equally agile to be a key part of the team. I bring to the table the diverse hands-on experience on various facets of experience design, and have played key roles in the team bridging the gap between design, dev and biz groups within product teams. My vision is to be the key hand behind the UX design of a world-class product in a team of passionate and uber-smart techies and designers! Specialties: Information Architecture, Wireframing, Heuristic Evaluation, Web standards, Interaction design, Semantic markup, OO CSS, Usability Review

How to Build a Killer User Experience Team

Posted in Tips, Usability, Web Design • Posted on 11 Comments

We are in an era where the term ‘User Experience’ is still evolving and enterprises are still figuring out how to fit this piece of the puzzle into their organization’s structure. The field is new and filled with lots of uncertainties for the decision makers of an organization, but it is definitely promising and filled with tremendous opportunities!

Being a User Experience designer right now is an interesting and rewarding experience for the fact that the scope of exploring unknown lands is infinite and I feel proud to be one. The Internet obviously has a major role to play in the upkeep and growth of this field, and it has lived beyond its expectations up to now. There is a lot of stuff happening around UX nowadays. There are UX conferences, more blog posts explaining the need of User Centered design, and people surely are getting a better picture of the topic, day by day.

How to Build a Killer User Experience Team Read More

How to Build a Website Using Twitter Bootstrap and SASS – Part 2

Posted in Coding, HTML & CSS, Tutorials • Posted on 5 Comments

This is the second part of my tutorial on How to Build a Website Using Twitter Bootstrap and SASS where we shall be customizing the Twitter Bootstrap-based web page using SASS. Just to set the context right, we will be starting out where we left off in the previous tutorial. If you haven’t seen it yet, please check it out and work through it. There you will learn how to setup your system for TBS, Ruby, and Compass.

In this tutorial we will be furnishing our webpage from the last tutorial using SASS. By the end of this tutorial you will be at the next level of developing beautiful websites and applications!

How to Build a Website Using Twitter Bootstrap and SASS – Part 2 Read More

How to Build a Website Using Twitter Bootstrap and SASS – Part 1

Posted in Coding, HTML & CSS, Tutorials • Posted on 12 Comments

Having covered one of the best web development frameworks (Twitter Bootstrap) and a super fast CSS coding technique with tons of goodness (SASS), in my previous posts, it is time to burn some rubber and get some work done. We will get our hands dirty and code a web page right from scratch using Twitter Bootstrap and SASS.

This will be a 2 part tutorial, with detailed steps and a comprehensive overview on the processes and concepts behind them. The first part will cover the details of building the folder structure and creating markup using TBS for the layout. The second part will have a detailed walk through on the customization of the layout using SASS.

How to Build a Website Using Twitter Bootstrap and SASS – Part 1 Read More

Bootstrap Your Application Using Twitter Bootstrap

Posted in Coding, HTML & CSS, Tutorials • Posted on 11 Comments

As a front-end engineer, I was always excited to be a part of an assignment where I got to code the markup and CSS from the scratch. Like any other professional, the prospect of implementing my own ideas and exploring fresh techniques, on a fresh project, used to make me euphoric. As time passed by, the number of fresh projects that I was handling increased substantially, and the concept of starting all over again no longer remained an exciting business.

It was a pain to start coding the UI components all over again in each and every project (though I maintained snippets and reused the code, it was not an effective solution for the rework!). It was then I realized the need of maintaining an extensive library of reusable components which could be used across any projects. The idea seemed to be interesting, but the fact was such an effort needed a lot of detailed analysis and extensive testing across multiple platforms and browsers, to be rest assured that, the code be reused without any hiccups across any projects. The idea was to create a framework which was reliable and flexible enough to be reused.

Bootstrap Your Application Using Twitter Bootstrap Read More

Understand the Power of Sass and Why You should use CSS Preprocessors

Posted in Coding, HTML & CSS, Tutorials • Posted on 8 Comments

Front end engineering has always remained a niche skill, even with the burgeoning array of techniques and technology available. Today, as we witness the launch of newer frameworks and tools for better web development, on a regular and fast track basis, this domain too has undergone its own super fast makeover! But the core skills to build a solid career in front end engineering has always been the same – passion + HTML + CSS + JS + an unrelenting desire to learn!

Lets analyze and understand the hot and happening technique in the field of front end engineering – ‘CSS preprocessors’, which offers to add mind-blowing features to the Cascading Style sheet language, and equip the modern-day front end engineer with tons of nitro and increase productivity.

Understand the Power of Sass and Why You should use CSS Preprocessors Read More

How to Author a Super Accessible Website

Posted in Usability, Web Design • Posted on 15 Comments

Helen Keller, the deaf-blind and renowned American author and lecturer, who became world-famous for her passion towards preaching the importance of living a good life, conveyed an important message to the world through her life by overcoming the odds of sight and hearing deprivation. Hers was truly an outstanding case of determination and confidence. There are thousands of Helen Keller’s with hearing, sight, movement and cognitive disabilities out there in the world, dreaming and striving to lead a normal life as others.

With internet now becoming a necessity in the modern life, it’s really important to create applications that are easy to use for all equally – yes those Helen Kellers too. As a web designer we create experiences for the users and put them in the front seat, with our decisions relating to the interface. Equally important as following best practices and standards is to design UI for systems that are accessible to all types of users – Accessible Design, is what we should be aiming for.

How to Author a Super Accessible Website Read More

An Introduction to Object Oriented CSS

Posted in Coding, HTML & CSS • Posted on 13 Comments

With richer interactions and media heavy pages mushrooming on the web, creating web pages, which load faster and respond well has become a challenge. Separating the content, presentation and behavior of a page using HTML, CSS and JS, is not the only thing that front-end engineers have to concentrate on nowadays. The limelight is now on the performance of the pages, cleanliness and leanness of the code within, scalability and reusability of CSS, and the semantic correctness of the markup.

There are a handful of frameworks, techniques and approaches that are built towards this goal of maintainability, scalability and reusability of CSS. Each of them is having its own pros and cons. But, this is not a stage to elaborate on all of them.

This article is an introduction to implementing the concept of ‘Object Oriented Programming’ in building CSS for high scale websites and applications, with an eye on maintainability and reusability.

An Introduction to Object Oriented CSS Read More

Bridging the Designer-Developer Gap

Posted in Tips, Web Design • Posted on 7 Comments

How are ‘Right brainers’ different from ‘Left Brainers’?

Well, this is not a zoology question being thrown at you. If you are working on a team dealing with websites / apps, and if there is a design team working with a team of developers, you probably would be witnessing the answer to this question every single day you work!

This is an inevitable fact, and it is this difference that makes the two communities thrive, and the best team is the one which finds a way to converge the collective wisdom of both these ‘species’ into the final stage of their deliverable – An ideal human-machine interaction experience, filled with life and satisfaction.

But in reality, most of the teams stumble at this moment, when the ideologies of both of them should be given weight and injected into the final product, and this shortcoming, is the whole essence of this article.

Bridging the Designer-Developer Gap Read More

Stay Organized and Stay Ahead of Your Competition

Posted in Freelance, Tips, Web Design • Posted on 6 Comments

The web is a super highway of information! With the phenomenal growth of the network, and the advancement of technologies, the growing number of netizens are left with a bombardment of choices online, be it spending time on their favorite social networking site, browsing through the ocean of links, or be it just idling around, between tweets born every milliseconds.

As design professionals, the most vital resource that we all have to manage well is just one single thing – TIME! Yes, time forms the basic unit of all our efforts and the productivity and the efficiency of a design professional is directly proportional to the time he spends on useful and productive things. Nowadays, with plenty of distractions available online, it has become really hard to get some quality time to be productive. With your FB page and a Twitter client opened in a browser tab, and mail coming every now and then to your inbox, it’s a challenge to get work done. Now is the time to keep all those distractions at bay and find out what part of the day you’re the most productive and capitalize on those times to get work done.

Stay Organized and Stay Ahead of Your Competition Read More

The Origins of User Interface Terms

Posted in Usability, Web Design • Posted on 13 Comments

“The way that you accomplish tasks with a product – what you do and how it responds – that’s the interface” – The genius HCI expert Jef Raskin defines an interface this way!”

Being a UX Enthusiast working mostly on the web, the web UI terminologies and interactions patterns are obviously a part of my daily work life, where I build user experiences by creating wireframes and interfaces which help the user accomplish a task easily. The various interaction patterns have always fascinated me and have left me wondering how closely a human-computer interaction is being related to some obvious real-time objects that we interact with, in real-time – enter the metaphors in Human-computer interaction.

The Origins of User Interface Terms Read More - unknown - unknown - US