7 ошибок начинающих веб-дизайнеров

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

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

Однако, сегодня мы акцентируем свое внимание именно на веб-дизайне.

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

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

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

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

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

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

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

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

Стиль, в котором реализована страница, несомненно очень важен, ведь он визуально формирует цель страницы, ее образ. Однако, не менее важным является и контент – то, что будет размещено на данной странице.

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

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

Всегда нужно тщательно продумывать информативно-функциональную составляющую сайта. Например, не стоит разбивать сайт на множество разделов или подразделов (если на самом деле их не так уж и много), если есть возможность сделать единую страницу с инфо-блоками (по типу landing page) с удобным скроллом и навигацией.

В качестве примера можно рассмотреть данный сайт: http://www.marivanna.ru/spb/

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

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

Ключ к успеху – придерживаться принципов типографики, методик изображения, макетов, а не применять везде и всюду иконографику, играть CSS и наслаивать эффекты из Photoshop.

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

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

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

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

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

Система сеток появилась в полиграфическом дизайне, но пришла в веб через такие сервисы, как «960 Grid System», а позже из таких инструментов, как «Skeleton». Эти программы способны динамически изменять размер и количество столбцов в зависимости от разрешения экрана. Все элементы должны четко соответствовать сетке, либо не соответствовать и подлежать переработке. К примеру, какие-то линии могут выглядеть практически прямыми, но не совсем, это плохо, в итоге это приведет к неаккуратному визуальному виду. Также обращайте внимание на текст или элементы, которые являются, скажем так, бесхозными, располагающимися на своих местах или занимающими не очень удобное и логичное для юзабилити место. Проектировать обычно лучше в браузере, а не в Photoshop, поскольку вы получаете картинку, которая максимально приближена к реальности.

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

Пример: http://www.tsb.co.uk/how-were-different/

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

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

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

Текст заголовков должен быть больше, чем текст абзаца. Убедитесь в том, что вы задаете достаточный межстрочный интервал. В редакторах он так и называется, а в CSS именуется, как «высота строки» (ориг. – line-height). Стандартные настройки располагают строки довольно близко друг к другу. Это может привести к плохой читаемости текста. Читатель попросту будет теряться по мере прочтения страницы. Попробуйте задать значение, которое на 50% больше, чем используемый размер шрифта, например, 36 пикселей для текста размером 24 пикселя.

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

Постарайтесь ограничивать себя двумя или тремя шрифтами, и избегайте использования изображения в качестве текста. Широкий выбор веб-шрифтов могут дать такие сервисы, как Google Fonts или Webfront. Следите за контрастом между цветом текста и цветом фона. Как правило, наиболее приемлемым вариантом является использование темного текста на светлом фоне. Светлый текст на темном фоне также может рассматриваться в качестве мужского или же холодного варианта, но подобное может привести к потере привлекательности продукта. Хорошим помощником для выбора подходящей цветовой гаммы может стать Adobe Kuler. В целом же, избегайте высокой контрастности между текстом и фоном, это может привести к смешиваю букв с фоном.

Пример: http://www.tsb.co.uk/how-were-different/

Наиболее распространенной ошибкой среди студентов является использование слишком маленьких изображений на странице. В таком случае они просто теряют эффект своего воздействия. Изображения на полную ширину браузера (например, как на сайте http://teamtreehouse.com) выглядят более впечатляюще и создают яркое ощущение того, что вы смотрите некий глянцевый печатный журнал.

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

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

Пример того, как некачественные изображения влияют на визуальное восприятие сайта: http://www.iksmarket.com.ua/

Самой распространенной проблемой является некачественное вырезание визуального элемента. Это приводит к тому, что элемент выглядит неаккуратно, имеется зазубренные края или скошенные кромки в каких-то местах. Для предотвращения подобного используйте инструмент «Перо» в Photoshop или же «Полигональное лассо» и «Лупу» с сильным увеличением. Еще одной частой проблемой являются артефакты, которые появляются на изображениях в формате JPEG. Использование SVG или формата PNG с высоким разрешением и качеством решит эту проблемы, и ваши иконки и логотипы будут смотреться аккуратно и привлекательно.

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

Профессиональный дизайнер никогда сознательно не оставит свою работу незаконченной или же с ошибками на уже запущенном ресурсе. Крупные студии и агентства обычно имеют свой собственный отдел контроля качества (QA – quality assurance) – команду людей, которые занимаются поиском ошибок. Если же вы новичок, то друг вам в помощь, пусть он посмотрит на ваш дизайн и сделает замечания. Удивительно, что может заметить вторая пара глаз!

Проверьте сайт на несуществующие страницы, «сломанные» изображения, глюки в макетах и на стили, которые по какой-то причине не отображаются. Орфографию также нельзя оставлять без проверки.

Внимание к деталям является ключевым фактором.

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

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

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