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

Продолжается набор на тренинг по прокачке навыков начинающих веб-дизайнеров, где я разбираю ваши работы. Тренинг НЕ для всех, только для избранных :)

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

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

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

Следующий момент по поводу сетки пространства. Просто напросто ее добавить, выровнять различные элементы. Также, больше свободного пространства, допустим, здесь между картинками и текстом снизу одно расстояние, справа оно другое, сверху третье такого быть не должно, везде расстояние должно быть приблизительно одинаковое. Как минимум, оно должно быть одинаковое с противоположных сторон. То есть, допустим, здесь по 30 пикселей, а здесь грубо говоря, по 50 пикселей, тогда будет смотреться гармонично. Либо со всех сторон одинаково, тоже будет классно смотреться. Но такого, чтоб со всех сторон оно было разное, такого быть не должно и лепить вот так не нужно. Побольше свободного пространства между какими-то картинками, элементами и текстом плюс самими блоками с контентом. То есть, вот у нас один блок идет « управленческий учет». Здесь мы видим, что сверху одно расстояние, до следующего блока, снизу совершенно другое расстояние, в 3 раза больше. Такого быть не должно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Переходим дальше.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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