10 бесплатных видеоуроков для изучения Sketch.app

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

Одна из новейших дизайнерских программ, Sketch, стала конкурентом Photoshop. Это программа только для OSX, но она создана специально для веб-дизайнеров и мобильных дизайнеров.

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

Календарь iOS в Sketch 3

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

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

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

Введение в Sketch для веб-дизайна

В качестве альтернативы вы можете использовать Sketch для дизайна веб-сайтов. В таком случае вам понравится это короткое вступление от лондонского дизайнера Чарли Мари.

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

Конечно, это видео не сделает вас полноценным мастером Sketch или опытным веб-дизайнером. Но он предлагает очень четкое введение в программу, чтобы вы могли быстро приступить к работе.

Простое меню UI/UX

Подробнее о дизайне рассказывается в этом уроке по Sketch 3, в котором рассказывается, как сделать скользящее навигационное меню.

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

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

Редизайн пользовательского интерфейса магазина Nike

Еще один способ попрактиковаться в дизайне — воссоздать интерфейсы. Например, в этом руководстве вы узнаете, как изменить дизайн страницы продукта Nike в Sketch 3.

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

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

UI/UX редизайн Dropbox

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

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

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

Минималистичный сайт в Sketch 3

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

В общей сложности видео длится 15 минут, что не слишком много для учебника по дизайну.

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

Дизайн целевой страницы

Дизайнер Адам Рашид сделал все возможное, выпустив видеоруководство по целевой странице, охватывающее все основные аспекты Sketch.

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

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

Базовый мокап приложения для iOS

Весь канал SketchCasts на YouTube полон отличных советов как для начинающих, так и для экспертов. В Sketch очень много функций, и этот канал раскрывает их все на практических уроках.

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

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

Система кнопок с вложенными символами

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

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

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

Flexbox для приложения Sketch

Современные веб-дизайнеры должны следовать адаптивным методам. Это справедливо для разработки внешнего интерфейса и базового дизайна макета/каркаса.

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

Но вы также можете прочитать написанную статью, если хотите.

Быстрое прототипирование с помощью Sketch, Invision и Craft

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

С помощью этого видеоурока вы узнаете, как настроить Sketch и как связать его с двумя другими программами: серверной частью InVision и бесплатным плагином Craft.

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

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