3 tools to increase your web design productivity

Gone are the days when designing a site entailed starting from scratch with html and css. Now we have tools that take away the grunt work out of designing boilerplate code and other miscellaneous work, and lets you focus on what really matters, the end product. Below are a few good tools that will help you in designing and prototyping web and mobile products, whether working as a team or as a lone ranger.

Avocode

A web and desktop based service that helps both designers and front-end developers with building websites/apps from Photoshop or Sketch designs faster. Using Avocode designers can spend more time designing while developers will get quick access to all the design information and assets they need — various assets including colors, fonts, CSS, and images, all without using Photoshop or Sketch.

Note that Avocode is not a design tool and doesn’t allow you to create designs or prototypes. It is more of an organization tool for your designs and allows you to preview and inspect designs created in Photoshop/Sketch. You can export image assets, copy text and CSS, grab colors, gradients and fonts information, measure distances between elements, and save optimized image assets for production.

You can open and inspect Photoshop/Sketch designs without using Photoshop or Sketch at all. Or you can export image assets, copy text and CSS, grab colors, gradients and fonts information, measure distances between elements, and save optimized image assets for production. Avocode also provides plugins for both Photoshop and Sketch to directly sync your PSD design from within the program to Avocode servers.

http://avocode.com/
Price – Free,Paid

MarvelApp

Ever had an idea for your own app but never the skills to design or code it? Marvelapp lets you turn any sketch into an app demo in minutes, just draw your screens on paper, then take a photo using Marvel to link them together to form your prototype.

Marvel App is a quick prototyping tool to convert your Photoshop PSD sketches, images and mockups into realistic mobile and web prototypes. It supports almost any screen size, just add your images and it will display it in the right way. Built for designers, entrepreneurs, startups, agencies,etc. It doesn’t matter what level of technical or design skill you have, you’ll be able to create prototypes in minutes.

It’s super simple to get started, all you need is a pen and some paper!
– Draw your app screens on paper, whiteboards (or napkins!) then take photos of each screen using the app.
– Once you’re happy you can link each screen together using touch areas to form your app demo!
– You can share prototypes using Email, SMS or Twitter.
– Everything is synced with Dropbox and pushed to your Marvel web account which is automatically set-up for you at www.marvelapp.com, so you can easily share demos urls with various devices.

Marvel prototypes are viewable in web browsers, which means they work on desktop, iOS, Android and tons of other devices. Share via email, SMS or even embed your prototype onto blogs and portfolios. Just add any image from Dropbox and start linking them together. Marvel automatically recognises when you make changes to your designs and updates prototypes in the background. It also includes apps for IOs and Android for quickly turning sketches into working prototypes. Best of all it is free!

https://marvelapp.com/
Price – Free,Paid

WebFlow

Webflow is the first drag and drop editor that lets you build custom, responsive websites for mobile devices, tablets, and desktops – all in one unified interface. Webflow generates valid markup and stylesheets, so you can trust that the generated code is clean. Webflow automatically adds code to ensure your sites render consistently across different browsers. Webflow also allows easy collaboration with developers.

If your project requires extensive custom programming, you can always hand off your Webflow site to a developer. No more playing around with media query and other css spaghetti code. Webflow’s intuitive interface makes building responsive design a breeze and makes it painless to customize your design for any resolution. Just switch your canvas to a different device, and optimize your design for that resolution. No more digging through nested media queries.

https://webflow.com/
Price – Free,Paid