{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Блог Тани Соколовской: posts tagged Daniel Lesden", "_rss_description": "Раскрываю процессы, конспектирую книги, пишу советы.", "_rss_language": "en", "_itunes_email": "mail@tsokolovskaya.ru", "_itunes_categories_xml": "", "_itunes_image": "http:\/\/tsokolovskaya.ru\/blog\/pictures\/userpic\/userpic-square@2x.jpg?1757434518", "_itunes_explicit": "no", "home_page_url": "http:\/\/tsokolovskaya.ru\/blog\/tags\/daniel-lesden\/", "feed_url": "http:\/\/tsokolovskaya.ru\/blog\/tags\/daniel-lesden\/json\/", "icon": "http:\/\/tsokolovskaya.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1757434518", "authors": [ { "name": "Таня Соколовская", "url": "http:\/\/tsokolovskaya.ru\/blog\/", "avatar": "http:\/\/tsokolovskaya.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1757434518" } ], "items": [ { "id": "57", "url": "http:\/\/tsokolovskaya.ru\/blog\/all\/daniel-lesden-logo\/", "title": "Сделала новый логотип музыканта Daniel Lesden", "content_html": "
\n

Задача<\/i><\/b>
\nОбновить логотип, при этом сохранить узнаваемость.<\/i><\/p>\n<\/blockquote>\n

\n\"\"\n
Так выглядел старый логотип. Работу выполнил сербский дизайнер Nebojsa Nadj в 2012 году<\/div>\n<\/div>\n

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

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

\n\"\"\n<\/div>\n

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

\n\"\"\n<\/div>\n

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

\n\"\"\n<\/div>\n

Также смягчаю хвостик и делаю его чуть короче:<\/p>\n

\n\"\"\n<\/div>\n

Смотрю на результат:<\/p>\n

\n\"\"\n<\/div>\n

Экспериментирую с пробелами в буквах:<\/p>\n

\n\"\"\n<\/div>\n

Добавляю лигатуру и пробелы в другие буквы:<\/p>\n

\n\"\"\n<\/div>\n

Собираю вертикальный вариант:<\/p>\n

\n\"\"\n<\/div>\n

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

\n\"\"\n<\/div>\n

Так мне не нравится. “Расширяю” букву “A”:<\/p>\n

\n\"\"\n<\/div>\n

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

\n\"\"\n
Широкая “A” решила проблему с выравниванием<\/div>\n<\/div>\n
\n\"\"\n
Горизонтальный вариант тоже выглядит отлично<\/div>\n<\/div>\n

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

\n\"\"\n<\/div>\n

Работа принята :-)<\/p>\n", "date_published": "2018-01-13T19:55:24+01:00", "date_modified": "2019-05-23T20:21:00+01:00", "tags": [ "Daniel Lesden", "Логотипы", "Портфолио", "Процессы" ], "image": "http:\/\/tsokolovskaya.ru\/blog\/pictures\/Screen-Shot-2019-05-23-at-12.25.55.png", "_date_published_rfc2822": "Sat, 13 Jan 2018 19:55:24 +0100", "_rss_guid_is_permalink": "false", "_rss_guid": "57", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "http:\/\/tsokolovskaya.ru\/blog\/pictures\/Screen-Shot-2019-05-23-at-12.25.55.png", "http:\/\/tsokolovskaya.ru\/blog\/pictures\/1-4.jpg", "http:\/\/tsokolovskaya.ru\/blog\/pictures\/2-3.jpg", "http:\/\/tsokolovskaya.ru\/blog\/pictures\/3.jpg", "http:\/\/tsokolovskaya.ru\/blog\/pictures\/13-1.jpg", "http:\/\/tsokolovskaya.ru\/blog\/pictures\/4.jpg", "http:\/\/tsokolovskaya.ru\/blog\/pictures\/5.jpg", "http:\/\/tsokolovskaya.ru\/blog\/pictures\/6.jpg", "http:\/\/tsokolovskaya.ru\/blog\/pictures\/8-3.jpg", "http:\/\/tsokolovskaya.ru\/blog\/pictures\/9-2.jpg", "http:\/\/tsokolovskaya.ru\/blog\/pictures\/10-1.jpg", "http:\/\/tsokolovskaya.ru\/blog\/pictures\/7-2.jpg", "http:\/\/tsokolovskaya.ru\/blog\/pictures\/11-1.jpg", "http:\/\/tsokolovskaya.ru\/blog\/pictures\/12-1.jpg" ] } }, { "id": "38", "url": "http:\/\/tsokolovskaya.ru\/blog\/all\/psytranceguide-website\/", "title": "Дизайн psytranceguide.ru", "content_html": "

\n

Задача<\/b><\/i>
\nМузыкант Daniel Lesden пришел с идеей сделать небольшой гайд по пситранс-музыке и попросил помочь с оформлением. Помогла!<\/i>
\npsytranceguide.com<\/a><\/p>\n<\/blockquote>\n

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

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

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

\n\"\"\n
Крупный фактоид указывает темп, что позволяет быстро сориентироваться и найти нужный стиль<\/div>\n<\/div>\n

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

\n\"\"\n<\/div>\n

Сайт адаптирован и для мобильных устройств:<\/p>\n

\n\"\"\n<\/div>\n
\n

Участники проекта<\/b><\/p>\n\n\n
ДизайнерТаня Соколовская<\/td>\nВерстальщикДаниил Соколовский<\/a><\/td>\n<\/tr>\n<\/table>\n", "date_published": "2017-08-07T20:08:36+01:00", "date_modified": "2023-07-11T10:56:56+01:00", "tags": [ "Daniel Lesden", "Портфолио", "Сайты" ], "image": "http:\/\/tsokolovskaya.ru\/blog\/pictures\/Z100.jpg", "_date_published_rfc2822": "Mon, 07 Aug 2017 20:08:36 +0100", "_rss_guid_is_permalink": "false", "_rss_guid": "38", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "http:\/\/tsokolovskaya.ru\/blog\/pictures\/Z100.jpg", "http:\/\/tsokolovskaya.ru\/blog\/pictures\/h1500.jpg", "http:\/\/tsokolovskaya.ru\/blog\/pictures\/Z100-2.jpg" ] } }, { "id": "35", "url": "http:\/\/tsokolovskaya.ru\/blog\/all\/daniel-lesden-website-v3-5\/", "title": "Обновление сайта daniellesden.com", "content_html": "
\n

Задача<\/b><\/i>
\nАдаптировать сайт под любые экраны.<\/i>
\nwww.daniellesden.com<\/a><\/i><\/p>\n<\/blockquote>\n

\n\"\"\n<\/div>\n

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

Первая версия<\/a>Вторая версия<\/a>Третья версия<\/a>Адаптивная версия<\/i><\/p>\n

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

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

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

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

\n\"\"\n
Изначальный дизайн раздела в виде таймлайна<\/div>\n<\/div>\n

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

Разбиваем все советы по темам: написание музыки, диджеинг, менеджмент, маркетинг, бизнес.<\/p>\n

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

\n\"\"\n<\/div>\n

Размышляем:<\/p>\n

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

— И как это поможет?<\/i><\/p>\n

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

— А где будут жить остальные статьи, помимо этих важных?<\/i><\/p>\n

— Все остальные советы будут снизу в ленте, с этим без изменений.<\/i><\/p>\n

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

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

Звучит здорово. Приступаем к реализации:<\/p>\n

\n\"\"\n
Собираем макет предложенной идеи<\/div>\n<\/div>\n

Смотрим, оцениваем и продолжаем рассуждать:<\/p>\n

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

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

— Это как?<\/i><\/p>\n

— А вот так:<\/i><\/p>\n

\n