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

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

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

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

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

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

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

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

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

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

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

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

Дизайн 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

↓

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

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

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

↓

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Размышляем:

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

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

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

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

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

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

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

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

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

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

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

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

— Это как?

— А вот так:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание сайта лейбла Digital Om Productions

Tue, 27 Oct 2015 18:54:40 +0100

Digital Om Production — музыкальный лейбл, расположенный в Индии и Непале. Лейбл выпускает современную электронную танцевальную музыку в стилях Progressive и Psychedelic Trance, а также работает как букинг-агентство для своих артистов.

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

Изучаем рынок, смотрим сайты других лейблов:

Сайты других лейблов

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

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

Схема сайта

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

Размышляем: «прежде чем купить музыку, слушатели захотят ознакомиться с фрагментом. Значит нужна возможность выкладывать сэмплы».

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

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

Размышляем: «Так, сверху — большие и яркие кнопки, ссылки на магазины, где продаётся музыка. Но что если добавить на сайт альбом, который еще не вышел? Что будет вместо кнопок?».

Решаем сделать пунктирный контур с надписью «Forthcoming» (грядущий релиз). Эта надпись будет автоматически выводится, если дата выхода альбома будущее число, значит менеджеру сайта не придется менять её вручную.

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

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

Не забываем и про страницу ошибки 404 (это когда пользователь случайно попадает на несуществующую страницу, например, когда ошибается в написании адреса): чтобы зашедшему сюда пользователю не было скучно, размещаем небольшую историю о том, что такое «Ом».

Отдельные макеты делаем для мобильной версии сайта:

Собираем все макеты, готовим презентацию и показываем клиенту:

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

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

Сайт сделали за 4 недели. Поддерживается и наполняется сотрудниками лейбла.

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

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

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

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

Запустила сайт maryber.com

Mon, 27 Jul 2015 17:38:59 +0100

Задача
Сделать сайт-портфолио для стилиста-имиджмейкера Марии Бережной. Рассказать, чем занимается Мария и кому может быть полезна. Предусмотреть на сайте возможность публикации тематичных статей.
maryber.com

Основной раздел сайта — галерея с работами:

Раздел с описанием услуг Марии:

Страница с информацией о самой Марии:

Также Мария занимается организацией бьюти-эвентов:

Отдельная страница для партнеров с фотографиями и контактными данными:

Для удобства есть теги

Страница с отзывами:

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

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

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

Менеджер
Даниил Соколовский

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

Вторая версия сайта www.daniellesden.com

Wed, 25 Mar 2015 10:55:52 +0100

Задача
Доработать все разделы сайта и перенести сайт на новый движок.
www.daniellesden.com

Daniel Lesden — музыкант диджей. С ростом его популярности увеличилось и количество контента на сайте, поэтому возникла необходимость расширить имеющийся функционал. Всего внесено более 30 различных изменений, включая новый «движок» для более удобного управления сайтом — по сути, пришлось сделать сайт с нуля.

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

На страницах музыкальных релизов появились заметные кнопки «call-to-action» — кнопки, призывающие к действию

Еще здесь появились вкладки: пресса, отзывы и похожие материалы

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

Отзывы известных музыкантов

Материалы из этой категории, например, ремиксы

Главная страница радио программы также получила обновление

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

Фотоальбомы — новый раздел на сайте. На мобильных телефонах тоже прекрасно работает и смотрится!

Раздел для прессы теперь можно фильтровать по типам материалов: обзоры, интервью и статьи

Интересная страница «404»: набранные параметры 404 на дисплее миди-контроллера и надпись в духе Звездных Войн :-)

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

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

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

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

Разработка сайта музыканта Дэниела Лэсдена

Tue, 26 Nov 2013 19:47:04 +0100

Задача
Разработать сайт музыканта.
daniellesden.com

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

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

Еще сделала космические промо-страницы альбома артиста.

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

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

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

Руководитель команды разработчиков
Станислав Мишин