Саша Бизиков

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

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

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

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

Подготовка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вёрстка

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

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

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

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

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

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

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

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

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

Разработка

Σ

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

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

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

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

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

°°°

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

Поделиться
Отправить
Отправить

23 комментария

  1. Роман Шавня 18 июня 2016

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

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

  2. Александр Бизиков 18 июня 2016

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

  3. Евгений Лазарев 20 июня 2016

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

  4. Александр Бизиков 20 июня 2016

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

  5. Андрей Гурылев 20 июня 2016

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

  6. Александр Бизиков 20 июня 2016

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

  7. Evgeny Zelensky 23 июня 2016

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

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

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

  8. Саша Бизиков 23 июня 2016

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

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

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

  9. Evgeny Zelensky 23 июня 2016

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

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

  10. Саша Бизиков 23 июня 2016

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

  11. Evgeny Zelensky 23 июня 2016

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

  12. Саша Бизиков 23 июня 2016

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

  13. Алексей 25 ноября 2016

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

  14. Саша Бизиков 25 ноября 2016

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

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

  15. Алексей 28 ноября 2016

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

  16. Саша Бизиков 28 ноября 2016

    Отлично!

  17. UlrikheLukoie 4 апреля 2017

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

  18. UlrikheLukoie 4 апреля 2017

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

  19. Саша Бизиков 4 апреля 2017

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

  20. UlrikheLukoie 4 апреля 2017

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

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

  21. Саша Бизиков 4 апреля 2017

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

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

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

  22. Николай 5 февраля 2021

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

  23. Саша Бизиков 6 февраля 2021

    На домашней странице порядок записей идёт по хронологии от свежего к старому с разбивкой по годам. Порядок постов слева на право идёт. Кажется, что все очевидно.

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

🔒 Обсуждение закрыто

Ещё заметки

Итоги по годовому курсу графического дизайна Bang Bang Education

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

Верстка книжных и журнальных разворотов

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

Как руководить дизайнерами

Прошёл небольшой курс на Bang Bang Education от Кости Горского «Как руководить дизайнерами». В заметке поделюсь впечатлениями от курса.

Лайфлист дизайнера презентаций

За последние два года я сверстал 91 презентацию. Все они сделаны в рамках ФанБокса и по понятным причинам показать их не могу. Зато могу поделиться списком материалов, которые стоит изучить, чтобы научиться делать презентации.

Развитие в профессии

Выступил с лекцией «Развитие в профессии» на конференции UWDC 2018 в Челябинске.

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

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

Как поставить обучение на поток при небольшом количестве времени

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

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

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

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

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

Характер и эмоции в штрихе, итоговое занятие

Последнее занятие курса «Характер и эмоции в штрихе». В качестве итоговой работы взял фразу «Автостопом по галактике».

Характер и эмоции в штрихе, четвёртое и пятое занятия

На четвёртом и пятом занятиях курса «Характер и эмоции в штрихе» занимались композицией фразы. Влада показала на примерах какие композиции могут быть. Какие эмоции и смысл они передают. Разобрали плакаты, вот некоторые из них: Больше примеров композиции можно посмотреть в Пинтересте Перед тем как рисовать композицию, хорошо было бы составить её карандашом на листочке. Можно

Лайфлист дизайнера, 2017

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

Характер и эмоции в штрихе, третье занятие

На третьем занятии курса «Характер и эмоции в штрихе» мы учились передавать характер вида спорта через его название. В конце расскажу, как у меня «взлетело» регби. Лучше всего сразу писать на белом листе бумаги. Так проще будет отсканировать и использовать в Фотошопе. Перед тем как начать писать название вида спорта, хорошо было бы понять, что оно означает. Чем

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

Раньше нарезанную графику для андроида сохранял с помощью специального плагина для Скетча. Даже хотел написать свой, чтобы сделать процесс ещё проще. Начиная с 42 версии, у Скетча появилась возможность задавать шаблоны экспорта. С их помощью можно экспортировать иконки в нужных разрешениях без использования сторонних плагинов. Шаблоны находятся в Sketch → Preferences → Presets: Добавил четыре шаблона: Экраны для айфона рисуем в

План

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

Инструмент

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

Цель

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

100 книг для дизайнера

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

Характер и эмоции в штрихе, второе занятие

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

Характер и эмоции в штрихе, первое занятие

Записался на курс «Характер и эмоции в штрихе», который рассчитан на 6 занятий по 3 часа. На каждое занятие буду составлять заметку с впечатлениями и результатом. Будет интересно посмотреть на прогресс.

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

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

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

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

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

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

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

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

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

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

Опыт покупки MacBook Pro

В апреле купил MacBook Pro, середины 2012 года. Не новый, а с рук. В заметке кратко поделюсь основными наблюдениями и полезными ссылками.

Мобилизация, итог обучения

10 августа презентовал проект организаторам Школы. В начале недели стали известны результаты.

Мобилизация, четырнадцатый день

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

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

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

Мобилизация, седьмой день

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

Мобилизация, пятый и шестой день

Прошло две лекции и два семинара, поэтому опишу впечатления по прошедшим дня. Они были насыщенными.

Мобилизация, четвертый день

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

Мобилизация, третий день

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

Мобилизация, второй день

В начале недели у нас была вводная лекция. О том дне писать не стал, т.к раскрывались организационные моменты. Появилось понимание того, что всё серьезно. Будет не до отдыха.

Мобилизация, первый день

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

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

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

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

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

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

Лайфлист дизайнера, 2016

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