Закрываем фотошоп

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

Определяем требования к сайту

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

а) БТ; Бизнес-требования (интсрументы бизнеса, цель ← задачи): как правило их три — лицо компании, инструмент продаж и/или развитие бизнеса. Лично я всегда стараюсь выделить одно основное.

б) ТУ; Требования участников проекта (о них всегда забывают): сайт как помощник сотрудника компании и часть бизнес-процессов (директор, маркетолог, юрист, логист, менеджер и т.д.).

в) ТП; Требования внешних пользователей: рассматриваем сайт как инструмент продаж товаров и услуг через интернет, целевые аудитории, сценарии пользователей (достаточно 1-3 сценариев).

Рефы сайтов

Достаём из заначки 3-4 сильных проекта, на которые вы хотите ровняться, которые всегда помогут «подсмотреть» и найти быстрое решение для определённого блока или стилистики. Т.е. примеры, на которых можно заэкспириться.

“

Хорошие художники копируют, великие художники воруют. © ПП

Тем более что проблем с этим сейчас нет: awwwards.com, revision.ru, behance.net, рейтинг рунета, один крутой японский сайт, inspiration.genue и т.д.

Думаем

Мой любимый пункт. На основании всего что у нас есть выше делаем быстрый скетч от руки. Всегда. За 5-10 минут для быстрой проверки. А чтобы было веселей, делаем его на re-print.me цветными карандашами.

Членение и соподчинение

На том же самом листе разбиваем всё на логические блоки и видим/создаём подчинённость.
Что важнее, что следует из чего, может что-то стоит выкинуть/разделить? Выкинуть что-нибудь обязательно!

Фотошоп не открываем!

Сетка и направляющие

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

Гуглим, читаем thegrids.ru или выбираем 960.gs, gridpak.com и т.д. GGS в тренде ;)

upd: для тех, кто не выдержал и открыл фотошоп → генератор сеток для фш guideguide.me

Шрифтовая схема

Как минимум, это:
— Базовый // основной контент
— Акцидентный // заголовки
— Меню/навигация
— Блок выделения // цитаты
— «Мелкий текст» // подсказки

Со временем, в голове каждого дизайнера формируются готовые наборы. Но всегда есть подсказки, например, lamb.cc/typograph/

Цветовая схема

Выбираем 5-10 основных/вспомогательных цветов. kuler.adobe.com — кулер нам в помощь.

Кстати, в кулер можно закинуть фотографию, например, с природы. В ней всегда и всё гармонично. А начиная с 5-х версий Kuler вообще — часть продуктов Adobe, покопайтесь в настройках.

Открываем фотошоп

Итого, потратив 30-40 минут в самом начале, мы сократим время разработки каждого и любого экрана проекта минимум в 2-3 раза. Хэй-хэй!

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

Оригинал: http://ziik.livejournal.com/210114.html