Role of a generalist, specialist or unicorn skillset in a UX (design) team

UX (Design) is a bigger umbrella and it’s getting broader. Design is not limited to a defined skillset; ideally a designer gets involved in an abstraction face of a product, where product is a vague thought of a client. It has to be materialized on web or in other accessible platform. Between the abstractions to … Continue reading “Role of a generalist, specialist or unicorn skillset in a UX (design) team”

Is jQuery still a relevant library in front end development?

Yes or No will not be the correct answer for this question, but jQuery should be considered as other library and only be added when needed. It should not be added by default in all the projects. It costs you 30 kb of compressed script that in turns give you simple code for easy handling … Continue reading “Is jQuery still a relevant library in front end development?”

Information Visualization – How to effectively convert an abstract data to visual?

Data is getting generated from different sources. Walmart handles more than 1 million customer transaction every hour, Wikipedia handles billions of pages. Skip and take me to step-by-step guide Social networking sites Twitter, Linkedin and Facebook etc. generates new huge bytes of data in quintillion daily, the amount of data is only getting larger, deeper … Continue reading “Information Visualization – How to effectively convert an abstract data to visual?”

Javascript Callback Function explained in a story of “King and his spy”

Callback function are almost everywhere and play very important role in javaScript. Before jumping directly into the story, let’s clear the dust and understand “What is callback function?” and “Why callback function is important?” If not interested in basic, jump directly to the story. What is callback function? JavaScript code is executed line by line, … Continue reading “Javascript Callback Function explained in a story of “King and his spy””

Ready to use cool CSS animation libraries to speed up development and improve user experience

CSS has improved a lot from last few years and capable of pretty drastic output for web. I am not going to add an animation tutorial. My focus is to list out cool ready to use css libraries; that improve user experience and and speed up development. How these css libraries can be used effectively … Continue reading “Ready to use cool CSS animation libraries to speed up development and improve user experience”

Who doesn’t know anything, knows user experience.

This funny statement was given irritably, by one of my team member, when he came from a meeting. After having a brief discussion about the meeting, I came to know it was a common problem that a designer faces in most of the meetings. We start user center design and gradually, it becomes client centered … Continue reading “Who doesn’t know anything, knows user experience.”

Should Designer code? Or at what level, a designer should code?

User Experience, Design thinking, Innovation, Customer Experience; these are a few terms floating in the IT field for the success of a product. Designers are considered to be crucial in the success of a product. A big responsibility is already on the shoulder of a designer. Should designer know or do coding along with designing? … Continue reading “Should Designer code? Or at what level, a designer should code?”

Responsive Web Design – Performance Enhancement

Treating performance as design improves the user experience. No matters how perfectly we have design the information architecture and a great user experience with everything just one click away. Usability is useless, if performance is slow. Based on the survey , almost half of the web users expect a site to load in 2 seconds, … Continue reading “Responsive Web Design – Performance Enhancement”

Mobile and Web strategy to launch a product

We are living in a technology changing world. Every year new technologies, new frameworks and new devices are launching. Users are accessing the web product with different devices. Now, web is not limited to desktop on our workstation. It is in our pocket with mobile, it is in our living area with smart TV, It … Continue reading “Mobile and Web strategy to launch a product”

How to use grunt? – A build tool for web development

During the web development process, there are bunch of tasks that you’ll be doing regularly. Minifying files, concatenating files, compiling sass or less to CSS, unit testing and linting JS files are some of them. Grunt helps to make these regular tasks automated. It saves lots of time and energy, it has bunch of built-in … Continue reading “How to use grunt? – A build tool for web development”

Package Manager – why use npm? How to use npm?

Package manager manages assets (install, upgrade, remove, manages dependencies) used in a project. NPM is used to install node packages (such as underscore, grunt, gulp, jsHint etc.) from npm registry. NPM makes it easy for JavaScript developers to share and reuse their code. You just need to publish package to the registry. These reusable codes … Continue reading “Package Manager – why use npm? How to use npm?”

Why mobile UX customization is important for different platforms ? – Android vs iOS

When designing a mobile application or mobile website, UX people pay special focus on Android and iOS. It’s because, both platforms have combined market share around 94% and both have different appearance and personality. Both the platforms have their own design guidelines. If a user has to switch from one platform to another, it takes … Continue reading “Why mobile UX customization is important for different platforms ? – Android vs iOS”

CSS3 Basic UI module – working draft published by w3c

W3c published a working draft of CSS basic module level 3 on 10th March 2015, where they have extends user interface related features from the selectors, properties and values of CSS level 2. These UI related selectors, properties and value are proposed for CSS level 3. Note: it’s a working draft may change in the … Continue reading “CSS3 Basic UI module – working draft published by w3c”

JavaScript – Singleton Design Pattern

Singleton design patterns ensures a class has only one instance and provide a global point to access it. Singleton pattern is handy when you want to create a class whose functionality does not required any changes for its multiple instances. Basic Singleton implementation in JavaScript A basic singleton pattern can be created using simple object … Continue reading “JavaScript – Singleton Design Pattern”

Custom responsive grid with sass susy – grids on demand

While starting the responsive web development, first question pops up. Which grid framework to use? There are many grid framework to choose like bootstrap, foundation, 960 Grid System, Golden Grid System and many more. Are these grid framework flexible enough for modern designs? Class based grid frameworks are not flexible enough Bootstrap is one of … Continue reading “Custom responsive grid with sass susy – grids on demand”

Consistency and conventions are true friends for web

Consistency and conventions are two important element of design. By following the existing conventions, anything can be made easy to grasp. Consistency make user feel at home. Universal color code for traffic lights is (red, yellow, and green). Some conventions are must to follow, like stop lights are red and red means stop. Drivers know … Continue reading “Consistency and conventions are true friends for web”

SASS – Efficient use of Mixin and Placeholder

SASS (Syntactically Awesome Stylesheets) is an efficient modular way of writing CSS. It is Powerful and most stable css preprocessor, around us for almost 7 years. There are n-number of frameworks built with Sass. Compass, Susy, Gumby and Bourbon just a few name. Beauty of the SASS a CSS preprocessor Writing a vanilla CSS is … Continue reading “SASS – Efficient use of Mixin and Placeholder”

Mental model and conceptual model in user experience.

Design is a conversation between designer and user. How effective this conversation can happen; is depends on the conceptual model of the designer for the product. Designer does not interact directly with user. Designer only talk to the user via product. Imagine a scenario you have never seen a kindle device or iPad, and you … Continue reading “Mental model and conceptual model in user experience.”

Usability testing with blind users – How blind users work with web sites ?

Observer in usability testing gets actual insight of the users while watching them using a product. But what about the users using adaptive technology? like blind web users, how blind users work with web sites? While surfing net, I found a very good case study where 16 blind users were observed while using screen readers … Continue reading “Usability testing with blind users – How blind users work with web sites ?”

Meta tag – Configuring viewport in responsive web design

Desktop browser and mobile browser are not the same. There is no window, scrollbar, resizing option in the mobile browser. User flick, pinch and zoom in mobile browser, and these gestures are not there in the desktop browsers. Because of these interaction differences, viewport on the desktop and mobile are not same. Why viewport is … Continue reading “Meta tag – Configuring viewport in responsive web design”

Responsive Web Design – Pixels density and resolution

Any physical size of device cannot stop web from spreading its wings; be it a smart TV with bigger size or a smartphone in the pocket. Web is spreading all around, Though, physical size of the device is shrinking but resolution of these devices is increasing. Why? and how? High DPI and Retina Retina is … Continue reading “Responsive Web Design – Pixels density and resolution”

Responsive Web Design – Viewports and device pixels ratio

Major technology changes have been seen in last few years. Smartphone and tablets are changing the way of internet usage and taking the web everywhere. Responsive web design (RWD) is around from some years now. Initially the focus in a RWD project was just to decide the different breakpoints – like small, medium and large … Continue reading “Responsive Web Design – Viewports and device pixels ratio”

AngularJS – Conditional Display using ng-show / ng-hide, ng-if, ng-include, ng-switch

Hiding or showing parts of a DOM based on some conditions is a common requirement. AngularJS has four different directives (ng-show / ng-hide, ng-if, ng-include, ng-switch), which are used to conditionally display or hide the HTML DOM elements. Conditional display using ng-show/ng-hide The ng-show / ng-hide directives require a boolean value to evaluate the visual … Continue reading “AngularJS – Conditional Display using ng-show / ng-hide, ng-if, ng-include, ng-switch”

Single page application using AngularJS

Single page application is superior in terms of performance. It decreases load time of pages by storing the functionality, once it is loaded the first time. If you need to update small parts of page, it’s faster to focus only on these views and their data rather than reloading entire page. Some of the key … Continue reading “Single page application using AngularJS”

CSS3 Animation – Hover effects on icons

On the name of animation, flash automatically pops up in the mind, but flash is no longer required to create web-based animation. There are many stunning examples of CSS3 animation. Here, I have come up with the hover effects on the icons. These icon effects can easily be used by just copy paste in the … Continue reading “CSS3 Animation – Hover effects on icons”

Some good speed and performance optimization features in HTML5

Speed and performance optimization is very important in all the web products. HTML5 has lots of new and exciting features for both mobile and desktop applications. This post is focusing on the features that help to boost the speed and performance. Link prefetching Loading time is an important factor for a web product. Prefetch feature … Continue reading “Some good speed and performance optimization features in HTML5”

Some basic techniques to increase the website performance

In this competitive world, every company (brand) is trying to prove themselves different from others, where UX people are playing a good role by evaluating the market, competitors, and users. An application with great user experience have lots of study and research behind it. But is it sufficient, that an application have great user experience? … Continue reading “Some basic techniques to increase the website performance”

Responsive web design and images – Optimized images for normal and retina display

Adaptive image is not only to fit the image in large and small devices; it’s about contextual optimized image for normal and retina display. Responsive web design (RWD) has different context, like high resolution and low resolution display, high bandwidth and low bandwidth connections, high memory and low memory devices, small and large display, portrait … Continue reading “Responsive web design and images – Optimized images for normal and retina display”

Some cool CSS selectors’ addition in selectors level 4 – The future

The web is constantly evolving, Some modules of CSS3 has just started making its way, specs are still in development process and more advance level CSS modules have been drafted to evolve it further, which is being referred as “Selectors level 4”. Selectors have been with us since the beginning of CSS. Most awaited selector … Continue reading “Some cool CSS selectors’ addition in selectors level 4 – The future”

Performance improvement by writing efficient CSS selector

The web is moving from desktop to mobile and performance has become the key focus area in web development. All the UI Developers try to write maintainable, semantics and efficient CSS. But when UI developer becomes dogmatic about the standards, it cost the performance. I don’t mean here that; following the standards degrades the performance. … Continue reading “Performance improvement by writing efficient CSS selector”