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) – команду людей, которые занимаются поиском ошибок. Если же вы новичок, то друг вам в помощь, пусть он посмотрит на ваш дизайн и сделает замечания. Удивительно, что может заметить вторая пара глаз!
Проверьте сайт на несуществующие страницы, сломанные изображения, глюки в макетах и на стили, которые по какой-то причине не отображаются. Орфографию также нельзя оставлять без проверки.
Внимание к деталям является ключевым фактором.
Если вы так и не смогли заставить что-то работать, то уберите это, удалите! Если у вас на сайте будут очевидные ошибки, то пользователи будут видеть только их и ничего больше, они проигнорируют все остальное.
И, конечно, не делайте таких банальных и глупых ошибок, как оставление страницы без названия или же случайно забытый текст, который использовался для заполнения во время разработки.
Надеемся, что этот текст поможет вам избежать ошибок начинающих дизайнеров в повседневной работе, а самих же юниоров этой сферы научит чему-то новому и полезному.