Вместе с WEB движущимся семимильными шагами (адаптивным дизайном,
CSS препроцессорами, постпроцессорами и другими вещами) может оказаться
проблемой попытка не отставать от чего-то нового и полезного.
Ниже Вы найдете 14 инструментов, 7 для веб-дизайнеров и 7 для
веб-разработчиков, которые помогут веб-сайту перерасти из концепции в
действительность.
Для веб-дизайнеров
1. Adobe Creative Cloud
Разумеется, что Photoshop и Illustrator являются двумя важными
инструментами для любого веб-дизайнера. Вместе с Creative Cloud у вас
будет доступ к обоим из них, и плюс к некоторым другим инструментам,
таких как: Typekit, InDesign и Kuler. Все инструменты Creative Cloud
очень хорошо взаимодействуют друг с другом, и должны иметься у любого
дизайнера.
2. UI Faces
Поскольку поиск нужных картинок для макета может быть трудоемок, UI
Faces собирает аватары через Twitter и делает их доступными для
использования в вашем дизайне.
3. 0to255
Этот инструмент я использую почти каждый день. 0to255 упрощает поиск
разновидностей выбранного цвета. Это идеальный инструмент для выделений,
активных состояний и подсвечиваний.
4. Google Fonts
Типография в WEB проделала длинный путь со дней Arial, Courier и
Georgia. Google Fonts это огромная библиотека свободных, готовых шрифтов
которые могут быть загружены на стадии макета.
5. Samuel L. Ipsum
Поклонникам фильма "
Змеиный полёт",
я представляю «Samuel L. Ipsum» (Сэмюель Л. Ipsum). Это Lorem Ipsum
генератор цитат. Имейте в виду, существует три варианта на выбор: цитаты
ненормативной лексики ладена из фильмов Джексона, чистые цитаты из
фильмов Джексона и обычные ol’ lorem ipsum.
6. Responsive Sketch Pad
Шаблоны пользовательского интерфейса Responsive Sketch Pad ваш хороший
спутник, когда вы находитесь на этапе предварительного планирования.
Точечная сетка упрощает придерживание линий и визуализиацию сайта в
браузере и на мобильном устройстве.
7. Macaw
Этот инструмент еще не выпущен, но он уже выглядит довольно интересным
предложение. Macaw обещает ту же гибкость, что и редактор изображений,
но при этом будет происходить написание семантического HTML и
лаконичного CSS.
Для веб-разработчиков
1. Coda 2
Это мой любимый из-за его «все-в-одном» редактор кода, FTP клиент и
встроенный MySQL редактор. Coda 2 также включает в себя справочную
библиотеку по программированию и визуальный CSS-редактор.
2. CSS Pre-processor
В зависимости от того, что вы разрабатываете, здесь вам поможет руководство.
SASS требует, чтобы работал Ruby (встроен в любой Mac) и и на базовом уровне делает тоже что и
LESS,
другой препроцессор. Оба являются отличными инструментами и предлагают
экономящие время функции, такие как вложенные правила, смешивания,
переменные и логику.
3. Front-end Framework
Снова, есть два отличных предложения которые рассмотрим. Вместе
Twitter Bootstrap и
Zurb’s Foundation
поможет сделать прототипирование и разработку для современного WEB
быстрее и проще. Оба пакета это адаптивная сеточная система с элементами
стилей и javascript по умолчанию, для реализации богатого WEB.
4. Browserstack
Это фаворит из всего набора. Browserstack позволяет вам тестировать
завершенный дизайн в любом браузере и на любой конфигурации, о которой
вы могли только подумать. Это удобный инструмент, если вы все еще должны
поддерживать IE7 и IE8 в ваших проектах.
5. Pingdom
Раскройте DNS и проблемы загрузки с Pingdom. Вы увидите, сколько времени
забирает загрузка различных ресурсов на вашем сайте вместе с общим
показателем производительности.
6. Chrome Developer Tools
Если вы используете один из инструментом входящим в
Chrome Developer Toolkit,
то пусть это будет называться веб-инспектор. Вместе с инспектором вы
сможете быстро диагностировать проблемы и внести изменения в разметку.
Вы также можете эффективно использовать консоль для логирования и
взаимодействия с JavaScript.
7. MAMP Pro
С легкостью крутите сайты локально. MAMP Pro позволяет легко установить и
администрировать Apache, MySQL и среду разработки PHP. Если вы
работаете над большим количество сайтов для клиентов, вам необходимо
иметь такой сервер.
Главная 
