Web Design Apps to Keep an Eye on for 2017
By PaperStreet on May 26, 2017 in Web Design Tips and Tools
It seems like every month there’s a new design tool introduced on the internet. Back in 2008, when I was first getting my start in the web design industry, none of these tools were around. These days, the web is growing exponentially and becoming more complex than ever before. Consequently, the need for tools to help facilitate the development process continues to grow at a rapid pace.
In this post, I’m going to list some of the latest design apps/tools that I’ve been keeping an eye on for 2017. Some of these tools I use in my day-to-day workflow while others I’m still considering.
Web design apps that are taking 2017 by storm.
Webflow (www.webflow.com)
This has to be one of my favorite tools at the moment. Webflow is a visual website design and development tool that allows designers to create a website without the need of a developer.
Instead of writing code, you manipulate the real, working website visually – just as you would with Photoshop or your favorite design tool. In addition, Webflow comes with really cool features like trigger based interactions, the ability to build 3D transforms visually and custom CSS transitions. Some other cool features include class based styling, pre-built components and turning anything into a reusable symbol.
Pros:
- Rapidly prototype a working website in minutes
- Easily view the design at various breakpoints right inside the app
- Generated code is clean provided you use semantic class names
- No more static mock ups
- Export sites to other platforms
- CMS, hosting and editor solutions are available for extra costs
Cons:
- It’s a web app, so you need an online connection to use it
- No code view until after you export your Webflow website
- If you add in a custom element you can’t use Webflow’s built-in UI styling controls to style that custom element
- Complicated eCommerce plugins and add-ons that aren’t already built-in
- The app has a learning curve to it
I’ve been using this tool to rapidly prototype solutions visually before even thinking about code. I then export what I’ve created in Webflow and continue to iterate upon it outside the app as I see fit. I’ve also seen this tool used to help designers learn more about frontend development in a less intimidating fashion.
Pinegrow (www.pinegrow.com)
This is a desktop app that lets you build responsive websites quickly with live multi-page editing, CSS styling and smart components for Bootstrap, Foundation, AngularJS and WordPress.
Simply put, this app lets you work with HTML files on your computer and it doesn’t add any frameworks, layouts or styles of its own to your code. In addition, you can even load up a live website by entering its URL and start editing it in real time. Pretty nifty for editing the CSS of server-generated pages and playing around with different templates. You can then save the modified changes locally to your computer and go from there.
Pros:
- Standalone application you can use without having to connect to the internet
- Visual editing capabilities
- Includes powerful tools such as Projects, Master pages, Partials and Smart Components
- Easily toggle between different breakpoints in real time while editing
- Has built-in support for Foundation, Bootstrap, WordPress and Angular
Cons:
- The app has a slight learning curve to it
- Small team working on it, so updates can come out slowly
- The UI is not the most aesthetically pleasing
I’ve been using this tool whenever I need to quickly prototype a website using either Bootstrap or Foundation. In addition, I use this app to see how other websites are set up and to quickly make responsive edits to an existing website that I’m working on.
Figma (www.figma.com)
This app just recently popped up on my radar. Figma is a multi-platform, UI design collaboration tool that includes a whole slew of features, including powerful vector editing tools that you would normally find in apps such as Sketch and Adobe Illustrator. In addition, Figma comes with awesome team collaboration features such as team libraries, shared components, live device previews, presentation modes, direct commenting on designs, slack integrated notifications, granular permission settings.
Pros:
- Built for UI work
- Built for teams, offering useful features like team libraries
- Offers streamlined communication within projects
- Live device preview, inspect, copy and export
- Multiplatform support for Windows, Mac and Linux
Cons:
- Requires an internet connection to use
- Doesn’t make me coffee
I have yet to use Figma in my own workflow but I hope to change that soon. Figma seems to combine all the solid aspects of InVision and Sketch while also providing solutions for teams by coming up with cool collaboration features all in one place.
I hope that you found this article helpful and gained insight into these newer design applications. Always remember that not every tool is the right one for the job, so be sure to use what make sense for your project.
