«Веб-дизайнер: Взрывной Старт» от WAYUP

Длительность: 6 уроков = 2 часа теории + 6 часов практики = 8 часов обучения.

Формат: видеоуроки + домашние задания с проверкой и обратной связью от команды WayUp + личные онлайн-консультации с наставником.

1. Введение в веб-дизайн.
2. Изучаем Figma и разработку UI.
3. Прототипирование в Figma.
4. Адаптивный UX/UI-дизайн.
5. Большое практическое занятие.
6. Фриланс: как заработать на дизайне.

Особенности курса:

Абсолютно бесплатный курс с обратной связью
Автор курса — Андрей Гаврилов, основатель онлайн-школы WayUp, веб-дизайнер с опытом работы более 10 лет, обучил свыше 6 000+ человек, создал 290+ сайтов
По окончании обучения выдаётся сертификат, сертификат даёт право получить скидку 30% на любую образовательную программу WayUp

Mega Creator

Совместимость: Веб-браузер

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

Плюсы:

• Удобное оформление рекламных материалов.
• Обширный набор возможностей.
• Возможность изменения ориентации изображений одним щелчком мыши.
• Миллионы настраиваемых активов.

Про иконки

• Fontello – много простеньких иконок, которые можно бесплатно скачать.
• FlatIcon – пожалуй, один из самых лучших сервисов с векторными иконками, который можно найти сегодня. Совсем недавно он стал платным, но подписка точно стоит того. Если не хотите платить, то иконки все равно можно скачивать, правда в формате PNG.
• Material Design Icons – а это просто 750 бесплатных иконок от Google, возможно, они вам пригодятся.
• Font Awesome – популярные иконки, которые быстро загружаются на сайт в HTML.
• Glyphsearch – большая библиотека разнообразных иконок, которые скачиваются кодом для загрузки на сайт.

• MakeAppIcon – генерирует иконки для мобильных приложений на Android и iOS. Просто загрузите свою картинку, и он сделает из нее иконку для вашего смартфона.
• Endless Icons – сотни различных иконок, которые могут потребоваться вашему проекту.
• Ico Moon – много платных иконок. Если на Flaticon нужно постараться найти что-то креативное, то здесь почти каждый пак достоин внимания. 
• The Noun Project – сервис с подбором иконок и фотографий. Среди иконок можно найти много чего стоящего.

• Perfect Icons – а это просто инструмент для создания простых иконок.
• Icon Finder – аналог Flaticon, здесь можно найти много бесплатных векторных иконок.
• Roundicons – классный ресурс с большим набором различных и креативных иконок. 
• Icon Sweets – бесплатные иконки для Фотошопа.
• Iconmonstr – векторные и простые иконки, можно найти что-то стоящее для своего проекта, но многие варианты довольно посредственные.

Eagle

Платформы: Windows и Mac

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

Системные требования:

Windows: Windows 10 или более поздняя версия. Процессор Intel Core i3 7100/AMD Ryzen 3 1200 или более мощный и 4 ГБ ОЗУ или больше.

MacOS: macOS 10.13 или более поздняя версия, процессор Apple M1 или Intel с 4 ядрами и 4 ГБ ОЗУ или выше.

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

Плюсы:

• Автоматизированные рабочие процессы.
• Удобный и интуитивно понятный интерфейс.
• Простое сотрудничество.
• Настраиваемые поля метаданных.

Figma

Если специалист находится в поисках программы для веб дизайна Mac OS, Windows, рекомендовано обратить пристальное внимание на Figma. Этот графический редактор считается основным конкурентом Sketch, поскольку позволяет использовать необходимый функционал для web-дизайна на разных операционных системах

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

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

PixTeller

Платформа: Веб-браузер

PixTeller представляет собой интуитивно понятный редактор, который обеспечивает создание графических изображений (загружаемых в форматах PNG, JPG, PDF) и анимаций (загружаемых в форматах MP4, GIF). Этот инструмент доступен для любого пользователя, позволяя создавать персонализированные визуальные эффекты с минимальными техническими или дизайнерскими навыками. Независимо от того, создаете ли вы изображения, анимированные GIF-файлы или видеоролики для личного или делового использования, PixTeller делает процесс проектирования простым и доступным.

Плюсы:

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

12 сайтов для вдохновения

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

Pinterest поможет найти идею для дизайнаСкриншот: сайт

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

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

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

Designspiration. Здесь вы встретите сотни примеров хорошего дизайна для вдохновения.

Synaptic Stimuli. Галерея разнообразных проектов. Развивает чувство прекрасного.

Design made in Germany. Можно найти авторские списки красивых ресурсов в разных стилях. В подборку можно предложить и свой сайт.

Design Shack. Сайт для дизайнеров, на котором не хвалят, а критикуют. Новички наверняка узнают для себя много полезного.

Design Shack поможет увидеть ошибки в дизайне сайтовСкриншот: сайт Design Shack

Siiimple. Поклонникам минимализма и тем, кто хочет научиться создавать дизайн в этом стиле. На сайте огромная подборка примеров дизайна в минималистичном стиле, которая постоянно обновляется.

One Page Love. Отличный ресурс с одностраничными сайтами. Всем, кто занимается лендингами, смотреть обязательно.

Media Queries. Довольно удачный проект об адаптивном дизайне. Особенно пригодится тем, у кого ещё не было опыта в создании таких макетов.

Book Cover Archive. Сайт пригодится не только тем, кто занимается оформлением обложек книг, но и тем, кто постоянно сталкивается с необходимостью подобрать хороший шрифт.

Какой браузер подойдет?

• Google Chrome
  – стандарт качества. Если мало оперативной памяти и открыто много вкладок, будет тормозить и зависать.
  Решение: закрой вкладки!
• Яндекс.Браузер,
  основан на движке
  Blink от Google.
  Значит, использовать Chrome или Яндекс.Браузер для веб-дизайнера – одно и то же:
  страницы выглядят одинаково. Только браузер от Яндекса будет больше тормозить и навязывать свои сервисы.
• Microsoft Edge последних версий, если уже стоит и не получается поставить Google Chrome.
  Тоже основан на движке от Google.
• Apple Safari, если операционная система – macOS.
• Mozilla
  Firefox,
  если операционная система –
  Linux.

Genially

Платформа: Windows и Mac

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

Системные требования:

Windows: Windows 7 или более поздняя версия, процессор Intel Pentium 4 или аналогичный, 2 ГБ оперативной памяти и доступ в Интернет.

MacOS: macOS 10.9 или более поздняя версия, процессор Intel, 2 ГБ ОЗУ и доступ в Интернет.

Плюсы:

• Расширения великолепны и легки в использовании.
• Множество анимаций.
• Исключительное качество графики.
• Обширный выбор шаблонов.

Подборка новостей, полезностей и лайфхаков из мира веб-дизайна

• Webdesignerwall – здесь вы сможете найти много полезной информации касательно верстки сайтов. Если вы не верстаете, то все равно можете заглянуть – весь код демонстрируется с визуальными примерами, из которых реально подчерпнуть что-то интересное – например, вы узнаете, как грамотно оформить на сайте форму заявки.
• Houseofbuttons – не знаете, как оформить кнопку на сайте или ищете креативный подход? Тогда вам точно сюда – на этом ресурсе собрана большая библиотека всевозможных кнопок. Сначала мне показалось, что там всего одна страница, но внизу есть едва заметная кнопка «Next» для перехода на другие страницы.
• Webdesignerdepot – это полноценный англоязычный блог о веб-дизайне. Море статей, которые помогут вам повысить свой профессиональный уровень.
• Webdesignledger – еще один ресурс с множеством статей из мира веб-дизайна.

• Designyoutrust – что происходит в дизайне сейчас, что в моде, а что повергло в шок. Обо всем этом можно почитать на данном ресурсе.
• Creativebloq – креативный блог о цифровом искусстве, где много интересных статей из различных сфер дизайна.
• Say-hi – для тех, кто не хочет читать англоязычные статьи, опубликованные в перечисленных выше источниках. Здесь вы сможете узнать все, что сейчас происходит в дизайне, а также прочесть различные обзоры, например «Тренды, которые не прижились».
• Designpub – еще один русскоязычный ресурс, на котором собрано множество статей из мира дизайна.

• Infogra – нужно ли заводить страницу на Дрибле, как улучшить свой сайт и многое другое – обо всем этом вы можете почитать на этом богатом ресурсе. Он, кстати, тоже русскоязычный.
• Bureau – а это просто 3833 совета от Артема Горбунова и других известных дизайнеров. Здесь можно задать вопрос или изучить уже отвеченные. Определенно найдете много интересного.
• Onjee – ресурс для дизайнеров, которые только начали делать первые шаги в этой сфере.
• Parameter – хорошая галерея. Ребята публикуют очень интересные статьи о разработке сайтов и регулярно следят за новостями в сфере веб-дизайна.
• Vandelaydesign – собрание очень хороших статей из медиаресурсов. Особенно понравится этот сайт веб-дизайнерам.

• Smashingmagazine – здесь есть информация обо всем, что нужно как начинающему разработчику, так и профессионалу в области дизайна.
• Blog.shaihalov – хотите знать больше и развиваться в теме UX? Тогда вам сюда – здесь вы найдете много интересного.
• Deadsign – идеальный ресурс для тех, кто хочет быть в теме всех новостей веб-дизайна. Это русскоязычный ресурс, поэтому заходите скорее.
• Design-mania – здесь вы найдете интересные и полезные статьи по дизайну, верстке, юзабилити, а также сможете скачать материалы для своих проектов: иконки, кисти, шрифты и так далее. Проект пригодится как профессионалам, так и новичкам, которые хотят познать секреты веб-дизайна.

Jimdo

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

Интерфейс JimdoСкриншот: сайт Jimdo / Skillbox Media

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

Минусы. Зарегистрироваться из России не получится. Инструментов может не хватить. Например, нет возможности сделать категории товаров или вставить календарь — если только не написать для этого кусок кода.

Бесплатная версия. В WYSIWYG-сервисе доступно неограниченное число сайтов до пяти страниц каждый, базовые инструменты и хранилище объёмом в 500 МБ. Публикация проектов на поддомене Jimdo.

Стоимость подписки. От 350 рублей в месяц.

Работа с графикой

То, что может понадобиться при работе с графикой — сжималки, растягивалки и подгружалки изображений. Бэкендеры, извините, можно пролистывать.

Сжатие (и увеличение) изображений

• Squoosh — ещё одна тулза для оптимизации изображений. Меняем настройки, двигаем ручку, смотрим, что ничего не сломалось.
• TinyPNG — сжимает WebP, PNG и JPG и не портит картинки. Можно использовать для создания превьюшек. Есть плагин для Фотошопа.
• Image Upscaler — нейросетевой увеличитель изображений, если вам досталась маленькая картинка, а дизайнер уже в отпуске.

Squoosh скушал размер превьюшки

Работа с SVG

• SVGOMG —оптимизация и очищение SVG от всякого мусора. Используйте с умом!
• SVG to bg — конвертер SVG-иконок в код для использования в CSS. Подробная инструкция прилагается на сайте автора.
• URL-encoder для SVG — конвертируем SVG для использования его в качестве ,  или .
• Лучше разобраться с инструментами для SVG-анимации и изучить популярные библиотеки — KUTE.js, Anime.js, Snap.svg и GSAP — рекомендуем на курсе «Мастер анимаций: SVG-анимации».

Коллекции картинок

• Flaticon — иконки на все случаи жизни. Есть бесплатные, есть платные, PNG от 16 до 512px и SVG.
• Unsplash — бесплатные изображения по лицензии CC0. Есть отличное API для встраивания графики в ваши приложения.
• Lorem Picsum — генерирует случайные картинки-плейсхолдеры любого нужного вам размера.

Lorem Picsum. Но такие подошли бы и в любую статью об успешном успехе

Фавиконки

Мы уже рассказывали о том, как правильно использовать фавиконки. Вот несколько инструментов, которые помогут автоматизировать работу.

• Сгенерировать набор иконок и файлы манифестов.
• Скрипт для Node. js.
• Плагин к webpack.

Кое-что ещё

Online Color Picker — просто удобная выбиралка цветов прямо в браузере. Показывает всю основную информацию, можно забить, например, RGB, а потом забрать HEX и посмотреть совместимые цвета.

Online Color Picker

Affinity Designer

Если говорить кратко, то это метис Photoshop и Illustrator. Хотя и заявлено, что это все-таки векторный редактор, я делаю на нем почти все. Вся полиграфия в компании создана на нем. Приложение на самом деле бомба. Есть два режима работы: векторный и растровый. При чем в каждый режим вы польностью можете настроить под себя. Даже сочетания клавиш. Посмотрите короткий промо-ролик 3-годичной давности в котором показана выжимка возможностей. Сейчас их куда больше.

У продуктов Affinity есть и другие приложения, не только «дизайнер». Это вы можете глянуть уже на их сайте: Сейчас я плавно перехожу на приложение Affinity Photo с Photoshop. Все-таки последний меня все меньше начинает устраивать. В скором времени о Photo расскажу более детально, сейчас же программа находиться в рамках данного топа, но не определено где именно.

Вернемся к Designer. Чтобы не растягивать «хронометраж» записи, расскажу коротко о ключевых особенностях, которые мне приглянулись и заставили остаться.

Плюсы

1. Скорость работы. Работает просто невероятно. Где тот же иллюстратор встает «раком», к примеру, при верстке макета для вывески 10×15 метров, Affinity Designer как никогда резв. Однако не только в этом проявляется его быстрота. Сам интерфейс, прокрутка, манипуляции с объектами также молниеносны. При работе с монтажными областями производительность не снижается, как в том же PS CC.
2. Глобальные цвета. Как же этого не хватает в photoshop. Когда все сделано с акцентным красным или синим, вдруг заказчик понимает, что суть конверсии в желтом. Приходится переделывать все индивидуально с каждым объектом. В общем это боль и многие поймут. Да, есть плагины, но все-таки это костыли и не удобные… В designer все сделано по уму, кстати схоже с illustrator.
3. **Работа с векторной и растровой графикой в одном месте. ** Самое сочное, что SVG нативно редактируются прямо в программе. Привет PS!
4. Компоненты и адаптивка. Если вы использовали все тот же sketch, XD или Figma, то уже наверняка знаете, что это такое.
5. Интуитивно понятный и настраиваемый интерфейс программы. Думаю, не стоит объяснять, что и как тут. Программа очень простая для новичка, особенно для тех, кто ранее пользовался продуктом от Adobe
6. Нативная работа с PDF. Нужно подправить документ? Просто закидывай его в программу и правь все, что угодно… Это удобно, когда оригинал документа куда-то просрался, а нужно кровь из носу внести правки в pdf. Прога выручает как никогда.
7. Никаких подписок. Оплатил раз 3.700 рублей и пользуешься до конца времен. Причем все обновы прилетают как полагается, хоть и редко.

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

Минусы

Все-таки не все так прекрасно, как могло бы показаться. Есть пара вещей, которые «вымораживают».

1. Экспорт. Это просто боль. Я уже говорил о двух режимах работы, так вот, есть третий — экспорт. Да, там много плюшек и настроек, кои очень удобные и хорошо сделаны, однако почему бы не сделать быстрый экспорт, как в Photoshop, чтоб не было постоянной необходимости переходить в 3й режим работы, искать в слоях файл, делать ему настройки и т.д. В общем, пока не начнешь работать — не поймешь, какая же это боль.
2. Нет работы с layout сетками. Да, линейки есть, однако сеток нет. Для меня это минус, хотя и не столь значительный.
3. Чтобы получить максимум возможностей при работе с изображением, его необходимо растрировать. К сожалению, тут нет всем полибившихся smart-объектов. Лишь примитивный аналог в виде внешнего файла документа или типа слоя «image». Однако возможности работы урезаны.
4. Нет работы с паттернами (Это фиаско. Пример показанный в ролике выше весьма неудобен.

В общем, программа отлично подойдет для веб-дизайна, для прорисовки интерфейсов и полиграфии. Мультитул за фиксу и без подписок. Рекомендую это приложение всем и каждому. Удобно, быстро и на Windows есть)