Для каких целей нужны программы?

Перед тем, как использовать программы для верстки сайтов, нужно разделить их на несколько категорий.

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

Работа с кодом. Когда вы разберетесь с графикой и вырежете все необходимое, нужно будет приступить к основной работе верстальщика – написанию кода. Чтобы это было максимально быстро и удобно, нужно использовать подходящий софт.

Проверка работы. Когда вы уже сделаете основную работу, нужно будет проверить ее результат. Как правило, в процессе написания вы можете сделать много ошибок, особенно если не обладаете большим опытом. Также к готовой верстке обычно предъявляют различные требования. Проверки помогут подогнать ее под эти требования.

Для работы с макетом

Верстальщику нужно помнить о необходимости работы с макетом. Для этого есть PhotoShop, хотя можно использовать GIMP, как бесплатный вариант-аналог. Подходят обе, хотя фотошоп, конечно, немного удобнее.

Нужно понимать, что макет может содержать сотни слоев. Чтобы работать с ним без тормозов, нужно работать на более менее мощном железе. Многое зависит от самого макета. Чем меньше слоев и элементов, чем меньше размер файла, тем быстрее он будет обрабатываться.

Собственно верстка

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

Блокнот. Самое простое, что вы можете иметь для редактирования кода. Никакого функционала. В каких случаях вам придется им пользоваться? Допустим, нужно будет показать другу какой-то фрагмент кода, а на его компьютере не окажется подходящей программы. Блокнот не годится для редактирования и уж тем более написания кода.

Рис. 1. В блокноте нет подсветки синтаксиса, поэтому он не годится для работы с кодом.

Notepad++. А вот это уже гораздо более продвинутый инструмент. Ее часто называют блокнотом программиста. Он поддерживает подсветку синтаксиса, множество языков и кодировок. Писать код легко, удобно, есть возможность подключать плагины и работать с большим количеством файлов одновременно. В зависимости от вашего знания языков, вы можете включать или отключать подсказки. Опытные верстальщики обычно отключают их, потому что они только мешают писать код.

Рис. 2. В Notepad++ отличная подсветка синтаксиса. Теги, атрибуты, значения атрибутов и простой текст выделены по-разному.

Adobe DreamViewer. Более мощная программа, которая включает в себя не только редактор, но и инструменты для полностью визуального создания страниц и элементов. Работу с ней придется изучать, поскольку она достаточно сложна. Нужно сказать, что любой визуальный редактор вставляет много лишнего кода.

Это справедливо и в случае с Dreamviewer, но тут уж приходится платить за скорость. Программа подойдет профессионалам, когда нужно очень быстро получить код-странички, чтобы показать ее заказчику.

SublimeText. Очень похож на Notepad++. Отличается в основном только интерфейсом и различными плагинами, которые можно подключить.

Front Page. Еще одна программа от Microsoft. Тоже позволяет работать с изображениями, видеороликами и JavaScript.

Опять же, выбор зависит от того, нужно ли вам визуальная составляющая или вы намерены больше писать код самостоятельно.

Статистика показывает, что большинство разработчиков использует Sublime и Notepad++. Это лучшие программы для верстки сайтов. Но они подойдут вам, если вы уже знаете код и особо не нуждаетесь в помощи. Тогда эти редакторы дадут вам больше свободы.

Можно еще выделить UltraEdit. Хотя программа не пользуется большой популярностью, она достаточно быстро открывает большие файлы и в ней тоже удобно писать код.

Также многие хвалят NetBeans. Эта среда разработки хорошо подходит для написания веб-сценариев и скриптов. Рекомендуется начинающим программистам.

Из более современного ПО можно отметить текстовый редактор Vim. По функциональности он считается одним из самых мощных. Например, можно работать с множеством файлов в одном окне, проводить сравнение двух файлов, после чего быстро вносить правки. Еще одна особенность – неограниченная возможность отменять и возвращать какие-то свои действия.

Проверка верстки

Как правило, нормальные редакторы кода уже содержат в себе инструменты для проверки написанного. Например, подсветка кода позволяет легко выявить случайные опечатки и мелкие ошибки (незакрытый тег, лишняя точка с запятой и т.д.)

Но проверка верстки заключается не только в этом. Для более полноценного тестирования нужно использовать и другие программы. Например, тот же отладчик. Я уже упоминал о нем несколько раз. Во-первых, это возможность быстро найти проблему и решить ее. Поскольку в отладчике можно отключить любые стили, это позволяет быстро найти с его помощью можно проверить работу медиа-правил, если вы также реализуете адаптивность.

Этого тоже может быть недостаточно. Если шаблон должен одинаково выглядеть в большинстве популярных браузеров, нужно проверить верстку на кроссбраузерность. Для этого существует несколько онлайн-сервисов. Одним из самых популярных является crossbrowsertesting.com/. Определенные функции на сайте доступны только за деньги. Сервис обрел популярность из-за возможности проверить сайт в более чем ста версиях различных браузеров.

Рис. 3. Crossbrowsertesting – один из ресурсов, который предлагает проверку на кроссбраузерность в сотнях версий браузеров.

Все еще может быть необходима адаптация верстки под старые версии браузеров. Как известно, больше всего проблем всегда возникало с Internet Explorer. Ранее я уже писал об IE Tester – программе, где можно бесплатно проверить, как сайт будет выглядеть в старых версиях этого браузера. Для этого также подходит программа NetRederender. Она позволяет посмотреть внешний вид сайта в IE-версиях от 5.5 до 9.

Вывод

Для верстки сайта может потребоваться достаточно много сервисов и программ. В минимальной комплектации это программа для работы с графикой, 1 редактор кода и 2-3 сервиса для проверки верстки. Я видел людей, у которых набор инструментов намного больше. Здесь все зависит от сложности вашей деятельности как веб-разработчика. На сегодня все. Подписывайтесь на наш блог, если хотите знать все о сайтостроении.

QuarkXPress - программа, предназначенная для верстки макетов разнообразной типографской продукции - газет, журналов, брошюр, каталогов и т.д. QuarkXPress позволяет создавать не только "бумажные" макеты, но и разрабатывать дизайн для электронных книг, веб-сайтов и интерактивных приложений (Flash). За 25 лет своего присутствия на рынке QuarkXPress успел завоевать уважение среди дизайнеров и верстальщиков по всему миру - программа поддерживает международные цветовые стандарты и может автоматически определять потенциальные проблемы уже на этапе предпечатной подготовки. Приложение поддерживает drag-and-drop и горячие клавиши, позволяет работать с прозрачностью и эффектами (падающая тень и т.д.), управлять слоями, выравнивать графические элементы на макете, проводить тонкую настройку параметров текста (кернинг, трекинг, переносы и др.). QuarkXPress поддерживает кодировку Unicode и шрифты OpenType, может импортировать таблицы и тексты из документов Word и Excel, а также способен импортировать графику в форматах PSD, EPS, GIF, JPG, PDF, PNG, PostScript и TIFF. QuarkXPress может автоматически обновлять использованные в макетах элементы (тексты, изображения), позволяет применять стили и автоматически контролировать соблюдение спецификации проекта.

Ключевые особенности и функции

• широкий набор инструментов для работы с макетами, текстами и графикой;
• автоматический контроль за соблюдением спецификации проекта;
• автоматическое определение потенциальных проблем на этапе предпечатной подготовки;
• поддержка множества графических форматов;
• импорт данных из Excel и Word;
• возможность разработки дизайна электронных книг, веб-сайтов и веб-приложений.

Каждый день в сети появляется все больше программ, которые предлагают использовать дизайнерам. Особенно много среди них планировщиков задач, инструментов по созданию ментальных карт и прочих модных фич, они появляются практически каждый день, просят невероятных денег и затем умирают естественной смертью от жадности.

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

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

Топ-10 программ для веб-дизайнера и графического дизайнера:

1. Adobe Photoshop

Хотя он открывается далеко не первым при создании веб-дизайна, но пусть он как самый популярный будет первым пунктом. Фотошоп используется для интерфейсов бог знает сколько времени, я его использую уже не меньше 10ти лет и программа становится только лучше. В нем огромное количество возможностей, но веб-дизайнеры используют его для рисования интерфейсов, создания растровой графики, обработки фотографий. Графические дизайнеры примерно для таких же целей.

P.S. Я уже несколько лет жду момента, когда фотошоп заменят векторные программы. Первыми его конкурентами являются Sketch, Adobe Illustrator и чуть-чуть Indesign. Они действительно удобны в работе с интерфейсами, но беда в том что верстальщиков, которые умеют работать с этими программами можно посчитать по пальцам в России и все они работаю в крупных компаниях. Так что если вы фрилансер и вы не знаете кто будет верстать ваш макет, фотошоп это по-прежнему универсальный и лучший вариант. Может быть через пару лет это изменится.

2. Adobe Illustrator

Уже упомянутый выше Illustrator конечно же уже захватил часть веб-дизайна. А именно вся векторная графика: иконки, векторные текстуры, логотипы, векторные иллюстрации создаются именно в нем. А потом при помощи этой же программы экспортируются в масштабируемую веб-графику SVG.

Для графического же дизайнера иллюстратор программа номер один. Потому что все логотипы, фирстили, простая печатная продукция, не требующая постраничной верстки (визитки, например) также создаются в иллюстраторе.

А еще в нем собираются презентации и гайдлайны для клиентов.

P.S. Конечно, это не панацея. Если у вас есть задача сделать флаер вообще без текста и только с фотографиями, то логичнее его будет нарисовать в фотошопе, т.к. это растровая графика.

3. Coggle.it

В поиске адекватного инструмента для майндмаппинга я испробовала с десяток сервисов. Конечно, больше всего мне понравился mindmeister. Но после создания одной карты он запросил с меня довольно дорогую подписку с оплатой каждый месяц и я решила, что оплачивая каждый месяц пакет Adobe Creative Cloud и я так уже достаточно честный человек и стала искать бесплатный инструмент.

Coggle не ограничивает в количестве карт, их можно расшаривать другим плзователям, сохранять в картинках и выглядят они достаточно симпатично и удобно. Но он почему-то настаиввает на том, чтобы ваши карты были открытыми и их по идее может посмотреть кто угодно.

P.S. Если вы не знаете что такое mind map - это очень удобный и универсальный инструмент для разработки концепций, проектирования карты сайта, пользовательских сценариев. Как раз с него обычно начинается веб-дизайн. Как-нибудь я опишу этот способ подробнее.

4. InvisionApp

Очень удобный инструмент для прототипирования. Я создаю с его помощью серый дизайн и даже использую для презентации уже готовых макетов. Можно не только сразу проработать всю структуру сайта и расставить ссылку, но и расставить такие приятные мелочи как sticky меню или сделать глобальную навигацию. Минус в том, что Invision снова платный и предлагает только один бесплатный прототип. Если вы не ведете по 5 проектов одновременно, этого бывает достаточно.

Есть совершенно бесплатная альтернатива Marvel App, но его функционал намного проще и работать с прототипами все-таки сложнее.

5. Pinterest

Это он-лайн сервис, популярный в узких кругах дизайнеров. Здесь очень удобно составлять мудборды для проектов и хранить референсы. Мудбордами можно делиться, вести совместные, к тому же на этом ресурсе шикарная база дизайнерских работ, которой больше нигде нет.

P.S. Мудборды и референсы - это еще один инструмент создания концепций, но уже визуальных. Ищите примеры работ и составляете из них доску настроения, включающую шрифты, цвета, стиль, которые помогут вам для вдохновения в конкретном проекте.

6. Evernote

Я использую бесплатную версию, ее возможностей вполне хватает. В Evernote очень удобно хранить брифы, заметки, ссылки, вести органайзер. Это записная книжка по сути, синхронизируется с несколькими вашими устройствами, можно делиться заметками или блокнотами. Многие в нем работают, поэтому очень удобно и для командной коммуникации тоже.

7. Adobe InDesign

Он так далеко внизу только потому, что я не часто занимаюсь полиграфией. но вообще это очень популярная программа для верстки многостраничной продукции. Буклетов, каталогов, брошюр, листовок, книг. Если вы хотите работать в полиграфии, знать ее обязательно, вместе с фотошопом и иллюстратором, конечно, т.к. графика все-таки рисуется в них, а вот текст верстается в индизайне.

8. Toggl

Тайм треккер для внутреннего использования. Он не такой продвинутый как TimeDoctor, который снимает скриншоты с экрана и отправляет их клиенту каждый 3 минуты. Но toggl помогает правильно распределить время, сосредоточиться и посчитать сколько же времени вы тратите на ту или иную работу. Поработайте с ним годик и вы будете легко оценивать по часам любой проект и соответственно будете называть стоимость не наугад, а понимая сколько на самом деле ваших усилий для конкретного проекта понадобиться.

9. Trello

10. Adobe Lightroom

Редко, но все же использую для быстрой обработки фотографий. Фотошоп, конечно, обладает всеми возможностями лайтрума, но если у вас есть пакет из сотни фотографий для проекта и все они сыроваты, вы можете их быстро прогнать через лайтрум и получить очень приятные фото для эскизного макета, к примеру.

Топ-5 приложений для коммуникации с клиентом:

Я честно признаю, что работа дизайнера наполовину состоит из коммуникации с клиентом. Многие конфликты фрилансеров и клиентов возникают из-за отсутствия нормальной коммуникации, вы неверно поняли задачу и неверно ее решили, по большей части это даже бывает вина фрилансера. Поэтому я настраиваю все свои устройства на мгновенные push-уведомления и устанавливаю те мессенджеры, которыми пользуются мои клиенты, чтобы всегда в любых обстоятельствах быть на связи.

1. Skype

Конечно же скайп, несмотря на то что он в последнее время становится все более дряхлым и хромоногим. Но пока ни одна программа его не может заменить. И все звонки и видеоконференции ведутся через него.

2. Telegram

Я верю, что телеграм скоро умрет. Но возможно я к нему слишком строга, довольно много клиентов уже полюбили телеграм и конечно мне пришлось тоже его установить.

3. Вконтакте, facebook

Даже если вы ненавистник соцсетей, вам придется ими пользоваться. Потому что ими пользуются ваши клиенты и иногда коммуникация ведется через них. Наиболее популярен facebook, конечно, он традиционно используется для рабочих контактов и вакансий. А вот Вконтакте изредка, но все же бывает. Но кстати я использую вконтакте как журнал, настроив его на полезные группы, очень удобно бывает искать вдохновение.

4. Mail клиент

Общение по почте я стараюсь вести только официальное, т.е. с крупными клиентами если нужна документальная переписка и можно было спустя год найти нужное письмо. Общаться там по мелким вопросам неудобно, конечно.

5. Viber, WhatsApp

Я питаю личную ненависть к этим приложением, но все дело в спаме и в том, что они одно время не прислали мне пару важных уведомлений. Я их удаляла и ставила раз 5=) Пока что меня не заставили их поставить обратно.

Дополнительные программы:

А еще очень важно изучать что-то новое. Лет пять назад ни один веб-дизайнер и не подумал бы изучать моделирование в 3д, чтобы повысить свою квалификацию. А сейчас мы видим десятки сайтов, использующих в своей основе 3д, а иногда еще и анимированное. Это одна из причин, по которой я перестала разделять работу графического дизайнера и веб-дизайнера и стараюсь изучать все, что может быть полезно в моей работе.

1. Adobe After Effect

Использую для анимации. К примеру, анимации иконок, видеороликов, презентации анимационных сайтов.

2. Adobe Premier

Изредко использую для монтажа, чаще это ролики для ютуба или что-то для портфолио.

3. Cinema 4D

Работаю в нем с 3д объектами или анимационными роликами. Вообще очень полезная вещь для дизайнера: с этой программой можно очень быстро и легко создавать потрясающе красивые вещи для чего угодно: будь это веб или фирстиль.

Итак, давайте определимся: инструмент вам нужен, чтобы ускорить работу. То есть вам не нужно в совершенстве осваивать весь функционал, вам нужно научиться работать быстро. Какой бы инструмент вы ни выбрали, изучите ключевые возможности и освойте все горячие клавиши.

Научитесь пользоваться ими на автомате, и уже потом переходите к более продвинутым функциям. Для проектирования простых сайтов вам достаточно уметь устанавливать шрифт, рисовать простые формы, работать со слоями, менять цвета и т.п.

Рис. 7.0: Свой сайт я спроектировал при помощи нескольких базовых инструментов, одного шрифта и трех цветов.

Когда вы освоитесь в своем инструменте, то сможете быстро тестировать разные идеи (это поможет вам добиваться более качественного результата) и заканчивать работу вовремя (а это осчастливит ваших клиентов и работодателей!).

Если вы только начинаете изучать дизайн или давно хотите перейти на другой инструмент, советую поэкспериментировать с несколькими вариантами и выбрать наиболее удобный. У всех нас свой жизненный опыт и свои привычки. Если какая-то программа вам по каким-то причинам приглянулась, скорее всего, вы освоите ее гораздо быстрее.

Важно понимать, что в какой-то момент вам, возможно, придется переключиться на другой инструмент. Большинство из нас годами использовали Photoshop, потому что на рынке не было альтернатив. За последние пару лет ситуация в корне изменилась.

Дизайн в веб давно перестал быть статичным, и мы пытаемся заполнить пробел между дизайном и кодом. Вероятнее всего, в ближайшее время появится множество новых возможностей и даже инструментов.

Популярные программы для дизайна

При выборе инструмента для дизайна, важную роль играет не только скорость и качество самой программы, но и ее популярность в профессиональной среде. Вам будет проще работать с другими дизайнерами и разработчиками (например, в рамках масштабного проекта), если вы используете один и тот же софт.

1. Sketch – $99/год (Только под Mac)

Рис 7.1: Sketch

Для большинства своих текущих проектов я использую Sketch. Инструмент очень быстрый, интуитивный и достаточно простой в использовании (я без проблем перешел на него с Photoshop). Sketch - одно из самым популярных приложений для дизайна, так что большинство разработчиков и дизайнеров с ним знакомы.

В Sketch есть все, что нужно для дизайна: направляющие, сетки, символы, трансформация изображений в перспективе (для предпросмотра дизайна на iOS), векторное редактирование, прототипирование, библиотеки, экспорт активов, клауд (чтобы делиться дизайнами и библиотеками) и даже экспорт кода. А еще к нему есть масса плагинов и ресурсов.

Самый большой недостаток Sketch - он работает только на Mac. Однако, можно экспортировать проекты под такие приложения как InVision и Zeplin , чтобы создавать спецификации и руководства для разработчиков.

2. Figma – Бесплатно or $12/мес (веб-приложение)

Рис 7.2: Figma

Figma - это относительно новая программа для дизайна. Пожалуй, это самый главный конкурент Sketch - и он растет очень быстро. В Фигме есть все те же функции, что и в Sketch - плюс несколько дизайнеров могу работать над одним проектом одновременно.

Самое крутое, что Фигма абсолютно бесплатна, если у вас до трех проектов, а всего за 12 долларов в месяц вы откроете все функции и сможете создать бесконечное количество проектов. Приложение работает прямо в браузере - следовательно, практически на любой операционной системе. Пользовательский интерфейс напоминает интерфейс Sketch и Adobe XD: если эти инструменты вам знакомы, то даже ничего осваивать не придется.

Это отличный вариант, если вы начинающий дизайнер и хотели бы попробовать свои силы, не вкладываясь пока в дорогое ПО. Я пользовался Фигмой в нескольких своих проектах и мне работалось очень просто и быстро.

3. Adobe XD – Бесплатно (Mac и Windows)

Рис 7.3: Adobe XD

Adobe XD - это еще один сильный игрок в мире профессиональных приложений для дизайна. Мне кажется, он отлично подходит для UI дизайна, создания вайрфреймов и прототипирования - правда, в сравнении с Sketch или Figma ему не хватает нескольких продвинутых функций.

Плюс в том, что инструмент бесплатный как под Mac, так и под Windows (хотя, возможно будет платным, когда его доведут до ума). Кроме того, это линейка продуктов Adobe - так что вы сможете обмениваться активами с другими инструментами, например Photoshop или Illustrator.

Интерфейс очень похож на Sketch и Figma, так что можно одновременно использовать сразу три инструмента - и без проблем переключаться между ними (разве что некоторые горячие клавиши отличаются!).

4. InVision Studio – Бесплатно (бета версия, с возможностью раннего доступа)

Рис 7.4: InVision Studio

InVision Studio - это новый фул-стек инструмент, который все еще на стадии беты, но выглядит многообещающе. Интерфейс - копия Sketch и Figma, которые уже стали современным стандартом инструментов для дизайна.

Я немного поэкспериментировал с InVision Studio и, поскольку у меня в целом хорошие впечатление от других продуктов InVision, я уверен, что ребят ждет успех, когда выйдет официальная версия.

5. Webflow – Бесплатно или $16/мес (веб-приложение)

Рис 7.5: Webflow

Webflow - это фул-стек инструмент для создания функциональных и адаптивных сайтов, которые можно размещать прямо на их платформе (или экспортнуть и разместить где-нибудь еще).

Я не фанат инструментов в стиле “дизайн в код”, потому что обычно сгенерированный код не очень хорошо показывает себя в деле, плюс с ним сложно работать. Однако, Webflow очень даже неплох. Вы полностью контролируете CSS код, плюс инструмент показывает, как работает HTML и CSS, потому что все элементы дизайна в браузере ведут себя так, как нужно.

Я думаю, что Webflow отлично подойдет для создания быстрых прототипов, простых сайтов, одностраничников и т.п. Многие мои знакомые профессиональные дизайнеры используют Webflow - так что стоит к нему присмотреться!

6. Adobe Photoshop – $20.99/мес или в составе Creative Cloud ($52.99/мес)

Рис 7.6: Adobe Photoshop

Я не случайно поставил Photoshop в самый конец списка. Фотошоп - очень популярная программа для дизайна сайтов, но он проигрывает битву со Sketch, Figma и другими инструментами. Если вы до сих пор пользуетесь Фотошопом - это нормально, но будьте готовы переехать в другой инструмент в ближайшем будущем.

Нынешние стандарты веб разработки заставляют нас делать более гибкие проекты, двигаться ближе к коду, работать в рамках от дизайн-системы. Photoshop работает слишком медленно и генерит слишком большие файлы по сравнению с вышеперечисленными инструментами.

Тем не менее, я все еще пользуюсь Фотошопом для работы с фотографиями, создания графики и обработки иллюстраций.

Рис 7.7: Быстрое сравнение интерфейсов Sketch, Figma и Adobe XD interfaces. Посмотрите, как они похожи!

Другие инструменты, которые я использую в работе:

Вот полный список инструментов, которые я использую в процессе работы.

3 голоса

Приветствую вас у себя в блоге. Сегодня я решил подготовить полезную подборку для дизайнеров. Я посетил самые популярные сайты для веб-мастеров и нашел 50 лучших инструментов, которые помогут в создании дизайна.

Представляю вашему вниманию программы для веб дизайна, лучшие онлайн-сервисы и признанные профессионалами инструменты. Не со всеми пунктами я согласен, но кто я такой, чтобы спорить со специалистами, работающими на таких сайтах как Нетология , vc.ru , say-hi и других.

Я немного дополнил этот список от себя и разбил на категории. Теперь представляю его вашему вниманию.

Базовые программы

Конечно, ни один веб-разработчик пока не может обойтись без стандартного набора от Adobe, через который и ведутся все работы. Сейчас конец 2016 и многие профессионалы утверждают, что набирающая популярность программа Sketch , вот уже несколько лет вытесняющая привычный для многих Photoshop, вот-вот уже сделает это. В 2017 все мы будем активно изучать именно эту программу.

Это даже несмотря на то, что ее еще нет на русском языке и подходит она только для Mac OS. Большинство профессионалов утверждают, что для дизайна интерфейсов она подходит куда лучше, чем фотошоп.

Если говорить о других продуктах Adobe, то изучать их или нет – решать вам. И тем не менее они все еще присутствуют в списках.

• Illustrator как лучший инструмент для работы с векторной графикой и создания иллюстраций.
• InDesign, как оптимальная утилита для полиграфии.
• Adobe Muse как идеальная платформа для создания

Помимо продукции Adobe профессионалы рекомендуют обратить внимание на другие марки и их продукты. Macaw признается одной из самых популярных программ для веб-дизайна. В отличие от Sketch она подходит для Виндовс и позволяет программировать без знания кода. Она сама автоматически генерирует . Скачать ее можно бесплатно прямо с официального сайта. Правда только на английском языке.

Издание Creative Bloq в качестве альтернативы Adobe Muse предлагает посмотреть другой современный сервис Pinegrow , он подходит для рисования любого сайта с последующим автоматическим преобразованием картинки в код. Этого же можно добиться и на Jetstrap.

Ну а если вам нужно поработать с приложениями, то в этом вам скорее поможет Foundation for Apps .

Банк графики

Любому дизайнеру нужна графика. Если рисовать все самому, то это займет много времени. Некоторые элементы можно заказать у кого-то другого, а можно приобрести или забрать уже готовые картинки с банков. Тырить хороший дизайнер никогда не станет, а вот скачать с хорошего сайта – почему бы и нет.

К примеру, на endlessicons.com можно найти иконки, а на coverr.co видеообложки.

На freepik.com и IconStore можно найти много бесплатных изображений. Векторов и даже PSD-макетов. От себя могу предложить Photoshop- master и Pixabay .

Stripemania.com – быстро сгенерирует графику. Добавляете свои цвета и получаете полосатую картинку. Хотите создать свой анимированный фон с плавным переходом цвета ? С этим поможет справиться сайт gradient-animator.com . Он не только покажет в режиме реального времени результат, но и создаст код, который останется только вставить на сайт.

Findguidelin.es это сборник, на котором можно найти иконки и всю информацию для дизайнеров о популярных брендах: WatsApp, Facebook, Вконтакте и так далее.

Конструктор логотипов и фавиконов

Меня удивило, но на многих популярных и престижных сайтов для дизайнеров можно найти ссылку на сервис, помогающий . На Нетологии, к примеру, предлагают withoomph.com или designrails.com . Я предпочитаю Логастер .

Для быстрого создания можете воспользоваться порталом www.favicon.cc . О нем я кстати уже писал. Хорошая штука.

Работа с цветом

Плох тот дизайнер, который не доверяется помощи профессиональных сервисов для создания наилучшего сочетания цветов. Для этого в интернете можно найти множество ресурсов. Мне, к примеру, нравится ColorScheme .

Сервис Material Palette предлагает выбрать два цвета, а всю остальную схему она достроит за вас: шрифты, разделители и так далее.

На 0to255 можно посмотреть различные оттенки, хотя у вас есть и русская альтернатива – Яндекс.

Если вы увидели красивую картинку, то можете при помощи сервиса pictaculous.com извлечь из нее цветовую схему. Кстати, очень помогает точно решить стоит ли использовать на своем портале то или иное изображение. Если оно не удачно сочетается с основой схемой, то ответ очевиден.

Работа со шрифтами

Первый и самый лучший ресурс для работа с шрифтами Google Fonts. Это огромная коллекция шрифтов, в том числе и на русском. Выбирать удобно, использовать легко.

Чтобы подобрать идеальное сочетание шрифтов специалисты рекомендую воспользоваться сервисом: canva.com/font-combinations или typewolf.com .

Вам также может пригодиться расширение для браузера fontface.ninja . Находите красивый шрифт, наводите на него мышью и получаете информацию. Останется только найти его.

А в онлайн-редакторе на сайте prototypo.io вы можете немного его изменить и сделать уникальным.

Завершающий этап

Когда проект готов, нужно проверить как все будет выглядеть в стандартных браузерах с компьютеров и на экране мобильного телефона. Resizemybrowser.com поможет сделать это быстро.

При помощи сервиса dunnnk.com вы можете вставить свой скриншот в тысячи изображений телефонов и компьютеров и посмотреть как ваш сайт будет выглядеть на разных гаджетах с нескольких ракурсов.

Очень полезный список располагается на сайте webdesignerschecklist.com . Все ли вы сделали верно, можно ли сдавать проект? Просто расставьте галочки и удостоверьтесь, что ничего не забыли. Жаль, но сервис подойдет только для тех, кто владеет английским.

Если помимо дизайна вы занимаетесь еще и версткой, можете встроить в код утилиту tota11y . Она подсветит ошибки.

Ну и не забывайте, про развитие. Думаю, что любому дизайнеру будет полезно выбрать курс по недостающим знаниям от команды Photoshop-Master .

Курсы для дизайнеров от команды PhotoshopMaster.

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

Ну вот и все. До новых встреч и удачи.