Евгений Теслов (ziik) wrote,
Евгений Теслов
ziik

Быстро и качественно. Законы макета.

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 раза. Хэй-хэй!


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


Tags: процесс, симба
Subscribe
  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 11 comments