?

Log in

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

« previous entry | next entry »
10 Ноябрь, 2012 | 16:47

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


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


Ссылка | Комментировать | Поделиться

Comments {11}

(без темы)

from: mariik
date: 11 Ноябрь, 2012 00:36 (UTC)
Ссылка

Прочитал с большим удовольствием. Но у меня появился вопрос:
что делать, есали задачу можно решить разными способами? к примеру дизайном в стиле минимализм или промо. как выбрать? клиент и сам теряется в догадках и хочет увидеть разные варианты а скетчи его не устраивают.

Ответить | Ветвь дискуссии

(без темы)

from: ziik
date: 12 Ноябрь, 2012 07:07 (UTC)
Ссылка

А здесь мы как-бы и не говорим об однозначности стилистики, + есть рефы (надеюсь) которые привёл клиент.

Ответить | Уровень выше | Ветвь дискуссии

(без темы)

from: rawgift
date: 11 Ноябрь, 2012 18:42 (UTC)
Ссылка

Спасибо, хороший конспект.

Ответить | Ветвь дискуссии

(без темы)

from: ziik
date: 12 Ноябрь, 2012 07:08 (UTC)
Ссылка

велком

Ответить | Уровень выше | Ветвь дискуссии

(без темы)

from: okunev
date: 11 Ноябрь, 2012 23:34 (UTC)
Ссылка

Годно.

Ответить | Ветвь дискуссии

(без темы)

from: andrew_sbbo
date: 13 Ноябрь, 2012 06:54 (UTC)
Ссылка

Замечательно и актульно. Если проект-менеджер непропустил через себя проект, т.е. сам не разобрался и не согласовал это с заказчиком, например
из-за объемов работ или должностных обязанностей. На помощь приходят стратеги :-)

Ответить | Ветвь дискуссии

(без темы)

from: zlobny_buratino
date: 18 Ноябрь, 2012 19:50 (UTC)
Ссылка

Увы и ах. Мне почему-то не попадались менеджеры, которые пропускают прям через самого Себя проекты?

Ответить | Уровень выше | Ветвь дискуссии

(без темы)

from: andrew_sbbo
date: 19 Ноябрь, 2012 05:08 (UTC)
Ссылка

В основном, проекты пропускаются через себя, в ценовом сегменте 2+

Ответить | Уровень выше | Ветвь дискуссии

(без темы)

from: zlobny_buratino
date: 19 Ноябрь, 2012 07:05 (UTC)
Ссылка

а что такое ценовой сегмент 2+?

Ответить | Уровень выше | Ветвь дискуссии

(без темы)

from: andrew_sbbo
date: 19 Ноябрь, 2012 07:08 (UTC)
Ссылка

Свыше 2 000 000 рублей за проект.

Ответить | Уровень выше | Ветвь дискуссии

(без темы)

from: zlobny_buratino
date: 18 Ноябрь, 2012 19:47 (UTC)
Ссылка

Спасибо, от всей души. Очень хорошие рекомендации.

Ответить | Ветвь дискуссии