Разбор работ по веб-дизайну 3 (за опрос от 03.09.2015)

Не получается рисовать профессиональный сайты? Тогда вам сюда. 

Приветствую вас, уважаемы коллеги!

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

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

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

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

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

Так, что еще у нас тут? По графике то же самое. Вот здесь вот хорошая картинка, сочетается классно. В футере, вот эту ветку с лепестками, необходимо либо понизить по высоте, то есть, опустить вниз, либо сделать поменьше, чтоб она не залазила на текст потому, что это довольно-таки, трудно будет сверстать. Лучше так не делать, короче говоря, лучше разместить ветку, непосредственно в подвале, в футере. Будет гораздо лучше.

Так, ну и по юзабилити, здесь я уже заменил, как изначально было у вас, сейчас сравним. У вас был вот такой вот телефон, то есть, он немного сливается, немного трудно прочитать, а здесь я рекомендую, вообще, убрать буковку «Т» по цифрам и то, что они расположены в правом верхнем углу и так понятно, что это телефон. Потому, что люди привыкли его там видеть, поэтому буковку «Т» необходимо убрать. Дополнительные цифры и символы, показывающие регион, по факту не нужны, потому что у вас снизу идет город, соответственно, и так будет понятно, данная надпись будет отсекать всех левых людей. Соответственно, если кто-то из Санкт-Петербурга зайдет, увидит, что это для Москвы, для них, в принципе, уже не важно. Для тех, кто будет с других регионов, увидят, что это Москва, звонить уже все равно не будут. По факту, это не нужная информация ни для кого. Поэтому можно сделать следующим образом: убрать буковку телефон, и увеличить размер, ненужный код сделать менее видимым, тогда, соответственно, все будут видеть телефон и звонить. Кому нужно, кто не знает код, хотя сомневаюсь, что такие люди будут из Москвы, смогут его дополнительно набрать. Вот, собственно, все у нас рекомендации, переходим ко второму сайту.

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

Что касается типографики, я бы рекомендовал вам выделить жирным: часы работы, название улицы и сам телефон. Если честно, по факту, с точки зрения юзабилити, в типографике: время работы, наш адрес, телефон — можно спокойно вообще убрать, и внести в какой-то один столбец. Это и место сэкономит и ненужная информация она, в принципе, совсем тут не нужна. Люди итак привыкли видеть здесь такую информацию.

Так, меню», в принципе, можно убрать жирность, точно так же будет легко читаться меню, легко узнаваться, оно выделено у вас более темным оттенком. В принципе, люди и так будут его замечать, поэтому, в принципе, жирность здесь не нужна, от нее можно избавиться.

Так, дальше, по типографике. Вот здесь вот в контенте, размер шрифта у вас должен быть всегда одинаковый. Если здесь вы сделали, допустим, 14 пикселей, а здесь у вас 16-17, такого быть не должно. То есть, везде контент для чтения, размер шрифта, должен быть одинаковым. Определитесь и сделайте одни правила, для всего текста.

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

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

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

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

Первый момент, я начну ни как обычно с колористики и типографики, я начну с сетки ширины макета. Видите, у нас 100% ширины масштаб стоит, да и некоторые элементы даже и не видно. Ширина данного макета, у нас получается, порядка 1300 пикселей, это означает следующее: если мы возьмем, допустим, небольшие мониторы, сейчас примерно я выставлю, немножечко, мы обрубим то, что не будут видеть здесь, многие посетители сайта. По факту, когда вы сделали ширину вот такую, большую, так стандартную, то есть, не 940 пикселей, не 960, а чтобы все могли видеть, те у кого маленькие мониторы, я не знаю планшеты, мониторы на ноутбуках 15-16 дюймов, то эти люди не увидят часть какую-то сайта. То есть, у них вот будет вот так обрубаться, для них по факту, то же самое, что черный экран. Для вас, когда вы рисовали данный дизайн, вы все видите, вам пофиг на тех людей, которые будут просматривать, вы это не учитывали, либо не знали, не важно. Тем не менее, факт остается фактом. Часть аудитории, просто не увидит часть вашего сайта. Соответственно, не смогут, допустим, что-то заказать и компания потеряет деньги, поэтому первым моментом здесь необходимо изменить ширину макета. Возьмите стандартную сетку, которая там на 940 пикселей и соответственно, переставьте все элементы, что бы они влазили в эту ширину, что на всех мониторах, все было видно.

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

По типографике, ну как обычно в прошлых шрифтах. На вас нашло вдохновение. Вы начали использовать такие уникальные шрифты нестандартные, которые очень тяжело читаются, особенно тяжело воспринимаются людьми пожилого возраста. Поэтому, первая рекомендация, по типографике — избавиться от них, воспользоваться стандартными шрифтами, которые будут легко читаться всеми людьми, не важно какое у них зрение, хорошее или плохое. Это прикольно, красиво, уникально, но с точки зрения конверсии, вы поймете, если протестируете, что заказов будет меньше. Что еще по типографике? Здесь вот в заголовках, в названии, использовать обводку, от нее лучше избавиться, будет гораздо лучше потому, что сейчас смотрится несколько по-детски, по-дилетантски. Так, по типографике, в принципе, все. По сетке, я уже сказал. Здесь опять-таки по сетке, смотрите, явный такой косяк, здесь мы видим, что линия начинается, грубо говоря, на 115 пикселей, а здесь она с меню, начинается, чуть ли не с половины макета, на 519 пикселей, хотя по идее, точно также с этой линии должно начинаться. Поэтому по сетке, опять рекомендации, добавьте сетку, и выровняйте не на глаз, а, непосредственно, по колоночкам.

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

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

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

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

Следующая у нас работа, это у нас, такой сайт, скажем, портфолио человека, который занимается доработкой и созданием сайтов. Что здесь по колористике? Первым делом я бы рекомендовал сменить вот этот оттенок зеленого, на какой-то более и менее приближенный по цветовой гамме к вот этому желтому. То есть, если мы, допустим, возьмем, (так, это у меня не фотошоп. Давайте сейчас я сделаю снимок, чтоб показать то, что имею в виду, открою это в фотошопе) по поводу того, как подобрать, скажем, сочетаемый оттенок цвета. Давайте возьмем, допустим, пипетку, откроем у нас палитру и смотрим в какой части, у нас располагается, данный оттенок. Если же мы возьмем зеленый цвет, опять-таки, с нашего сайта, (так сейчас, я снова сделаю скриншот, чтоб определить к какой области у нас располагается в палитре цветов, данный оттенок). Пока все оставим и посмотрим, то есть, здесь мы видим, что он  располагается, в правом нижем углу, а желтый, соответственно, видели, что в правом верхнем. То есть, соответственно, если мы хотим сделать одинаковые оттенки, то зеленый необходимо выбирать точно также вот из этого угла, с правого верхнего, тогда цвета будут гораздо более гармоничные. Они будут, скажем, в одной цветовой плоскости лежать, скажем так, ну, по крайней мере, не такой сильно затемненный оттенок. Его, я бы рекомендовал вам сменить, даже, если вы замените просто на белый, либо коричневый, смотреться будет гораздо лучше.

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

По типографике, опять-таки не нужно использовать такие вот шрифты, с различными завитушками и так далее, а в тексте для чтения не нужно использовать шрифты с засечками. Они у вас практически везде используются. Вот здесь гораздо проще и легче читается, но здесь шрифт идет жирный, соответственно, в тексте для чтения жирность не нужно использовать. Это будет усложнять вот такие маленькие моменты, учтите. И следующий момент по типографике — очень маленький отступ у них, это, во- первых, трудно читается, во-вторых, не разделяете на абзацы весь текст, то есть 2-3-5 строчек, делайте абзац, иначе человек не будет читать такую простыню текста, он просто когда видит, что ему предлагают так много текста, то не хочется читать.

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

Так, по сетке, в принципе, из того, что есть более и менее все выровнено. Единственное, добавьте, чуть больше свободного пространства, между самими блоками — можно побольше увеличить по высоте, между ними по ширине. Сейчас, потому что слишком все как-то поналеплено, все объекты лепятся друг к другу, особенно, пространства требуется вот здесь в меню, по высоте, оно у вас как-то выровнено не совсем ровно, что ли? А, ну лучше сделать чуть побольше.

Так, что еще у нас? Теперь переходим, к графике. Ну, логотип я, рекомендую убрать потому, что нифига не понятно, что он означает, а люди все равно его не запомнят. Люди вообще не запоминают сложные логотипы. Здесь у вас различные тени, свечения, блики, обводки и так далее, никогда их не запомнят. А если вы не верите мне, то попробуйте вспомнить какой-то логотип дизайнерской студии, не важно, или какой-то копании, которой вы частенько пользуетесь. В основном, если вы посмотрите, на какие-то крупные бренды, у них используется какой-то один цвет, и какая-то очень простая, векторная фигура. Если мы, допустим, берем МТС — это красное яйцо на белом фоне, единственный, пожалуй, бренд, который запоминается. Поэтому логотипы лучше такие сложные не использовать. Так, да и вообще смысл логотипа, да если и использовать, то какой-то крупный бренд типа как Кока-Кола, глядя на который человек сразу проникается доверием, к вашей компании, а так как ваши логотипы никто не узнает, то его цель, смысл, в принципе, теряется, не несет пользы не вам, не посетителям, данного сайта. А так, как он не несет пользы, соответственно, от него лучше избавиться, не расходовать на него ценное место, которое располагается в первом экране.

То, что касается различных элементов интерфейса. Почту я здесь, рекомендую убрать, она,  в принципе, тут не к чему. Если кому-то нужно, они смогут прийти в контакты, или найти ее в подвале. Так, это первый момент. Следующее, по поводу, это не совсем к дизайну относится, но все-таки, слишком быстро вот это прокручивается, я не знаю, кто успеет все это прочитать, максимум успеваешь прочитать только заголовок, а вчитаться в текст не успеваешь. Но, естественно, это, если честно раздражает само мелькание, которое как джил баннер, который через секунду обновляется, тут тоже самое. Сделайте хотя бы в 3-5 раз, чтоб дольше переключалось. У вас есть кнопки сбоку и снизу, человек, если нужно сам их переключит. Так, что еще по интерфейсу? Тут хотел сказать, но, в принципе, пожалуй, все. Отсюда то же самое — необходимо логотипчик убрать. А по типографике забыл, вот здесь вот, такая необходимая, белым то, что выделено копирайт партнеры, лучше точно также сделать в светло-сером, чтоб ничего не выделялось, кому они нужны и если кто захочет, он точно также скопирует ваш сайт, а вашим партнерам, в принципе, цель их продать ваши услуги. Соответственно, те, кто является вашим партнером, никого из вашей целевой аудитории не заинтересует. Поэтому не стоит на этом акцентировать внимание.

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

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

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

По сетке, по свободному пространству. Ну, в принципе, для интернет-магазина вполне просторно и все понятно. По дизайну интерфейса: цену вот эту, я бы рекомендовал, немного по-другому, сделать, и вообще цену вы сделали, как кнопку купить, у вас кнопка зеленая купить и цена тоже похожа на кнопку, куда нажимать, чтоб сделать заказ, не совсем понятно. И вот прозрачная картинка, я, скажем, сделал свой вариант, чтоб показать как будет проще и лучше. Сейчас я его включу, в истории найду. Вот допустим, как был у вас, и как предлагаю я вам сделать. То есть, цену, очень четко видно, кнопочка купить зеленная, и в корзину. Почему именно так? Потому, что люди очень часто смотрят на цену. Она должна быть, непосредственно в тексте, информация, выглядеть, как кнопка. Кнопка купить, соответственно, должна выглядеть как кнопка, но она должна быть больше чем корзинка. В корзинку, переходят в самый последний момент, и часто с начала несколько товаров набирают. Поэтому, она должна быть поменьше. В принципе, здесь можно пойти несколько другим путем, сделать не оранжевым, а допустим, светло-зеленым, чтоб не привлекать картинки слишком, много внимания, ну, поэкспериментировать. Тем не менее, на мой взгляд, данный способ упрощает восприятие информации потому, что сейчас вот перебор, вот с этими блоками. Они вот слишком сильно лупят по глазам. Так же информация воспринимается гораздо проще, легче. На мой взгляд, смотрите сами, как для вас будет проще и легче. Так, и по поводу иконок. Здесь у вас иконка в контенте стоит слева, иконка справа. Я рекомендую, сделать все по одним правилам — иконку слева, текст справа. И можно, в принципе, сделать текст пожирнее. Это довольно-таки важная выгода для интернет-магазина. Ну, по графике все хорошо. Фотографии по юзабилити вполне удобно. Вот такие вот рекомендации по данному дизайну.

В принципе, все. Работу мы по данному видео закончили. Разбор на этом я заканчиваю. Спасибо большое за внимание и переходите к следующему видео!

Пройдите курс "Профессия веб-дизайнер" за 10 дней бесплатно:



Понравилась статья?
Сделайте доброе дело — поделись ей со своими друзьями и коллегами, кликнув по всем кнопкам соц.сетей:

Нравится
comments powered by HyperComments