11 новых профессиональных веб-инструментов для дизайнеров

Библиотека инструментов для веб-дизайнеров
Библиотека инструментов для веб-дизайнеров

Пред­став­ля­ем новые про­фес­си­о­наль­ные инстру­мен­ты для веб-дизай­не­ров, кото­рые помо­гут сэко­но­мить вре­мя и день­ги. С помо­щью этих сер­ви­сов вы може­те созда­вать дизайн сай­тов, отдель­ных эле­мен­тов или визу­а­ли­зи­ро­вать дан­ные.

Поделитесь этой библиотекой инструментов с коллегами

1. Typegenius

Сервис Typegenius поможет вам подобрать идеальное сочетание шрифтов для проекта.

Сер­вис Typegenius помо­жет вам подо­брать иде­аль­ное соче­та­ние шриф­тов для про­ек­та. Пер­вый шаг – выбор основ­но­го шриф­та. Далее сер­вис сам под­бе­рет вам шриф­ты, кото­рые будут луч­ше все­го соче­тать­ся с основ­ным.

Сайт: Typegenius

2. Preloaders.net

Preloaders.net - бесплатный генератор анимированных GIF и APNG прелоадеров

Preloaders.net – бес­плат­ный гене­ра­тор ани­ми­ро­ван­ных GIF и APNG пре­ло­аде­ров, кото­рые отоб­ра­жа­ют про­цесс загруз­ки. На глав­ной стра­ни­це сер­ви­са отоб­ра­же­ны все кате­го­рии кар­ти­нок-загруз­чи­ков. Выбрав нуж­ную кате­го­рию и пре­ло­адер, вы може­те отре­дак­ти­ро­вать его основ­ные свой­ства, такие как:

  • тип изоб­ра­же­ния;
  • цвет фона;
  • ско­рость ани­ма­ции и так далее.

После завер­ше­ния всех изме­не­ний оста­ет­ся толь­ко нажать кноп­ку «Ска­чать». При­чем так­же мож­но выбрать «Допол­ни­тель­ные опции загруз­ки».

Сайт: Preloaders.net

3. X-Icon Editor

Простой онлайн-редактор иконок для сайтов. Создан на основе HTML5

Про­стой онлайн-редак­тор ико­нок для сай­тов. Создан на осно­ве HTML5. Очень хоро­шо под­хо­дит для созда­ния Favicon.

Име­ет­ся функ­ция импор­та сво­е­го изоб­ра­же­ния и воз­мож­ность про­смот­ра фави­ко­на в адрес­ной стро­ке без загруз­ки на сайт.

Сайт: X-Icon Editor

4. Ink by Zurb

Ink by Zurb - веб-инструмент, позволяющий создавать адаптивные HTML-письма

Ink by Zurb – веб-инстру­мент, поз­во­ля­ю­щий созда­вать адап­тив­ные HTML-пись­ма, кото­рые будут оди­на­ко­во отоб­ра­жать­ся на любых устрой­ствах.

На сай­те пред­став­ле­ны гото­вые шаб­ло­ны, кото­рые не тре­бу­ют опти­ми­за­ции под смарт­фо­ны, или раз­лич­ные поч­то­вые кли­ен­ты.

Сайт: Ink by Zurb

5. Screenfly

Как свёрстанная страница будет отображаться на разных устройствах и мониторах?

Как свер­стан­ная стра­ни­ца будет отоб­ра­жать­ся на раз­ных устрой­ствах и мони­то­рах? Уви­деть это помо­жет сер­вис Screenfly. Доста­точ­но вве­сти в поле ссыл­ку сай­та и нажать кноп­ку «GO».

Затем ввер­ху мож­но будет выбрать экран любо­го гад­же­та.

Сайт: Screenfly

6. Webydo

Webydo автоматически конвертирует ваш дизайн в HTML-код

Еще один кон­струк­тор для созда­ния сай­та. Webydo авто­ма­ти­че­ски кон­вер­ти­ру­ет ваш дизайн в HTML-код.

Есть воз­мож­ность создать ани­ма­цию с уни­каль­ны­ми путя­ми дви­же­ния и ско­ро­стью, исполь­зуя визу­аль­ный интер­фейс, без напи­са­ния кода. Для каж­до­го созда­ва­е­мо­го сай­та Webydo так­же созда­ет свою CMS.

Сайт: Webydo

7. Creately

Creately - удобный и простой инструмент для создания графиков и диаграмм

Creately – удоб­ный и про­стой инстру­мент для созда­ния гра­фи­ков и диа­грамм. Инту­и­тив­но понят­ный интер­фейс и бога­тый функ­ци­о­нал помо­гут создать каче­ствен­ную пре­зен­та­цию для раз­лич­ных кон­фе­рен­ций и дело­вых встреч.

Сайт: Creately

8. Enjoycss

Enjoycss - бесплатный сервис для генерации CSS-стилей

Enjoycss – бес­плат­ный сер­вис для гене­ра­ции CSS-сти­лей. С его помо­щью мож­но задать выбран­но­му эле­мен­ту фон, тени, пере­хо­ды и так далее. На выхо­де вы полу­ча­е­те гото­вый css-код отре­дак­ти­ро­ван­но­го объ­ек­та. Так­же име­ет­ся своя гале­рея гото­вых реше­ний.

Сайт: Enjoycss

9. Da button factory

Красивые кнопки для сайта можно создать с помощью Da button factory

Кра­си­вые кноп­ки для сай­та мож­но создать с помо­щью Da button factory. На сай­те вы най­де­те про­стой и инту­и­тив­но понят­ный онлайн-редак­тор, где мож­но поме­нять текст, шрифт, фон и дру­гие свой­ства кноп­ки.

Сайт: Da button factory

10. Invision App

Invision App - платформа для командной разработки макетов сайтов и приложений

Invision App – плат­фор­ма для команд­ной раз­ра­бот­ки маке­тов сай­тов и при­ло­же­ний. С помо­щью нее все эта­пы созда­ния про­дук­та могут кон­тро­ли­ро­вать как раз­ра­бот­чи­ки, так и заказ­чи­ки.

Сайт: Invision App

11. Awesomplete

Awesomplete - стильный и легко настраиваемый виджет для автозаполнения форм

Awesomplete – стиль­ный и лег­ко настра­и­ва­е­мый виджет для авто­за­пол­не­ния форм. Пол­но­стью соот­вет­ству­ет стан­дар­там совре­мен­ных бра­у­зе­ров. Все исход­ни­ки доступ­ны по ссыл­ке и на GitHub.

Сайт: Awesomplete