33 заметки с тегом

Портфолио

Тут собраны мои работы. Для удобства разделила их по тегам:
Логотипы
Стили
Сайты
Печатные издания
Электронные издания
Печатные материалы
Процессы

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

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

Читайте также о новом логотипе и о первой версии сайта.

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

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

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

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

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


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

Дизайнер
Таня Соколовская
Верстальщик и разработчик
Руслан Бурнышев
 Нет комментариев    74   5 мес   Катя Кещян   Портфолио   Сайты

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

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

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

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

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

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

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

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

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

На’ви

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

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

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

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

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

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

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

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

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

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

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

Стало — было

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

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

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

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

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

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

 1 комментарий    89   5 мес   Катя Кещян   Логотипы   Портфолио   Процессы

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

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

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

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

Бумага Splendorgel плотностью 400 грамм
 Нет комментариев    56   9 мес   Мария Бережная   Портфолио   Стиль

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 Нет комментариев    70   2018   Daniel Lesden   Логотипы   Портфолио   Процессы

Дизайн psytranceguide.com

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

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

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

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

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

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

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


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

Дизайнер
Таня Соколовская
Верстальщик
Даниил Соколовский
 Нет комментариев    64   2017   Daniel Lesden   Портфолио   Сайты

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

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

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

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

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

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

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

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

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

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

Дизайн

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

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

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

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

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

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


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

Дизайнер
Таня Соколовская
Верстальщик и разработчик
Tony Realovich
 Нет комментариев    52   2017   Мария Бережная   Портфолио   Сайты

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

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

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

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


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

Дизайнер
Таня Соколовская
Верстальщик
Даниил Соколовский
Разработчик
Кодельная
 Нет комментариев    19   2016   Катя Кещян   Портфолио   Сайты

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

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

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

О процессе

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дизайнер
Таня Соколовская
Дизайнер и верстальщик
Даниил Соколовский
Разработчик
команда со стороны клиента
 Нет комментариев    20   2016   Epson   Портфолио   Сайты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Исправляю:

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

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

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

Смотрю:

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

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

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

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

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

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

Ранее Ctrl + ↓