Саша Бизиков

Руководитель отдела дизайна в ФанБоксе

Процесс обновления главной страницы

Задизайнил и сверстал главную страницу своего сайта, ниже опишу процесс.

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

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

Подготовка

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

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

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

Прототипы на бумаге — отличная штука, но когда нет понимания чего хочешь, они только мешают.

Бумажные прототипы главной страницы
Бумажные прототипы

Макетов много, определиться сложно. Непонятно, по какому пути идти и на чём остановиться. У меня, как у начинающего дизайнера ещё нет собственного стиля. Говорят, он появляется с опытом. Когда нет опыта и собственного стиля, нужно брать то, что нравится и переделывать под себя.

В Фидли читаю 101 личный блог, прошёлся по каждому и выбрал те, у которых есть главная страница: Салават Абдуллин, Роман Шавня, Артур Кочарян, Ярослав Максимов, Александр Гурьянов, Илья Бирман, Никита Иванов, Александр БеспоясовВладислав Балабанович, Елена Глубко, Максим Ильяхов и Илья Страйков.

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

Отличные шапки у Александра Гурьянова и Максима Ильяхова.

Шапка Александра ГурьяноваШапка Максима Ильяхова

У Ильи Бирмана отличный вывод заметок из блога, а у Максима красивая трубка и форма подписки:

Контент Ильи БирманаСайдбар Максима Ильяхова

После отбора элементов я понял, какой должна быть главная страница.

Дизайн-процесс

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

Первая версия главной — до того, как выбрал путь «копировать под себя» — выглядела так:

Первая версия дизайна

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

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

Итог первой итерации:

Первое приближение

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

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

Второе приближение

По образованию я математик. Бутылка Клейна — дань моему математическому образованию.Концепту тесно в макете, его поджимают описание и рассказ о себе. Выставлять акценты можно с помощью якорных объектов. Но у меня с ними оказался перебор: иконка, бутылка Клейна и смартфон. Глаза разбегаются и непонятно, какой элемент главный.

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

Третья итерация

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

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

Вёрстка

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

С другой стороны, даже когда ты разработчик, нельзя быть на 100% уверенным в возможности реализации элементов дизайна.

В моем случае оказалось, что нельзя сделать стандартными средствами ЦСС и ХТМЛ обтекание врезки. Рассчитывал на флексбоксы, но даже они не позволили справиться с ситуацией. Поэтому блок с заметками идёт ровно, не утекает под врезку.

Следующая сложность — вывод заметок по тегам. На главной выводятся не все заметки, а только те, которые отмечены галкой «Показать на главной»:

Настройка отображения заметки на главной

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

В шапке добавил чередование ритма: 1, 3, 4. С правой стороны исчезла пропасть из пустого пространства, страница стала приятнее и появилось ощущение завершённости.

Итоговая шапка главной страницы

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

Разработка

Σ

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

Финальная версия главной страницы

Страница отлично чувствует себя на компьютере, планшете и смартфоне.

Главная страница на Айпаде и Айфоне
Посмотреть в живую: Бизиков.ру

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

°°°

В мае 2018 года обновил дизайн блога.

, ,

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

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

21 комментарий

  1. Роман Шавня

    Получилось круто! Мне очень нравится. Молодец 🙂

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

    • Александр Бизиков

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

  2. Евгений Лазарев

    Всё, наверное, прекрасно, но в ссылке между строками есть некликабельные пикселы, и это кошмар.

    • Александр Бизиков

      Спасибо, поправлю.

  3. Андрей Гурылев

    Обтекание врезки можно сделать.
    http://yoksel.github.io/blend-modes-fallback/

    • Александр Бизиков

      Спасибо, попробую сделать. Но честно говоря, уже не знаю, а стоит ли? Без обтекания даже лучше оказалось 🙂

  4. Evgeny Zelensky

    Приветствую, Александр.
    Впечатляющая с точки зрения энтузиазма и оптимизма работа. Ваше отношение к делу и подача очень заряжают 🙂

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

    Прикладываю скриншот.

    • Саша Бизиков

      Привет, спасибо за отзыв!

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

      Правильно понимаю, что у вас Виндоус с браузером Хром?

    • Evgeny Zelensky

      Да, Windows 10. Google Chrome.
      Но на самом деле по барабану 🙂
      Ради интереса проверил то же самое в Explorer, Opera, Yandex Browser и на Win7 в тех же браузерах.

      Ну везде так и выглядит.

    • Саша Бизиков

      Попробуй обновить страницу, поменял кое что.

    • Evgeny Zelensky

      Теперь всё гуд

    • Саша Бизиков

      Отлично, спасибо!

  5. Алексей

    Александр, а что за версия WordPress у Ваc на скриншоте? С зелеными кнопками.

    • Саша Бизиков

      Это моя тема оформления. Если хочешь установить к себе на сайт с Вордпрес, то зайди на страницу — https://github.com/bizikov/bizikov-color-theme. Там есть описание как настроить плагин и включить тему оформления.

      Если найдешь ошибку или ещё что — пиши, помогу разобраться или доработать плагин. Руки пока не доходят оформить как надо и опубликовать в репозитории Вордпрес.

    • Алексей

      Поставил все… отличная тема! Спасибо, большое.

    • Саша Бизиков

      Отлично!

  6. UlrikheLukoie

    Саш, ну этот минимализм ведь ужасен!

    • Саша Бизиков

      Если считаешь, что минимализм ужасен — скажи что хорошо и докажи на фактах.

    • UlrikheLukoie

      я не говорил что минимализм вообще, а ЭТОТ минимализм.
      в данном случае речь не о фактах а об юзабилити. у тебя контекнт весь просто пеленкой — нет четкого визуального разделения на блоки. или вот погляди на свои теги — они не оформлены как теги, и надо догадаться что это теги!
      после окончания статьи сразу идут блоки социальных связей. нет четкого выделения что статья закончена. то есть если быстро прокручивать чтобы глянуть на размер статьи, сразу и не заметишь где она уже завершена.
      горизонтальная линия в начале комментариев едва различима. но ведь она ЕСТЬ.
      блок «еще» с похожими статьями без картинок не цепляет, как это происходит на других сайтах. я бы и хотел тебя почитать еще, честно, но не цепляются глаза за графику. и я считаю что это плохо. потому что этот блок должен не только извещать какие статьи у тебя еще имеются, но и удержать посетителя, в результате желательно сделав его постоянным.
      отдели как то типографикой хотя бы шапку от контента
      уйди от слепого копирования Тёмы с цитатами на полях. ты ж можешь их сделать типа врезочками, или как марками, или еще как. а то пока у тебя 1в1, оно кажется просто копипастой(хотя возможно оно так и есть, но видимо потому и нужно что-то подумать как сделать по своему).

      ЗЫЖ у последней фотки надо не «в живую» а «вживую».

    • Саша Бизиков

      Про копирование. В заметке было написано, на какие сайты ориентировался. Напрямую от стиля Артемия Лебедева ничего не копировал, тут скорее надо смотреть в сторону Бюро Горбунова. Вот с них много копирую. И то, когда заметка была написана и соответственно когда делал главную и весь внешний вид блога, то у меня мало опыта в дизайне было.

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

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

  7. UlrikheLukoie

    И, кстати, копирование знаков параграф и комментариев к тексту на полях за Тёмой — не лучшее решение. Когда это у них — оно свежо. Если повторяешь — уже попахивает.
    Спасибо что нигде не увидел на сайте слова «электропочта».

Написать комментарий

Ещё заметки

Точка контакта: презентация

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

Иконка для канала Федора Борщева

Сделал иконку для канала Федора Борщева. Пообщались, в итоге убедил его изменить не только иконку, но и название канала.

Иконка для канала Сергея Капличного

Сделал иконку для канала Сергея Капличного. Раньше канал так и назывался, но Сергей решил развить его в небольшое СМИ с интересными форматами и назвал его «РАЗВИВЕЙШН».

Иконка для канала «Инструменты редактора»

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

Иконка для канала «UX Notes»

Сделал иконку для канала «UX Notes», который ведёт Антон Григорьев. Антон делится ссылками на материалы для дизайнеров и проектировщиков.

Иконка для канала Родиона Скрябина

Сделал иконку для канала Родиона Скрябина, где он пишет про контент-маркетинг, медиа, управление и контент.

Иконка канала МИФ в Телеграме

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

Тезисы о науке касания

Какой шрифт используется в навигации московского метро?

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

Тайпетербург, 2017

5 и 6 августа я был в Санкт-Петербурге на конференции шрифтового дизайна Тайпетербург. В этой заметке поделюсь впечатлениями и выводами.

Дизайн-просмотр за три минуты

Смонтировал видео с форума «Дизайн-просмотр», который прошёл 29 и 30 апреля в Москве.

Прошёл курс «iOS-программирование для дизайнеров»

С 4 по 13 июля я проходил «iOS-программирование для дизайнеров» — это курс для дизайнеров, которые хотят разобраться в том, из чего состоит разработка мобильного приложения для айфона. В заметке рассказываю, чему научился.

Настройка шаблонов экспорта в Sketch

План

Третья часть из серии заметок про составление плана развития на год. Описываю как составить план развития дизайнера.

Инструмент

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

Цель

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

Модульные системы в графическом дизайне

Давно хотел прочитать «Модульные системы в графическом дизайне». Считал, что её уже не продают. После защиты семестровых работ в БВШД наткнулся на магазин студии Лебедева. Оказывается, они её печатают и продают.

Пиши, сокращай

«Пиши, сокращай» относится к тем книгам, которые забиты практичными советами. В заметке расскажу как она помогла мне найти работу младшим дизайнером.

Первые 90 дней в компании

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

Советы Сергея Чикина

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

Тестовое задание для RedMadRobot

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

Культура дизайна

Прочитал книгу Влада Головача — «Культура дизайна». В заметке делаюсь цитатами с интерсными идеями о дизайне.

Сайт для Сергея Сичкар

Задизайнил и сверстал блог для Сергея Сичкара. В заметке описываю процесс работы.

Кристал — просмотр дизайна на Андроиде

Нашёл для Андроида приложение, которое позволяет просматривать макеты из Скетча.

Концепт главной страницы сервиса Туту.ру

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

Конспект: Дизайн + 1

Посмотрел все части «Дизайн + 1». Половину лекции Людвиг рассказывает, как стать хорошим дизайнером, вторую половину отвечает на вопросы. Упорядочил информацию и составил конспект.

Школа мобильного дизайна: результат поступления

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

Процесс создания фавикона

Блог существует с 2009 года. За это время он успел побывать обычной ХТМЛ-страницей, блогом на генераторе статических сайтов и сейчас — на системе управления сайтами Вордпрес.

В заметке описываю как Дэн помог нарисовать фавикон для блога.

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

Составил конспект по семинару Андрея Дьякова о правилах общения с клиентами.

Дизайн привычных вещей

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

Дизайн для реального мира

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

Джони Айв — легендарный дизайнер Apple

Советую к прочтению всем, кто интересуется историей великих компаний и историей Apple в частности.

Дизайн – это работа

Прочитал «Дизайн — это работа» и делаюсь интересными мыслями и цитатами из книги.

Примеры персональных сайтов для вдохновения

Решил время от времени выкладывать подборки интересных сайтов для вдохновения. Для первого раза составил список красивых и интересных персональных сайтов и блогов. Приятного аппетита!

Панель пуск в Windows 7

Сама панель пуск меня не очень удивила, так как у меня на Windows XP SP2 Zver стояла тома оформления Висты, так что я уже привык к этому.

Дизайн приложения Paint в Windows 7

Paint в Семерке значительно отличается от Paint’а в обычной XP. Значительные изменения произошли в дизайн стороне. Он стал намного красивее! Полее похожим на Офис 2007.