Дизайн и UX Программирование

Навыки и инструменты fullstack-дизайнера

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

Благодарим за помощь в подготовке материала Сергея Филимонова и Алексея Бородкина — преподавателей курса Нетологии «Веб-дизайнер PRO: дизайн и программирование».

светлана третяк

Редактор Нетологии.
Оформила опыт экспертов в статью


Какими навыками должен обладать fullstack-дизайнер

Обязательные навыки

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

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

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

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

Навыки UI-дизайна. Здорово, если помимо умения рисовать интерфейсы, fullstack-дизайнер работает с анимацией — есть понимание, как правильно её придумывать и реализовывать.

Навыки frontend-разработки. Минимум — HTML, CSS, JS.

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

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

Эмпатия. Умение чувствовать эмоции другого человека и стать на его сторону.

Дополнительные знания, которые определяют продвинутых fullstack-дизайнеров

  • Умение собирать быстрые прототипы.
  • UX-тестирования и исследования.
  • Работа с аналитикой.
  • Общее понимание backend-разработки.
  • Навыки работы с базами данных (для интерфейсной работы).
  • Умение работать с заказчиком и правильно собирать требования.
  • Понимание маркетинга (куда движется цифровой продукт).
  • Навыки копирайтера.
  • Понимание психологии поведения.
  • Опыт работы fullstack-дизайнера.

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


Инструменты fullstack-дизайнера

Для дизайна

Figma

Кросс-платформенный онлайн-редактор, который работает на Windows, macOS, Linux. В нём можно работать всей командой, в том числе с заказчиками. Бесплатный для одного пользователя и платный для работы с командой.

Sketch

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

Adobe XD

Приложение Adobe для отрисовки интерфейсов. Плюсы и минусы аналогичны Sketch. XD заметно менее популярен по сравнению с Figma и Sketch.

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

Для фронтенд-разработки

HTML + CSS + JavaScript

Это базовые технологии, на которых строятся сайты.

HTML нужен для разметки страницы. CSS — для её стилизации. JavaScript позволяет взаимодействовать со страницей.

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

Фреймворки React, Vue, Angular, Svelte

Фронтенд-фреймворк — набор инструментов, который позволяет создавать шаблоны и позволяют упростить работу с HTML, CSS и JavaScript.

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

Для разработки мобильных приложений среди веб-фреймворков самый популярный — React Native.

Советуем пробовать всё по чуть-чуть, а выбирать — по своим впечатлением с учётом тех задач, которые вы хотите решать.

CSS-фреймворк Tailwind CSS и другие

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

Пример написания кода в Tailwind CSS

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

Другим популярным фреймворком является Bootstrap. Его отличие от Tailwind в том, что он содержит готовые компоненты — вроде кнопок, форм, сетки — и предполагает, что вы будете придерживаться его или настраивать его под себя.

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

Для бэкенд-разработки

Есть мнение, что знание бэкенда необязательно для профессии fullstack-дизайнера. Возможно, но судите сами: запустить даже статичный сайт без знания бэкенда невозможно. Под бэкендом подразумевается взаимодействие с сервером — например, для создания ссылки на оплату в Яндекс.Кассе. Чтобы скрыть секретные ключи для создания такой ссылки, используется серверная часть, где они прописываются.

Fullstack-дизайнер должен знать основы безопасности данных. Например, понимать, что можно выводить на фронтенд, а что — нельзя.

Serverless

Бессерверный подход к разработке приложений — наиболее подходящий способ backend-разработки для fullstack-дизайнера. Не нужно настраивать или поддерживать сервер — это сильно экономит время и повышает надёжность системы.

MongoDB, PostgeSQL и другие базы данных

Если нужно подключить базу данных, например, для сохранения заявок, тогда потребуется изучить MongoDB. Для упрощения работы с этой частью backend есть облачные сервисы вроде Mongo Atlas.


Требования к железу

Перечисленные инструменты фронтенда при работе с несколькими большими проектами на большом дисплее требуют от 16 ГБ оперативной памяти и желательно 6-ядерного процессора для комфортной работы.

Также рекомендуем работать на большом экране — ноутбук с 15- или 16-дюймовым экраном и монитор от 27 дюймов, если часто работаете за одним столом (когда компьютер стационарный или можно подключить ноутбук к монитору).

 Профессия

Веб-дизайнер с нуля до PRO

Узнать больше

  • Готовим дизайнеров со знанием кода и разработчиков со знанием дизайна
  • Научим самостоятельно выполнять полный цикл работ по созданию сайтов 🔗
  • Выполните два больших дипломных проекта и семь курсовых работ


Практика: как строится процесс работы над статичным сайтом

Статичный сайт — это сайт, который состоит из готовых файлов HTML, CSS и JavaScript, созданных до обращения пользователя. В отличие от динамического сайта, где используется набор инструкций для сервера по тому, как создать эти файлы в момент посещения сайта. За счёт этого статичный сайт работает быстрее, стабильнее и меньше всего подвержен рискам, которые связаны с информационной безопасностью.

Например, на динамическом сайте, который создан на WordPress, запрос пользователя уходит на сервер ⟶ сервер генерирует HTML ⟶ отправляет в браузер ⟶ картинка отображается у пользователя. Грамотная настройка сервера позволит добиться таких же высоких показателей скорости, как и у статичного сайта, но это требует знаний и времени. Статичные сайты, наоборот, менее требовательны к инфраструктуре, на которой они расположены.

Как создать статичный сайт

 Определяете место хранения данных для сайта

Это может быть внешняя система (CMS, отдающая данные через API) или локальные файлы.

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

GraphQL сильно отличается от SQL-запросов, так как создан исключительно для фронтенда.

 Собираете сайт

На основе полученных данных (см. выше) происходит сборка сайта на сервере. После чего обработчик выдаёт папку с готовыми файлами HTML, CSS, JavaScript.

Обработчик — это JavaScript-фреймворк вроде Gridsome для Vue и Gatsby для React.

 Загружаете сайт на CDN

Папка с файлами загружается на CDN через провайдера вроде Яндекс.Облако, Vercel, Netlify. Можно разместить сайт и на FTP, но CDN быстрее, надёжнее и дешевле.

Сайт запущен.

Инструменты для работы со статичными сайтами

Пройдёмся по каждому инструменту.

Фреймворки

React: Gatsby (фреймворк для создания статичных сайтов) и Next (SSR, Server Side Rendering — для нестатичных сайтов).

Vue: Gridsome (для статичных сайтов, аналог React Gatsby) и Nuxt (SSR + можно создать на его базе и статичный сайт).

Headless CMS

Headless CMS — CMS, которые не привязаны к сайту.

Для статичных технологий в качестве CMS могут выступать разные платформы.

Привычные: WordPress, Ghost.

Специализированные (только для статичных сайтов): Forestry, GraphCMS и другие.

Необычные: Airtable (табличный инструмент), Notion (похож на Airtable, но у него пока нет API — добавлен в этот список авансом).

Сергей Филимонов

Fullstack-дизайнер, разработчик статичных сайтов на Gridsome и Airtable

Я предпочитаю в качестве CMS использовать Airtable. Это универсальная система, в которой можно построить CRM, LMS и другие системы для организации и хранения данных.

Опыт разработки и пример статичного сайта на Airtable можно посмотреть в моей статье на vc.ru.

CDN/Serverless

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

Популярные западные сервисы: Vercel (ex-Zeit, Now) и Netlify.

Российские инструменты: Яндекс.Облако. Довольно специфичный интерфейс, даже опытным специалистам не так легко в нём разобраться.


Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

светлана третяк

Редактор Нетологии.
Оформила опыт экспертов в статью

Телеграм Нетологии