Позднее Ctrl + ↑

Новый логотип «Дома Свадеб Кати Кещян»

Задача
Сделать небольшой ребрендинг: обновить логотип и цветовую схему.

Старый логотип
Венок с логтипом Кати Кещян

До сегодняшнего дня логотипом агентства служил нарисованный персонаж в цветочной арке (саму Катю нарисовала по заказу художница, имени ее не знаю). Но Дом Свадеб растет, а с ростом понадобился и настоящий логотип. Текстовая часть пришла из Уткиного дома, ее мы решили пока оставить, но дополнить графическим знаком. Также решили переработать арку, сделать менее насыщенными цвета и избавиться от венка.

Начала работу с аббревиатуры

Сперва пробую из букв ДС сделать подобие венка. Получился такой набросок:

Отправила Кате и получила добро на развитие идеи. Обрисовала цветы и листочки из венка и приделала их к ДС:

Кате не понравился хвостик у Д. Пробую добавить еще один цветок и кольцо, которое персонаж держит в руках:

В ответ получила картинку из фильма «Аватар» :-) Катя говорит, что хвостик очень уж напоминает хвост существ на’ви.

На’ви

Решаю отойти от «венка» и попробовать форму кольца.

Аббревиатура ДС отлично вписывается в круг

Убираю цветы и добавляю бриллиант из иллюстрации с персонажем:

Кольцо Кате очень нравится. Смотрим знак для примера на сайте:

В таком виде ДС-венок сочетается с текстовой частью лучше, чем ДС-кольцо.

Возвращаюсь к первому варианту и добавляю деталей на хвостик Д, чтобы он не вызывал ассоциацию с хвостом на’ви. Вот что вышло:

Параллельно пробую соединить ДС-кольцо с текстовой частью как-то иначе и нахожу отличный вариант:

Кате нравится, решаем остановиться на этом варианте логотипа. Дорабатываю сам бриллиант:

В процессе пробовала добавить лапки для бриллианта, но они показались лишними

Работа над аркой и персонажем

Параллельно работала над аркой. Главной задачей было — избавиться от пузырей. Поэтому сперва я провела зачистку, а на их место добавила растительности:

Стало — было

Прикинула вариант с темно-красным цветом на персонаже и в цветах арки:

От этого отказались сразу

Пробую немного уменьшить арку и сделать ее тоньше. Для этого убрала и пузыри, и растительность, и уменьшила сами цветы:

К этому моменту Катя решает пока вообще отойти от арки и оставить ее как есть.

Корректирую насыщенность цвета у изображений. Было — стало:

Собираю гайдлайн

Сделала визитку для Марии Бережной

Мария решила обновить свои визитки и захотела добавить в них немного золота. Я предложила окрасить в золото торцы визиток и выделить некоторые части орнамента. Вот что получилось:

На лицевой стороне фоном отпечатан орнамент УФ-лаком — если покрутить визитку, он переливается глянцем
На обороте специально оставили место для заметок, которые Мария оставляет для каждого клиента

А так визитки выглядят в реале:

Бумага Splendorgel плотностью 400 грамм

Сделала новый логотип музыканта Daniel Lesden

Задача
Обновить логотип, при этом сохранить узнаваемость.

Так выглядел старый логотип. Работу выполнил сербский дизайнер Nebojsa Nadj в 2012 году

Главный элемент логотипа это аббревиатура DL, совмещенная в единый знак. Именно этот знак отвечает за узнаваемость, поэтому его нужно сохранить.

Чаще всего логотип используется на афишах, флаерах, обложках альбомов и прочих материалах, которые пестрят цветом и количеством элементов. Поэтому сразу решаю использовать только заглавные буквы, тогда логотип будет хорошо считываться. Подбираю максимально подходящий под «D» шрифт:

В имени есть вторая буква «D», сразу пробую вставить знак и на ее место, при этом обрезаю хвостик-засечку:

Сейчас «D» слишком широкая в сравнении с остальными буквами. Поправляю это:

Также смягчаю хвостик и делаю его чуть короче:

Смотрю на результат:

Экспериментирую с пробелами в буквах:

Добавляю лигатуру и пробелы в другие буквы:

Собираю вертикальный вариант:

Слова не совпадают по ширине — плохо. Добавляю горизонтальные штрихи букве «I», удлиняю горизонтальный штрих «L»:

Так мне не нравится. «Расширяю» букву «A»:

Выравниваю пробелы в буквах и беру «E» с хвостиком, так как без него образуется дыра между «LE»:

Широкая «A» решила проблему с выравниванием
Горизонтальный вариант тоже выглядит отлично

Окрашиваю лого в фирменный оранжевый цвет и отправляю клиенту:

Работа принята :-)

Дизайн psytranceguide.com

Задача
Музыкант Daniel Lesden пришел с идеей сделать небольшой гайд по пситранс-музыке и попросил помочь с оформлением. Помогла!
psytranceguide.com

«Пситранс-гайд» — сайт с обзорами основных подстилей пситранса. Там можно почитать про каждый стиль, послушать примеры, узнать типичный темп. Такой вот образовательно-развлекательный ресурс.

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

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

Крупный фактоид указывает темп, что позволяет быстро сориентироваться и найти нужный стиль

Цвета подобрала темные, но с яркими насыщенными заголовками, что отлично вписывается в мир пситранса.

Сайт адаптирован и для мобильных устройств:


Участники проекта

Дизайнер
Таня Соколовская
Верстальщик
Даниил Соколовский

Сайт maryber.com — вторая версия

Задача
Пересмотреть структуру сайта, избавиться от пустующих разделов, переписать текстовую информацию с точки зрения пользы для потенциального клиента и обновить дизайн.
maryber.com

Два года прошло с момента запуска сайта Марии Бережной. Сейчас я смотрю на старый сайт и понимаю, что тогда допустила большую ошибку — «налепила» много ненужного, потому что «клиент так хотел». Кроме того, тогда я передала сайт без контента, предполагалось, что Мария сама будет заниматься наполнением — это была вторая большая ошибка. Два года сайт толком не обновляли, а часть разделов вообще висела мертвым грузом.

Первая версия сайта.

Начало работы

Итак, пообщавшись с Марией, мы решили полностью переделать сайт. Мария рассказала о своем продвижении в карьере, чем сейчас занимается и как планирует развиваться дальше, и я приступила к работе.

Сперва определила структуру нового сайта:

  • Главная. Тут я решила сразу рассказать, чем занимается Мария и показать основные услуги.
  • Портфолио → внутренняя страница. Общий фото-каталог и внутренняя страница для каждой работы.
  • Обо мне. Сюда я разместила историю Марии о ее карьерном пути и рассказала, кому она может быть полезна.
  • Сколько стоит. Страница с ценами на услуги.
  • Обучаю MakeUp. Это одна из услуг, на которой Мария хочет акцентировать внимание, поэтому для нее отдельная страница.

Также Мария хотела добавить раздел «Блог», но пообщавшись мы решили, что пока он ей не нужен. Еще «на потом» мы отложили раздел «Отзывы».

Со старого сайта не перешли разделы со статьями, партнерами и событиями — они оказались не нужны.

Дизайн

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

Для фото-каталога в портфолио я сделала сетку, в которой акценты смещаются от одной фотографии к другим. По мере заполнения, сетка дублируется, так сохраняется ритм при пролистывании, и глазам всегда есть за что ухватиться. Работы можно фильтровать по основным тегам.

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

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

Страница «Обо мне» также частично имеет свободную верстку, чтобы иметь возможность быстро вносить обновления.

В результате получился компактный сайт, который максимально раскрывает Марию как специалиста и адаптируется под все разрешения экранов.


Участники проекта

Дизайнер
Таня Соколовская
Верстальщик и разработчик
Tony Realovich

Школа стажёров. II ступень и почему я отчислилась на валенках Бирмана

Если первую ступень можно назвать учебой, то вторую — скорее работой, потому что времени она отнимала на равне с реальными проектами. Приходилось чем-то жертвовать, мне это не нравилось. Лекций нет, тестов нет. Изменилась система оценок работ — мы получали балы индивидуально, а не за факт сдачи в срок. Также тут предполагались рецензии преподавателей, но мое представление о рецензиях отличается от бюрошного, я бы назвала их небольшими комментариями.

Читайте также про первую ступень.

Про рецензии на работы

Схема была такой:

  • первая неделя — получили первое задание, до конца недели сдали черновой вариант;
  • вторая неделя — получили второе задание, до конца недели сдали его черновой вариант и сдали задание первой недели. То есть на неделю выходило две параллельные задачи.

Если нарушаешь дедлайн — минус два балла из пяти за итерацию, а за следующий срыв исключают.

Чтобы получить рецензию на работу, нужно успеть в первые два дня недели что-то набросать и отправить преподавателю, и... либо получить ответ, либо нет. Если протянуть до среды или четверга, то ответа скорее всего уже не будет.

Неделя 1. Преподаватель: Михаил Нозик.

Верстали страницу «О себе». Ничего супер-крутого придумывать не требовалось. Главное — придерживаться всех принципов верстки.

Неделя 2. Преподаватель: Илья Синельников

Вели переговоры с клиентом и писали понимание задачи. Пожалуй, это было самое интересное задание. На первой неделе мы составляли список вопросов клиенту, в роли которого был Илья. Он провел с нами видео-трансляцию: мы задавали вопросы в общий чат, Илья с энтузиазмом отвечал на них.

На второй недели мы писали письмо клиенту с пониманием задачи.

Неделя 3. Преподаватель: Максим Ильяхов

Писали информационный текст для сайта и верстали страницу с ним. Это было для меня самым нервным заданием, особенно в первую неделю. В это же время случился завал по работе, поэтому первую итерацию задания я оставила на конец недели, и это стало большой ошибкой.

Никогда ничего не оставляйте на последние дни.

Максим предложил две темы на выбор — кофе и персональный тренер. Интересно, что большинство студентов выбрали первый вариант — про кофе с Малышевой, они сочли его более простым. Остальные же и я с ними, предпочли рассказать про личного тренера. Подскажу поступающим: про кофе оказалось на порядок тяжелее писать.

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

Но не нут-то было, за час до дедлайна зажегся свет, а работы было на пару часов минимум. Абы как я набросала весь макет и загрузила его за две минуты до дедлайна. Я очень эмоциональная, поэтому нервов и слез было потеряно много :-) Работой я была не довольна — не успела ни сверстать нормально, ни по тексту еще раз пройтись.

Первая итерация

Как и ожидала, балы получила одни из самых низких. Но зато Максим записал видео-разбор работ и указал на основные ошибки. Тогда я решила полностью переписать текст и сверстать макет заново. Вот что получилось:

Вторая итерация

По результатам за эту работу я получила почти максимум балов, и ее с двумя другими работами Максим выделил на фоне остальных.

Неделя 4. Преподаватель: Николай Товеровский

Весртали сложный документ — билайновский договор. Договор просто огромный, верстать его в графических программах — самоубийство. Идеально — html и css. Достаточно просто аккуратно сверстать.

Неделя 5. Отчислилась

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

На момент поступления и отчисления я была в середине рейтинговой таблицы.

Пара позитивных фактов для отчисляющихся:

  1. Если отчислиться на первой половине учебы, то Школа возвращает половину оплаченной суммы.
  2. При желании можно поступить снова на вторую ступень с любым следующим потоком, с начала ступени, на платное место, со старыми стартовыми баллами по итогу первой ступени.

Вывод

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

Вот и всё!

Школа стажёров. I ступень — что да как

Закончила первую ступень Школы стажёров. Ура! Хочу рассказать, как это было, что понравилось, что нет, и дать пару советов поступающим.

Тут написала про вторую ступень.

Школа стажёров Бюро Горбунова обучает дизайнеров по шести дисциплинам: типографика и верстка, интерфейс и информация, переговоры и отношения, дизайн и право, текст и редактура, управление и результаты.

Школа отличается от других учебных заведений: на первой ступени студенты сами учат лекции, сдают задания и тесты — преподаватели не контролируют процесс. Никто не пинает, не требует и за ручку не водит. Такой подход воспитывает самодисциплину.

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

Вступительное задание

Каждый год задание разное: страница записи на приём к доктору, страница записи на обслуживание в автосервис, интерфейс гаджета для заказа пиццы.
Наш поток делал терминал самостоятельной регистрации в аэропорту. Я набрала 27,78 балов и заняла 54 место в рейтинге. Сейчас понимаю свою ошибку: я не разобралась полностью в задаче, слишком углубилась в детали и предложила улучшенный вариант стандартного терминала. Чтобы получить высокий балл, нужно понять проблему, отойти от существующих стандартов и предложить решение, а не улучшенный дизайн.

Поступила в набор 29 августа 2016 года на 54 место

Учёба

Процесс обучения — это гонка и стремление подняться в рейтинге. Каждую неделю получаешь порцию лекций, учишь, сдаешь тесты, делаешь задания. Три раза не успел к дедлайну — отчисление.
За четыре месяца обучения сдали 39 тестов, 11 практических заданий и курсовую работу.

Лекции

Лекции в гугл-документах. Я насчитала 1092 страницы 10 кеглем, большая их часть есть в видео-формате. Объемы большие, поступающим советую прочитать до начала учёбы все бюрошные советы и обязательную литературу — список книг на странице школы.

Дополнительно прочитайте:

Из 84 студентов 15 отчислены — кто-то трижды не успел к дедлайну, кто-то не осилил объемы и ушёл сам.

Совмещать работу и учёбу сложно

Понравилось, что все лекции построены на реальных примерах. Преподаватели дают теорию и тут же показывают применение.

Тесты

Тесты среди студентов вызвали большое негодование. Вопросы в целом по лекциям, но встречаются и такие, что мозг сломаешь. Часто натыкаешься на субъективное мнение преподавателя, с которым не всегда согласен. Бывало, что уверен в правильном ответе, а в результате вопрос не засчитан. Можно попросить преподавателя указать на ошибки, но он лишь направит — правильного ответа не скажет, а может и вовсе не ответить на письмо. Студентам обсуждать тесты между собой запрещено. Каждый копал в меру своей заинтересованности.

Мой средний результат за все тесты в процентах

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

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

Не понравилось, что совсем нет обратной связи. Иной раз хотелось подискутировать, задать вопросы и получить ответы.

Практические задания

Рисовали осьминожку знаний, составляли план роста на год и вели дневник задач. Редактировали готовый текст, писали текст для промостраницы и готовили статью к печати. Улучшали формы, таблицы и графики. Проводили переговоры.

Сейчас смотрю на свою осьминожку и понимаю, что местами недооценила, а где-то переоценила :-) Надо сделать новую

А вот задание по редактуре — нужно было выбрать одну из предложенных статей, отредактировать ее и подготовить к печати:

Переговоры казались мне самым сложным заданием. Они проходили в формате КУСа — нас разделили на пары и дали роли.

Подготовьтесь к переговорам заранее, продумайте все возможные варианты развития и подготовьте пару предложений решения проблемы. Отрепетируйте несколько раз, запишите вопросы и следуйте “заповедям” Кэмпа: будьте не в порядке, в мире клиента, проявляйте заботу, травите леску и не испытывайте нужду. Я посмотрела все ролики сокурсников — сразу видно, кто готовился к переговорам, а кто нет.

Переговоры дают 50 балов. В нашем потоке максимум никто не получил. Три студента получили 47,5 баллов, я — 46,7 балла, другие от 45,8 и ниже. Перевогоры — реальный шанс подняться в рейтинге.

Провалом считаются переговоры без решения или доведенные до суда. Будьте готовы к чему угодно от партнёра — были случаи, когда партнёр кричал и кидал бумагу в камеру. Разумеется, подобное поведение — провал, но правильная реакция и ответ могут спасти вашу оценку.

На деле всё прошло не так страшно, как я думала :-)

Оценивали задания по дедлайну: успел — получил полный бал, не успел — получил половину. Одно из заданий по редактуре и переговоры студенты оценивали сами — проверяли друг друга, а преподаватель корректировал балл, если считал нужным.

Отнеситесь к заданиям серьезно, даже если преподаватель не оценивает работу, это отличный опыт. Изучите работы предыдущих потоков, учитесь на их ошибках.

Понравилось, что и у дизайнеров есть достаточно заданий по редактуре.

Не понравилось, что работы оценивали по дедлайну. Не важно сколько времени ты потратишь и как сделаешь работу, всех оценивали одинаково — успел вовремя, получил максимум. Не хватало практических заданий. Я понимаю, что на практику и обратную связь от преподавателя ориентирована вторая ступень, но после теории хотелось заданий в дополнение к тестам. Задания с оценкой и комментариями хотя бы от сокурсников принесли бы ещё больше пользы.

Курсовая работа

Курсовая работа даёт 150 баллов — это много, за тесты в 3—5 раз меньше. Поэтому курсовая может сильно повлиять на позицию в рейтинге.

За две недели надо нарисовать главную страницу сайта пластиковых окон. Ничего не выдумывая, просто нарисовать крепкий макет. Задание по дисциплине “Интерфейсы и информация”, но и другие предметы учтите: тексты в инфостиле, вёрстка по лекциям. Помните о пользе и удобстве.

Не скажу точно сколько всего времени я потратила на задание, думаю, порядка 12—15 часов. Я начала работать над макетом на второй неделе, глаз быстро замылился, но у меня уже не было времени отложить макет. Сейчас я вижу ошибки, которых не видела до этого. Поэтому не откладывайте на последнюю неделю. Начните делать курсовую сразу, чтобы была возможность отдохнуть от неё и доработать с новыми силами и свежим взглядом.

Понравилось, что дали за основу реальный проект и не надо было ничего выдумывать.

Не понравилось, что не было возможности обсудить детали и задать вопросы по работе, как это было бы с реальным клиентом.

Я получила 4 из 5 баллов за идею и логику и 3 балла за эстетику

Рейтинг

Я начала учёбу на 54 месте и поднялась во вторую десятку после первой недели. 3,5 месяца я плавала между 16 местом и 28, а окончила на 17 месте.

Если хочешь продолжить обучение, главное не выпасть из первой тридцатки — вернуться в неё с каждой неделей будет сложнее. Если сдавать тесты в среднем на 75—85%, то вырваться вперед можно лишь на переговорах и курсовой работе.

Мне нравится эта система рейтингов. Она подстёгивает учить и рваться вперёд. Кто-то считает иначе, были комментарии и недовольных студентов.

Польза

Я увидела для себя пользу уже на первом месяце обучения:

  • Информацию не нужно искать, всё дают готовое и по темам.
  • Есть доступ к видео-лекциям курсов, посещение которых стоит 20—40 тысяч рублей за каждую дисциплину.
  • Тесты помогают усваивать информацию лучше, чем дважды прочитанная лекция или книга.
  • При желании можно получить помощь или обратную связь от других студентов.
  • Школа учит не только дизайну, но и отношениям с клиентом, управлению проектами, редактуре текста и юридическому праву. До обучения мне не хватало этих знаний.

-Школа стажёров выпускает самостоятельных дизайнеров, которые решают задачи и заботятся о клиенте, рисуют макеты и редактируют текст, проводят переговоры и сдают проекты в срок, составляют договора и знают закон в сфере дизайна. Она учит преодолевать трудности, планировать работу и профессионально расти.

Школа для тех, кто хочет учиться.


И я продолжу на второй ступени :-)

Вторая ступень стартует 9 января

Спасибо Артёму Горбунову, Илье Бирману, Максиму Ильяхову, Илье Синельникову, Николаю Товеровскому, Владимиру Беляеву за любовь к своему делу, за желание развиваться и делиться знаниями.

Запустила сайт агентства «Дом свадеб Кати Кещян»

Задача
Рассказать невестам для чего нужен свадебный организатор и почему лучше обратиться к нему, чем делать свадьбу самостоятельно.
dom-svadeb.ru

В разработке сайта уделила особое внимание информативности: рассказала о плюсах обращения к организатору, процессе подготовки к свадьбе, трудностях организации и о самом свадебном дне. Теперь невесты могут получить четкое представление об агентстве, услугах и заказать организацию своей свадьбы.

Сайт адаптируется под все разрешения экранов:


Участники проекта

Дизайнер
Таня Соколовская
Верстальщик
Даниил Соколовский
Разработчик
Кодельная

Объекты внутри модуля

Многие дизайнеры строят макеты сразу по модульной сетке, но подобный подход дает плохой результат — страницы получаются скучными и сложными для восприятия. Модульная сетка состоит из прямоугольных модулей. Чтобы делать ясные макеты, в первую очередь стóит распределить элементы внутри модулей, а затем с помощью сетки систематизировать их. Модульная сетка организует объекты внутри пространства, создает впечатление единства, придает порядок и ясность макету. А бывает, что сетка и вовсе не нужна.

Модульная сетка — это инструмент, который нужно правильно и вовремя применять. Ведь нельзя взять линейку и сразу нарисовать дом в перспективе, сперва нужно взять карандаш и наметить основные линии и точки, после чего линейка поможет выровнять линии и композицию.

В этом посте я расскажу, как организовать объекты внутри модуля, чтобы макет не развалился и легко считывался.

Эскизы макетов с использованием модульной сетки в 32 клетки. Иллюстрация из книги «Модульные системы в графическом дизайне» Йозефа Мюллер-Брокманна

Модуль и объекты внутри него

Роль объектов внутри модуля играют иллюстрации, заголовки, логотипы, цитаты, фактоиды, текстовые блоки, подписи, сноски, словом — все, что располагается в модуле.

Чтобы модуль визуально не развалился, значимые объекты внутри него должны тяготеть к углам, сторонам или визуальному центру

Значимые объекты расположены по углам, сторонам или в визуальном центре модуля

Правилу подвластны прямоугольные объекты. Если говорить о круге, то он может занимать любую позицию внутри модуля. Окружность приятна для глаз и легко воспринимается, она контрастирует с прямоугольниками и раньше привлекает внимание зрителя.

Следуя этому правилу, композиция всегда будет уравновешена и легко восприниматься. Важно, чтобы со свободных сторон объект дышал. Если заголовок тянется к верхнему левому углу, значит справа от него и снизу должен быть воздух.

Воздух — отрицательное пространство. Восприятие композиции зависит не только от объектов, но и от правильной организации воздуха вокруг них. В макете нужно стремиться минимизировать количество отрицательных пространств, чем их меньше, тем композиция легче для восприятия.

Посмотрите на рисунок ниже:

Прямоугольные объекты в модуле. Слабый вариант

Тут две ошибки:

1) Сверху и снизу есть незадействованное пространство — комозиция неустойчива:

Незадействованное пространство

2) Объекты разбросаны хаотично, как следствие образовалось много блоков отрицательного пространства. Композиция разваливается:

Отрицательное пространство

Чтобы улучшить модуль, нужно избавиться от первого и минимизировать второе. Тут и помогает правило расположения объектов в модуле.

Хороший модуль

Объекты организованны между собой в прямоугольники и тяготеют к углам и сторонам модуля. Отрицательное пространство приняло более простую форму:

Отрицательное пространство хорошего модуля

Композиция стала организованной, устойчивой и легкой для восприятия.

Добавим в модуль круг. Помним, он может занимать любую позицию. Круг в первую очередь привлекает внимание, поэтому с его помощью можно направлять взгляд зрителя:

Круг в модуле

Круг — очень эгоистичная фигура, он должен быть один. Если в макете их будет два и более, то внимание зрителя рассеется, взгляду будет тяжело зацепиться. Так делать нежелательно:

Два равнозначных круга в модуле

Допустим, все объекты в модуле равнозначны:

Сейчас мы смотрим на макет и нам не за что зацепиться. Привлечь внимание можно с помощью цвета или начертания:

Также можно использовать другой шрифт или увеличить его размер:

Добавить значимый объект и воздух вокруг него:

Структура в модуле

Объекты в модуле принято разделять по значимости. На первом месте всегда стоит иллюстрация. Именно за нее цепляется взгляд на странице. Затем мы смотрим на заголовок, переносим взгляд на цитаты или фактоиды, и, если нас заинтересовало все это, обращаем внимание на текстовый блок.

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

Одна колонка текста

Если текст набран в две колонки, то мы начнем чтение с левой колонки (или правой в тексте на иврите) сверху вниз, а продолжение будем искать наверху второй колонки.

Две колонки текста

Если колонок и строк больше, направить взгляд помогут расстояния между объектами по правилу близости:

Слева уменьшены горизонтальные расстояния, справа — вертикальные

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

Модули на практике

Разберем пример:

Макет состоит из модуля, внутри которого еще один модуль: сама страница и белый прямоугольник в ней. Посмотрите, как себя ведут объекты внутри своих модулей:

В главном модуле есть два значимых объекта:

  1. Заголовок «Time» — расположен в правом верхнем углу, при этом слева и снизу от него достаточно свободного пространства.
  2. Белый прямоугольник — в левом нижнем углу, с противоположных сторон он также дышит.

Второй модуль — белый прямоугольник, в котором роль значимого объекта выполняет текстовый блок из крупного заголовка и подзаголовка. Этот блок тянется к левой стороне своего модуля, при этом справа от него белое пространство, которое компенсирует одностороннюю тяжесть.

Это свободное пространство вокруг объектов позволяет им дышать, увеличивает их значимость среди других объектов и уравновешивает композицию.

Еще один пример:

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

Или вот:

Значимые объекты распределены по углам и сторонам своих блоков, иллюстрации выглядят гармонично.

Проанализируйте разворот журнала:

Разворот состоит из двух модулей: левой и правой страницы.

На левой странице крупный заголовок упирается в левый верхний угол, а колонка текста струится вдоль правой стороны модуля. Заголовок, как самый значимый объект модуля, справа и внизу дышит, отрицательное пространство придает ему значимость.

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

Еще пример с кругом:

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

Часто круг используют для специальных предложений, скидок, акций:

Посмотрите, как ловко орудует композицией Ян Чихольд:

Он мастерски направляет взгляд читателя от одного объекта к другому.

А вот пример плохого распределения объектов в модуле:

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

Еще плохой пример:

Комментарии излишни.

Располагать значимые объекты сверху и снизу принято в операционных системах:

macOS Sierra

Меню на многих сайтах привязано к верху:

А вот пример расположения по центру:

Но подобная симметрия хороша единожды, иначе не избежать хаоса:

Меню сайта

Композиция из модулей

Теперь рассмотрим, как взаимодействуют между собой модули на страницах сайтов.

В макете должны присутствовать главные объекты и дополнительные, чтобы взгляд читателя следовал от одного к другому. Если построить макет однообразными блоками, взгляду будет не за что зацепиться, разглядывать такую страницу неинтересно и утомительно. Часто этим страдают информационные сайты:

Посмотрите, как решили задачу дизайнеры BBC. Вдоль всей страницы идет чередование ритма: разные размеры модулей, иллюстраций и заголовков. Внимание читателя не рассеивается, и ему интересно изучать страницу:

Как правило, все макеты строятся по принципу «сэндвича», то есть прямоугольные модули располагаются на этажах друг по другом. Дизайнеры любят разделять этажи цветом фона, но этот прием опасен, особенно если объекты внутри этажа равнозначны и следуют симметрии:

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

Чем проще макет, тем легче его считывать. Динамика достигается за счет чередования ритмов. Посмотрите, как с длинной страницей справляется Apple:

Мы видим этажи: тут есть и симметрия, и асимметрия, они чередуются между собой. В каждом модуле есть крупная иллюстрация. Конструкция этажей очень простая, поэтому мы легко скользим по ним взглядом, и длинная страница воспринимается легко.

Ранее Ctrl + ↓