MetaRefresh (2014): The Design Superheroes who uses Modern Design Workflows

At the MetaRefresh 2014, I’m doing a 3+ hours workshop on how designers can leverage modern design workflows, weirdly titled – The Design Superheroes who uses Modern Design Workflows.

Today, the rate at which Front-End Development Tools and Utilities gets introduced are mind boggling. It is indeed quite hard to keep up. Getting familiar with few of these tools and mastering it will help designers get things done quicker, better, produce optimized results and participate with the whole team – contributing to writing production ready codes and be able to run repeatable task easily. The result will be that designers can concentrate, focus and dedicate more time on designing products, applications and systems instead of just ‘making things work.’

MetaRefresh 2014 Workshop

MetaRefresh 2014 Workshop – The Design Superheroes who use Modern Design Workflows.

The purpose of this workshop is to initiate and ignite that idea amongst designers who code and breath life to their static designs. Check out the Workshop’s Companion Site for more details.

It will be a long way after this workshop for a designer to become a ‘superhero’ in design but it should be a good start.

Introducing Acorn WordPress Theme at Theme6

After multiple delays and hesitations, I have finally released Theme6, a site dedicated to carefully crafted and well designed themes and templates. I’m lucky to have partnered with an awesome designer – Saneef Ansari. Our first release is a Typographically tailored theme for WordPress – Acorn.

Acorn is a mobile-first, retina-ready responsive theme focused on typography and content. It is designed to be clean, simple, minimal and to stay out of the way to focus full attention to your blog posts, articles and content.

Our idea is to keep it as simple as possible, without the need for any additional plugins nor custom fields. It would work without any special need to add/edit the contents of the blog posts or articles.

We are thrilled and would be adding more well designed themes in future.

How to be a User Interface & Experience Designer

Today, I read some good answers on a Quora about what resources are the best to be a good User Interface and Experience Designer. The reply from Colm Tuite really stood out.

First, let’s look at what are User Interface and Experience Designs.

Most people make the mistake of thinking design is what it looks like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works. – Steve Jobs

User Interface (UI) design is the design of websites, computers, appliances, machines, mobile communication devices, and software applications with the focus on the user’s experience and interaction. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals – what is often called user-centered design. Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design may be utilized to support its usability. The design process must balance technical functionality and visual elements to create a system that is not only operational but also usable and adaptable to changing user needs.

User Experience (UX) is any aspect of a person’s interaction with a given system, including the interface, graphics, industrial design, physical interaction, and the manual. In most cases, User Experience Design fully encompasses traditional Human-Computer Interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users.

Continue reading

How to use Icon Fonts the right way

Icon Fonts are a smart way to deploy scalable icons in your website and web app design projects. They are treated as part of your text and so you can apply all the properties you apply to a text – size, color, text-shadow, transparency, transform, etc.

You might have used some of the icon fonts, such as – Font Awesome, Entypo, IcoMoon, Symbolset, Typicons, Iconic, Zocial, Linecons, Elusive Icons etc.

The easiest and simplest way to use them is to dump the font variants, drop in the icon style classes and use them in your html with an <i class="icon-myicon"></i>. However, with this method, you’re forcing your users to download the whole font, when you actually use just a few of the icons.

Continue reading

Stop torturing yourself with plain CSS, code with a CSS pre-processor

First, let me tell you, I’m pretty good with CSS. However, I’ve always hated writing CSS. Writing CSS is like using dried woods, leaves and rocks to lit a fire everything you need to cook something. You may become very good with it, but it’s an unforgiving task and you’ve to do the rigorous feat every time you need the fire. CSS is bland, dumb, linear and it’s utter lack of intelligence is derogatory even to the most novice coder.

Many designers and developers have urged the need for variables, constants or at-least some rudimentary intelligence. But it is unlikely, a far-fetched dream and is not happening anytime soon. And, there is the often dreaded math you have to do every time you write CSS grids/columns.

Continue reading

10 principles of “Good Design”

Good design:

  1. Is innovative – The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.
  2. Makes a product useful – A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasizes the usefulness of a product whilst disregarding anything that could possibly detract from it.
  3. Is aesthetic – The aesthetic quality of a product is integral to its usefulness because products are used every day and have an effect on people and their well-being. Only well-executed objects can be beautiful.
  4. Makes a product understandable – It clarifies the product’s structure. Better still, it can make the product clearly express its function by making use of the user’s intuition. At best, it is self-explanatory.
  5. Is unobtrusive – Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.
  6. Is honest – It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.
  7. Is long-lasting – It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.
  8. Is thorough down to the last detail – Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer.
  9. Is environmentally friendly – Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product.
  10. Is as little design as possible – Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.

Source: Dieter Rams’ ten principles of “good design” – Wikipedia.