Саша Бизиков

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

ЗадачаСделать домашнюю страницу и блог для Сергея Сичкар

На проекте выполнял роль дизайнера, верстальщика и вордпрес-разработчика. Ниже опишу процесс работы над дизайном, вёрсткой и о том, почему макет не должен «бронзоветь».

Дизайн

Созвонился с Сергеем, узнал требования к будущему сайту и выделил три основные структуры домашней страницы:

Три варианта структуры домашней страницы

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

Начал прорабатывать структуру, писать текст. Получилось два варианта главной:

Два варианта домашней страницы

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

Определились, что будем прорабатывать вторую версию. К следующей итерации она сильно изменилась и стала финальной версией дизайна:


Финальная версия дизайна

Вёрстка

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


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

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

В лекции «Дизайн + 1» Людвиг Быстроновский отлично рассказал о том, почему после утверждения дизайн сайта не должен «бронзоветь». Теперь у меня на практике получилось понять этот совет.

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

Σ

Результат:


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

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

Посмотреть вживую: sergeysichkar.ru.

°°°

Благодарю Сергея за быстрые ответы на мои вопросы и адекватную критику. Недавно он завёл канал в телеграме: @sergeysichkar. Пишет о бизнесе, идеях и результатах. Если тема интересна — подписывайтесь.

,

11 комментариев

  1. Vladislav Skripchenko 11 ноября 2016

    Неожиданно и приятно работает ссылочка «Подписаться». Краду идею (-:

  2. Саша Бизиков 11 ноября 2016

    Отлично!

  3. JiLiZART 12 ноября 2016

    советую попробовать блок подписки сделать через css transition, анимация будет гораздо плавнеий + ее можно будет подкорректировать через кривые. вот примерчик как это можно сделать для блока с динамической высотой https://jsfiddle.net/3Fc7D/3054/

  4. Kirill Green 25 ноября 2016

    Есть небольшая помарка в поле поиска: «ВведиТЕ слово для поиска и нажмИ Энтер».

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

    Действительно. Спасибо, исправлю!

  6. Анна Викторовна 20 марта 2017

    в чем делаете прототипы?

  7. Саша Бизиков 20 марта 2017

    Если говорить про такие http://share.bizikov.ru/sergeysichkar/v2/, то это обычная html-страница, в которой вставлен скриншот сайта.

    Если прототип для мобильного приложения, то использую несколько инструментов, в зависимости от задачи.
    – Если надо показать пользовательский сценарий, то подойдет Invision (https://www.invisionapp.com).
    – Если надо показать красивую анимацию и простой пользовательский сценарий, то подойдет Principle (http://principleformac.com).
    – Для сложной анимации сейчас изучаю KateApp https://kiteapp.co.

    В лекциях Школы мобильного дизайна, есть видео про инструменты прототипирования.
    Посмотрите: https://www.youtube.com/watch?v=acVPOq7nMOk&list=PLLkvpHo_HuBPmL0SFkxBAEaV7pvL9mMth&index=6

  8. goldvarg 28 июля 2017

    Очень грамотный минимализм, который дано отрисовать и спроектировать не каждому! Браво!

  9. blackst0ne 2 февраля 2018

    Залогинился сюда специально для того, чтобы выразить поддержку выраженной поддержке идеи и реализации функции «Подписаться». =)

  10. Vladislav Skripchenko 2 февраля 2018

    Вновь залогинился сюда специально для того, чтобы выразить БЛАГОДАРНОСТЬ поддержке выраженной поддержкой выраженной поддержке идеи и реализации функции «Подписаться».

    Аминь 🙂

  11. Саша Бизиков 3 февраля 2018

    Пользуйтесь на здоровье 🙂

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

Ещё заметки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На четвёртом и пятом занятиях курса «Характер и эмоции в штрихе» занимались композицией фразы.

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

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

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

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

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

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

План

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

Инструмент

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

Цель

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Канал в Телеграме

Месяц назад в целях эксперимента создал в Телеграме канал, сейчас меня читает 138 человек.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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