АРУТЮНОВ, заметки с тегом: сайт

Научиться ремеслу

Wed, 06 Dec 2017 20:05:07 +0300

Мария Комарова:
— Вот я верстаю страницу. И у меня получается страшно. И еще скучно. Прямоугольники и колонки. Смотрю референсы, но не знаю, как применить хорошие приемы в этом случае. Еще нет нормальных картинок. И времени маловато. И опыта. Где взять идей, как научиться верстать нескучно, что делать, если с картинками напряг? Каждый раз такие вопросы.

Мария!

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

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

См. также: убрать всё лишнее, ещё разок, смешать комки.

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

Может показаться, что коллекционирование примеров дизайна работает как заготовка шаблонов. Но нет! Чтобы загрузить в себя шаблон, надо его воспроизвести. Перерисовать своими руками.

Например, предложим начинающему дизайнеру задание: скопируй, пожалуйста, вот эту картинку (слева). Тут достаточно подобрать шрифты, только в середине надо рисовать буквы руками, но они простые. Дизайнер присылает свою версию (справа).

Отлично. А теперь сделай, пожалуйста, то же самое, только по-русски? Да, Мила, это я тебе сейчас говорю — давай, присылай уже!

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

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

Задать свой вопрос

Нарисовать в подробностях

Sat, 16 Apr 2016 23:01:07 +0300

Роман Хлебников:
— Евгений, привет! Сделал страничку будущего сайта о животных. Предполагается на этом сайте как читать интересные статьи, так и размещать объявления собак и кошек. Также будут потерянные и найденные. Вопрос в том, как дела обстоят с вёрсткой, что можно ещё добавить или убрать? Как придать ей большей индивидуальности? Большой пустой блок справа предположительно для рекламы. Стоит ли его делать таким большим?

Роман!

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

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

Почти наверняка вверху появится название сайта и навигационное меню — иначе посетителю будет трудно понять, где он и что здесь есть. Вероятно, на главной странице нужны элементы управления информационным потоком — например, фильтры. Статьи будут разных форматов. Объявлениям потребуется поиск, а может ещё и специальное выделение платных позиций. Новости можно будет выбирать по тегу или дате публикации. Это лишь первое, что мне пришло в голову.

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

* * *

Дела с вёрсткой обстоят нормально. Типографика не звенящая, но и не кошмарная. Модульная сетка скучновата. Нет, это хорошо, что промоблоки разные. Но всё равно на хватает какого-то главного объекта. И внятности не хватает. Чтобы это исправить, достаточно выявить все сущности — объявление, статья, фактоид, что там ещё — и для каждой придумать узнаваемый дизайн.

Лучший способ придать вёрстке индивидуальность — придумать классный проект с уникальными фишечками и форматами представления данных. Тогда достаточно аккуратно оформить — вот и вся индивидуальность.

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

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

P. S. Чтобы размещать объявления кошек, вам придётся сделать прорыв в науке и технике: разработать кошко-ориентированные интерфейсы, научиться распознавать и транслировать их сигнальную систему (согласен, лучше начать с британских). Это довольно сложная задача — возможно, её стоит выделить в отдельный проект.

:—)

Задать свой вопрос

Назовите имена!

Mon, 20 Apr 2015 16:29:12 +0300

Антон:

Женя, добрый день! Делаем сервис, который помогает владельцу сайта быстро получить краткую рецензию по удобству использования от обычного посетителя и дизайнера: dangry.ru. Что думаете?

Антон!

Удобство использования — не строгая наука. Законный вопрос любого человека: а кто советует?

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

Разумеется, всё не так. Но лучше не оставлять места домыслам. У профессионального дизайнера есть имя и портфолио. С «обычным посетителем» непонятно: если это всё время один и тот же человек, то никакой он не обычный. А если это разные — стоит объяснить, откуда они берутся и почему их слова сколько-нибудь полезны. Ссылки «станьте рецензентом» недостаточно.

Этаж «как это работает» предлагаю убрать. Все подробности о дизайнере и «обычном посетителе» стоит упаковать в один вступительный текст. Если речь о советах и цена нигде не указана — очевидно, они бесплатные.

Да и лампу я бы убрал.

Задать свой вопрос