EliseeAlex.me

Шаг 3

Дизайн главной страницы

Применение принципов вёрстки бюро Артёма Горбунова

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

Теперь я расскажу про то, как я учился дизайну и искал вдохновение для создания главной страницы. Я не дизайнер, но я люблю удобные продукты, которыми приятно пользоваться. Если вы знаете, как лучше, пишите! Я люблю критику. Twitter: @eliseealex или по почте: eliseealex@gmail.com.

Теория

Перед созданием первой версии своего сайта я перечитал советы в бюро Артёма Горбунова. Их я и применял при создании главной страницы. Начнём с элементов вёрстки:

Также имеет смысл посмотреть, как применяются эти же элементы стиля в системе главбух.

Дальше рассмотрим принцип модульности, это базовое правило, используемое в бюро: http://artgorbunov.ru/bb/soviet/20140210/

С этим принципом связана серия статей «как собрать страницу из модулей»:

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

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

Ещё есть подборка интересных книг в разделе «Системные требования» школы стажеров бюро Артёма Горбунова: http://artgorbunov.ru/school.

Практика

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

В совете о вёрстке главной страницы http://artgorbunov.ru/bb/soviet/20141110/ описаны четыре типа вёрстки. Главная страница в виде ленты — мне не подходит, об этом я говорил ещё в первой статье. Плитка и фоторама — больше подходят для галерей и маркетинговых сайтов. Остался только рубрикатор, и я это то, что нужно.

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

Рубрика «Эксперимент»

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

Я думаю, что для этого подойдёт горизонтальный блок с четырьмя колонками:

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

Можно включить заголовок внутрь блока и уменьшить количество колонок:

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

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

Как это сделать?

В этом мне очень поможет Hugo, у него простая модель структуры, аналогичная файловой системе: если я хочу, чтобы у меня статья была доступно по адресу lis.press/project/1-first , то я создаю в папке content/project файл 1-first.md .

Дальше можно на главной странице с помощью запроса выбрать три последние статьи из этой папки: {{ range first 3 (where .Data.Pages "Section" "project") }}

Но с одной такой рубрикой сайт будет пустым и скучным, поэтому нужно ещё что-нибудь придумать.

Книги

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

В плане внешнего вида, мне нравится, как оформлен блок «Сейчас читаю» на сайте Елены Глубко http://elena.glubko.ru/.

Прочие материалы

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

Что же получилось?

Всё оказалось намного проще, чем я думал в самом начале, у меня пока что нет дорожной карты, но я запустил этот сайт. И вот версия дизайна, которая получилась в самом начале, думаю, что она будет меняться и скоро я её не узнаю (и мне будет стыдно ^^):