Лого vc.ru

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

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

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

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

Поделиться

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Присылайте свои интерфейсные кейсы на interface@siliconrus.com
Статьи по теме
Дизайнер Facebook об обновлении Origami — инструмента для прототипирования приложений10 марта 2015, 15:30
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

0

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

−1

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

0

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

0

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

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Vasilina Gorovaya

У Planeta.ru с РВК будет в феврале как раз стартует шоу для технологических стартапов. Пока без "Первого канала", конечно. "Первому" надо еще доказать успешность формата - это раз. Да и объективно, многие ли предприниматели сегодня смотрят ТВ?

promo.planeta.ru/techbattle

Вице-премьер Шувалов предложил «Первому каналу» популяризировать малый бизнес с помощью аналога шоу «Голос»
0
Ali Biz

Готовятся к закону Яровой :)))

Акционеры «Мегафона» одобрили покупку контроля в Mail.Ru Group за $740 млн
0
Hoffman

Олег, я не Артём :) Видимо, слишком абсурдный (для вас) вопрос. Немного раскрою тему.

Накрутка подписчиков - чисто маркетинговая история. На "качество" продукта она вообще никак не влияет. Это такое же приукрашивание продукта (кол-во подписчиков в группе создает эффект масштабности, что ли), как и реклама по ТВ, которая обещает слишком много ("будь на вершине мира" при помощи новой зубной щетки и т.д.).

Пять важных отчётов для бизнес-аналитики проекта — опыт LPgenerator
1
Александр Стрельцов

Huh! Welcome to Web site about real anthropomorphous robot-avatar by search querry in Interntr: "The underwater anthropomorphous robot - avatar, or why the underwater robot must have legs", or by direct link: streltsovaleks.narod.ru :-)

«Телероботы займут рабочие места гораздо быстрее, чем кажется людям»: как роботы изменят рынок труда
0
Николай Бережняк

Вы ,наверное, в Bloodbath:Kavkaz не играли.

Минимализм и динамика: история разработки российского инди-платформера Standby
0
Показать еще