Блог Тани Соколовской: posts tagged Портфолио

Как я проиллюстрировала Добрые дреды

Tue, 01 Sep 2020 16:34:35 +0100

Перебирала свои проекты и нашла один аж 2014 года. Хочу показать :-)

Однажды у меня были дредлоки, а заплетала меня чудесная пара Паша и Настя. Именуют они себя Dreads by Mohh или “Добрые дреды”. У Моххов не было логотипа или какого-то стиля, они выбрали себе шрифт и пользовались им в соцсетях.

Такой был логотип

В какой-то момент Моххи устроили конкурс среди своих подписчиков на новый логотип и аватарку для соцсетей. Тогда я решила поучаствовать интереса ради.

В поисках идеи, разглядывала фотографии ребят, и попалась мне интересная фотосессия:

Фотограф Алена Павлюк

“Вот оно!” — подумала я и нарисовала ребят в бумажном кораблике:

Конкурс я выиграла, Мохи в восторге :-)

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

Сперва была такая:

Потом нарисовала еще одну:

Еще придумала визитную карточку:

Для иллюстрации нарисовала бусины на дреды, которые Моххи продают:

А тут визитка в реале

Обновила логотип Марии Бережной

Thu, 30 Jul 2020 17:00:00 +0100

Первая версия логотипа

В 2015 году я разработала для Марии логотип и стиль. Спустя пять лет мы решили, что логотип пора обновить.

Видоизменила знак, не меняя основной идеи:

В текстовой части поменяла имя и фамилюию местами и обновила дескриптор:

Вот что вышло:

Как я сделала логотип промо-группы «Рейв пипл»

Tue, 18 Feb 2020 16:12:10 +0100

«Рейв пипл» — московская промо-группа. Делает андеграундные рейвы в камерном формате. Основные направления: Progressive House, Underground Trance и Techno.

Нужен логотип из знака и текстовой части. Приступаю к эскизам:

Первые наброски

Правый нижний вариант это упрощенные AV из слова “RAVE”. Он напоминает мне предупреждающую ленту, решаю пока остановиться на нем. Заодно набросала еще идеи:

Так выглядит предупреждающая лента

Прикидываю остальные буквы:

Набираю “People” готовым шрифтом, чтобы посмотреть лого в целом:

Обсудили набросок с представителем промо-группы и решили, что для знака нужно что-то иное, отдельное от текстовой части логотипа. Так появился знак “RP”:

Но подобных сочетаний букв “R” и “P” полно, нужно сделать знак уникальным. Тут я вспомнила про смайл — символ эсид-хауса, и увидела его внутри знака:

Пробую разные варианты

Останавливаюсь на таком:

Еще идеи смайлов:

Смотрю, как сочетаются вместе знак и текстовая часть:

Работаю над “People”:

Соединяю оба слова:

Получила отзыв от команды промо-группы, что похожая идея уже использовалась ранее:

Лого Z Festival

Дорабатываю “Rave”:

Верхняя часть “R” кажется мне слишком тонкой, правлю это:

Решаю также уменьшить внутрибуквенный просвет:

Сравниваю:

Результат:

Примеряю логотип на аватарку в соцсетях:

Работу приняли!

Логотип в жизни — на сайте raveppl.ru

Photo © Psyler Room

Photo © Pavel Tzimisce

Photo © Schneider Family

Обновила сайт “Дома Свадеб”

Mon, 13 May 2019 21:05:58 +0100

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

На главной странице появился презентационный ролик:

А следом за ним идет приветственный блок с фотографией Кати:

Также для большей наглядности появился слайдер-сравнение в разделе о декоре — теперь можно подвигать стрелочки влево-вправо и посмотреть фотографии «до — после»:

Теперь есть отдельная страница с ценами (раньше блок был на главной странице):

И появился блог:

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

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

Верстальщик и разработчик
Руслан Бурнышев

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

Sat, 11 May 2019 18:36:16 +0100

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

Старый логотип

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

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

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

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

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

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

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

На’ви

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

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

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

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

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

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

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

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

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

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

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

Стало — было

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

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

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

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

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

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

Печатные материалы Дома Свадеб для свадебной выставки

Thu, 14 Feb 2019 21:29:26 +0100

14.02

Сверстала раздаточные материалы для участия в свадебной выставке.

Буклет:

Флаер:

Постер:

Сертификаты:

Инструкция для участия в розыгрыше:

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

Fri, 18 Jan 2019 21:06:01 +0100

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

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

На обороте специально оставили место для заметок, которые Мария оставляет для каждого клиента

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

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

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

Sat, 13 Jan 2018 19:55:24 +0100

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Широкая “A” решила проблему с выравниванием

Горизонтальный вариант тоже выглядит отлично

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

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

Дизайн psytranceguide.ru

Mon, 07 Aug 2017 20:08:36 +0100

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

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

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

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

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

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

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

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

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

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

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

Sun, 16 Jul 2017 19:16:21 +0100

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

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

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

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

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

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

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

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

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

Дизайн

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

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

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

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

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

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

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

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

Верстальщик и разработчик
Tony Realovich

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

Fri, 23 Dec 2016 13:11:41 +0100

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

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

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

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

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

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

Разработчик
Кодельная

Задизайнила партнерский сайт компании Epson

Tue, 11 Oct 2016 19:15:24 +0100

Задача
Рассказать потенциальным партнерам о программе авторизации.
partners.epson.ru

Компания Epson — японский производитель техники, мировой лидер по проекционному оборудованию и печатной технике. Для московского представительства компании мы с командой клиента сделали сайт с рассказом о партнерской программе.

О процессе

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

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

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

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

Вникаю в детали

Изучаю презентации и документацию, чтобы понять в процесс:

Изучаю презентации, таблицы и документы по программе авторизации Эпсон

Информации много, но у меня есть преимущество: так как с условиями партнерской программы я ранее не сталкивалась, это позволило посмотреть на неё глазами новичка.

Составляю структуру

Структурирую всё изученное в последовательное изложение:

Программа авторизации — что это такое
Зачем нужна авторизация
Преимущества партнеров
Как стать партнером
С кем связаться

Приступаю к работе

Собираю первый «этаж». Категории авторизации, по которым компании становятся партнерами, показываю наглядно в виде фотографий устройств этой категории. Здесь же решаю добавить социальное доказательство в виде фактоида: 500 компаний уже стали партнерами Epson.

Первый «этаж» сайта рассказывает о программе и категориях авторизации

Дальше отвечаю на вопрос «Зачем нужна авторизация» и рассказываю о преимуществах партнера.

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

Преимущества партнера: всё только по делу

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

Как стать партнером и критерии отбора

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

Изучаю, смотрю что можно улучшить:

Обычный способ представления контактной информации, который использовался на сайтах и в презентации

Имя, должность и регион менеджера условно назовём карточкой контакта. Замечаю, что в карточках много словесных повторов:

«Соколов Василий (менеджер по работе с партнерами) — работа с дилерами, корпоративными партнерами и заказчиками Санкт-Петербурга, а также Мурманской, Архангельской, Вологодской и Новгородской областей, и Республики Карелия.»

«Петров Иван (менеджер по работе с партнерами) — работа с дилерами, корпоративными партнерами и заказчиками Центрального ФО — Белгородская, Брянская, Воронежская, Калужская, Курская, Липецкая, Орловская, Рязанская, Тамбовская и Тульская области.»

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

↓

«Соколов Василий — работа с дилерами, корпоративными партнерами и заказчиками Санкт-Петербурга, а также Мурманской, Архангельской, Вологодской и Новгородской областей, и Республики Карелия.»

«Петров Иван — работа с дилерами, корпоративными партнерами и заказчиками Центрального ФО — Белгородская, Брянская, Воронежская, Калужская, Курская, Липецкая, Орловская, Рязанская, Тамбовская и Тульская области.»

Затем убираю повторяющуюся фразу «работа с дилерами, корпоративными партнерами и заказчиками», потому что это очевидная сущность. Заодно меняю имя и фамилию местами, потому что в русском языке принято обращаться по имени.

↓

«Василий Соколов — Санкт-Петербург, Мурманская, Архангельская, Вологодская и Новгородская области, Республика Карелия.»

«Иван Петров — Белгородская, Брянская, Воронежская, Калужская, Курская, Липецкая, Орловская, Рязанская, Тамбовская и Тульская области.»

Стало в два раза компактнее и информативнее.

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

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

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

Региональные менеджеры. При наведении курсора фотографии становятся цветными

Готовлю презентацию и показываю всё клиенту. Клиент принял работу.

Верстаем сайт, адаптируем под все разрешения экранов, тестируем и запускаем. Готово!

Результат работы

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

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

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

Разработчик
команда со стороны клиента

Процесс: лого визажиста Анны Ротарь

Mon, 19 Sep 2016 10:04:36 +0100

Анна Ротарь — визажист и стилист по волосам в городе Одесса. Я разработала для Анны логотип и оформила визитную карточку.

Вместе с Анной мы решили, что рукописный вариант ближе ей по характеру. От этого и отталкнулись.

Набросала варианты:

Перевела некоторые в вектор и выбрала наименее «завитушный»:

Смотрю на носителях:

Не нравится, что все буквы рукописные, но нравятся формы букв A и R. Решаю их оставить, а остальные набрать шрифтом:

Логотип стал серьезнее, как раз под звучание фамилии. Попробуйте произнести Ротарь. Она рычит, звучит твердо, в то же время мягкий знак смягчает рычание. Продолжаю работу. Хочется соединить горизонтальный штрих A и полуовал R, а засечки nn превратить в хвостики, как у буквы a. Пробую, смотрим:

Да. Так появилась целостность. Связываю логотип с деятельностью Анны: буква A выполняет роль карандаша со следом от него:

Показываю клиенту предварительный вариант:

Фото из сети для примера

Получаю одобрение — Анне логотип нравится. Работаю дальше. Облегчаю жирные линии A и R, слегка укорачиваю вертикальный штрих R и убираю хвостик буквы A.

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

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

Корректирую дугу от R относительно ножки:

Смотрю в черном цвете:

Не нравится стык полуовала R и ее ножки:

Исправляю:

Настала очередь карандашного следа. Смягчаю его:

Смотрю в логотипе:

Корректирую еще, чтобы он не сильно выпирал над буквой A:

Смотрю:

Делаю вариант логотипа из инициалов:

Готово! Приступаю к визиткам. Для них я доработала карандашный след:

Внутри появился силуэт лица

Отражаю силуэт вертикально:

Собираю макет визитки и отправляю клиенту:

Анна принимает работу.

Сверстала и оформила электронную версию книги «О Жизни, Смерти и Любви»

Sun, 21 Aug 2016 18:29:06 +0100

Задача
Оформить и сверстать электронную версию книги “О Жизни, Смерти и Любви” в формате ePub.

В дополнение к печатному изданию книги «О Жизни, Смерти и Любви» я разработала ее электронную версию. Туда вошли все рассказы и иллюстрации из оригинала.

Каждая глава оформлена в точности, как печатное издание

Для удобства чтения между абзацами предусмотрен небольшой отступ

Иллюстрации вписаны в текст

Все сноски идут сразу после соответствующего абзаца

Книга доступна для бесплатной загрузки на сайте ЛитРес.

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

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

Автор
Леа Веденски

Художник-иллюстратор
Маша Ройтман

Литературный редактор
Гульнара Сабрекова

Открытки и постеры для презентации книги «О Жизни, Смерти и Любви»

Sat, 13 Aug 2016 18:38:42 +0100

Задача
Разработать подарочные материалы для презентации книги «О Жизни, Смерти и Любви».

Для презентации книги Леи Веденски «О Жизни, Смерти и Любви» разработала рекламные и подарочные материалы: флаеры, открытки и постеры с иллюстрациями и цитатами из рассказов.

Постер с главным образом проекта «Живое Слово». Формат А3 и А2

Пригласительные флаеры на презентацию

Также сделала открытку с образом проекта «Живое Слово», которую можно подписать с оборотной стороны самостоятельно:

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

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

Автор
Леа Веденски

Художник-иллюстратор
Маша Ройтман

Как я сверстала и оформила книгу

Wed, 10 Aug 2016 19:43:05 +0100

А тут электронная версия книги

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

Задача: сверстать, оформить и помочь издать художественную книгу израильского писателя и психолога Леи Веденски. Книга называется «О Жизни, Смерти и Любви»

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

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

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

Набросок обложки. Текст на иврите — грубый перевод русккоязычного названия в Google Translate

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

Первый вариант книжной полосы был таким:

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

Вертикальная иллюстрация

Горизонтальная иллюстрация

На этом этапе автор отказался от объединения иврита и русского языка в одной книге — это было лучшим решением.

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

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

Учитывая, что все иллюстрации нарисованы на бумаге формата А4, для полной гармонии я выбрала пропорциональный им формат — А5.

Работая над квадратным вариантом я полагалась только на свой эстетический вкус, но с форматом А5 возникли трудности. В поиске гармоничной пропорции наборы полосы я открыла для себя Яна Чихольда и его «Облик книги» — восхитительный «учебник» про вёрстку и оформление книг.

Следуя канону Виллара, полоса набора стала выглядеть так:

Иллюстрации также вписаны в полосу набора. Заодно прикинула обложку под новый формат

Чертеж Виллара

Гармония для текстовых блоков и иллюстраций найдена. Отпала нужда в крупном шрифте, поэтому для удобства чтения уменьшила его с 12 до 11 пт, теперь строка вмещает в среднем 5–7 слов.

Для текста я выбрала два шрифта: Newton для основного текста (сочетает в себе высокую удобочитаемость и признаки шрифтов старого стиля, под вечные темы, затрагиваемые в повествовании) и Jakob для заголовков (рукописный шрифт, отлично гармонирует с графическими иллюстрациями).

Работая над текстом, я также руководствовалась рекомендациями Чихольда.

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

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

Чтобы визуально выравнять границу текстового блока, я частично вынесла знаки пунктуации за нее:

Неправильно

Правильно

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

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

Убираем «висячие» предлоги в InDesign

Открываем документ и создаем Character Style с единственной настройкой «No Break», имя даем ему такое же:

Далее создаем Paragraph Style для основного текста и идем во вкладку GREP Style. Там жмем кнопку «New GREP Style» и в выпадающем списке «Apply Style» выбираем наш заранее созданный «No Break»:

В поле «To Text» вписываем следующее:
(?<= )((в|‬на|‬под|‬с|‬со|‬во|‬без|‬то|‬ли|‬бы|‬или|‬да|‬но|‬что|‬а|‬и|‬у|‬уж|‬так|‬как|‬для|‬перед|‬через|над|‬‬при|‬по|‬до|‬от|‬о|‬об|‬‬про|‬к|‬ко|‬не|‬за|‬из|‬ни|‬нас|‬я|‬он|‬она|‬оно|‬они|‬мы|‬ее|‬её|‬его|‬вас|‬ты|‬вы‬|‬все|‬всё)( |\. |, ))+

Далее, создаем новый GREP Style по аналогии с первым, но уже для предлогов с большой буквы:
((?<= )|(?<=^))((В|‬На|‬Под|С|‬Со|‬Во|‬Без|‬То|‬Ли|‬Бы|‬Или|Да|‬Но|‬Что|‬А|‬И|‬У|‬Уж|‬Так|‬Как|Для|‬Перед|‬Через|Над|‬‬При|‬По|‬До|‬От|‬О|‬Об|‬‬Про|‬К|‬Ко|‬Не|За|Из|‬Ни|‬Нас|‬Я|‬Он|Она|‬Оно|‬Они|‬Мы|‬Ее|‬Её|‬Его|‬Вас|‬Ты|‬Вы‭|‬Все|‬Всё) )+

Чтобы было понятно:

Условие (?<= ) означает: только если перед предлогом стоит пробел;
(?<=^) — только если предлог стоит в начале абзаца;
(‬в|‬на|‬под|‬с|‬со|‬во‭|...|‬вы‬|‬все|‬всё) — список всех предлогов, местоимений и союзов, которые не должны оставаться в конце строки;
( |\. |, ) — знаки после предлогов: пробел, точка+пробел, запятая+пробел. Символ \ указывает на то, что точка после него рассматривается как точка, а не как GREP-метасимвол);
+ указывает, что условие применимо и к идущим друг за другом предлогам, местоимениям и союзам, например «но нам это показалось интересным».

Подробнее о GREP метасимволах и принципах работы читайте в GREPоводстве.

Результат работы:

Обложка книги

Форзац в стиле иллюстраций

Титульный лист набран в форме кубка и вписан в рамки полосы набора

Горизонтальные иллюстрации, в отличии от вертикальных, расположены прямиков в тексте

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

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

Книга в жизни

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

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

Автор
Леа Веденски

Художник-иллюстратор
Маша Ройтман

Литературный редактор
Гульнара Сабрекова

Обновление сайта daniellesden.com

Thu, 16 Jun 2016 19:16:35 +0100

Задача
Адаптировать сайт под любые экраны.
www.daniellesden.com

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

Первая версия
Вторая версия
Третья версия
Адаптивная версия

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

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

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

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

Изначальный дизайн раздела в виде таймлайна

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

Разбиваем все советы по темам: написание музыки, диджеинг, менеджмент, маркетинг, бизнес.

Но по какому принцицу выводить советы — по алфавиту, по дате? И самое главаное — поможет ли это новым пользователям? И не навредит ли постоянным читателям? Направление с группировкой нам кажется верной, но над реализацией продолжаем думать.

Размышляем:

— А что если в группировках по темам выводить не все советы, а только важные по усмотрению автора? И показать их в красивой журнальной вёрстке с крупными картинками?

— И как это поможет?

— Очень просто: так мы поможем новым пользователям сориентироваться в рубрике. Вместо того, чтобы листать десятки, а скоро и сотни советов, мы как бы говорим «вот, начни читать с этого». Сами статьи внутри связаны тегами и ссылками, так что если пользователю понравится, он пойдет читать дальше.

— А где будут жить остальные статьи, помимо этих важных?

— Все остальные советы будут снизу в ленте, с этим без изменений.

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

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

Звучит здорово. Приступаем к реализации:

Собираем макет предложенной идеи

Смотрим, оцениваем и продолжаем рассуждать:

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

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

— Это как?

— А вот так:

Анимация подгрузки помогает расставить акценты внимания

Это решение и вошло в финальную версию сайта.

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

Ведущий дизайнер
Таня Соколовская

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

Разработчик
Максим Сильнов

Процесс создания логотипа музыкального проекта JOOF

Thu, 14 Jan 2016 17:39:01 +0100

JOOF Live — новый музыкальный проект британского артиста Джона ’00’ Флеминга.

Джон Флеминг — пионер электронной музыки, диджей, продюсер, радиоведущий и владелец лейбла JOOF Recordings. За двадцатилетнюю карьеру Джон достиг немыслимых высот, его по праву называют двигателем прогресса и одним из самых уважаемых артистов андеграундной музыкальной сцены.

В проекте «JOOF Live» Джон делает акцент на живые выступления, которые позволят раскрыть его потенциал как музыканта и привнести новое звучание.

Логотип проекта «JOOF Live» должен отличаться от логотипа лейбла JOOF Recordings, чтобы фанаты не путали названия лейбла и музыканта. Поэтому перед началом работы смотрю на логотип лейбла:

Основное внимание берут на себя две центральные буквы ОО — они статичные и прямоугольные. Широкий шрифт делает логотип массивным, словно он под прессом. Всего этого в логотипе JOOF Live я буду избегать и двигаться от противоположного, а для большей уникальности добавлю лигатуру. Также клиент пожелал отразить в логотипе фантастичность, футуризм и сделать его «космическим».

Рисую наброски, уделяя внимание преимущественно слову «JOOF», «Live» оставлю на потом:

Выбираю самый удачный на мой взгляд вариант и отрисовываю:

Добавляю и меняю детали:

Но в итоге останавливаюсь на изначальном виде:

Сейчас прочитать слово JOOF тяжело, поэтому меняю букву «J» до узнаваемости:

Откладываю «JOOF» в сторону и приступаю к «Live». Чтобы подчеркнуть движение вперед, использую курсив:

Подрезаю буквы «J» и «F» по наклонной «Live»:

Показываю клиенту:

Этот медведь обитает в инстаграме Джона

Логотип и сама идея клиенту нравятся, но он просит повысить читабельность слова JOOF, а именно буквы «J».

Работаю:

Выбираю правый нижний вариант, правлю букву «V» в слове Live и показываю клиенту:

Что-то по-прежнему не дает покоя в данном варианте, поэтому клиент просит показать другой вариант логотипа — в две строки, разместив слово Live под JOOF.

Строим такой вариант:

Пересечение «J» и «L» мне не нравится, а цифры «00» получились слишком узкими. Работаю над пересечением:

Выбираю последний вариант и выношу букву «F» за пределы формы, что дает возможность расширить «00»:

Отправляю работу клиенту:

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

Меняю букву «F»:

Сравниваю:

В таком виде лого теряет всю свою компактность и минималистичность в деталях. Откладываю в сторону этот вариант и приступаю к новому.

Задача остается неизменной — создать логотип JOOF Live, где слово JOOF будет отличаться от логотипа лейбла.

Пробую новый вариант лигатуры между «JO» и «OF»:

В таком виде лигатуры нам напомнили орнамент меандра:

Меняю соединение «OF» и дописываю слово Live:

Показываю клиенту:

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

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

Идея основана на главных чертах логотипа лейбла JOOF: вытянутые вверх буквы, загнутый вверх хвостик в горизонтальном штрихе «J» и развернутый вертикально средний штрих буквы «F». Если посмотреть на старый и новый лого лейбла, то всего этого в них нет:

Прикидываю варианты:

Отбрасываю угловатый лого (на картинке выше — средний) и работаю над двумя другими.

Строю вариант, основанный на кругах:

Выглядит плохо, JOOF и Live конфликтуют, буквы тонкие, а развернутый средний штрих в букве «E» кажется перебором. Строю второй вариант с учетом предыдущих ошибок:

В таком виде логотип нравится, показываю клиенту:

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

По просьбе клиента разрабатываю дополнительные варианты логотипа, где JOOF находится в рамке и с подписями «Live» и «A John 00 Fleming production».

Подбираю рамку:

Останавливаюсь на средней слева. Ищу расположение подписи Live:

Выбираю первые варианты и увеличиваю межбуквенное расстояние в «Live»:

Разрабатываю подпись «A John 00 Fleming production» в стиле логотипа:

Примеряю ее к логотипу в том же положении, что и «Live» для общей стилистики:

Клиент утверждает все варианты и принимает работу!

Правила и рекомендации по использованию логотипа собраны в гайдлайн:

Как я сделала логотип музыкального лейбла JOOF Mantra

Wed, 09 Dec 2015 16:52:54 +0100

Mantra — новое подразделение лейбла звукозаписи JOOF Recordings, основанного в Брайтоне в 1998 году. Под новым брендом лейбл будет издавать прогрессивную электронную музыку в жанрах Progressive и Psytrance.

Стояла задача разработать логотип для JOOF Mantra, но при этом сохранить логотип JOOF Recordings, то есть слово «JOOF» должно остаться неизменным.

Логотип JOOF Recordings

Перед началом работы я посмотрела на результаты поиска по запросу «mantra logo».

Результаты поиска по запросу «mantra logo»

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

Поиски идеи начала с изучения алфавита хинди:

Тут я обнаружила схожесть буквы R с буквой र [ra] и приняла это за основу будущего логотипа.

Набросала эскизы:

Приступила к отрисовке.

В таком виде слово мне не понравилось. Работаю дальше — меняю конструкцию «A», пробую округлить концы букв, экспериментирую с «M», меняю высоту букв — получается куча вариантов:

Выбираю самый удачный вариант:

Параллельно работаю над другой идеей:

Тут я изобразила слово «Mantra» в виде звуковой волны.

Увеличила толщину линий, смотрю результат:

Примеряю оба варианта к основному логотипу JOOF:

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

Возвращаюсь к первому варианту и пробую менять буквы «M» и «N»:

Второе слово читаю как «тапка» :-) Решаю сделать букву «N» ближе к прописной, чтобы слово воспринималось как латинское, и рисую новую «N»:

Сравниваю варианты:

Однозначно, новая «N» выглядит лучше. Но теперь мне не нравится буква «A». Решаю сделать ее тоже прописной подстать остальным буквам. Рисую варианты:

Пробую:

Выбираю классическую округлую форму, но отказываюсь от засечки у конечной «A». Увеличиваю высоту буквы, чтобы визуально она не казалась меньше остальных букв:

Примеряю результат к логотипу JOOF Recordings:

В таком виде JOOF сильно доминирует. Выравниваю толщину букв:

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

Теперь смущает разная высота. Обрезаю ножки у мантры и укорачиваю засечку у «M»:

Примеряю оба логотипа в горизонтальном виде и вертикальном:

Результат мне нравится! Показываю клиенту:

Клиент в восторге — логотип очень нравится.

Готовлю руководство по использованию логотипа и передаю все материалы.

Третья версия сайта www.daniellesden.com

Wed, 25 Nov 2015 19:03:09 +0100

Задача
Освежить и улучшить все разделы сайта.
www.daniellesden.com

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

Первая версия
Вторая версия
Третья версия
Адаптивная версия

В новой версии обновлена структура и практически все страницы сайта приобрели единый вид — теперь в них больше предсказуемости и порядка. Изменения коснулись абсолютно всех разделов сайта: главной страницы, биографии, дискографии, радио шоу, миксов, выступлений, упоминаний прессы и прочих. Также появился новый раздел «Advice» — это еженедельная рубрика, в которой автор отвечает на вопросы и даёт советы.

А еще верхнее меню на сайте теперь плавно скрывается при прокрутке страниц вниз, и также плавно появляется при прокрутке вверх. Кайф! Попробуйте сами.

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

Ведущий дизайнер
Таня Соколовская

Дизайнер
Даниил Соколовский

Разработчик и верстальщик
Максим Сильнов