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

Набор на тренинг по прокачке навыков начинающих веб-дизайнеров открыт! Запишитесь пока есть еще места 😉

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

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

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

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

По поводу сетки – в принципе, всё хорошо, всё расставлено по местам, всё выровнено.

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

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

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

Так, следующий момент: менюшку поднять наверх, то есть полностью взять её и перенести вот сюда вот. Так, скажем, привычнее, люди привыкли, что на большинстве сайтов оно находится в самом верху, а не где-то посередине, и будет проще ориентироваться. Почему это необходимо сделать и вот это пространство свободное уменьшить? Потому что, как я уже говорил, первый экран, в предыдущих работах, порядка 700-750 пикселей, вы должны сразу показать человеку куда человек попал, что он от данного сайта получит, и, соответственно, предложить какие-то свои услуги, чтобы человек сразу смог сориентироваться, заинтересоваться, либо уйти на другой сайт. А здесь же, когда человек попадает и видит вот этот первый экран, вообще не понятно, что делать, какие услуги предоставляются на этом сайте и так далее. Поэтому необходимо вот это пространство свободное убрать, поместить менюшку наверх. И, соответственно, здесь я бы вам рекомендовал ещё добавить галерею из ваших работ, то есть сделайте примерно по три работы такой вот слайдер, здесь стрелочки, допустим, направо-налево, а когда человек щелкает – по 3 работы перелистывается. Ну либо по одной. Для чего? Для того, чтобы человек, зайдя на сайт, сразу мог посмотреть ваши работы. Потому что в любом случае – это будет основной критерий при принятии решения о заказе у вас работы. Соответственно, ему необходимо сразу же, прямо с первых секунд дать посмотреть эти работы, потому что без них он всё равно принимать решение не будет. То есть такой вот момент касающийся, скажем, конверсии вашего сайта.

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

Вот в принципе и всё, вот такие вот рекомендации по данному сайту. Если переделать, то я уверен, что как минимум заказов у вас станет больше.

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

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

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

То, что касается кнопки, вот этот текст лучше сместить по одной линии с цифрами, будет смотреться гораздо гармоничнее. Давайте я вам прямо покажу. Сейчас мы его вырежем, точнее передвинем. Зайдем в историю и посмотрим: так было ДО, а так стало ПОСЛЕ. Гораздо лучше, потому что текст выровнен по одной линии, человек визуально, когда смотрит, он видит сразу текстовую информацию в одном блоке. Сейчас же, когда у вас сделано вот так, человек визуально смотрит, и для него уже получается два блока с информацией. Почему? Потому что, как бы, фигуры мозг объединяет в одни элементы максимально более простые, так как здесь линии расходятся, они находятся не на одной, скажем, плоскости, то мозг объединяет в две похожие фигуры, и человек тратит больше своей энергии, своего внимания, своего фокуса на то, чтобы понять информацию. Так лучше не делать.

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

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

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

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

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

Так, по поводу юзабилити, удобства сайта: логотип компании, её название лучше уменьшить в 2-3 раза. Почему? Потому что это не какая-то гигантская транснациональная компания, которую знает каждый, её скорее всего знают, только сами клиенты. Я, к примеру, пользовался несколькими транспортными компаниями, такой компании я не знаю, мне данный логотип компании ни о чем не говорит, соответственно большинству аудитории, которая сюда будет заходить, тоже не о чем не скажет, поэтому смело уменьшайте его в 2-3 раза. Пользы от такого логотипа, то что он занимает треть экрана первого, вообще нет. Другое дело если бы это была какая-то компания Microsoft, Coca-Cola, Газпром, который все знают, когда сразу понятно, появляется доверие к сайту компании и так далее, тогда другое дело. Здесь же ничего не понятно, что за компания. Логотип такой гигантский делать не нужно.

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

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

Следующий момент — вот эти выгоды. Не нужно их делать в подвале, если вы хотите сделать цифрами, то поместите в самый верх, на первый экран. И вот эти циферки: 10000, 90000, 40% сделайте большими, текст под ними. Смотреться будет гораздо лучше. Здесь же вы в место, где обычно подвал, выставили непосредственно выгоды, так делать не нужно. То есть поместите на верх.

Вот такие вот рекомендации по данному сайту.

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

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

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

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

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

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

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

Переходим к типографике. Как и в большинстве других сайтов, не делайте заглавными буквами менюшку. В основном только заголовки. Следующее: текст для чтения сделайте поменьше, сейчас у вас скорее всего в районе 18 пикселей, сделайте 14 пикселей, будет читаться хорошо, но при этом не будет занимать столько свободного пространства. Так, что ещё? Ещё такой вот момент: не нужно делать у текста различные применять стили слоя, вот эти градиенты, обводки, тени и так далее. Это смотрится очень дешево, это было популярно лет 10 назад. То есть это давно не модно, это говорит о том, что человек, скажем так, балуется фотошопом, но делает это непрофессионально. Поэтому лучше обычный коричневый текст, смотреться будет гораздо более профессионально.

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

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

По поводу различных элементов интерфейса: вот здесь вот у вас заголовок сделан в виде формы для ввода текста, так делать не нужно. Человек, когда видит такую формочку с внутренней тенью, он привык, что на 99% сайтов здесь необходимо вводить текст в такой формочке, а вы сделали заголовок. Если вы сделаете просто красным цветом и чуть больше размером данный текст, то он автоматически будет привлекать внимание. Менять, скажем, предпочтения пользователей, когда они привыкли, что эта форма – поле для ввода, куда вводится текст, а вы сделали таким же свойством заголовок, не нужно. У людей будет в голове неразбериха, они не будут понимать, что делать с данным объектом. Если это заголовок – то это должен быть просто текст, если это форма для ввода текста – то это должна быть форма для ввода текста, не нужно смешивать эти понятия и подменять их. Потому что это просто мешает восприятию информации, это усложняет, и люди тратят гораздо больше времени, чтобы понять, о чем смысл, как разобраться в контенте.

Градиент вот здесь лучше убрать, это, опять-таки, старый стиль, который был популярен лет 5-10 назад, не нужно это использовать. Просто сплошная заливка будет отлично смотреться.

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

Так, что ещё? То же самое касается логотипа, сделано по-детски. Те же самые рекомендации, какие я давал. Если вы не Coca-Cola, IBM, Microsoft – не нужно делать логотип, всё равно люди не запомнят. Тем более он очень сложный, тоже не запомнят, не нужно этого делать. У вас компания и услуги, которыми люди пользуются раз в 10 лет, логотип здесь просто не нужен. Логотип в основном нужен для того, чтобы, когда человек приходит в магазин, покупает одни и те же продукты практически каждый день, чтобы по логотипу он мог определить, стоит ему какой-то продукт покупать, либо нет. У вас же услуги разовые, логотип вам вообще не нужен. Это то, что касается точки зрения конверсии и продаж на сайтах. То есть убирайте логотип, на вашем сайте он не нужен, не несет никакой полезной информации и не увеличит ваши продажи.

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

Ну и у нас в данной части разбора остался последний сайт, который я ещё разберу. Ещё одно свадебное агентство.

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

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

Дальше, расстояние между блоками все сделайте чуть больше по высоте, вот здесь чтобы было побольше свободного пространства. Если мы посмотрим, сравним, то здесь у вас порядка 120 пикселей по ширине, здесь получается порядка 60 пикселей по высоте. То есть в два раза отличается, приблизительно необходимо, чтобы было одинаковое расстояние, будет смотреться гораздо, скажем, гармоничнее. Как минимум отступы от блоков, которые разделяются, допустим вот у вас идет один блок с контентом, идет второй с контентом, расстояние между данными блоками необходимо чуть больше сделать, для того, чтобы их визуально, скажем так, разграничить. У вас есть вот такой разделитель, но между ним и блоками с контентом всё-таки необходимо чуть больше свободного пространства, будет гораздо лучше.

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

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

То же самое касается вот этих вот стрелочек: они очень большие, очень жирные, они занимают примерно 50% от самой какой-то иконки, так делать не нужно. То есть пропорции слишком неравные, иконку как минимум необходимо сделать в 1,5-2 раза больше, а стрелочку наоборот уменьшить. Всё равно люди данную стрелочку увидят, если она будет вот такая вот, всё равно будет понятно, что это стрелочка, куда смотреть, в каком направлении. Наоборот, если мы увеличим иконку, будет смотреться гораздо лучше. То есть привлекать должны как раз таки внимание не стрелочки, а сами иконки, потому что это контент. Вспомогательные элементы должны вообще быть незаметными. Если они привлекают к себе внимания больше, чем сам контент, тексты и картинки, соответственно, данный элемент выполнен неправильно, его необходимо дорабатывать.

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

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

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

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

На этом всё, спасибо за внимание, и ждите следующей части разбора.

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



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

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