Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Полезные инструменты для дизайнеров и разработчиков

17 апреля 2012 | Опубликовано в Веб-дизайн | 6 Комментариев »

В сети существует большое количество онлайн-сервисов и инструментов, которые могут значительно облегчить работу и ускорить процесс создания сайта. Сегодня мы поговорим о некоторых из них. Эти инструменты пригодятся вам при написании кода css, тестировании адаптивных сайтов, для  работы с типографикой и создании каркаса таблиц и т.д. 

Инструменты для работы с цветом

Colllor—очень полезный и удобный сервис: просто выберите нужный цвет и вы получите набор оттенков и комбинаций.

0to255—простой инструмент, который помогает подобрать цветовые hex-коды.

Инструменты для написания css

CSS Warp—позволяет создать css-текст по контуру. Когда установите все настройки, нажмите «GENERATE HTML», чтобы получить готовый код.

Css3 mikeplate—онлайн-площадка для написания css3-кода, которая поможет значительно облегчить и ускорить процесс работы.

prefixr—сервис, который проверяет, правильно ли вы указали все префиксы для браузеров.

DirtyMarkup—помогает легко почистить даже самый грязный код. Просто вставьте код в редактор и нажмите «CLEAN».


Bear CSS—загрузите ваш html-файл и получите файл css с названиями стилей.

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

Google Web Fonts—eсли вы ещё почему-то не пользуетесь этим сервисом, очень рекомендуем. Большое количество бесплатных шрифтов (и кириллических в том числе), которые легко подключаются к html-документу в режиме онлайн.

WhatTheFont—сервис для определения шрифта на картинке. Залейте изображение с шрифтом, чтобы узнать какой шрифт используется (вы также получите подборку похожих похожих вариантов).

CopyPasteCharacter—просто выберите нужный символ и скопируйте его как текст или как html-код.

Fontomas—даёт возможность выбрать нужные пиктограмы и построить свой собственный шрифт с иконками.

Em Calculator—позволяет конвертировать пиксели в относительные единицы em.

csstypeset—генерирует код css для шрифта в режиме онлайн.

Fontdragr—перетащите файл шрифта с компьютера на fontdragr, чтобы подобрать правильные сочетания. Вы также можете использовать галерею шрифтов fontdragr для этой цели.

Инструменты для создания структуры страниц

wirify—позволяет моментально конвертировать любую страницу в каркасную модель.

Gliffy—бесплатное программное обеспечение для построения каркаса страницы. Для того, чтобы приступить к работе, нажмите кнопку «TRY IT NOW».

The Pencil Project—инструмент для создания диаграм и прототипов GUI.

Другие инструменты

LoremPixum—при помощи этого сервиса вы можете вставлять картинки в ваш html-документ в режиме онлайн. Выберите категорию, а затем скопируйте код нужного изображения.

Myjqueryplugins—позволяет настраивать и создавать выпадающее jquery-меню в режиме онлайн.

Responsivepx—мы уже рассказывали вам о инструментах и плагинах для создания «отзывчивого» веб-дизайна. Сегодня хотелось бы добавить к этим подборкам ещё 1 новый и полезный сервис: введите адрес сайта и выберите любой размер ширины и высоты (от 10 до 3000px)это поможет протестировать ваш веб-сайт «по полной».

Автор подборки-Дежурка




Комментарии

  1. jarvi
    Thumb up Thumb down +2

    Для подбора цвета более удобным, чем названные, мне кажется этот сайт: colorschemedesigner.com

    Ответить

    Elena Ответ:

    Thumb up Thumb down 0

    Да, спасибо! Мы уже писали здесь www.dejurka.ru/articless/color-swatches/ про инструменты для создания палитры. Просто collor является относительно новым сервисом и, возможно, не все о нём слышали. =)

    Ответить

    jarvi Ответ:

    Thumb up Thumb down -1

    Спасибо, эту статью не видела еще. Изучу)

    Ответить

    kosss Ответ:

    Thumb up Thumb down 0

    Согласен, постоянно им пользуюсь)

    Ответить

  2. jarvi
    Thumb up Thumb down -1

    а вообще большое спасибо за подборки, много полезного!

    Ответить

  3. anfly
    Thumb up Thumb down -1

    отличная подборка полезный статей!

    сразу мыслишки зашевелились!

    спасибо!

    Ответить

Оставить ответ


6 − четыре =

Вставить изображение