Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Разработка интернет-проектов
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
28
Эбиа

Эбиа

www.ebia.ru

15
Amarket

Amarket

amarket.io

13
likearea

likearea

smm.li

12
RockinRobin

RockinRobin

www.rockinrobin.co

10
Битрикс24

Битрикс24

www.bitrix24.ru

10
KEPLER LEADS

KEPLER LEADS

keplerleads.com

10
Cookiezz

Cookiezz

cookiezz.com.ua

10
Megagroup

Megagroup

Создаем сайты и помогаем им зарабатывать

9
Tados

Tados

tados.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

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

5 950 5 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Не так давно, путешествуя по зарубежным блогам тематики веб-дизайна и разработки сайта, наткнулись на одну замечательную статью от Iain Lobb, который довольно простым языком и понятными примерами рассказывает читателю об ошибках, которые допускают иногда начинающие дизайнеры. Данный текст является вольным переводом этой статьи с нашими дополнениями и мыслями.

b_54be0605da16f.jpg

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

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

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

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

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

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

b_54bdfc198e4fc.jpg

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

b_54bdfd32a22d9.jpg

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

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

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

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

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

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

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

b_54bdfd509c392.jpg

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

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

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

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

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

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

b_54bdfd71dee53.jpg

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

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

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

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

b_54bdfd9a69185.jpg

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

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

b_54bdfdb64aa74.jpg

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

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

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

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

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

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

b_54be0449bb6bc.jpg

+13
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
GreenRed brand studio
разработка логотипа за 99$
Панченко Андрей
Советы хороши, но иногда первоочередно стоит SEO... посему приходится прибегать к "ошибкам" дабы сайт пошел в топы ;)
Ответить
S.A.M.A.N.Y.
Разработка интернет-проектов
Максим Жданов
Андрей, тут, я с Вами не соглашусь. Если Вас не затруднит скажите, какая из исправленных ошибок, описанных в данной статье, может повредить SEO?
Ответить
53 Studio
Студия разработки и дизайна
Олег Томич
У моего партнера был сайт, которому он немного навредил SEO-оптимизацией, поэтому я поддерживаю молодого человека
Ответить
Elena Alexandrovna
Не хватает примеров.. Очень хочется посмотреть как выглядят "скевоморфические сайты «Web 2.0»"
Ответить
S.A.M.A.N.Y.
Разработка интернет-проектов
Максим Жданов
Безусловно, как только нам попадется подобный пример, в ближайшее время, мы его добавим в статью.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать