5 главных ошибок новичков в веб-дизайне

Известный веб-дизайнер и блогер Валентина Хрусталёва утверждает, что все ошибки начинающих веб-дизайнеров одинаковы. С помощью Валентины мы выделили 5 самых распространённых ошибок и уместили их в одной статье, после прочтения которой у тебя не будет шансов их повторить. 

Ошибка 1: Разные отступы

Распространённая ошибка новичков – это плохие отступы. К сожалению, некоторые новички считают, что чем меньше незаполненного пространства они оставляют, тем лучше. Например, как ЗДЕСЬ

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

· Не располагайте элементы слишком близко друг к другу. Дайте им пространство!

· Делайте все отступы одинаковыми. Если вы приняли решение, что все отступы у вас будут 10px, ну так и следуйте ему. Не стоит делать один отступ 10px, а другой 30px.

· Не удаляйте элементы дизайна слишком далеко друг от друга, не делайте дыры. Это повлияет на восприятие дизайна как единого целого.

· Высота строк должна быть больше размера используемого шрифта.

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

Ошибка 2: Слишком много шрифтов

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

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

Оформление текста не должно преобладать над его читаемостью. Чем меньше стилей типографики, тем лучше видны акценты в тексте. Поэтому:

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

· выделяйте заголовки и подзаголовки, а также делайте контрастными ключевые фразы. Например, как ЗДЕСЬ

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

Ошибка 3: Некачественная обтравка изображений

Для начала вспомним, что такое обтравка. Обтравка — это отделение предмета от фона, после чего этот фон может быть заменен на белый либо цветной с возможным восстановлением тени или блика от объекта (по желанию заказчика).

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

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

О том, как быстро и эффективно отделить объект от фона, снято огромное количество видосиков. Дерзайте!

Ошибка 4: Использование нескольких форматов изображений в одном макете

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

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

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

Начнем, пожалуй, с GIF, JPEG, PNG, ICO, BMP, которые относятся к растровой графике. Это и иконки, и привычные всем фотографии, и рисунки, состоящие из точек (пикселей, растров). Одним из главных преимуществ растровой графики является то, что с ее помощью можно создать любой по сложности рисунок. Кроме того, работать с растровой графикой проще, а с помощью, например, GIF можно создавать анимацию. Однако главный недостаток такого формата – это то, что при увеличении размера изображения теряется его четкость, и отдельные пиксели становятся заметными. Плюс весит такое изображение достаточно много.

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

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

Ошибка 5: Креатив через край/ Отсутствие единого стиля

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

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