Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>4 окт 2023</li>

3 <li>0</li>

4 </ul><h2>Страх белого листа: как подступиться к макету, который не дизайнится</h2>

5 С чего начать работу над проектом и почему не надо сразу двигать пиксели.

6 Иллюстрация: Полина Честнова для Skillbox Media

7 Продуктовый дизайнер и UX-писательница из жаркого Краснодара, экс графический дизайнер, путешественница, любительница компьютерных игр, йоги и настолок. Пишу о своей жизни, удачах и провалах в своём маленьком бложике в "телеге".

8 Работаю дизайнером с 2018 года, и у меня до сих пор бывает ступор перед новой задачей: бизнес клиента мне неизвестен, и с чего начать проект - непонятно. Со временем я выработала алгоритм, как с этим бороться и браться за новую задачу не со страхом белого листа, а с интересом исследователя.

9 Рассказываю и показываю, с чего я теперь начинаю любой проект и как это помогает мне быстрее решать дизайнерские задачи.

10 У меня был клиент, который хотел сделать с нуля веб-сервис зарплатного проекта для бухгалтеров. Первая мысль: "Ужас, как я буду это делать?" Я понятия не имела, как должен выглядеть интерфейс зарплатного сервиса ― мне было страшно и интересно одновременно.

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

12 Список задач в Notion по проекту зарплатного веб-сервиса в виде диаграммы Ганта - у каждой задачи есть дедлайн, чтобы проект не затянулсяСкриншот: Дарья МартовскиСкриншот: Дарья МартовскиТак я делаю конкурентный анализ: к каждому конкуренту задаю вопросы ― пишу их в левой колонке. Отвечаю на них в следующих колонках, постепенно двигаясь вправо, и в самой правой колонке ― на скриншоте она выделена голубым ― пишу выводы. Некоторые нюансы у конкурентов оцениваю по 10-балльной шкале. Предлагаю вам делать то же самое. Например, вам дали задачу разработать баннер для продажи кухонь по акции. Не бойтесь задавать вопросы и себе, и заказчику. Список будет примерно такой:

13 <ul><li>Какую проблему должен решить баннер?</li>

14 <li>Какой заголовок и текст должен быть?</li>

15 <li>А если текст уже есть, как его улучшить и изменить?</li>

16 <li>Где будет размещаться баннер?</li>

17 <li>Какой сайт у фирмы заказчика и соцсети?</li>

18 <li>Как кто-то уже решил похожую задачу?</li>

19 </ul>Те же вопросы можно задать и в других проектах - при разработке сайта, приложения, плаката.

20 Для ответов на вопросы заведите любой текстовый или графический редактор. Я пользуюсь Notion: результаты любых своих "раскопок" по проекту записываю на отдельные страницы и складирую их на общей странице проекта.

21 Если нашли ответ, референс или у вас возникла идея - сразу записывайте и прикрепляйте картинку. Когда найдёте ответы на все вопросы, складывайте всё в один файл и пишите общий вывод по задаче. Так вы поймёте проблему, и вам будет гораздо проще перейти к делу.

22 Скриншот: Дарья МартовскиИз конкурентного анализа я выписываю отдельный общий вывод - подвожу итог по всем мелким выводам, которые были в таблице. Это ещё сильнее упрощает задачу.

23 Так выглядит общая страница по проекту, куда я прикрепила все свои исследования и выводыСкриншот: Дарья МартовскиНекоторые из множества заметок по проектуСкриншот: Дарья МартовскиА это страница в Notion по другому проекту ― многостраничному сайту. Здесь я собрала все исследования, выводы и мысли. К этой странице я возвращалась много раз, и это помогло мне справиться с большой задачей качественноСкриншот: Дарья МартовскиПосле исследования у вас уже должно быть минимальное представление о решении задачи, а значит, самое время брать текст, квадраты, прямоугольники и комбинировать их.

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

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

26 На самом первом фрейме выписала задачу. Затем разместила референсы, далее выбрала цвета для будущих баннеров и справа создала варианты композицийСкриншот: Дарья МартовскиПосле создания "базовой версии" макета копируйте её, размещайте рядом и продолжайте проектировать. Пробуйте создать 5-10 вариантов.

27 Несколько вариантов композиций, созданных при помощи текста и серых прямоугольниковСкриншот: Дарья МартовскиТеперь выберите наиболее удачные варианты композиции, посматривайте на отобранные решения из референсов и детализируйте свой макет: добавьте цвет, иллюстрации, 3D, любые другие дополнительные детали для качественного выполнения задачи.

28 Если в начале проекта у вас не было ни одного макета, то на этом этапе вы уже выбираете самый хороший из нескольких:

29 Разноцветные баннеры справа ― это уже финальные варианты. Снизу добавила бонус ― баннеры с 3D-шкой в композицииСкриншот: Дарья МартовскиЕсли после поиска проблемы вы так и не можете приступить к решению, попробуйте использовать ваши старые наработки из других проектов. Я много раз пользовалась этим способом, и он выручал в самых безвыходных случаев.

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

31 Два разных баннера, сделанные в разное время, а композиция одна. Воспользовалась своими старыми наработками, когда был ступор по задачеИзображение: Дарья МартовскиЧтобы дизайн не приносил каждый раз боль и отчаяние ― составьте план, разбейте огромный ком непонятности на более мелкие кусочки и работайте над задачей поэтапно. Алгоритм действий простой, смастерила его для вас в виде схемы:

32 Изображение: Дарья МартовскиЭтот способ дизайнить эффективен, даже когда страха чистого листа нет. Так гораздо проще выйти на правильный путь и быстрее сделать проект.

33 Когда вы привыкнете использовать алгоритм и будете преодолевать страх каждый день, почитайте материал Лёши Ревы про<a>быструю вёрстку любого макета</a>. Ещё одна личная рекомендация ― книга "<a>Кради как художник</a>" Остина Клеона. После неё вы станете увереннее браться за работу и полюбите работать с референсами.

34 Другие материалы о профессии дизайнера

35 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>