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

Считаете что у вас крутые дизайны? А давайте я их разберу?:)

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

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

Первая работа, первый дизайн, у нас посвящен учебному центру, насколько я понял в Казахстане. Лендинг — это у нас, и, как обычно, начинаю я с колористики. Давайте для начала покажу сам непосредственно лендиyг, для того, чтобы вы видели, что здесь, в принципе, можно поменять по цветовой гамме, что не соответствует и так далее.

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

По поводу типографики. Здесь везде очень маленькие заголовки. Как в больших блоках с контентом, так и каких-то отдельных маленьких. Я рекомендую, точнее, скажем , это принято на лендингах делать очень большие заголовки, для того, чтобы когда человек скролит, а люди привыкли, что на лендингах очень много информации, они очень большие и для того, чтобы когда человек быстро скролил большие заголовки, которые могут быть от 36 до 72 пикселей, они цепляли взгляд. Такие вот заголовки не цепляют, если человек будет скролить, он просто их пропустит мимо. Соответственно первым моментом сделайте шрифт гораздо больше. Сейчас вот порядка 21-24 пикселей, спокойно можете увеличить в 2-3 раза. И поместите лучше данные заголовки непосредственно по центру. Вот эту вот подсветку от красного к белому, такой вот градиент, лучше от него избавиться сделать непосредственно весь заголовок синим в цвет вашей цветовой гаммы, будет гораздо лучше.

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

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

Так, в принципе такие же рекомендации, то, что я дал по тексту, они относятся ко всем блокам, применяйте их.

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

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

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

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

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

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

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

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

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

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

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

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

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

По поводу сетки я забыл сказать, больше сделайте отступ вот здесь вот между контентом и скажем такой линии границей макета, у вас здесь получается порядка  50, ой, 15 пикселей, а если увеличить хотя бы в 2 раза, до 30 пикселей, будет смотреться гораздо проще, восприниматься гораздо легче. Такая вот последняя рекомендация по данному сайту.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На этом все. Спасибо большое за внимание и до встречи в следующих видео!

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



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

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