20 ноября 2013 в 20:56

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

Радует, что все больше дизайнеров посматривают в сторону от Адоби в поисках инструментов поудобнее, полегче, попроще и подешевле. И выбирать есть что. Сегодня я расскажу про свой процесс создания дизайна сайта в Sketch.app. Надеюсь, какие-то мысли вы позаимствуете у меня, что-то никогда не станете делать так же, а до чего-то придете своим путем. Оставайтесь с нами.

Сейчас работаю на бете 2.4. Если у вас версия постарше, то подойдет и она — различия не сильно радикальные.

Плагины


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

Включить поддержку расширений нужно из настроек:


Дальше идем на Гитхаб к bomberstudios, читаем описания плагинов и качаем, что понравится. Файлы потом закидываем в папку и называем как-нибудь-для-себя-понятно. Обязательно скопируйте «library» — без нее некоторые скрипты не работают.





В названиях я добавляю символы в начало — потом в меню Скетча плагины красиво сортируются:



Что рисуем?


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

Прототип на бумажке


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

Это набросок основных частей страницы.



1. Сверху делаем логотип, меню и поиск.
2. Потом слайды с продуктами, названием, небольшим описанием и ценой.
3. Ниже — категории наушников по видам (большие картинки) и по производителям (маленькие).
4. Дальше будет небольшой текст, помогающий покупателю определиться, какие варианты ему могут подойти. Еще можно небольшой фильтр сделать.
5. И в самом низу футер со ссылками на основные разделы и поиском.
Короче, ничего нестандартного.

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

Прототип


Для прототипов у меня все тот же Скетч, для интерактивности и комментариев — Инвижн.
Допустим, нам нужна только «десктопная» версия сайта. Тогда макет можно делать где-то 1200 пкс по ширине.
Делаем холст размером 1200 на 3000 (чтоб наверняка хватило по высоте):




Холст можно сохранить как шаблон на будущее. Назовите его, например, «1200x3000» и добавьте на панель с уже встроенными шаблонами размеров:



Дальше нужно сделать заглушку («плейсхолдер», да) для картинки. У нас магазин, поэтому фото много будет.
Все, в общем-то, весьма просто: рисуем квадрат, поверх него две линии по углом 45 и группируем.



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



Если вас не устраивает стиль объекта по умолчанию, просто перекасьте по-своему, добавьте теней/обводок и выберите в меню Edit->Set Style as Default. Я обычно оставляю «дефолтный»: серая заливка без обводки.



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

Итак, идем по порядку. Называем слои с заглушкой «img». Для переименования слоя есть встроенное сочетание Cmd+R. Если нужно назвать сразу несколько, то можно заиспользовать…
Скрипт №1: спрашивает имя слоя, а потом задает его всем выбранным на текущий момент. Срабатывает по сочетанию клавиш (у меня — Ctrl+N). Задать сочетание клавиш можно двумя способами. Стандартным в OS X через настройки:


Или в самом коде плагина:


И сразу же скрипт №2: все то же, но к имени добавляется порядковый номер начиная с «1». Т.е. вы выбираете 5 объектов, жмете Ctrl+Shift+N (ну, например), вводите в окне имя «img», а скрипт называет объекты «img 1», «img 2» и т.д. Самое то, когда нужно упорядочить какой-нибудь набор превьюшек.
Скрипт в работе:



Копируем «img» и растягиваем до примерных размеров будущих слайдов.


Дальше меню. Пока что просто длинная плашка. Поверх нее поставим наш первый «img» — это, типа, логотип. Меню лучше писать сразу такое же, как будет на рабочем сайте.


Дальше о слайдах.

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

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


Чтобы каждый раз не делать такой текст заново, можно в Автоматоре собрать небольшое приложение, которое будет копировать абзац в буфер обмена.


В первый блок вставляете абзац лорем-ипсума, а потом через панель шрифтов выбираете размер (у меня 16) и шрифт BLOKK Neue. Кириллического варианта у гарнитуры нет.



А потом в процессе можно просто набрать в спотлайте «lorem ipsum» (название нашего мини-приложения) и Enter. Потом Cmd+V на макете.



Категории.


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


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


И фильтр. Давайте параметры возьмем из Яндекс.маркета — нам для примера, а они не обидятся.




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


Ну, и остался футер.


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

Вопросы и возражения жду в комментариях, постараюсь никого без внимания не оставить.
Евгений Резник @reznik_e
карма
38,0
рейтинг 0,0
Веб-дизайнер
Похожие публикации
Самое читаемое Дизайн

Комментарии (21)

  • 0
    Больше года использую sketch для дизайна, очень прост в использование. Но есть у него и свои минусы, при обновлении программы, проекты созданные в старой версии, могут некоректно отображаться, радиус круга слетает, цвета и тп. Парой глючит интерфейс. Но в целом программа достаточно удобная, постоянно обновляется и улучшается. Использую ее в связке с pixelmator и coda2
    • 0
      Еще раньше был глюк, я им отписывался, возможно поправили, все проекты хранятся в dropbox, работаю на работе и дома, вечерем допустим вышел апдейт софта, обновился, работаешь в проекте, приходишь на работу, забыв про обновление открываешь проект в необновленной версии программы, а он его уничтожает, открывается пустой проект и он автосохраняется, спасала time machine. Про плагины отдельное спасибо, не знал что они появились))
      • 0
        Они про Дропбокс что-то отдельным постом в блоге писали — видимо, проблема глобальная была. У меня вся работа дома, поэтому не проверял. После обновления я обычно дублирую проект на всякий случай: тут как с линуксами — не угадаешь, что отвалится в следующей версии. Еще последние беты работают стабильнее официальных версий.
  • 0
    Сверстал два сайта из макетов подготовленых в скетче. Да, глюков хватает, но по большому счету это лучшее что случалось с макетами за всю мою(пускай и не долгую) професиональную деятельность.
  • 0
    В прототипировании у Axure все еще нет конкурентов. Ничто не сравнится по скорости и удобству работы.
    • 0
      Да, программа наверно хорошая, но, как мне кажется, ориентированная на большие команды, долгие проекты и отдельную должность «проектировщик интерфейсов».
      • 0
        Как раз нет. Ее главное достоинство в том, что человек, впервые ее увидивший может за 15 минут, включая обучение программы, сделать аккуратный и детальный прототип почти любой главной страницы.

        У всех (я их всех перепробовал) других программ есть те или иные недостатки. Например, прототипы не выходят достаточно аккуратными на вид, выглядят именно карандашными набросками. Что не всегда уместно. Или, например, простое перемещение блок по странице сделано медленным или не удобным в плане выравнивания элементов по сетке. И так далее, везде что-то не то.
  • 0
    Пользуюсь Бальзамиком, работа летит очень быстро, а сами файлы получаются довольно веселыми:

    image
  • 0
    А на каком плане вы работаете в инвижн апп? Мне он тоже очень нравится, но я никак не могу решится, потому что даже за 500 руб. в месяц там можно иметь всего несколько проектов. А остальные видимо надо удалять. Обидно терять кликабельлный прототип, даже если работа над приложением уже закончилась.

    Сам скетч волшебная штука, особенно такой автоматизированный) Я там тоже работаю, но мне жутко не хватает библиотеки с иконками. В фотошопе есть библиотека шейпов, куда можно засунуть самые частоиспользуемые, и ставить их без геморроя, в иллюстраторе есть элементы. А в скетче каждый раз надо экспортировать картинками или держать открытый файл на заднем плане, чтоб копировать оттуда.
    • 0
      В инвижине, начиная с плана «Professional» (который за $24 в месяц, на 5 проектов), удалять старые проекты не обязательно. Начиная с этого тарифа есть «архивирование проекта». При перемещении в архив вы не можете работать с проектом, просматривать экраны и файлы, но ничего не удаляется. Если вам понадобится что-то подредактировать/скачать/посмотреть в заархивированном проекте, а проектов уже максимальное количество, то просто перемещаете один из проектов в архив, а старый восстанавливаете. Но при архивации удаляются все ссылки на него (становятся не рабочими) и их надо создавать и посылать клиенту/коллеге заново. Кликабельность и комменты при этом не теряются, всё на месте. Сам сижу на этом тарифе.
      А ещё на этом тарифе появляется возможность хранить все исходники проекта (любые файлы) и просматривать историю изменений для каждого экрана.
    • 0
      Профессиональный план, как уже ответили :-) Но иногда спускаюсь и до «Стартового». Лайфхак: если проектов несколько, но экранов в них немного, соберите все в один на Инвижине — главное, чтобы не пересеклись ссылки. Можно снять галочку

      и тогда никто (предположительно) не спалит, что он здесь не один. А разработчикам/клиентам просто давайте ссылки на разные стартовые экраны — каждому свой проект.

      С библиотеками беда, согласен. Они вроде как собираются сделать объекты, билиотеки и мастер-страницы, но что именно это будет и как будет работать — пока не понятно. Я как библиотеку с иконками тоже держу отдельный файл.
      • 0
        Мне кажется, что в инвижене не очень адекватное ценообразование. Скетч в двадцать раз более функциональный и стоит полторы штуки в год вроде. А маленькая приблуда 700 рублей в месяц.
        Идея с одним проектом классная)
        • 0
          Оно может и неадекватное, но деваться все равно некуда :-)
  • 0
    Конечно, по-дефолту считается, что «дизайнерская» ОС — это Мак, но можно было в начале статьи добавить к описанию (а лучше в заголовке), что работает только под Мак. Уж было хотел попробовать программу под Вин. Может есть неплохой подобный софт под Вин?
    • 0
      Пардон, я просто себе представил, что по «.app» будет понятно, что программа не виндовая. На Вин остается Фаерворкс наверно.
      • 0
        Ничего, я тоже может резко выразился. Но для меня, как для пользователя Windows расширение «.app» не говорит ни о чем, т.к. с таким обычно не сталкиваешься. Я подумал, это название так пишется.
        Фаерворкс Адоб уже тоже решили не поддерживать. Не знаю почему, другие их программы не решают того, что мог решать Фаерворкс. Я на него так и не смог перейти, т.к. не было верстальщиков, которые бы в нем работали (как и в Индизайне), а переводить FW в PSD то еще удовольствие. Проще структурировано делать макет сразу в Фотошопе. Но что-то изменять в нем, подвинуть скажем кучу блоков на некоторое расстояние, тот еще геморрой.
      • 0
        Чисто для прототипирования – Axure, для всего сразу – Xara Designer или Inkscape.
  • 0
    Ребята, есть ли в Скетче что-то вроде links, как в InDesign?

    Или подскажите как вы решаете проблему актуализации компонентов на разных страницах/документах на этапе отрисовки макетов?
    • 0
      Извините, что с опозданием. Я так понимаю, нужно что-то типа фотошопных смарт-объектов (поменял один — поменялись везде)? Есть стили, они связаны по всему документу, но это немного не то — цвет/обводка/тенюшки и т.п. Радиус скруглений, например, придется менять вручную всем.
  • 0
    Файл с примером удален из файлообменника

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