Саша Бизиков

Младший дизайнер в ФанБоксе. Делал интерфейсы бизнес-процессов для сотрудников банка Тинькофф. Изучаю дизайн мобильных приложений и редактуру текста.

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

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

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

Дизайн

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

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

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

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

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

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

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


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

Вёрстка

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

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

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

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

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

Σ

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

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

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

°°°

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

Ещё


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

  • Отлично!

  • JiLiZART

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

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

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

  • Анна Викторовна

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

  • Если говорить про такие 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