1425999509 1407226492 lego

Kick Off UI Development With These Simple Steps

Nowadays, UX and design are critical for every web app. If you want your web app to be used by anyone - even if its highly functional - it must be designed well.

Every project is different, but there are a few steps that you should go through every time you kick off UI development.

Choose your front-end framework

Before you choose your front-end framework, you need to first decide if you even need one. Here are some pros and cons of using one:

Pros
  • Quick and easy - developing the UI is much quicker and easier with a framework since it already includes reset, base CSS and reusable components.
  • Browser support - frameworks are tested across many different browsers and operating systems (popular frameworks support all modern browsers and IE9+ and they can be hacked to work with IE8)
  • Grid system - good designs have grids, same thing with a good framework
  • Responsiveness - most modern frameworks are mobile-first or at least mobile-aware
  • Resources - front-end frameworks have more and more users. This means there are more sites, blog posts or stack overflow answers connected with them
Cons
  • Most websites based on frameworks look the same - you can easily notice a lot of sites with uncustomized Bootstrap (of course it’s not a rule. You can use frameworks for very custom designs)
  • More production code - It’ll probably have lots of CSS code (you can’t customize everything, sometime you have to override default selectors) and more HTML code since you have to use grid classes
  • Difficulty upgrading - i.e migrating from Bootstrap 2 to 3

If you do decide to use one, you’ve got plenty of options. At Netguru we mostly use Boostrap 3 or Foundation 5. Each of them has theirs own pros and cons. I won’t compare the two in this post, but @felippenardi wrote about core differences and summed it up in once sentence:

Bootstrap tries to give you everything you’ll ever need to bootstrap your project. Foundation just gives you the foundation.

Besides Bootstrap or Foundation you can check: framelessgrid, inuit.css, pure.css. Or, you can use one of the many similar ones: usablica or Mashable.

Customize your framework

Both Bootstrap and Foundation use preprocessors. That means you can easily customize it by either:

  • using online customizers and downloading customized CSS code (Bootstrap, Foundation) or
  • compiling your framework in your app with already customized elements (much easier to maintain)

Add mixin library

Add a mixin library for keeping your code DRY. Two great examples are Compass and Bourbon. They provide a lot of cool features that work out of the box, and what’s more, these tools don’t make your production assets heavier.

Cross-browser prefixers

Both libraries make writing cross-browser compatible code much easier by implementing prefixers:

You write something like this

There is even a mixin for creating your custom prefixers!

Set of functions and addons

Besides prefixers, Bourbon and Compass define a set of useful functions (i.e. converting pixels to rems, math functions and others). Some of these are included in frameworks like Bootstrap or Foundation as well.

The features mentioned above are only small part of Bourbon possibilities. Visit Bourbon or Compass docs more.

Extend Bourbon or Compass

Bourbon and Compass are both great for prefixing, but when it comes to code-shortening mixins, I sometimes prefer my own custom solutions:

Sizing

It’s very comfortable for setting both height and width:

Shapes

Squares and rectangles are covered with the size mixin. I use circles and rounded squares a lot as well so why not create mixins for them?

Then it’s very easy to create shapes like these:

s3

Positioning

I was experimenting with this one a bit. I’ve tried two different solutions before I ended up with a mixin very similar to Hugo Giraudel’s mixin.

Margin/padding style

Ruby hash style (with Sass maps)

The part I don’t like the most in this one is necessity of of using double parenthesses (( )).

My current mixin

As mentioned above, I ended up with this simple mixin:

Then, I just include it and it works perfectly:

@media mixin

I’m also using mixin for RWD which I covered in this blog post.

Conclusion

Kicking off UI development for your new project can be harmless and fun. The only rule here is “use the right tool for the right job”. What is your flow when starting new project? What tools do you use? Feel free to share it in comments section.

PS. Check out our checklist for launching a new project and see how this simple yet powerful tool can help you with keeping the workflow efficient!

On 13.08.2014 in CSS and Dev