Александр Золотухин

Шапкой сайта называют вернхюю строчку с логотипом и меню. Чтобы шапкой пользовались чаще, лучше сделать её маленькой и удобной.

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

С таким сайтом ко мне пришла компания, которая продаёт Камазы. Выглядит устрашающе:

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

Здравствуйте! Вот наша страница о компании, вот условия оплаты и гарантии. Закажите обратный звонок! Мы находимся по адресу… Держите наш номер телефона, звонить можно с понедельника по пятницу с 8 до 17. В вашей корзине сейчас 0 товаров. Кстати, мы здесь продаём Камазы.

Суть бизнеса, продажа Камазов, осталась на втором плане — нюансы вышли на первый. Клиент либо не станет читать, либо запутается. Знакомство провалено.

Чтобы исправить ситуацию, поставим заголовок на первый план, а нюансы опустим:

Знакомиться с компанией стало проще:

Добрый день! Мы — компания «Жумади», продаём Камазы. На этой странице можно рассчитать стоимость, почитать отзывы и узнать о компании. Для заказа звонить сюда…

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

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

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

Простой аглоритм для любых случаев:

Спроектируйте сайт → сделайте небольшую удобную шапку → добавьте в шапку новый пункт, если клиенты регулярно об этом спрашивают

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

Сильнее всего отпугивает «мусор» на фоне — объекты на заднем плане, которые перетягивают внимание на себя. Этот мусор уводит взгляд, отвлекает читателя и не дает рассмотреть товар.

Чтобы выделить объект на фотографии, можно приглушить фон: размазать его или сделать черно-белым

БЫЛО

СТАЛО

Этот прием особенно красив и эффективен, когда несколько фотографий стоят рядом. Например, в каталоге:

ПЛОХО

ЛУЧШЕ

Рядовой обыватель мыслит просто: дизайнер – значит художник. В этой статье попытаюсь развеять этот миф.

Начнем с этимологии. Слово дизайн уходит корнями не только в английский, французский, но есть отголоски и в латинице. «Рисунок» – это лишь один из переводов. Другие значения в качестве глаголов: «конструировать», «проектировать», «осмыслять».

Важна суть, а не оболочка

Ошибочный перевод – ошибочное понимание сути. Это выливается ровно в две проблемы. 1. Заказчик начинает ожидать не сайт, а произведение искусства. 2. Сами веб-дизайнеры начинают заниматься не тем.

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

Главное – структура и текст

Думается, лучше стоит сосредоточиться на смыслах. Основную часть задачи решают не финтифлюшки и вензеля. Люди пришли на сайт за информацией, за товаром, за решением своей проблемы. Не имитируйте решение проблемы цветастым фоном и расписными картинками. Решите проблему.

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

Думайте про пользователей

Курсы и вебинары только покрывают понятие «веб-дизайн» толстым слоем вазелина. Бесполезно учить фотошоп, скетч и любой другой софт. Нельзя научиться думать про пользователей, изучая ретушь и кисти. Вспомните, для кого вы делаете сайт и с какой целью? (Подсказка: для конечного пользователя, а не для держателя вашей зарплаты)

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

Решайте задачу, а не рисуйте картинки

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

История о том, как нейробиология помогает мне в веб-дизайне.

Люди – животные, приматы. Человеку присущи инстинкты животных. Мы не думаем о том, как дышать, глотать и как перебирать ноги при ходьбе. Но есть и более сложные инстинкты, которые я применяю в своей работе веб-дизайнером.

Сделаю оговорку, что я не биолог, а эта статья – мои умозаключения.

Эволюция издевается над нами уже 4 миллиона лет. Животные правила господствуют в обществе даже в нашем 2019 году. Почему бы не использовать эти правила в дизайне? Скажу вам точно, каждый дизайнер уже использует это, но неосознанно. Добавив понимания, качество работ выйдет на новый уровень.

Замечали, как работает память? Последняя серия Игры Престолов в мельчайших подробностях, тексты песен второсортных реперов, мемы про котиков – этой чепухой заполнен наш мозг. Все это вместо наших важных дел и планов. Мозг плевать хотел на ваши желания. Не вы управляете мозгом, а он вами. Этот гад запоминает только то, что нужно ему. Только то, что ему показалось важным. А что для мозга важно?

Ответ прост: выживание. С дизайном это связано напрямую.

Мы запоминаем все новое. То, чего никогда вы не видели раньше, тут же займет место в вашей памяти. Биология тут не сложная:

1. Это опасно для жизни – нужно запомнить
2. Это может помочь выжить – нужно запомнить

Хотите сделать дизайн, который будет производить впечатление? Делайте такой дизайн, которого раньше не было.

Нет стоит продумывать все заново. Не забывайте про UX. Пользовательский опыт превыше всего. Маленькое изменение – большой плюс к качеству дизайна.

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

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

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

Другой вопрос, что каждый дизайнер может считать свою работу уникальной, даже если она не такая. Как избавиться от своего субъективного чувства вкуса, поговорим в следующей статье.

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

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

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

1. Унификация интерфейсов

Можешь зайти в свой смартфон и проверить. Дизайн Instagram, Вконтакте, Telegram, Facebook и прочих выглядят одинаково. То же самое происходит и с веб-сайтами. Тренд продиктован тем, что не нужно изобретать велосипед. Сейчас это называется модным словечком UI/UX, но это было всегда.

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

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

2. Развитие градиентов

Тренды из-за той стороны горы доходят к нам с запозданием в несколько лет. В переливании цветов нет ничего сверхъестественного. Тем не менее, градиенты только начинают входить в наш дизайн.

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

3. Дизайн + код

Когда я делал свои первые сайты, знание html и css для веб-дизайнера было нормой. Сейчас обе дисциплины усложнились и знать все уже не получается. Несмотря на это, знание кода для дизайнера является огромным плюсом. Во-первых, если ты фрилансишь, для заказчика не имеет значение, что дизайн и код – это разные вещи. (Поверь, встречаются и такие). Во-вторых, знание основ верстки сильно прокачивает твои дизайнерские навыки.

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

4. Ориентированность на контент

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

Оставь больше свободного пространства. Дай человеку нормально почитать. Подбери хороший шрифт, сделай его покрупнее и оставь так. Если тебе важно показать клиенту продукт, хорошие фотографии – это все, что необходимо. Посмотри на сайт Apple, которые поступают так из года в год. Трижды подумай перед тем, как добавить какой-нибудь элемент в свой дизайн. Наоборот, лучше сделать его чистым и что-нибудь убрать.

5. Увеличение размера шрифта

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

Крупным шрифтом необходимо выделять только самые важные смыслы. Если выделить слишком много, весь смысл теряется. Попробуй использовать один заголовок на один экран сайта. Уверен, это работает восхитительно.

За последний год количество курсов по веб-дизайну увеличилось до бесконечности. Сколько гуру и полугурков ты наблюдаешь каждый день? Только ленивый не проводит свои тренинги и вебинары.

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

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

1. Открой холодильник. Достань банку с огурцами и сделай для нее этикетку. 
2. Открой сайт, которым ты пользуешься каждый день и попробуй поменять дизайн. Поэкспериментируй и попробуй что-нибудь изменить в интерфейсе. Хотя бы поменяй цвет кнопки! 
3. Вот тебе еще вариант. Сделай сайт для парикмахерской, которая находится в твоем же доме. 

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

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

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

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

Как и было обещано, в этой статье не было дано никаких ответов о том, как стать востребованным веб-дизайнером в 2019 году. Напротив, я хочу, чтобы мой читатель задумался и нашел свой ответ на этот вопрос. Рано или поздно, ты придешь к тому, что ответ только в твоей собственной голове. Начни искать его как можно раньше!