Website design is not an easy task: a lot of things should be taken into account, and it’s important to optimize pages for different desktops and devices. There are many tools to help you with color schemes, menus, mockups and other aspects. Meet 10 useful tools for convenient web design.
If HTML5 <datalist> widget disappoints you because of poor integration across browser and lack of customization, try Awesomeplete. This tool provides a lot of options for customization, minified to 1.5 KB, and works with many browsers (with IE10+, Chrome, Firefox, Safari 5+, Mobile Safari, etc).
This is an intellectual color scheme generator. If you don’t know what palette to use in your site, just launch Coolors and start moving the mouse over the bars and either choose a color code, or drag sliders to define starting colors. After that, the tool will offer a suitable color scheme. If you don’t know what scheme to use, a system may figure out a random scheme for you. It may include as many colors as you like until a perfect combination is generated.
3. CSS Devices
This resource generates CSS iOS devices for mockups. Simply select the model, color and size of iPad or iPhone, and you will get a CSS file for a prototype. It also features Apple Watch generator.
This is a free CDN (content delivery network) that is created for front-end developers to work with different tools like Grunt, Gulp, Browserify and npm. The network may be used indirectly, it has a lot of useful features like 404 page fallback, URL clean, etc. Surge creators claim that their network will be preferable to Amazon S3 and Github Pages, because it is created specially for front-end developers.
5. Color Safe
It is a disaster when you create a great color palette, and find out it is not accessible in a website. Color Safe allows creating color schemes that are both aesthetic and accessible. Simply select the size of font and background color, and the tool will figure out right text colors and contrast ratio so that the text was visible on your pages.
This fantastic tool allows making animated circle pie menus. It generates the code and gives instructions for customization. Using the interface you can select the type of pie you need and get explanation how to style, animate and implement the menu on your app or page. If you don’t know whether pie menu will be suitable for your website, there is a section of user experience considerations.
7. What does my site cost?
Mobile Internet can be expensive in some countries, and it is better for you to know how much it costs to download your pages for one user in some certain region. Thanks to the tool What does my site cost? You can calculate the cost. Enter your URL, and you will see for how the cheapest mobile plan allows loading your site on user’s device. The tool shows that the cheapest mobile Internet is in Britain, while Germany and Switzerland provide quite expensive mobile net connection.
Want to create your own font? It’s possible with Metaflop that features a slider which adjusts parameters of the font. Select aperture, height, pen width, unit width, etc. and generate your own font. It is based on metafont language and does not require coding. When the letters are ready, you can download your font as a webfont or .otf file.
9. CSS Ruler
Work with lengths in CSS may be difficult, because you need to take into account different measurements. With CSS Ruler you can compare all characteristics on a grid. Read a detailed guide on CSS Tricks and you will use the tool without any problems.
This is a useful script that transfers Illustrator files into CSS and HTML. You can export an SVG file or an image, but they are difficult to edit, and text is not easily customizable. Thus, HTML is a good choice. To understand whether the tool is suitable for your case, click on Limitations sector.
With these tools you will deal with web design easier and make your site look perfect.