跳到主要内容

为2019年7月提供10个新的网页设计工具

Web design tools
+$(Image credit: iro.js.org)

+$Brand new web design tools and resources can help us to work smarter and faster, so its vital that we stay on top of the hottest new releases and updates. This month, we've got a varied list that is sure to serve up something to improve your workflow or get you learning something new.

+$Inspect elements with a pop-up box that appears on hover, use CSS Grid features without learning how to code it, edit Sketch files in Windows, browse hundreds of webapps without signing up... the means to do all of this and more are below.

+$If you'd like even more options than those found here, check out our bumper piece on the最好的网页设计工具+$of 2019 So Far.

+$01. Your Undivided Attention

Best web design tools: Your Undivided Attention

+$Learn why we need to move away from manipulative design patterns+$(Image Credit: TC)

+$Your Undivided Attention+$is a fascinating podcast. This episode scrutinizes the use of design patterns that manipulate human psychological vulnerabilities to hijack your attention. The hosts consider how technology is used to manipulate our choices, and upcoming episodes will have experts on election hacking and the dynamics of cults. There’s currently an episode with a former CIA officer and White House advisor who, noticing the increasingly polarised nature of US politics, joined Facebook to see if she could help improve public discourse. “Things didn’t go as planned.”

+$02. Lunacy 4.0

Best web design tools: Lunacy

+$Edit Sketch files in Windows+$(Image Credit: TC)

+$Lunacy 4.0+$is a free, native Windows graphic design application that works offline and supports .sketch files – it’s billed by the creators as "Sketch for Windows with design assets”.

+$Assets include thousands of icons in 22 different styles, illustrations from top Dribbble artists and a huge library of photographs. If you need to work on Sketch files but don’t use a Mac, this could be for you.

+$03. SVG Colorizer

Best web design tools: SVG Colorizer

+$Recolour a set of icons using any palette you like+$(Image Credit: TC)

+$SVG Colorizer+$is a really useful tool that enables you to recolour icon sets with another palette so that they match your interface. You can upload your own icons and create your own palettes, or you can use icons and palettes that are already built in to the tool. If a colour within the icons needs to stay, you can lock it using the palette running along the bottom. The tool recolours your icons by matching the lightness and darkness in the original colouration so that your new colour scheme makes sense.

+$04. CSS Scan 2.0

Best web design tools: CSS Scan

+$Inspect elements on any site on the fly with this browser extension+$(Image Credit: TC)

+$Instead of opening Dev Tools to inspect an element, you can use+$CSS Scan+$to view the CSS of any element you hover over – it appears in a pop-up view and you can copy all its rules with one click. CSS Scan is a browser extension that works on any website you visit in Chrome or Firefox (Safari support coming soon) and it’s great for finding out how your favourite sites are styled. You can use it to copy particular elements from themes or templates to adapt for your own use, and it’s great for debugging your own code.

+$05. Sizzy

Best web design tools: Sizzy

+$Instantly see how your design looks on multiple devices+$(Image Credit: TC)

Sizzy+$is a browser for web designers and developers working on responsive designs – it simulates lots of different devices so your code edits will appear instantly across lots of screens. The interface is highly customisable so you can choose which devices are displayed and rearrange them as you like. You can search for a particular selector and all the screens will immediately scroll to it, and you can make full-site screenshots from all devices, or just particular ones. Another useful feature is the sync setting which lets you scroll through all the devices at once.

+$06. CSS Grid Generator

Best web design tools: CSS Grid Generator

+$Use powerful CSS Grid features without learning the code+$(Image Credit: TC)

+$If you’re not using CSS Grid because you think it’s complicated to learn,+$CSS Grid Generator+$is a great way to dip your toe in the water. It allows you to use Grid features without having to learn how it all works.

+$Set the numbers and units of your columns and rows, drag in the boxes to add your divs and this tool will generate the code for you. Your basic grid will be up and running quickly, and if you choose to explore the more advanced features of CSS Grid you can do so at your own pace. Click 'What does this project do?' on the bottom right to see some resource recommendations from the creator.

+$07. Webframe

Best web design tools: Webframe

+$Browse inside hundreds of apps and compare their design and features+$(Image Credit: TC)

+$For many people the first stage of building a web app is browsing around similar tools to see how things have already been done, which can be time-consuming as you often need to sign up before you can start exploring.

+$Webframe+$gives you a faster way to do this. It’s a repository of screenshots from over 800 webapps that are organised into categories such as Landing, Pricing, Onboarding, Dashboards and so on, so you can see at a glance how other apps are handling these common features. Much of the material is usually only accessible after a sign-up, so it’s a big time-saver.

+$08. FYI product management resources

Best web design tools: FYI

+$Tune your marketing machine with these good templates+$(Image Credit: TC)

+$If you’re a product maker, at some point you’re going to end up doing some kind of marketing to get what you’ve made in front of an audience. The creators of+$FYI product management resources+$have explored document apps such as Trello, Coda and Miro and selected the best templates and other resources to help you tune your marketing machine to perfection. Whatever software you’re using, there will be something for you, and they’re organised into categories so you can find just the right thing for the process you need to work on.

+$09. A11y_styled_form_controls

Best web design tools: A11y

+$Style your form controls and stay accessible+$(Image Credit: TC)

+$Styling form controls such as radio buttons, checkboxes, range sliders etc. can be tricky, and the task is made even trickier if you want to keep things accessible for users of assistive technologies (you do).+$This repository of styled form controls+$can be used as a base for making things more stylish without messing up how your site is announced by screen readers or creating extra problems for any of your users. Each piece of code comes with a demo page and documentation that explains its use.

10. +$iro.js

Slick colour picker made with SVG 

+$Slick colour picker made with SVG+$(Image credit: iro.js.org)

+$Iro.js+$is a HSV colour picker widget for JavaScript that the creator put together after becoming frustrated with existing widgets being bloated, overly dependent on other things and generally not up to scratch. Iro.js is beautifully designed and built with SVG so it looks great on any screen size. It works on all modern browsers and devices, including touchscreens, and has a small footprint with no extra detritus attached to it. It also supports hex, hsl and rgb colour formats.

阅读更多:



翻译字数超限