Blog | Mike Abasov. Brand consulting, web & identity design, advertising.

logo

Blog » design:

Как быть дизайнером, если ты — маркетолог?

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

Я — маркетолог. Говоря точнее, бренд-консультант. Моя профессия обязывает меня разбираться в том, насколько тот или иной дизайн хорош. А иначе, работать мне «в поле» и раздавать листовки. Слава Богу, вкус у меня вроде есть. И все что нужно — развить понимание того, какой дизайн отличный, а какой — отстойный. Ну и по пути, самому что-то незамысловатое научиться делать. Да, именно с такими мыслями год назад я начал активно заводить дружбу с теорией и практикой веб-дизайна.

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

1. Чтение и наблюдение

Главное, что надо делать, чтобы научиться чему-либо — читать об этом. Читать много, разное и вдумчиво. То, что вам кажется правильным и умным, надо запоминать или записывать. Только убедитесь, что источник авторитетен. Вася, рассказывающий о том, что главное на корпоративном сайте — анекдоты, — не авторитетный источник. Студия, с несколькими десятками достойных работ? Вполне может быть.

Первым авторитетом в дизайне для меня стал Артемий Лебедев (ну куда же вы? не уходите!). Прочитав «Ководство» и «Бизнес Линч», я стал чувствовать себя гораздо более подкованным в вопросах создания сайтов (и прочего). Я определил набор базовых правил, которые использовал от проекта к проекту, и это работало. В то же время, многие кидались на меня, когда я говорил, что ссылки должны быть подчеркнуты всегда. Но, как видите, сейчас мои ссылки не выделены подобным образом. Что же произошло?

Чем больше вы читаете, тем больше разных мнений сыплется на вашу бедную голову (погладьте ее, она заслужила :-). И только критическое мышление позволит вам сделать выбор: что оставить, а что пропустить мимо ушей. Со временем, когда набор правил, заимствованных у разных авторитетов станет большим, вы вдруг поймете, что уже не просто копируете чей-то стиль, а обладаете своим собственным видением и почерком.

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

Главными источниками веб-дизайнерских знаний для меня стали блоги. В особенности западные, такие как «Smashing Magazine». На днях, я даже заказал их «The Smashing Book», чтобы поднабраться еще знаний. Подборки в стиле «20 дизайнов всех времен» — также отличный источник умных практик.

Важно одно: не хватайте все подряд, так как на 100% верных путей нет. Задумывайтесь, почему что-то сделано так, а не иначе. И, только если видите в этом здравый смысл, заносите в свой «архив».

2. Подбор цветов

Главной проблемой для меня всегда было неумение комбинировать цвета. Отсутствие дизайнерского чутья всегда заводило меня в какие-то нежизнеспособные участки палитры. Решением оказался сайт «Color Lovers». Большое количество цветовых палитр на любой вкус, удобная навигация и поиск. Именно там я нашел палитру «Neopolitan», на которую вы смотрите прямо сейчас. Правильно подобранные цвета — четверть успешного дизайна.


«Neapolitan»

Для кого-то более удобными могут стать программные продукты. О некоторых пишет Ярослав Бирзул.

3. Типографика

Половина (или даже больше) дизайна — в типографике. Верно подобранные шрифты, их размеры, интерлиньяж и прочее — могут сильно улучшить ваше творение. Увы и ах, с этим у меня тоже проблемы. Полная несуразность и непропорциональность размеров текста уродовали каждую мою работу. Но недано для себя я определил «100% стандарт читабельности» как оптимальный типографический шаблон. Возможно, вы найдете что-то лучше. Главное, не замыкайтесь в рамках одной теории. Не стоит кричать, что чей-то дизайн плох только от того, что в нем «не раскрыта тема сисек». У любой проблемы, есть как минимум 2 решения. И пусть мы с вами знаем, что наше — самое правильное; другим об этом знать не обязательно, только public relations попортите ;-).

4. Практика

Нельзя научиться чему-то только наблюдая. Практикуйте. Делайте личные страницы, заготовки, «песочницы». Не обязательно даже показывать кому-то. Но если хотите, то можете, например, мне прислать. Предвзято оценю. Но не стоит посылать вашу работу на какие-то форумы оценки, где вы никого не знаете. Как я писал в первой части, тот, чье мнение вы слушаете, должен быть для вас авторитетом. 12-летние школьники с форума «все для narod.ru» — не авторитеты.

Чем больше у вас будет практики, тем лучше будете вы. Но! Есть очень большое «но»: нельзя стать лучше, повторяя одни и те же ошибки много раз. Если вы сделаете 10 дизайнов подряд не разбираясь в дизайне, то 10-й будет ничем не лучше 1-го. А вот если между каждым дизайном вы пополните свою базу знаний новым пунктом, то на 10-й раз сможете произвести что-то вполне достойное.

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

5. Выше головы не прыгнуть

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

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

26 (4113) comments. Added on 18.08.2009. About design.

Как нужно подчеркивать ссылки?

В поисках вдохновения на просторах англоязычного интернета, я наткнулся на очень интересную статью о «Десяти грехах в веб-типографике». Полностью вы сможете прочитать ее по ссылке, я лишь расскажу о грехе № 7, связанном с подчеркиванием ссылок.

Мы привыкли подчеркивать гипертекст при помощи «text-decoration: underline», но автор (и я) предлагает использовать другой стиль, а именно «border-bottom: solid 1px #цвета». То есть, мы просто берем и проводим под ссылкой нижнюю сплошную границу толщиной в 1 пиксель, того цвета, которого должна быть ссылка. Этот метод создает подчеркивание под словом, а не сквозь него.

Вот пример для большой-большой ссылки:

А вот как это будет смотреться в тексте:


Сергей обожал заниматься сурдопереводом одинокими вечерами. Этому его научила мама.
Сергей обожал заниматься сурдопереводом одинокими вечерами. Этому его научила мама.

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

Побочные эффекты

Не бывает, чтобы все хорошо. В отличие от «text-underline», наш метод влияет также на картинки и любые другие объекты, подчеркивая их направо и налево. Чтобы этого не происходило, надо заранее подумать, где будет использован тег «a» и при каких обстоятельствах. В случаях, когда мне надо сделать картинку ссылкой, я присваиваю последней специальный класс, в котором записан стиль «border-style: none».

16 (3498) comments. Added on 10.08.2009. About design.

100% стандарт читабельности

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


Большинство сайтов наполнены текстом мелкого размера, который читать без боли нельзя. Почему? Нет никакой причины вдавливать столько информации на один экран. Это просто глупая коллективная ошибка, которая берет начало с тех лет, когда экраны были очень-очень маленькими. Так вот...


Экран против журнала: 100% — это НЕ много. Фото — Вилсон Майнер.

Не говорите нам настраивать размер шрифта

Мы не хотим менять настройки браузера каждый раз при посещении сайта!

Не говорите нам, что заполненные страницы лучше смотрятся

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

Не говорите нам, что прокрутка плоха

Потому что тогда все сайты плохи. Нет ничего плохого в прокрутке. Совсем ничего. Так же как нет ничего плохого в переворачивании страниц в книгах.

Не говорите нам, что текст не важен

95% от того, что принято считать веб-дизайном — это типографика.

Не говорите нам одеть очки

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

Пять простых правил

1. Стандартный размер шрифта для длинных текстов

Тот размер, что вы видите на сайте http://informationarchitects.jp/100e2r/ не большой. Это то, что браузеры отображают по умолчанию. Это размер, который браузеры должны были отображать.

Мы не хотим кликать нажимать на кнопки «больше» или «меньше», и мы не хотим менять наши настройки. Мы хотим читать с ходу. Мы хотим, чтобы вы подстраивались под наши настройки, а не наоборот.

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

2. Активное использование пустого пространства

Дайте вашему тексту дышать. Использование пустого пространства — не прихоть дизайнера. Это не дело вкуса.

«Ширина колонки должна быть пропорциональна размеру шрифта. Слишком широкие колонки утомляют глаза и также имеют вредный психологический эффект. Излишне узкие колонки также раздражают, так как они прерывают поток чтения и заставляют читателя перескакивать со строки на строку слишком часто».
Джозеф Мюллер-Брокманн, Модульные системы в верстке.

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

Мюллер-Брокман: «Вопрос о ширине колонок не является единственным вопросом дизайна или форматирования; вопрос удобочитаемости так же важен».

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

Хороший Нильсон — Плохой Нильсон
Хороший Нильсон — Плохой Нильсон

«Король Юзабилити» недавно добавил белого пространства и максимальную ширину столбца в своих статьях (на скриншоте слева). Старая разметка тянулась до 100% (на скриншоте справа). Немного больше места между строками и можно праздновать!

Простое правило: 7-11 слов на строку; для тянущихся дизайнов, при 100% размере шрифта — 50% на ширину колонки (относительно размера окна) — отличный эталон для большинства разрешений экрана.

3. Дружественный к читателю интерлиньяж

Вот, что говорит специалист по чтению:

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

Интерлиньяж, установленный в HTML по умолчанию, слишком мал. Если вы увеличите его, то текст станет более читабельным. 140% — хороший ориентир.

4. Отчетливый контраст цвета

Это даже не нужно говорить. Но если вы до сих пор верите, что можно использовать одну из этих комбинаций:
1. светло-серый текст на еще более светло-сером фоне
2. «серебряный» текст на снежно-белом фоне
3. серый текст на желтом фоне
4. желтый текст на красном фоне.
5. зеленый текст на красном фоне, и так далее...
... то вы не веб-дизайнер, а просто «дизайнер с точкой зрения» (смысл этой метафоры не очень ясен, следует читать статью по ссылке, — прим. переводчика). Если же вы настаиваете на том, что вы веб-дизайнер, тогда вам должно быть известно, что никто никогда не узнает то, что вы хотите сказать, если не сможет это прочитать. Так что отбросьте этот нонсенс и дайте нам увидеть то, что вы печатаете. На заметку: для экранного дизайна слишком сильный контраст (чисто черный на белом) не идеальный вариант, так как текст начинает рябить. Хорошее начало: #333 на #fff.

5. Никакого текста картинками

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

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

24 (3913) comments. Added on 08.08.2009. About design.