Лого vc.ru

Мнение: Если хотите делать дизайн ваших сайтов лучше, сначала прописывайте их на бумаге

Мнение: Если хотите делать дизайн ваших сайтов лучше, сначала прописывайте их на бумаге

Команда сервиса для проведения тестирования пользователей Userbrain поделилась в своем блоге советами, как начать работу над дизайн-проектом. По их мнению, специалисты должны сначала записать все свои идеи на бумаге, не прибегая к популярным сервисам прототипирования.

Digital-агенство Red Collar подготовило для рубрики «Интерфейсы» перевод заметки.

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

Это как раз тот случай, когда у разных людей к подобной задаче будет разный подход. Некоторые предпочитают сразу работать в браузере, у других любимыми инструментами будут Sketch и Photoshop, а третьи являются фанатами старых добрых скетчей, нарисованных на бумаге. Несмотря на то, что все эти способы весьма полезны, есть один инструмент, который сразу никогда не приходит нам в голову, когда речь заходит о дизайне веб-сайта. Это обычный текстовый редактор — самое ценное средство из всех. 

Относитесь к дизайну как к типографике

Задумайтесь об этом на секунду: заголовки, параграфы, списки, цитаты, пометки и так далее. Основа любого веб-сайта на этой планете — текст. Некоторые сайты содержат также изображения и видео, но все они всё равно делают ставку на слова. Это напоминает мне об утверждении Оливера Рейхенштайна: 

Веб-дизайн — это 95% типографики.

Забудьте о многоколоночной схеме

Мобильные девайсы со своим ограниченным экранным пространством дают нам важный урок веб-дизайна, а именно, что дизайн — не схема. 

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

Старайтесь привести всё в правильную последовательность 

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

Форма следует из задачи. Стиль следует из всего

Когда вы хотите прописать ваш сайт, вам нужно точно знать его задачи. Какая цель у вашего сайта? Разберитесь в этом, и тогда вы сможете это записать. Форма вашего сайта должна определяться тем, что вы хотите достичь, а не тем, как вы хотите, чтобы он выглядел. 

Только после того, как вы всё тщательно прописали, приходит время для стилизации сайта. 

Каждый из нас является дизайнером, просто с разными навыками 

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

Вот всего лишь несколько преимуществ записывания вашего сайта в виде текста: 

  • это быстро; 
  • это просто; 
  • это  целенаправленно; 
  • каждый может это делать. 

Записанный документ — прекрасный источник для создания крутого сайта. Вы можете просто копировать слова, ставить к ним HTML-тэги, и у вас уже получится базовый сайт. Конечно, вы не обойдётесь без CSS и JavaScript, но прежде, чем вы добавите этот уровень сложности, вы уже можете работать над сайтом и вовлечь каждого в вашей команде в этот процесс. 

Пример: прописанный процесс оформления клиентов userbrain.net

Этот PDF-файл показывает альтернативный процесс оформления клиентов userbrain.net. Я просто начал описывать процесс и в итоге получился этот документ, иллюстрирующий новый способ регистрации клиентов на сайте.

Моим следующим шагом будет обсуждение документа с членами моей команды. 


Присылайте свои интерфейсные кейсы на interface@siliconrus.com
Теги
Статьи по теме
Дизайнер Facebook об обновлении Origami — инструмента для прототипирования приложений
0

Да в общем-то правильно.
Когда сам порисуешь, то и задание проще оформить, и по структуре всё более-менее понятно становится. Один из первых шагов в реализации проекта.

–1

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

0

чот в ПДФе ссылка на креативный бриф.
это так и должно быть?

0

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

0

В том году писал похожую статью "Дизайн начинается со слов" - www.blog.jazov.com/uiux-design/dizajn-nachinaetsya-so-slov.html

Прямой эфир
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления