Разработка сайта по вашему дизайну. Доработка, поддержка, html-верстка сайтов.

18 ошибок. Начинающему веб-дизайнеру

/ Сергей Нуйкин / Веб-дизайн

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

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

Что сподвигло на написание этой статьи? Дело в том, что часто читатели присылают письма с вопросами, и просьбой посмотреть тот или иной макет, который они разработали подсказать какие-то мелочи, которые обычным делом допускаются новичками.

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

начинающему веб-дизайнеру

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

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

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

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

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

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

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

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

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

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

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

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

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

Создавайте элементы дизайна (иконки, кнопки, тизеры и т.д.) сами. Разрабатывая такие элементы, вы набиваете руку и придаете большую уникальность дизайну. Конечно, бывают случаи, когда нет смысла изобретать велосипед, но в большинстве своем учитесь рисовать элементы дизайна сами.

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

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

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

Знание стилей слоя, которые легко создаются средствами css. Уделите немного времени изучению css3 и вы поймете какие стили слоя с легкостью можно сделать через css, а какие нет. Используйте эти знания на благо своих макетов.

Если у кого есть дополнения по поводу статьи, дополняйте в комментариях.

Понравилась статья?
Подпишитесь на обновления сайта:


Информация о политике конфиденциальности
Поделитесь статьей с друзьями:

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

Комментарии к статье:
    • Webliberty

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

      Но я учусь, спасибо Сергей, что даешь такие полезные советы! У меня хранятся бэкапы блога с первых дней, недавно их открывал — посмеялся — всего разного налеплено, всяких финтифлюшек ненужных :) То ли дело, когда ничего лишнего, черты дизайна лаконичные и ненавязчивые, что называется без рюшечек)

    • Сергей Нуйкин

      Да согласен с тобой полностью Денис! Но очень часто не получается соблюсти стилистику, рука так и просится что-то не в тему сделать просто потому что хочется :) Главное движение, делать что-то, а не стоять на месте. А ошибок не совершает только тот кто ничего не делает. ;-)

    • Lexium

      Что для начинающего ошибка, то для матёрого изюминка. Главное, не записать себя в мастера профессии раньше времени и руководствоваться здравым смыслом (если получится раздобыить).

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

    • Lexium

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

    • Webliberty

      Отлично сказано, главное делать и было бы желание научиться, а опыт придет со временем)

    • Сергей Нуйкин

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

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

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

    • Сергей Нуйкин

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

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

Добавить комментарий:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Нажимая на кнопку «Отправить комментарий», вы соглашаетесь с Политикой конфеденциальности.