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

Хотите такой же разбор работ? Это можно:)

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

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

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

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

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

Так, давайте преступим. Как вы заметите очень много цветов тоже. Белый, красный, синий, зелёный, черный; парочки цветов не хватает для полной радуги. Соответственно первая рекомендация: точно так же, как и в предыдущей работе сократить до трех цветов основных.

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

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

Следующий момент: везде в тексте я рекомендую меньше шрифт. Он у вас довольно-таки большой во всех блогах до 14, 16, 18 пикселей для чтения будет вполне достаточно. Не нужно делать такие гигантские размеры шрифта, всё отлично прочитается 16,18 пикселей. И следующий момент, как я уже говорил, делайте, скажем, так одни правила, чтобы они были одного размера шрифта, одним начертанием, одной там жирности и так далее. То есть, для заголовка, для подзаголовка одни правила, и для текста и для чтения. У вас же в каждом блоке одни какие-то свои определённые правила: в одном блоке заголовки тут одним цветов, в другом другим; в одном они написаны большими буквами полностью, в другом с заглавной начинается другие прописные; и соответственно получается неразбериха. Совершенно непонятно «о компании», тут вообще как-то разбросанно, понанапихано, непонятно куда смотреть в какую очередь и так далее. Так делать не нужно, придерживайтесь единых стандартов для всех типов текста.

По поводу сетки и расположения. Ну как бы просто добавьте любую сетку, у вас ее здесь явно нет. Если она есть, то вы не выравнивали. Выровняйте всё, расставьте по сеточке, чтобы было ровно. Ну и добавьте свободного пространства между объектами чуть больше, чтобы смотрелось более гармонично: допустим вот здесь вот.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На этом всё. Большое спасибо за внимание. Любите дизайн! Делайте классные удобные дизайны сайтов для всех людей. Пока.

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



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

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