Pixli

Многопользовательский доступ к аккаунту

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

Работа в браузереМногостраничностьШаблоныКопирование между проектамиУправление динамическим контентомМощная анимация с вариативной настройкойАдаптирован под коммерческую сборку: для дизайнеров, верстающих под заказТриггерыНедостатки:

• В текущей версии не реализован функционал E-commerce;
• Количество шаблонов ограничено;
• Интеграции с другими сервисами не прописаны;
• Порог входа в сервис достаточно высок, а Lite режим все равно не позволяет использовать его новичку, надеемся, что разработчики активно работают над этим, тогда сервис ждем большое будущее (мнение автора может не совпадать с мнением редакции)

Где могут работать веб-дизайнеры

У веб-дизайнера есть несколько вариантов трудоустройства:

В digital-агентство

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

В крупную компанию

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

Стать фрилансером

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

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

Создание каркаса модели

Применяйте визуальный дизайн

Уточнение

— Выглядит тесновато? — Трудно читать текст?

• Выберите более четкий шрифт или увеличьте его размер
• Увеличьте цветовой контраст между фоном и передним планом

— Трудно разобрать содержимое?

• Добавьте заголовки с более крупным шрифтом
• Добавьте больше интервалов между заголовками и абзацами

— Выглядит небрежно или непоследовательно?

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

Создание HTML–структуры

• Разместите все HTML элементы на странице, пока не волнуйтесь о добавлении CSS.
• Это позволит вам увидеть естественный поток HTML документа и рамочную модель. Создание структуры страницы в HTML облегчит понимание того, что нужно добавить в CSS, чтобы разместить и стилизовать элементы в соответствии с дизайном.
• После создания HTML-кода перейдите к расстановке и стилизации с помощью CSS.

Начните создание макета будущего сайта

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

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

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

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

Sketch

«Лёгкий» и компактный
Sketch занимает минимум места на диске, так как не использует собственные средства для отрисовки контента, а опирается на встроенные инструменты операционной системы. Этот принцип работы обеспечивает еще и высокую скорость запуска и открытия файлов.

Есть всё для дизайна интерфейсов

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

Свободная рабочая поверхность

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

Кросс-проектная интеграция

Площадкой предусмотрена возможность создания библиотек для передачи элементов между несколькими макетами Sketch.

Экспорт графики

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

Плагины

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

Интеграции

Для площадки предусмотрено около 30 интеграций со сторонними сервисами, что позволит разработчики подключить к готовому проекту максимум пользовательского функционала.

Сообщество

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

Недостатки:

• Реализован только как онлайн-программа для Mac OS, не имеет версии десктоп;
• Проект можно передать только команде в Sketch Cloud;
• Нет возможности создавать постоянные цветовые палитры;
• Отсутствует прямой редактор CSS кода;
• Нет встроенной системы комментариев;
• Стартовая цена $99. Действует ежегодное продление лицензии: поддержка обновлений действительна в течение года после покупки. Бесплатной версии программы нет, но есть возможность подключения 30-ти дневного пробного периода.
• Совместная работа доступна только в более дорогом тарифе.

Adobe XD

Многопользовательский режим работы

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

Режим совместного использования (Share mode) позволит вам передавать проект заинтересованным лицам, управляя правами доступа: есть функция защиты паролем. Использование артбордов будет легко отслеживать благодаря возможности уникальных имён для каждой ссылки.

Создание состояний

Для каждого элемента интерфейса теперь можно задать несколько вариативных состояний, рассчитанных на различные типы взаимодействия с пользователем (Hover, Pressed, Disabled ,Success.), благодаря этому дизайнеру не нужно прописывать несколько компонентов для разных сценариев, а включить варианты в набор состояний компонента.

Повтор сетки

Облегчить и ускорить работу над проектом поможет опция повтора сетки (активируется сочетанием Ctrl + r), позволяющая копировать группу объектов или целый слой.

Auto-animate

Auto-animate у Adobe XD отличается высокой скоростью и легкостью настройки, при этом еще нет возможности точного управления.

Создание и управление прототипами при помощи собственного голоса Голосовые триггеры и воспроизведение речи дают возможность прототипировать с помощью голоса. Эта функция уникальна и не реализована ни в одном другом сервисе.

Плагины

Пользователи могут самостоятельно писать плагины для Adobe XD на JavaScript, HTML и CSS. Кроме того, многие плагины Sketch были перенесены разработчиками в Adobe XD.

Совместимость с другими инструментами

Adobe XD создан на открытой платформе и совместим со многими другими инструментамине только из Adobe CC.

Импорт Sketch

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

Недостатки

• Нет возможности тестировать прототипы на устройствах Android;
• Нет доступа к программе без подписки (платной) в Adobe Creative Cloud;
• Нет встроенного управления CSS кодом для передачи разработчикам;
• Недостаточно настроек при работе с текстом;
• Некоммерческая версия имеет жесткие ограничения: доступен только один активный общий проект, с которым взаимодействуют 1-2 редактора. Подключается одна активная общая ссылка.

«Design a User Experience for Social Good & Prepare for Jobs» от Google

Язык: английский.

Длительность: курс рассчитан на 5 недель, общая длительность уроков 46 час.

Формат: видеоуроки + текстовые материалы + лекции.

Уровень сложности: для начинающих.

Обратная связь: нет.

Программа обучения:

1. Запуск процесса проектирования UX: сопереживание, определение, создание идей.
2. Проектирование каркасов и низкоточных прототипов.
3. Создание макетов и высокоточных прототипов.
4. Разработка дополнительного адаптивного веб-сайта.
5. Поиск работы в UX.

Чему научитесь:

• Создавать полноценное и эффективное портфолио, опираясь на полученные знания о процессах проектирования UX.
• Делать каркасы, макеты, низко- и высокоточные прототипы для мобильного приложения и адаптивного веб-сайта.
• Как вести себя на собеседовании при трудоустройстве на должность UX-дизайнера.