Pull to refresh

Веб-дизайн + Mac OS − Adobe = Sketch. Чем новый инструмент лучше всех старых

Web design *
Sandbox
Программы Адоби я очень сильно не люблю. Они большие, несуразные, прожорливые, и с ними приходится мириться, потому что за неимением сильных конкурентов Фотошоп с Иллюстратором стали уже стандартными инструментами в профессии.

Начинал я рисовать сайты, как и все, в Фотошопе. Но чем сложнее становились задания, тем сильнее ощущалась его неприспособленность для проектирования интерфейсов. Оно и понятно: Адоби никогда не говорили, что он предназначен для интерфейсных дизайнеров, это дизайнеры как-то сами себе придумали. Всегда хотелось иметь инструмент с двумя кнопками и тремя ползунками — все равно я больше не использовал ни в Фотошопе, ни в Фаерворксе ни в ИнДизайне. Сейчас у меня из «адобовского» набора есть только доставшийся бесплатно (в нагрузку к планшету) Фотошоп Элементс, установленный из принципа (халява же), а все остальное я уже давно заменил другими приложениями. И вот одно из.

Читать дальше →
Total votes 51: ↑47 and ↓4 +43
Views 110K
Comments 59

Дизайн сайта в Sketch.app (Mac OS). Часть 1: плагины и прототип

Web design *Interfaces *
Tutorial
Радует, что все больше дизайнеров посматривают в сторону от Адоби в поисках инструментов поудобнее, полегче, попроще и подешевле. И выбирать есть что. Сегодня я расскажу про свой процесс создания дизайна сайта в Sketch.app. Надеюсь, какие-то мысли вы позаимствуете у меня, что-то никогда не станете делать так же, а до чего-то придете своим путем. Оставайтесь с нами.
Читать дальше →
Total votes 24: ↑22 and ↓2 +20
Views 54K
Comments 21

Дизайн сайта в Sketch.app. Часть 2.1: наводим красоту

Web design *
Tutorial
Первая часть про прототипы.

intro-img-2

Описание процесса у меня очень длинным получается, поэтому двумя частями не ограничимся.
Итак, продолжаем с нашими наушниками. Для начала давайте разберемся, как в Скетче делать сетку...
Читать дальше →
Total votes 11: ↑8 and ↓3 +5
Views 29K
Comments 10

Switch to Sketch. Часть 1

Web design *Vector graphics *
Tutorial


О программе Sketch я узнал еще год назад. Скачал демо тогда еще 2-й версии. Признаться, она меня совершенно не впечатлила. Какой-то слишком простой показалась. Я привык к навороченным интерфейсам софта от Adobe, а расположение панелей в стиле Apple iWork (Pages, Numbers, Keynote) мне по какой-то причине не нравится. К тому же мне оказалось комфортнее работать с темным интерфейсом, каковой нынче есть в Photoshop CC. Плюс Sketch 2 был достаточно кривоватый, содержал немало досадных багов, да и вообще впечатления не оказывал скоростью работы. В общем, поигрался с демкой и благополучно забыл. Впрочем, оказалось, что зря…

Читать дальше →
Total votes 73: ↑68 and ↓5 +63
Views 143K
Comments 69

Switch to Sketch. Часть 4

Web design *Vector graphics *
Tutorial


Оригинальная версия старинной французской поговорки гласит: Le bon Dieu est dans le détail («Бог в деталях»). Собственно, неприметные на первый взгляд детали и отличают Sketch от многочисленных конкурентов. Давайте поближе взглянем на этот кладезь удивительных мелочей.

Читать дальше →
Total votes 34: ↑30 and ↓4 +26
Views 58K
Comments 38

10 советов по прототипированию в Sketch

Web design *Vector graphics *Interfaces *Mobile applications design *
Translation


Так как Sketch был создан специально для работы над мобильными и веб-интерфейсами, неудивительно что он стал одним из самых быстрых и гибких инструментов для прототипирования. Эти 10 советов сделают его еще более мощным средством.
Читать дальше →
Total votes 33: ↑31 and ↓2 +29
Views 55K
Comments 15

Как я делал шаблон веб-магазина в Sketch.app для Themeforest. Часть 1: письмо, идея, прототип

Web design *Vector graphics *Interfaces *
image

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

Шаблон получился вот такой.

Дальше я опишу, что и как делал в процессе. Статья традиционно будет в нескольких частях.
Читать дальше →
Total votes 25: ↑23 and ↓2 +21
Views 36K
Comments 15

Photoshop, Sketch инструментарий UI/UX-дизайнеров: что выбрать для разработки интерфейсов?

Web design *Vector graphics *Interfaces *Mobile applications design *
В последнее время вопрос инструментария UI/UX-специалистов стоит очень остро: какое ПО использовать для разработки интерфейсов? Мы в нашей компании также горячо обсуждаем этот вопрос. И дискуссия часто имеют очень острый характер. Что выбрать для работы? Какой редактор более функционален для той или иной задачи дизайнера? Перечень наших задач достаточно широк, начиная с создания фирменного стиля и заканчивая полным циклом разработки сложных диджитал продуктов. Например, мобильных приложений для управления системами умного дома, полнофункциональных e-commerce систем.
Я не буду первым, кто поднял эти вопросы, но постараюсь дать на них ёмкие ответы. Возможно, моя статья будет интересна начинающим дизайнерам, которые еще не определились окончательно с направлением своей деятельности, или дизайнерам, которые хотят переквалифицироваться из одной специальности в другую.



Подробности
Total votes 15: ↑7 and ↓8 -1
Views 40K
Comments 36

Как я делал шаблон веб-магазина в Sketch.app для Themeforest. Часть 2: выкладываем товар

Web design *Typography *Interfaces *Usability *Prototyping *
Tutorial

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


enter image description here


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

Читать дальше →
Total votes 18: ↑11 and ↓7 +4
Views 7.7K
Comments 6

Руководство новичка по разработке плагинов для графического редактора Sketch

JavaScript *Cocoa *
Translation
Tutorial


Приветствую друзья! Меня зовут Антон, я развиваю сайт ux.pub посвященный графическому редактору Sketch. Очень часто мне на почту приходят вопросы о тонкостях разработки плагинов для Sketch. Я не разработчик и не специалист в создании плагинов, поэтому я решил сделать перевод самого подробного руководства по созданию плагинов от Mike Mariano.

Часть 1  — С чего начать?


Вы хотите начать писать Sketch-плагины и не знаете, с чего начать? Продолжайте читать, так как этот пост как раз для вас!

Освоить базу не так просто. Есть масса примеров уже существующих плагинов, но очень сложно понять, с чего нужно начать. В помощь вам я собрал всю нужную информацию, которую только удалось отыскать, в одном месте.
Читать дальше →
Total votes 20: ↑20 and ↓0 +20
Views 7.7K
Comments 2

4 правила работы в Sketch над крупными проектами

Web design *Vector graphics *Interfaces *Mobile applications design *

image


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

Total votes 41: ↑38 and ↓3 +35
Views 50K
Comments 43

9 нелепых способов открыть .sketch-файл. И один ничего такой

Web design *Vector graphics *Interfaces *Prototyping *
Итак: требуется открыть .sketch-файл, созданный программой Sketch. Той самой, которая есть только на Mac’ах.

А Mac’a нет. Есть только Windows и этот дурацкий .sketch-файл, который кто-то прислал. И у этого кого-то Mac есть. А у тебя нет. Только Windows.
Читать дальше →
Total votes 134: ↑105 and ↓29 +76
Views 97K
Comments 77

Почему ваше приложение выглядит лучше в Sketch

Productivity Inside corporate blog Web design *Interfaces *Mobile applications design *Graphic design *
Translation

Найдите отличие




Посмотрите на эти две картинки — видите разницу?

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

  1. Тень больше
  2. Градиент темнее
  3. Слово «in» на первой строчке, а не на второй

Левая картинка — скриншот из Sketch, а правая — представление этого же дизайна на iOS. Такие разночтения появляются при рендере изображения. Шрифты, межстрочный интервал, радиус тени, параметры цветов и градиентов и все прочие константы у них абсолютно одинаковые.

Как видите, некоторые аспекты исходного дизайна могут быть утеряны при переводе файла-макета в собственно код. Ниже мы рассмотрим некоторые из этих нюансов, чтобы вы знали, на что нужно обращать внимание и как исправить ситуацию.
Читать дальше →
Total votes 15: ↑13 and ↓2 +11
Views 8K
Comments 12

Еще 11 полезных инструментов для разработчиков и дизайнеров с Product Hunt

Productivity Inside corporate blog Web design *CSS *JavaScript *Mobile applications design *
Коллекция Product Hunt продолжает пополняться интересными, толковыми и остроумными решениям, которые разработчики создают для своих коллег и соратников. В этой подборке мы вкратце расскажем о нескольких пользовательских фаворитах последних месяцев, которые позволяют команде облегчить себе жизнь в разных отношениях, а отдельным специалистам — прокачать профессиональные навыки.


Читать дальше →
Total votes 20: ↑15 and ↓5 +10
Views 6K
Comments 1