Быстро и качественно. Законы макета.
0. Закрываем фотошоп
Каждый раз, открывая чистый лист в фотошопе для нового проекта, начинающие и не только дизайнеры сталкиваются с вопросом - что дальше? У каждого из них есть свои методики создания первого пикселя, я же расскажу о том, что я обычно рекомендую делать перед началом любого проекта.
1. Определяем требования к сайту
Если вы не получили их от клиента/менеджера/проект-менеджера, вы должны их принять самостоятельно, обязательно. Всего существует 3 основных видов требований:
а) БТ; Бизнес-требования (интсрументы бизнеса, цель ← задачи): как правило их три - лицо компании, инструмент продаж и/или развитие бизнеса. Лично я всегда стараюсь выделить одно основное.
б) ТУ; Требования участников проекта (о них всегда забывают): сайт как помощник сотрудника компании и часть бизнес-процессов (директор, маркетолог, юрист, логист, менеджер и т.д.).
в) ТП; Требования внешних пользователей: рассматриваем сайт как инструмент продаж товаров и услуг через интернет, целевые аудитории, сценарии пользователей (достаточно 1-3 сценариев).
2. Рефы сайтов
Достаём из заначки 3-4 сильных проекта, на которые вы хотите ровняться, которые всегда помогут «подсмотреть» и найти быстрое решение для определённого блока или стилистики. Т.е. примеры, на которых можно заэкспириться.
Хорошие художники копируют, великие художники воруют. © ПП
Тем более что проблем с этим сейчас нет: awwwards.com, revision.ru, behance.net, рейтинг рунета, один крутой японский сайт, inspiration.genue и т.д.
3. Думаем
Мой любимый пункт. На основании всего что у нас есть выше делаем быстрый скетч от руки. Всегда. За 5-10 минут для быстрой проверки. А чтобы было веселей, делаем его на re-print.me цветными карандашами.
4. Членение и соподчинение
На том же самом листе разбиваем всё на логические блоки и видим/создаём подчинённость.
Что важнее, что следует из чего, может что-то стоит выкинуть/разделить? Выкинуть что-нибудь обязательно!
Фотошоп не открываем!
5. Сетка и направляющие
Направляющие/Сетка всегда помогут не потеряться в пути, это Нить Ариадны для любого дизайнера (а еще и получить ободряющий кивок от технолога), и не важно, промо-сайт это или корпоративный портал.
Гуглим, читаем thegrids.ru или выбираем 960.gs, gridpak.com и т.д. GGS в тренде ;)
upd: для тех, кто не выдержал и открыл фотошоп → генератор сеток для фш guideguide.me
6. Шрифтовая схема
Как минимум, это:
- Базовый // основной контент
- Акцидентный // заголовки
- Меню/навигация
- Блок выделения // цитаты
- «Мелкий текст» // подсказки
Со временем, в голове каждого дизайнера формируются готовые наборы. Но всегда есть подсказки, например, lamb.cc/typograph/
7. Цветовая схема
Выбираем 5-10 основных/вспомогательных цветов. kuler.adobe.com - кулер нам в помощь.
Кстати, в кулер можно закинуть фотографию, например, с природы. В ней всегда и всё гармонично. А начиная с 5-х версий Kuler вообще - часть продуктов Adobe, покопайтесь в настройках.
8. Открываем фотошоп
Итого, потратив 30-40 минут в самом начале, мы сократим время разработки каждого и любого экрана проекта минимум в 2-3 раза. Хэй-хэй!
И помните, в процессе работы эти законы-ограничения могут меняться, но их наличие всегда поможет «вытянуть» проект.
Каждый раз, открывая чистый лист в фотошопе для нового проекта, начинающие и не только дизайнеры сталкиваются с вопросом - что дальше? У каждого из них есть свои методики создания первого пикселя, я же расскажу о том, что я обычно рекомендую делать перед началом любого проекта.
1. Определяем требования к сайту
Если вы не получили их от клиента/менеджера/проект-менеджера, вы должны их принять самостоятельно, обязательно. Всего существует 3 основных видов требований:
а) БТ; Бизнес-требования (интсрументы бизнеса, цель ← задачи): как правило их три - лицо компании, инструмент продаж и/или развитие бизнеса. Лично я всегда стараюсь выделить одно основное.
б) ТУ; Требования участников проекта (о них всегда забывают): сайт как помощник сотрудника компании и часть бизнес-процессов (директор, маркетолог, юрист, логист, менеджер и т.д.).
в) ТП; Требования внешних пользователей: рассматриваем сайт как инструмент продаж товаров и услуг через интернет, целевые аудитории, сценарии пользователей (достаточно 1-3 сценариев).
2. Рефы сайтов
Достаём из заначки 3-4 сильных проекта, на которые вы хотите ровняться, которые всегда помогут «подсмотреть» и найти быстрое решение для определённого блока или стилистики. Т.е. примеры, на которых можно заэкспириться.
Хорошие художники копируют, великие художники воруют. © ПП
Тем более что проблем с этим сейчас нет: awwwards.com, revision.ru, behance.net, рейтинг рунета, один крутой японский сайт, inspiration.genue и т.д.
3. Думаем
Мой любимый пункт. На основании всего что у нас есть выше делаем быстрый скетч от руки. Всегда. За 5-10 минут для быстрой проверки. А чтобы было веселей, делаем его на re-print.me цветными карандашами.
4. Членение и соподчинение
На том же самом листе разбиваем всё на логические блоки и видим/создаём подчинённость.
Что важнее, что следует из чего, может что-то стоит выкинуть/разделить? Выкинуть что-нибудь обязательно!
Фотошоп не открываем!
5. Сетка и направляющие
Направляющие/Сетка всегда помогут не потеряться в пути, это Нить Ариадны для любого дизайнера (а еще и получить ободряющий кивок от технолога), и не важно, промо-сайт это или корпоративный портал.
Гуглим, читаем thegrids.ru или выбираем 960.gs, gridpak.com и т.д. GGS в тренде ;)
upd: для тех, кто не выдержал и открыл фотошоп → генератор сеток для фш guideguide.me
6. Шрифтовая схема
Как минимум, это:
- Базовый // основной контент
- Акцидентный // заголовки
- Меню/навигация
- Блок выделения // цитаты
- «Мелкий текст» // подсказки
Со временем, в голове каждого дизайнера формируются готовые наборы. Но всегда есть подсказки, например, lamb.cc/typograph/
7. Цветовая схема
Выбираем 5-10 основных/вспомогательных цветов. kuler.adobe.com - кулер нам в помощь.
Кстати, в кулер можно закинуть фотографию, например, с природы. В ней всегда и всё гармонично. А начиная с 5-х версий Kuler вообще - часть продуктов Adobe, покопайтесь в настройках.
8. Открываем фотошоп
Итого, потратив 30-40 минут в самом начале, мы сократим время разработки каждого и любого экрана проекта минимум в 2-3 раза. Хэй-хэй!
И помните, в процессе работы эти законы-ограничения могут меняться, но их наличие всегда поможет «вытянуть» проект.