Дизайн блога noteskeeper.ru
Небольшой рассказ о том, как мы делали дизайн блога для нашего хорошего друга Владимира Кузнецова.
Ключевые слова интересов блога Вовы: html, css, javascript, apple.
Цвет
Сначала мы планировали использовать те цвета, что прописаны в брифе (синий, зеленый, желтый), и что обычно используются в вебе в последнее время многими.
Вскоре мы осознали, что от подобных решений уже просто тошнит.
Хотелось чего нибудь свеженького, но все же в рамках брифа.
Дмитрий Тростин, креативный директор бюро:
«Сопровождая свою жену в парфюмерном магазине, я скучая наткнулся на неебически крутую упаковку туалетной воды. Это была лимитированная серия Hugo Boss от Карима Рашида.»
Эта упаковка и вдохновила нас на новые цветовые решения.
Шрифт
Выбрали гельветику — она не стареет, всегда в моде и вписывается в любое окружение форм и цвета.
Главная страница
Теги мы разместили вверху — практически вся навигация у нас находится в одном месте, даже поле для поиска визуально объединено с меню. Поиск, по сути — тоже элемент навигации.
Подписи к блоку “теги” и многим другим нет, потому что аудитория блога очень узкая, и всей ей и так понятно, что это теги и количество комментариев.
Так же, мы практически гордимся тем, как ушли от листалки “вперед-назад”, совместив ее с архивом по месяцам.
Макет может показаться слишком бесцветным, — все расцветает в динамике и взаимодействии с пользователем — черные плашки и заголовки наливаются цветом при наведении — хочется кликать и кликать! (демонстрационная анимация прилагается)
Приятные мелочи — длины разделительных черточек под каждой категорией пропорционально соотвествуют количеству заметок в этой категории.
Страница «Обо мне»
По традиции фотография Бреда Питта.
Страница отдельно взятой заметки
Тема с белой плашкой в футере очень в кассу решила ситуацию с блоком комментариев.
Результаты поиска или записи по одному тегу
Визитка
Бонусом мы разработали визитку. В ней три пиздатые вещи:
- Она полностью повторяет стиль блога и едина с ним
- На ней можно писать шариковой ручкой дополнительные пометки (места предостаточно)
- На ней есть QR-код, подведя камеру телефона к которому, сразу можно перейти на адрес блога или еще куда.
P. S. Для проекта мы сделали только дизайн. Верстку и натягивание на движок выполнял, естественно, сам Владимир. Некоторые вещи он реализовал, некоторые нет (http://noteskeeper.ru/). Ну, хозяин — барин.