Саша Бизиков

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

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

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

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

Дизайн

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

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

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

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

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

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

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


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

Вёрстка

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


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

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

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

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

Σ

Результат:


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

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

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

°°°

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

, ,

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

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

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

  1. Vladislav Skripchenko

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

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

      Отлично!

    • blackst0ne

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

    • Vladislav Skripchenko

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

      Аминь 🙂

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

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

  2. JiLiZART

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

  3. Kirill Green

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

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

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

  4. Анна Викторовна

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

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

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

  5. goldvarg

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

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

Ещё заметки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На картинке, как вы уже догадались, зона нажатий. До левого верхнего угла сложнее всего дотянуться. Стив Хубер говорит, что эта картинка больше не работает. Держат ли люди свои телефоны двумя руками? Нет. Люди по-разному обращаются со своими мобильными, часто меняют их положение в руке. Это не должно удивлять, потому что из исследований различных контекстов использования

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

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

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

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

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

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

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

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

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

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

План

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

Инструмент

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

Цель

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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