The best web design tools: Photo by Jeff Sheldon on Unsplash
+$(Image credit: Photo by Jeff Sheldon on Unsplash)


+$There are plenty of great web design tools available right now. No matter what you're trying to do, chances are, there's a tool designed to help you out. With new web design tools being released all the time, and competition rising, the bar is continually rising when it comes to what our tools can do, too.

+$While all this is great news for web professionals, it does mean it's increasingly difficult to pick the tools that will suit you and your workflow. In this article, we've rounded up what we think are the best web design tools available right now, to help you out. These tools will all help you become more streamlined, inventive and creative in your work. You'll find everything from UI and prototyping tools to dedicated creative software and everything in-between.

+$And if that's not enough, don't miss our round ups of the+$best web hosting services+$best Website Builders+$for 2019.

+$Some of the tools listed below will be very familiar, others may be new to you. But each has the potential to save you time, energy and budget in your web design work.

+$01. Sketch

+$Sketch has replaced Photoshop as the UI design tool of choice for many web designers [Image: Bohemian Coding]

+$We’ll start with an obvious one. Yes, we know everyone’s heard of草图+$– Bohemian Coding’s vector UI design tool – but anecdotally it seems there are still a lot of web designers relying on Photoshop for UI design (and that's despite the release ofAdobe XD,Adobe的原型设计和线框工具 - 新增功能之一创意云)。

Rory Berry,创意总监Superrb+$, made the switch to Sketch in 2017, and highly recommends it. “Compared to Photoshop, sorting all your documents and making revisions on Sketch is much easier,” he begins. “Sketch has small documents whereas Photoshop has large ones. Due to it being a vector-based app, the file sizes are dramatically smaller compared to Photoshop.”

而这还不是全部。 “Sketch中的内置网格系统非常棒,使界面设计更加容易。我认为整体用户界面和最小的感觉使设计更加清晰,用户友好。相比之下,Photoshop似乎非常复杂。“

Sketch社区提供数百个插件+$to make a designers work flow easier and smoother. If you tried Sketch a long time ago and didn't like it, you may want to try out the latest iteration of Sketch, version 52, which includes a totally redesigned interface, new features for designing with data, and a new Dark Mode for macOS Mojave.

+$One potential downside is that Sketch is only available on Mac. If you want to share Sketch files with those not using OS X, you'll need to explore additional software or conversions, or work from flat JPGs.


+$02. UXPin

UXPin: web design tools

+$UXPin lets you prototype with interactive states and logic

+$(Image Credit: UXPin)

+$The next web design tool in our list is UXPin. This dedicated prototyping app is available for Mac, Windows, or in the browser. With most other design tools you can only mimic interactions by linking different elements on your artboard, UXPin gets closer to the code and enables you to work with interactive states, logic, and code components.

+$There are integrated element libraries for iOS, Material Design and Bootstrap, plus hundreds of自由图标集+$, to help you on your way. UXPin has also recently introduced accessibility features to ensure your designs stay in line with WCAG standards, which we applaud.

+$API Request is the latest addition to UXPin's Interactions capabilities. The feature enables you to prototype app that 'talk' to your products from directly within your design tool - with no need for code. It works by enabling you to send HTTP requests to an external API.

+$You can create your first prototype inUXPin+$for free, and if it suits you switch to a paid monthly subscription (team memberships are available). UXPin recently improved its integration with Sketch, so it could be one to introduce into your workflow if you're a Sketch fan that finds its prototyping capabilities limiting.

+$03. Adobe XD

+$Adobe XD has a light interface that allows you to prototype with ease

+$(Image Credit: Adobe)

+$Adobe's vector design and wireframing toolAdobe XD+$keeps getting better, with additions such as support for语音原型+$ensuring the tool can keep up with the latest trends in UX. XD includes drawing tools, tools that enable you to define non-static interactions, mobile and desktop previews, and sharing tools for giving feedback on designs. It allows you to select a device-specific artboard size for starting a project, and you can even import a popular UI kit, for example Google’s Material Design.

+$Crucially, Adobe XD integrates with the rest of Creative Cloud, which means you'll be able to import and work with assets from Photoshop or Illustrator easily. If you already use other Adobe apps, the UI will feel nice and familiar and shouldn't present too much of a learning curve.

安德烈罗布+$, design director at Robu Studio in Barcelona, is among its fans. “For quick mockups it's great,” he says. “It’s a very light interface, with lots of photos loaded in, and great for moodboards. The prototyping is very useful to show clients how stuff works, especially because you can push the content online right away.”

+$Ellis Rogers, graphic designer at接待有限公司+$also recommends it. “When the design/prototype or wireframe is complete, Adobe XD allows you to very quickly select elements and create page transitions for a working prototype, which can be shared via a link," he explains. "The link also allows you to gather feedback per page, keeping it all organised. The link can be updated within Adobe XD so the client can always see the latest version without having to worry about incorrect versions. It's an absolute joy to work with.”

+$04. Figma

+$Figma allows you to design, prototype and gather feedback with other designers in real time [Image: Figma]

FIGMA+$is an interface design tool that enables multiple designers to collaborate in real-time. It’s available in the browser, or on Windows, Mac or Linux, and there are both free and paid versions depending on what you use it for.


“Figma有一个类似于Sketch的USP,除了是跨平台,”前端设计师解释道本杰明读。 “当我用它为一篇文章创建几个图标时我们的网站我发现工作流程非常顺畅。我花了很多时间学习并获得了协作的额外好处:你可以在应用程序中与其他人共享图形。“

“我一直在努力为我的工作切换到Linux,有时我们使用Windows,因此Figma从实用角度对我有意义,”他补充道。 “相比之下,我发现许多其他平台的工具都不足。”

自由职业者内容作家和艺术家大卫伊斯特伍德关于Figma也有好话。 “当我们需要快速模拟MVT时,它也是一个非常有用的工具;有时是对现有布局的少量补充。我们喜欢您可以快速创建桌面,平板电脑和移动设备。“

+$05. Affinity Designer

web design tools: Affinity Designer on iPad

+$Affinity Designer is as powerful on iPad as it in on desktop [Affinity Designer]

+$"Serif's亲和设计师+$has been dubbed the 'Photoshop killer' by some, and it's easy to see why," says product designer丹爱德华兹。 “我的第一印象是该应用程序设计精美,感觉就像是一个专门的网络和图形设计工具。




Affinity Designer现在也可以使用对于iPad。请注意,这不是您可能期望的缩小版移动应用程序版本:它与您在桌面上获得的完整版本相同。

不要错过我们的使用指南像素角色出口人物钢笔工具在亲和设计师。另请注意,Affinity可以替代Photoshop,亲和照片和InDesign替代方案,Affinity Publisher;所有这些都很好地融合在一起。

+$06. Flare

+$Flare is a new tool for designing and animating vector art [Image: Flare]

闪光+$is a browser-based tool from 2Dimensions that helps you design and animate vector art. Aimed at both web designers and game designers, it lets you work directly, in real time, with assets that run in your final product, eliminating the need to redo that work in code. So it should simplify your process enormously and save you a bucketload of time.

最重要的是,它可以作为开放设计运动的一部分免费下载。你可以看看Ahmed Tarek是如何用它来创建一个app动画的本教程

+$07. Vaunt

+$Vaunt is a nifty tool for extracting the dominant colours from an image [Image: Vaunt]

+$Want to match your website’s colour scheme to a particular image? Then you may well find+$handy. It's a free Mac app that uses a clustering algorithm to analyse your images and lets you know which colours are dominant in a picture, so you can use that information in your design.


+$08. Verifier

+$Fake email addresses registered to disposable domains are the scourge of online communities, and this deceptively simple tool can be your site's Batman.+$Verifier+$can be dropped into the email sign-up on your site, where it checks through a list of over 18,000 disposable domains in an instant and lets the user know if they need to provide a real address to sign up. It also checks that the domain of the address is valid and exists, and that the syntax is correct.

+$With a free forever API key, Verifier could be an important step in crushing the spammer blight in online communities – something that its creator is very passionate about. The Sisyphean task of cleaning up the web starts right here.

+$09. Squoosh

+$Google's tool makes it easier to compress images to the appropriate level [Image: Squoosh]

+$Launched Last November,Squoosh+$is a free app from Google that’s aimed at helping web designers compress their images without sacrificing quality. You drag and drop your image into the app and use a slider to play with the amount of compression, so you can quickly find a good balance between picture quality and file size.


+$10. Linksplit

+$Linksplit makes it quick and simple to set up A/B testing [Linksplit]

+$The most effective way to make your website better is through A/B testing: splitting traffic between two or more different versions and seeing which performs better. AndLinksplit+$makes it a lot easier to set up. It’s free for the first 10,000 clicks, and you don’t even have to sign up to get started.


+$11. Anime

+$Spice up your apps with this animation engine [Image: Anime]

+$Although web page animations have at times got a bad rap, developers are always looking for ways to make things easier. CSS animations and transitions have been a huge step forward, but more complex interactions often require a library.动漫+$is a new animation engine you’ll want to take a look at if you need to add complex animated components to your apps.


var myAnimation = anime({targets:['。box1','。box2'],translateX:'5rem',rotate:180,duration:3000,loop:true});

此代码定义了要设置动画的对象以及动画的细节。 API允许您使用CSS选择器,DOM元素甚至JavaScript对象来定位元素。

作者Julian Garnier提供了一个CodePen集合,演示了库可以做什么,以及完整的文档GitHub上

+$12. Avocode

+$Avocode helps you code websites or apps from Photoshop or Sketch designs [Image: Avocode]

+$Avocode makes it extremely easy for frontend developers to code websites or apps from Photoshop or Sketch designs. It's built by the same team that brought us CSS Hat and PNG Hat, so it's not surprising they've taken the exporting process one step further here. Although previous apps have allowed you to export assets, what makesAvocode+$really special is that you can use its Photoshop plugin to sync your PSD into Avocode with just one click.


您还可以单击设计中的元素,然后将代码复制并粘贴到您选择的文本编辑器中。 “它为用户提供了编码所需的一切 - 设计的预览,以及对所有层和出口资产的访问,”Avocode联合创始人说。Vu Hoang Anh。 “最好的事情是开发人员根本不需要Photoshop或Sketch。当前的工作流程真的很糟糕,这就是我们创建Avocode的原因。”


+$13. Zeplin

+$Zeplin translates Photoshop or Sketch files into a free Mac, Windows or web-based app [Image: Zeplin]

您是否发现将设计资产移交给开发人员可能会有点麻烦?詹姆斯斯蒂夫当然可以。 “他们并不总是共享相同的软件,”他指出,“所以那些精心分层和注释的Photoshop模型最终会变成扁平的文件,而且翻译中的东西不可避免地会丢失。”

Zeplin+$mitigates this painful experience by translating Photoshop or Sketch files into a free Mac, Windows or web-based app. “The best part is that Zeplin provides quick reference for the colours, dimensions and fonts from your designs,” says Stiff. “It even generates CSS and style guides. I've found Zeplin to be a massive time-saver and my developer friends seem to really like it too.”

+$14. Pattern Lab

web design tools: Pattern Lab screengrab

+$Pattern Lab is based around Atomic Design [Image: Pattern Lab]

Pattern Lab是由Dave OIsen和Brad Frost创建的漂亮的图案驱动设计工具。它基于的概念原子设计,它说你应该将你的设计分解成最小的部分 - 原子 - 并将它们结合起来形成更大的,可重复使用的成分 - 分子和生物 - 然后可以变成可用的模板。

+$Although at its core it's a static site generator that stitches together UI components, there's much more to模式实验室+$than that. It's language- and tool-agnostic; it enables you to nest UI patterns inside each other and design with dynamic data; it features device-agnostic viewport resizing tools to help you ensure your design system is fully responsive; and it's fully extensible so you can be sure it'll expand to meet your needs.

+$15. Vivaldi

+$Vivaldi is the most customisable browser you can find [Image: Vivaldi]

+$Sometimes the best web design tool can be something as simple as a new browser.维瓦尔第+$is a fast, customisable web browser for power-users built by some of the people who started Opera. Dubbed 'a browser for our friends', Vivaldi is built using web technologies. JavaScript and React were used to make the user interface, along with Node.js and lots of NPM modules.


+$16. Firefox Reality

+$Firefox Reality is a browser especially for VR devices

+$If you’re working in webVR, you’ll want to check outFirefox现实+$, a browser for virtual reality devices such as Viveport, Oculus and Google Daydream.


+$17. Canva

+$Canva is a popular tool for quickly creating social media images and infographics [Image: Canva]


“Canva非常适合制作漂亮的图像,”Harmer说。 “图像是进入网站和社交媒体灵魂的窗口,因此像这样的工具可能是成功的关键。”

+$18. Web design proposal tool

+$Generate web design proposals easily with this free tool [Image: Beewits]

+$Beewits has a nice line in tools to make the business side of web design easier, namely its网页设计报价生成器每小时费率计算器+$. Here we focus on another superb free app from the same team: the self-explanatory网页设计提案工具

“它本质上是一个简单的'Proposify'工具,可以让您快速轻松地制作提案,”Beewits的David Attard解释道。 “这是一个美化的表单,允许您输入和更改设置文本,然后创建一个Word文档,可以直接发送到客户端。”或者,您可以不使用模板输入自己的文本。


+$19. CodePen Projects

+$This tool lets you build websites directly inside CodePen

CodePen由Alex Vazquez,Tim Sabat和Chris Coyier于2012年创立,现已发展成为网络上最大,最活跃的社区,用于测试和展示HTML,CSS和JavaScript代码片段。在它的前五年,它既可以作为在线代码编辑器,也可以作为开源学习环境,开发人员可以创建代码片段(“笔”),测试它们并获得反馈。

+$Then in 2017, CodePen took another big leap forward by launching its own IDE (Integrated Development Environment),CodePen项目+$, which enables you to build websites within your browser.


请注意,尽管它的工作方式与笔式编辑器类似,但CodePen Projects并不能替代后者,而是与它一起使用。您可以在中查看有关CodePen项目的更多信息这篇博文

+$20. Bootstrap

+$Old favourite Bootstrap has some powerful new updates [Image: Bootstrap]

引导+$is certainly not a new tool. But it has revolutionised development and there’s no doubt the ubiquitous framework will continue to shape how we build stuff on the web. Each update also brings a complete overhaul of the tool.

+$The latest version, 4.3.1, launched in February 2019. This was a relatively minor update that built upon the slew of new features introduced first in v4.2.1, including  a new spinner loading component, a new toast component for displaying notifications, a new iOS style switch, touch support in the carousel component, and more. Check out the full feature set在Bootstrap网站上找到了我们的指南中最好的免费Bootstrap主题

+$21. Ally.js

web design tools: ally.js

+$Don't overlook accessibility – use ally.js

+$(Image credit: Ally.js)


Ally.js+$is a JS library that gives you fine control over focusable and non-focusable elements. For example, using its API you can prevent elements outside a modal window from receiving focus until the modal is closed. You can also find out exactly which elements are focusable or tabbable, and identify focus changes within the shadow DOM.


+$22. Type Nugget

+$Type Nugget gives you greater control over your typesets [Image: Type Nugget]

键入Nugget+$addresses a need you’ll have on just about every frontend project: dealing with CSS typography. Still in beta with more features in the works, it’s an online typesetting tool that gives you fine control of type styles.



+$23. ARKit

+$Create augmented reality experiences for iOS 12 devices with Apple’s ARKit 3 [Image: Apple]

+$Augmented reality – blending digital objects and information with the environment around you – is a space that’s generating a lot of excitement in the web and app development community right now. Not least because of Apple'sARKit+$, a framework that allows you to easily create AR experiences for iPhone and iPad.

+$With ARKit 3 on iOS 12, your AR apps can now be experienced by multiple users simultaneously, and resumed at a later time in the same state. You can also incorporate real-world objects into your AR experiences, giving your users even greater immersive opportunities. And People Occlusion allows AR content to realistically pass behind and in front of people in the real world, making AR experiences more immersive while also enabling green screen-style effects in almost any environment.

+$24. Vue.js

+$Not used to complex JavaScript libraries? Vue.js is perfect for you [Image: Vue.js]

+$What would a list of new web tools be without a JavaScript framework?Vue.js+$, like React, is a framework for building user interfaces, and utilises a virtual DOM. As the name suggests, Vue’s core library is focused on the view layer.



在该示例中,我使用数据填充段落并定义reverseMessage方法。 Vue非常适合那些经验不足的复杂库,但也有许多插件可以帮助开发复杂的单页Web应用程序。

{{ 信息 }}

var myApp = new Vue({el:'#example',data:{message:'Hello Vue.js!'},方法:{reverseMessage:function(){this.message = this.message.split('') .reverse()。join('')}}});

+$25. Adobe Comp

Adobe Comp+$is a fantastic web design tool for the iPad that assists in the creation of wireframes, prototypes and layout concepts for web pages. A Creative Cloud-powered intelligent sketchpad, if you like. It has basic templates for a number of layouts for mobile and web, and even print if that's your thing, and you can create quick placeholders by drawing intuitive shapes to represent images, text and more.

+$Bewilderingly, Adobe has not seen fit to include direct export to XD – crazy! – despite+$a Long-standing Request+$that has been under review for what seems like forever. However, exporting to Photoshop is built-in (along with Illustrator and InDesign), and once tweaks to your mockup are made in the ubiquitous image editor you can then export from there to XD. Despite this unwelcome extra step in the Adobe devotee wireframer's user journey, Comp fully deserves its inclusion in this list with its go-anywhere capabilities, ease-of-use, and impressive UI.

+$26. Hologram

+$This Mac app built on A-Frame lets you create WebVR experiences without needing to code [Image: Hologram]

全息照相+$is an all-in-one tool for WebVR creation. This free desktop app requires no previous coding knowledge, and its native Google Blocks integration enables you to play with lots of free 3D objects right off the bat. Under the hood, Hologram takes full advantage of the power and simplicity of A-Frame, Mozilla’s WebVR framework.


+$27. Parallax SVG Animation Tools

+$This set of tools makes it easier to create complex sequences of SVG animation [Image: SVG Animation Tools]

由Gareth Battensby创建视差+$SVG Animation Tools+$is a range of SVG animation tools in the form of a Python script. “I built the tools as a response to the frustrations you get when creating complex or long sequence SVG animations,” he says in this解释性博客文章

“当你从Illustrator重新导出时,其中最重要的是被覆盖的编辑。这些工具完全消除了这个问题 - 它们非常适合使用GSAP或类似动画库为SVG图形制作动画的前端开发人员。“

+$28. Quill

+$Quill is a flexible rich text editor with a powerful API [Image: Quill]

+$There are lots of different contexts in applications where a rich text editor is needed. And鹅毛笔+$, built firmly with the modern web in mind, is currently our clear favourite.



+$29. URL To PDF

+$Convert HTML into PDFs automatically with this API [Image: URL to PDF]

+$Brought to you by Alvar Carto,PDF的URL+$is a self-hosted API that enables you to convert your HTML into PDFs, so it’s handy for rendering receipts, invoices, or any other HTML content. The API ignores a page's @media print CSS rules by default, and sets Chrome to emulate @media screen, to make the default PDF look more like the actual site. You can set it to operate automatically at regular intervals and best of all, it’s free.

+$30. IotaCSS

+$iotaCSS is a CSS framework with a difference [Image: iotaCSS]

IotaCSS+$is a CSS framework that’s been purposely crafted to be design-agnostic. It was created by consultant frontend architectDimitris Psaropoulos谁觉得其他CSS框架对他合作的设计师施加了很多限制。这迫使他要么在顶部编写大量代码,要么让设计师妥协。相反,他创建了自己的框架,其工作方式略有不同。


+$31. Launchpad

+$Launchpad lets you design websites in Sketch and then launch them; no code required [Image: Anima]

发射台+$is a plugin from Anima that lets you publish responsive websites directly from Sketch, with no coding required. The entire interface is integrated into Sketch. If you're currently designing responsive pages in Sketch and then handing them over to a developer, then giving this cool tool a try is a complete no-brainer.

+$See out post on素描插件+$for More Options.

+$32. React Sketch.app


React Sketch.app提供了一种在大型设计系统中管理Sketch资产的超级简便方法。由Airbnb团队建立,以帮助弥合设计师和工程师之间的差距,它基本上是一个开源库,允许您编写渲染到Sketch文档的React组件。

因为反应Sketch.app+$uses Flexbox, its components can have the same rich layout as your real components. That means no more dragging rectangles by hand; everything works like your target layout engine.

然后,使用React Sketch.app可以轻松地将数据提取并合并到Sketch文件中。它还提供了一种在Sketch之上构建自己的自定义设计工具的简便方法。您可以了解有关其工作原理的更多信息这个帖子并通过以下本教程

+$33. SVGito

+$This free app saves you having to manually edit SVG files [Image: SVGito]

SVGito+$is a free web app that cleans up your SVG files, to save you the bother of manually editing them. Created by彼得诺维尔,这款简洁的小应用程序只需按一下按钮即可自动优化您的SVG,并且通常可以减小其尺寸和复杂程度,而无需改变它们在屏幕上的实际外观。


+$34. Sizzy

+$Sizzy allows you to preview multiple screens during app testing [Image: Sizzy]

Sizzy+$is a tool that allows you to preview multiple screens at once while you’re testing out your responsive web apps.

创造者Kristijan Ristovski之前一直使用react-storybook在每个组件的不同变体之间切换。但他很烦恼不得不在这么多设备之间来回走动。因此他构建了Sizzy,它允许您同时查看所有更改,使得更快更容易发现并修复布局错误。


+$35. Foundation For Emails 2

+$Create responsive HTML emails with Foundation for Emails 2 [Image: Foundation for Emails 2]

电子邮件基金会2+$is a framework from ZURB formerly known as Ink. It is used for creating responsive HTML emails that work on just about every platform and service, bundling together email coding best practices. The latest iteration uses a Sass codebase that gives you access to a settings file, wherein you can define all sorts of defaults to suit your needs.