Закрыть
E-mail:
Пароль:
Забыли пароль?
В каталоге проекта: 11 868 веб-студий, 935 CMS, 233 298 сайтов.
РегистрацияCMS MagazineВход
CMS Magazine CMS Magazine

17 важнейших принципов современного дизайна

Арт-директор DEFA Назир Хасавов рассказал AdMe.ru принципы создания идеальной дизайн-концепции.

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

Коллекционируйте интересные и оригинальные мудборды, которые могут помочь при решении различных задач. За основу могут быть взяты ваши наработки или удачные примеры коллег.
Если у вас пока нет своих коллекций образов, на помощь придут два замечательных ресурса: imgspark.com и pinterest.com

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

А чтобы вас не смущал белый лист, начните рисовать окно браузера, это может стать хорошим толчком для начала.

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

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

Если посмотреть на оформление современного сайта — это порядка 70-80% текстовой информации, а то и больше. Из этого следует, что дизайнер обязан иметь хорошую подготовку в основной дисциплине — в формировании текстовой информации, другими словами — в типографике.

Умейте обосновать выбор того или иного шрифта. Зачастую, выбор шрифтов бывает ограничен фирменным стилем, в иных случаях я бы не рекомендовал использовать более двух различных шрифтов, но в зависимости от характера проекта их количество можно варьировать. В любом случае, выбирайте базовый шрифт, с которым легко прочитать большие объемы текста, и шрифт более неформальный, который бы призывал к действию (особенно в заголовках). И не бойтесь использовать крупный шрифт.

Используйте ограниченный набор цветов и оттенков, чтобы избежать визуальной перегруженности.

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

Примеров можно приводить бесконечное множество, поэтому анализируйте каждый элемент дизайна в отдельности более тщательно.

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

Чем проще структура страницы, тем легче навигация.

Каждый раздел на сайте должен раскрывать какую-то тему. Дизайн должен помогать пользователю обращать внимание на наиболее важные блоки в содержании. В целом, не должно быть слишком много призывов на одной странице. Всё должно сводиться к ответу на вопрос: «Что я тут могу найти для себя».

Спросите у себя: этот элемент действительно такой важный?

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

Элементами, которые могут быть удалены или упрощены, например: границы изображений, тени, дополнительные изображения в шапке/в футере.

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

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

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

Избегайте того, чтобы тратить слишком много времени на одну концепцию. Принцип Парето общепризнанно является одним из величайших открытий в экономике и социологии. Также известный как «закон 20/80», который утверждает, что 20% усилий дают 80% результата, а соответственно 80% усилий лишь 20% результата. Цифры конечно же условные. В любом случае, советую стараться не тратить много времени на одну концепцию, сделайте несколько вариантов, потратив небольшое количество времени, а потом выберите тот, который имеет наиболее лучший курс и доведите его до идеальной концепции, учитывая все то, что было сказано до этого.

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

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

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

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

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

Если вас действительно заботит судьба сделанного вами дизайна и интерактивных идей, чтобы они были хорошо выполнены, время от времени навещайте своих друзей-разработчиков, объясняя им важность для вас каждого пикселя.
Как часть сообщества, все мы любим смотреть не только на конечные результаты, но и на работу в процессе. Иногда лучшая часть проекта не учитывается по нескольким причинам и теряется в архивных папках. Пока проект не завершен, вы можете делиться с сообществом фрагментами каких-то дизайнерских наработок текущего проекта в Dribble, а как только проект будет завершен, сделайте кейс, демонстрирующий процесс, включив в него элементы, не вошедшие в окончательный вариант релиза, и поделитесь им в Revision или Behance. Вы будете только помогать, внося вклад в знания сообщества, а в ответ вы получите ценнейшую обратную связь.

Автор: Назир Хасавов, DEFA (Арт-директор)

Оригинал: http://www.adme.ru/shkola-reklamista/17-principov-idealnoj-koncepcii-defa-studie-444505/

Комментарии экспертов

Надежда Решетникова

Компания: ADV/web-engineering co.
Должность: Арт-директор

Безусловно, все принципы, про которые рассказал в статье Назир, можно смело использовать в работе. Однако не стоит беспрекословно следовать им, надеясь, что именно это приведет к созданию идеальной концепции. Дизайнеру следует постепенно выработать свой индивидуальный набор принципов, который позволит комфортно работать над задачей. Кому-то, например, окажется неудобно «думать» на бумаге, кому-то не потребуется сетка, а у кого-то появятся свои персональные «секреты успеха». Так, например, мой коллега любит смотреть на свой макет в перевернутом виде. Говорит, что это помогает по-новому взглянуть на то, что получается, освежить восприятие.

Для меня лично очень важно вовремя сделать перерыв. Иначе очень легко упустить момент, когда концепция сбивается с изначально запланированного курса.

Экспериментируйте с приемами, пробуйте новое и создавайте свой список принципов, с которым будет удобно работать именно вам.

Комментарии участников рынка

Алексей Ёжиков

Консультант по интернет-маркетингу

Неожиданно видеть в процессе DEFA отсутствие проектирования. Об этом говорят фразы «это могут быть какие-то идеи для промо-блока, навигации, интерактивных элементов», «прежде всего, нужно понимать, что не все из информации должно быть вывалено на главной странице» (а что, дизайнеру не сказали, что будет на главной странице?), «в целом, не должно быть слишком много призывов на одной странице» (а что, дизайнеру не сказали, сколько призывов должно быть на странице?).

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

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

Артем Лебсак

Компания: Joomru LLC
Должность: Владелец

Подтверждаю — всё начинается с бумаги! За многие годы разработки, даже с появлением специализированного софта для создания прототипов и всяческих планшетов/электронных блокнотов, лично я продолжаю начальные концепты прежде рисовать на бумаге, детализируя возможные варианты, а лишь потом, чаще всего уже готовые решения, всё это воплощается в цифре. Причина? Так быстрее.

Коллекционирование удачных примеров — тоже неизменная прописная истина. Специально для этого у меня во всех браузерах установлено расширение для снятия скриншотов во всю высоту страницы. А вот просто найденные в сети картинки чаще отправляются в тот же Pinterest. Хотя... В момент работы (поиска решения конкретной задачи) — это не поможет, а нужно лишь для пролистывания «на досуге», создаёт настроение, так что «мудборд» очень меткий термин.

А вот с парой-тройкой вещей не согласен:

Перфекционизм (пункт 11) противоречит принципу Парето (пункт 12) — проработка деталей может затмить собой общую картину и существенно затормозить сдачу всего проекта. От упрощенного представления к проработанной графике. Особенно при командной работе. Лучше мелкими интерациями наводить лоск, чем погрязнуть в деталях до запуска.

Работать «кухней наружу» (пункт 17) для сообщества может и полезно, но для рабочего процесса чаще неприемлемо. Допустимо выложить процесс в уже причесанном виде готового кейса, а вот словить негативные комментарии троля на утвержденную концепцию, это плохо. Про публикацию «спойлеров» (контролируемый слив ради PR), конечно история отдельная.

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

Если Вы хотите дать экспертный комментарий к статьям, публикуемым на CMS Magazine, следите за анонсами материалов в нашей группе в Facebook.

Комментарии (Facebook)

Комментарии (1)

Евгений Игнашов      Создано: 19.2.2013, 8:45          

Переворачивать рисунок меня тоже учили в кружке по рисования (когда я ещё умел рисовать). И это действительно очень полезно для отстранения от смысла рисунка и анализа только "цветовых пятен", что больше привлекает внимание чисто визуально, а не по смыслу.


CMS Magazine CMS Magazine
Реклама
RSS-подписка
CMS Magazine CMS Magazine
CMS Magazine