Дизайн
 

Ошибки начинающего дизайнера

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

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

Шрифты

Шрифты и работа с ними сильно портят/улучшают восприятие сайта. Часто сталкиваешься с сайтам хорошо оформленных, но вот шрифты сразу выдают новичка и впечатление портится. Не нужно недооценивать этот аспект. Шрифты в шапке, заголовках, основном тексте, все они должны быть удобочитаемыми, не перегружены эффектами и контрастируемые с фоном. Болезнь всех новичков — это эффекты. Как только человек открывает фотошоп он начинает повсеместно «украшать» все доступные элементы на сайте, причем эти украшательства настолько неумелы и уродливы, что навсегда отбивает желание ходить на такой сайт. Первое, про что нужно забыть дизайнеру, работающим в Adobe Photoshop, так это про вкладку «Styles/Стили»(рисунок 1) и стандартные стили представленные в ней.

Рисунок 1. «Styles» и примеры стандартных эффектов.

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

Никогда не применяйте стандартные стили фотошопа!

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

Не используйте эффект свечения

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

Рисунок 2. Дешёвый эффект свечения.

Тени от букв

Тени на светлых фонах не должны быть «грязными» (рисунок 3). Если вы делайте тень, то сделайте ее чуть видной, она не должна привлекать внимание. На темных фонах тень должна быть темной, но не черной(!), она будет иметь оттенок фона. Например, если у вас красный фон, то тень будет бардовой.

Рисунок 3. Плохая и хорошая тень.

Плохой контраст текста

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

Рисунок 4. Не контрастные надписи.

Меню

Не экспериментируйте с меню! Оно должно быть привычным для пользователя. Изобретать велосипед не стоит. Все, касаемо шрифтов, касается и меню сайта. Пример (*основанный на реальном дизайне сайта) того, как не стоит делать, можете увидеть на рисунке 5. Угловые градиенты и блики, которые во-первых, сверстать невозможно — их придется вставлять цельной картинкой, и во-вторых, выглядят грязно и не несут эстетического значения.

Рисунок 5. Пример неудачного меню.

Коллажи

Речь пойдет о коллажах в шапке сайта и иллюстрациях, сопровождающих сайт.

Никаких плавно переходящих фотографий!

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

Неуместные фоны

Клиент, заказавший у вас дизайн, продает тракторы? Почему бы не поместить трактор на фоне клипарта травы (рисунок 6, нижний коллаж)? Хорошо ведь смотрится! Ответ: «Нет, не хорошо, я даже больше скажу — просто ужасно». Это похоже на сайт конторы-однодневки. Я серьезно заявляю о том, что уважающая себя компания не позволит себе такого на сайте.

Рисунок 6. Коллажи, которых не должно быть

Заказчик: «Ну а мы печатаем на посуде! (рисунок 7, самый нижний коллаж) Давайте поместим всю нашу продукцию на главной странице в шапку высотой 150 px». Дизайнер: «Давайте! А на фон вставим молнии, чтобы показать всю мощь вашей компании!» Отвечаю: «Не надо!»

Рисунок 7. Коллажи, которых не должно быть (часть 2). "Техдизайнеры курят в сторонке"

Если целевая аудитория сайта подростки до 15 лет, то чем больше цветов, тем лучше! Им это очень нравится!*

*основано на наблюдениях в социальных сетях.

В случае, если компания ориентируется на взрослую аудиторию, то каши из всех картинок, которые находятся в папке Clipart делать не нужно (рисунок7). Такой полет мысли и креатив не воспримется. Учитесь выделять важное!

Некачественные коллажи

Хорошо. У вас вдруг появилась здравая идея. Вы садитесь за фотошоп и начинаете ее воплощать на холсте. И что же получается. Получается то, что вы можете видеть на рисунке 8. Настоящая идиллия! Но что-то здесь не так... Доча только что прибежала из спорт зала с полотенцем и села, мило улыбаясь фотографу. Мама мертвым взглядом посматривает в сторону фотографа, в отличие от папы с сыном, которым абсолютно плевать на фотосессию — они весело играются с мячом, а в папу при этом злобно светит красный прожектор. А что с диваном? Из какого природного вещества он состоит? Наверно он не с нашей планеты. Смею предположить — это планета 3dMax, там есть завод Scanline.

Рисунок 8. Коллажи, которых не должно быть (часть 3). «Техдизайнеры, выпив цианистого калия, повесились»

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

1. Удалите его, изучите теоретический материал по основам света и тени, цветокоррекции и композиции и лишь после этого снова беритесь за работу. Сначала все равно будет не получатся. Пробуйте снова и снова. Результат будет. Но если все же результата нет, то используйте второй вариант:

2. Купите фотографию на фотостоке или найдите в интернете (учитывайте правообладателей таких фотографий).

Наполнение текстом (рыба)

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

Рисунок 9. Не рыба, не мясо

Для российских заказчиков — тексты на русском, для американских — на английском.

Выводы

В статье я много описал, как нельзя делать, но тогда как можно? Где грань красиво-некрасиво?

Я отвечу сравнением. Давно-давно в нашей стране многие ездили на «копейках» и «шестерках»(многие и сейчас ездят) и горя-печали не знали. Едет машина и ладно. В то же время американский автопром выпускал такие автомобили как Ford Mustang, а немецкий — Porsche 911. Ездит? Ездит. Красиво? Еще как! Но поверьте, всегда будут люди, которым все равно больше нравится отечественная копейка.

К чему это я? К тому, что всем дизайн не может нравится, но вам нужно как можно выше поднять планку качества своей работы, чтобы как можно больше людей сказало: «Хорошо. Отлично. Превосходно».

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

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

Если есть вопросы, задавайте. Возможно на некоторые отвечу отдельной статьей.

 
 

Советуем почитать: