Meta Refresh 2014

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.

Outline

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.

Requirements

Visit the Site dedicated to this workshop -
http://brajeshwar.github.io/metarefresh-2014-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.

Resources;

• https://www.ruby-lang.org/
• http://rubyinstaller.org/ (Ruby Installer for Windows)
• http://nodejs.org/download/

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.

Links

• http://brajeshwar.me
• http://www.linkedin.com/in/brajeshwar
• http://github.com/brajeshwar/
• http://twitter.com/brajeshwar
• https://funnel.hasgeek.com/metarefresh/242-be-a-ninza-css-coder-with-css-preprocessors-stylus-less-sass

Slides

http://brajeshwar.github.io/metarefresh-2014-workshop/