Разбор дизайна сайтов часть (4 часть)

Посмотрели видео и захотелось также получить советы по вашим дизайнам? Тогда жмите сюда и бронируйте место 😉

Приветствую вас, дорогой коллега!

У нас осталось на очереди последние работ восьми дизайнов, которые я обещал сделать. Так, давайте приступим к разбору. Сейчас я буду разбирать уже полноценные сайты, которые мне присылали, то есть, не картинки в формате .png или .jpeg, а то есть, работающие сайты уже, но, опять-таки, буду разбирать по тем же самым критериям и только дизайн.

Так, первый сайт у нас про сертификаты ISO. Начнём мы как обычно с цветовой гаммы. Естественно, первым делом я рекомендую изменить оттенки. Цвета, в принципе, сами по себе хорошие, то есть, белый, чёрный, зелёный сочетаются, но оттенки подобранны неверно, то есть, сейчас они такие, скажем, ядовитые, лупят по глазам. Смотреть на сайт, что-либо читать просто ну, как бы, не вызывает желание, хочется нажать крестик и перейти к другому сайту. Чтобы не вызывало вот такую реакцию у посетителей вашего сайта, соответственно, необходимо цветовую гамму подобрать гармонично, которая будет приятно для глаза, и легко будет восприниматься, и не будет, скажем так, привлекать к себе внимание, то есть, это первый момент. Смените оттенки на более, скажем, такие гармоничные. Придумывать ничего не нужно, просто в интернете найдите любые сайты, неважно какой тематики, где есть вот такая цветовая гамма. Можете прям написать «дизайн сайта» в Google. Сейчас я вам покажу, как это сделать…или в Яндексе «дизайн сайта», переходите в картинки и в Яндексе, в Google есть критерии по цвету. Здесь вы можете выбрать просто зелёный, допустим, и он вам найдёт все, ну точнее не все, много сайтов, где вы сможете взять какую-то удачную цветовую гамму просто её скопировать. Просматриваете какой-то сайт, находите где гармонично что-то сочетается. Вот, допустим, неплохой. Открывайте его, сохраняете и потом в фотошопе с помощью пипетки просто берёте цвета и используйте их на своем сайте. Гарантированно ваш дизайн уже будет смотреться, восприниматься с точки зрения колористики гораздо лучше. Так, дальше, из цветовой гаммы уберите красный, потому что не нужен здесь. С помощью, допустим, того же жёлтого, который у вас есть можете привлечь внимание каким-то элементам: кнопкам и так далее, хотя, в принципе, трёх цветов зелёный, чёрный и белый вполне достаточно.

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

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

Так, ну здесь я вижу вообще всё сверстано картинками. Хорошо, дальше переходим к сетке разметки макета. Я рекомендую просто добавить сетку по drop на 960 пикселей по ширине и просто-напросто выровнять все объекты по столбцам, чтобы смотрелось гармонично. Плюс добавить свободное пространство, во многих блоках, допустим, сверху и снизу его попросту нет, сразу крепится, скажем, текст к краям. Такого быть не должно. Приблизительно точно такое же расстояние как по бокам, так сверху и снизу должно быть, чтобы любой блок с контентом неважно что там: текст, картинки, какие-то элементы интерфейса смотрелись красиво, гармонично, либо расстояние может быть, скажем, одинаковым с противоположных сторон, то есть, грубо говоря, здесь 50 пикселей и здесь 50 пикселей, сверху и снизу, грубо говоря, по 100 пикселей. Такой тоже вариант возможен, но пропорции, скажем, параллельные стороны должны быть по размерам одинаковые. Так, и следующий ещё момент: у вас ширина макета получается больше, чем стандартные мониторы. Минимальная ширина, если мы сейчас посмотрим на циферки у нас кончается графика ширина 1120 пикселей, то есть, соответственно, на какие-то маленькие мониторы ваш сайт просто-на просто не влезет, даже как вы видите, появляется здесь вот снизу прокрутка, и какие-то элементы у вас просто-напросто вылезают за эту ширину, вот, допустим, вот этот какой-то фон. Такого быть не должно. Весь контент должен у вас вмещаться на любом мониторе и показываться на дэсктопе. Соответственно, для этого просто-напросто ширину макетов 960 пикселей необходимо вместить, чтобы это сделать легко и просто, опять-таки, когда будете вставлять сетку, там уже данный параметры заложены.

Так, по графике. Необходимо поставить тематическую картинку, потому что здесь нифига не понятно о чем сайт: космос, земля, мир, интернет, что? Точно не понятно о том, что компания занимается выдачей сертификатов по всей России, то есть, необходимо подобрать какую-то тематическую картинку, чтобы было понятно куда человек попал, когда зашёл на сайт.

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

Так, что по интерфейсам. Убрать все различные подсветки, тени, градиенты ненужные. Так, вот здесь вот формочку просто-напросто можно даже обвести или какую-то фоновую заливку сделать, чтобы привлечь к себе внимание. Что ещё? Сделать кнопочки активные при наведении, чтобы был вот такой небольшой интерактив, скажем так. Здесь удалить фон, чтобы смотрелось красиво. В принципе, вот такие вот рекомендации по интерфейсу.

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

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

Следующий момент касается типографики. Такие вот стили древние, которые были популярны 10 лет назад, от них избавится, необходимо убрать. Меню в менюшке сделать гораздо меньше по размерам 14, 16, максимум 18 пикселей вполне хватит.

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

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

Так, по поводу сетки и расположения различных объектов. Данное меню я рекомендую перенести наверх и сделать непосредственно в самом верху. Можно сделать здесь: его разместить, можно чуть ниже, допустим, вот здесь. Для чего? Так, ну смотрите. С точки зрения юзабилити менюшка у нас занимает пикселей наверно 500 по высоте, а все остальное пространство, в принципе, контент, но когда 500 пикселей по высоте прошли, у нас порядка там 20% ширины они просто теряются. Тут у нас есть вся область рабочая, которую мы, в принципе, можем использовать, но так как мы их неправильно выстроили структуру, то на всём протяжении сайта, когда человек будет читать контент, у него эта область будет пустая, и она будет попросту теряться. Поэтому гораздо лучше будет, если вы меню сделаете не вертикальным, а горизонтальным и поставите где-то наверху. То есть, вы сэкономите место на том же самом пространстве по высоте и ширине и сможете разместить гораздо больше контента. Человек на той же странице сможет увидеть, грубо говоря, не 5 статей, а штук 6, 8, что гораздо лучше. Ну, и просто как бы фокусироваться гораздо проще, когда весь контент растянут по ширине, а не с какого-то там отдельного края. Так, ну и плюс добавить побольше свободного пространства между блоками, между текстом и картинками. Будет гораздо лучше.

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

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

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

Здесь у нас дизайн сайта на бесплатном сервисе WIX. Так, каких-то много критериев и здесь давать не буду, оценки. Ну, как обычно начнём мы с колористики. Как вы видите, здесь очень много цветов, прям практически целая радуга, поэтому первая рекомендация: уменьшить количество основных цветов до трёх штук.

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

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

Ну и по колористике хотел тоже по цветам добавить, что нужно вот так брать и обрезать какие-то цвета. Зачем здесь было выделять данный контакт светло-фиолетовым? Для одного цвета было бы вполне достаточно. Так делать не нужно.

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

Так, по поводу картинок ещё. Вот здесь у вас тут есть чёрные края, их необходимо обрезать, то есть, по факту, если посмотреть сколько в процентном соотношении порядка 15/20% по ширине просто-напросто картинки теряется. Человек из неё и, соответственно, никакой информации не получает. Обрезайте это, не вставляйте так картинки.

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

Так, по поводу юзабилити, конверсии и так далее. Здесь необходимо показать изначально товар, не сразу предлагать сделать заказ, не показать, как сделать заказ, потому что человек, когда приходит на ваш сайт, он изначально не знает какое еще платье хочет, а вы сразу говорите: «Ага, заказывай давай!». Ему сначала предоставить необходимо выбор, то есть, при покупке всегда есть разные, скажем, этапы принятия решения. Вы хотите сразу перепрыгнуть 9 из 10 этапов, что было сразу оплачивал? Такого не бывает. Человек сначала должен посмотреть все платья, потом выбрать там пять штук, грубо говоря, потом из пяти выбрать там два, потом посовещаться с подружками, там, выбрать одно и заказать. Вот эти все этапы необходимо на лендинге прописывать, но это все должно быть последовательно, а не так, что здесь видно только, что вы хотите, чтобы вам быстрее заплатили, человек же хочет совершенно иного, поэтому предоставьте здесь максимум картинок, максимум разных платьев, конверсия сайта 100 % увеличится.

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

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

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

Так, по поводу колористки. Ещё добавьте побольше белого, потому что сейчас у вас все коричневое, то есть, контент, весь текст можно делать спокойно на белом, смотреться будет красиво и гармонично.

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

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

По поводу выравнивания элементов. Просто-напросто добавьте любую сетку, скачайте в интернете модульную и выровняйте объекты, чтобы смотрелось всё красиво. По поводу текста: вот это необходимо влево сдвинуть, здесь все выровнять по одному краю по праву, ну, как бы все элементы необходимо выровнять, чтобы смотрелось красиво.

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

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

Переходим к следующему.

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



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

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