Aveodecor.ru

Строительный журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Создавайте красивые дизайны

Программы для веб-дизайнера: где создавать сайты? | Глава 7

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

Копирайтер, переводчик и редактор. Преподаватель курса «Копирайтинг и контент-маркетинг» в Институте программных систем.

Авг 13, 2019 · 6 мин читать

(Перед вами бесплатный курс Рафаля Томаля «Интро в веб-дизайн». В курсе 7 глав. Если вы здесь впервые, то лучше начните сначала)

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

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

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

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

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

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

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

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

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

Вот список программ, которые я рекомендую:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Дизайн:Sketch и Figma
  • Разработка: Coda
  • Иллюстрации, логотипы и бренд-дизайн:Adobe Illustrator и Photoshop
  • Электронные книги и PDF-ки:Adobe InDesign
  • Мудборды, прототипы и обратная связь по дизайну: InVision
  • Видео презентации:Loom
  • Управление проектом:Trello
  • Счета и платежи:Harvest
  • Исследование, документы:Google Docs
  • Резервное копирование и передача файлов между компьютерами: Dropbox

Подведем итоги

Если вы серьезно настроились освоить дизайн, идите в Sketch, Figma или Adobe XD. Если вы пользователь Windows — на данный момент лучшим решением будет Figma или Adobe XD. У всех трех инструментов похожие интерфейсы, что позволяет быстро переключаться между ними.

Читать еще:  Прозрачный стул в интерьере

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

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

Дизайн онлайн бесплатно. Как сделать красивый дизайн без дизайнера? 6 крутых сайтов

Рассказываю, как сделать дизайн онлайн бесплатно. В том числе, вы узнаете про дизайн Инстаграм и другие соцсети. А также о 6 крутых сайтах, которые помогут сделать красивый дизайн даже новичку. Ничего не понимаете в дизайне? Тогда этот пост для Вас.

Photo by: @arsstonedesign

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

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

А сегодня ловите САЙТЫ для случаев, когда срочно нужно сделать красиво, но некому!

Бесплатный дизайн! Как раз это вам и нужно.

Итак, это не программы, а просто сайты. Дизайн онлайн будем делать. И все, что вам нужно – это ноутбук или компьютер. С телефона не получится.

Короче, если вы задаётесь вопросом, как сделать дизайн Инстаграм, тогда вы попали по адресу. Читаем и действуем!

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

Как и где заработать дизайнеру, читайте здесь>>>

Дизайн онлайн бесплатно. Делаем красиво без дизайнера!

CANVA

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

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

CRELLO

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

Шикарный онлайн-видеоконструктор для рекламных роликов, видео для постов, можно делать надписи на фото, доступны живые фото и крутые сторис-анимированные!

Сотни шаблонов и все работает в два клика. Можно считать, что бесплатный шаблон Инстаграм готов, да и для любой соцсети тоже.

Среди шаблонов есть даже отдельные заготовки для мемов, Хэллоуина и цитат. На SUPA предусмотрено все, вплоть до stories-формата.

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

В общем, в SUPA бесплатно можно создать короткие, привлекающие внимание видео для соцсетей.

Можно просто и быстро делать видео для постов, промо-ролики, короткие презентации, слайд-шоу с надписями, видео для Instagram.

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

ВЫБЕРИ, НА ЧЕМ ХОЧЕШЬ ЗАРАБАТЫВАТЬ ОНЛАЙН?

PIXLR

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

PREZI

Сайт для создания презентаций, круче, чем PowerPoint.

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

Еще плюсы: десятки шаблонов, анимированные переходы, оффлайн-доступ — и все бесплатно. Вам нужен тариф Basic — именно он и будет бесплатный.

POWTOON

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

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

Итак, небольшое резюме!

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

Когда дизайн нужен здесь и сейчас, вышеуказанные сайты здорово выручают. Пользуйтесь во благо!

Поблагодарите меня, сделайте репост в соцсетях с активной ссылкой на мой блог selftrue.ru

P.S.

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

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

А тем, кто ищет подработку, советую заглянуть сюда>>>

Что вообще такое ДЕЛЕГИРОВАНИЕ?

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

Рассмотрим два момента, которые помогут определиться вот с чем – нужно ли всю работу делать самой или можно делегировать?

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

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

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

Что делать, чтобы не перегореть? Делегировать!

Самое главное, это определиться, что вы готовы делегировать и для достижения каких целей вы это делаете.

15 сайтов для вдохновения веб-дизайнера

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

20 Октябрь 2019

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

Лучшие дизайны сайтов

Красота – понятие субъективное, поэтому иногда трудно понять, насколько хороша собственная работа в понимании других людей. Для этого полезно сравнивать себя с мастерами и равняться на них. Вот несколько порталов, которые специализируются непосредственно на веб-дизайне:

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

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

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

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

Читать еще:  Креатив в интерьере

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

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

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

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

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

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

Искусство вокруг нас

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

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

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

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

Можно черпать идеи прямо на рабочем месте, для этого есть ресурсы с прекрасными артами:

Behance.net – дизайнерские проекты разных направлений и категорий от логотипов до вывесок. По сути это социальная сеть для творческих личностей. Тут можно почерпнуть идеи не только для сайта, но и для корпоративного стиля в целом.

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

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

DesignCollector – картинки, фотографии, рисунки, видео, разные мелочи, которые приятно созерцать. Много современного искусства.

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

Вдохновение или плагиат?

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

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

Но рассмотрим и другую ситуацию. Вдохновение бывает не всегда, иногда идеи иссякают, а дедлайны никто не отменял. Что делать в этом случае? Работу выполнить нужно и сделать это требуется на уровне. И даже здесь плагиат – не выход. Если просмотр любимых сайтов, отдых и недолгая смена деятельности не помогли, то можно прибегнуть к переосмыслению чужого дизайна. Как это работает:

  • находим сайт с интересным дизайном;
  • отмечаем, что именно в нем нравится;
  • преобразуем интересные моменты в аналогичные – если нравятся контрастные цвета, то берем другие, если плавные линии – вписываем их в свой сайт, но не копируем;
  • добавляем необходимые элементы своего проекта;
  • вуаля, готов новый дизайн с теми же преимуществами, но совершенно другим видом.

Новичкам пригодится урок по созданию профессионального дизайна сайта:

Также можно нахватать интересных элементов с разных сайтов и объединить их в своем проекте, но это вариант не для новичков – важно чувствовать целостность структуры и грамотно сочетать каждую деталь, а с таким походом гарантий нет. Если вы еще только начинаете осваивать профессию веб-дизайнера, полезным будет совершенно бесплатный курс «Веб-Дизайнер: Взрывной старт».

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

Хорошие идеи для дизайна могут возникнуть совершенно спонтанно, поэтому обязательно записывайте концепции – они обязательно пригодятся! Можно использовать специально приобретенный для этого красивый блокнот, заметки в телефоне, рассказывать мысли своему диктофону, чувствуя себя агентом ФБР. Креатив – это основа профессии, поэтому нельзя его подавлять. Вдохновляйтесь каждым мгновением и получайте от своей работы удовольствие!

Программы для веб-дизайнера: где создавать сайты? | Глава 7

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

Копирайтер, переводчик и редактор. Преподаватель курса «Копирайтинг и контент-маркетинг» в Институте программных систем.

Авг 13, 2019 · 6 мин читать

(Перед вами бесплатный курс Рафаля Томаля «Интро в веб-дизайн». В курсе 7 глав. Если вы здесь впервые, то лучше начните сначала)

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

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

Читать еще:  Дерево в интерьере квартиры

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

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

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

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

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

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

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

Вот список программ, которые я рекомендую:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Дизайн:Sketch и Figma
  • Разработка: Coda
  • Иллюстрации, логотипы и бренд-дизайн:Adobe Illustrator и Photoshop
  • Электронные книги и PDF-ки:Adobe InDesign
  • Мудборды, прототипы и обратная связь по дизайну: InVision
  • Видео презентации:Loom
  • Управление проектом:Trello
  • Счета и платежи:Harvest
  • Исследование, документы:Google Docs
  • Резервное копирование и передача файлов между компьютерами: Dropbox

Подведем итоги

Если вы серьезно настроились освоить дизайн, идите в Sketch, Figma или Adobe XD. Если вы пользователь Windows — на данный момент лучшим решением будет Figma или Adobe XD. У всех трех инструментов похожие интерфейсы, что позволяет быстро переключаться между ними.

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

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

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector