Meta Refresh 2014

On the construction of user interface on the web

The Design Superheroes who uses Modern Design Workflows

Submitted by Brajeshwar Oinam (@brajeshwar) on Tuesday, 19 November 2013

Section: Workshops Technical level: Intermediate Status: Confirmed & Scheduled


As a designer, while designing nice and beautiful interfaces, you should follow the “Don’t Repeat Yourself” principle by automating your task as much as possible. I’ll try my best to answer questions∗ that will help you become a much better designer.

I’ll take you through design workflows and tools that will make you a designer to be reckon with. I’ll introduce you to tools such as Yeoman, Bower, Grunt, Jekyll and make your life easier with processes such as CSS Linting, CSS compression, Javascript Uglification, Automatic Image optimization, complete with testing your design codes on the way.

∗ which you were afraid to ask.


A good designer can design nice, beautiful interfaces and can make the life of the users easy. A great designer will not only make it easy for the users but also for everyone involved, including the whole team - by writing production ready codes, which are easier to integrate with the developer environment and be ready to be shipped as part of the deployment process.

As a designer, you do not want to look at the final output and start hating your developers. You don’t want to be arguing with them - “that’s not how I designed it.” You should be able to own the design and be part of the process from the start to the end-result.

Let’s talk about;

  • A Command Line Tool - don’t be intimidated, we will just use few easy ones.
  • GUI Tools in lieu of the Command Line.
  • CSS Pre-processors - SASS, LESS
  • Yeoman, Bower, Grunt
  • Linting - CSSLint, JSLint

Finally, be friendly with the developers in your team, learn from them and steal their tools to make your life easier. It will not only make it easy for them, you can teach them a thing or two. In the end, everyone else will respect you for your work.


Visit the Site dedicated to this workshop -

Please be prepared and have the following;

  • Personal computer, running either Windows, Linux or Mac OS X.
  • Ruby installed and working.
  • Node installed and working.


Speaker bio

Brajeshwar believes in simplicity, pushes the envelop and envisions the betterment of usable and practical solutions.

Brajeshwar is a product manager/director and team leader with a deep appreciation of the relationship between meaningful design and powerful backend solutions. He's been a backend developer, turned front-end designer, with a proven track record of building products.

He has a proven track record of creating products and managing teams in multiple environments, ranging from startups to well established companies. On his journey, Brajeshwar has worked with some of the brightest teams, clients and investors.



Preview video


  • Sunit Singh (@surdattack) 6 years ago

    I think this is more suited for a workshop. Brajeshwar, would you be interested in extending this to a 3 hour session?

    • Brajeshwar Oinam (@brajeshwar) Proposer 6 years ago

      Sounds fun. Though I have never done a workshop and would need some guide with regards to that.
      Or I can speak and then continue into a workshop, if that is possible.

      • Brajeshwar Oinam (@brajeshwar) Proposer 6 years ago

        Ok. Do I just edit and convert this to a Workshop?
        Whom should I be in touch to discuss more on how a workshop is done and what should I be prepared for?

      • Kiran Jonnalagadda (@jace) Crew 6 years ago

        Workshops are before the conference, unfortunately.

    • Kiran Jonnalagadda (@jace) Crew 6 years ago

      Another +1 for making this a workshop rather than a talk.

  • Jitendra Vyas (@jitendravyas) 6 years ago

    This looks good but would you be able to cover everything you mentioned in 40 minutes?

Login to leave a comment