Разбор по косточкам 5 дизайнов начинающего веб-дизайнера Николая Полякова

Хочешь получить разбор твоих дизайнов?

Итак, Николай, я вас приветствую!

Приступаем к разбору ваших работ и начнем мы с первого сайта, со строительного портала.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

По поводу меню. Меню лучше сделать в самом верху горизонтальным, а не вертикальным, потому что гораздо проще воспринимается и люди привыкли, что на 90 с лишним процентов сайтов, оно располагается именно так. То есть, не нужно менять сознание, так как все равно это не получится, так, как на ваш сайт будут заходит пару десятков человек, а на все остальные заходят миллионы, миллиарды. Другое дело, если бы это возможно, было, и у вас был самый посещаемый сайт России, например, Яндекс, Гугл, тогда, на это можно повлиять на сознание миллионов людей, когда на ваш сайт постоянно заходят, это да, но, так как мы на это влиять не будем, а точнее не можем влиять на это, соответственно, будем придерживаться таких правил, и будем делать как остальные, делать, как хотят видеть посетители. То есть, вертикально и горизонтальное меню, в самом верху. Вот эти моменты лучше убрать — это, непосредственно, лучше разместить в каталоге продукции, вот здесь, который у вас есть, отобразить, будет лучше. Фон точно так же заменить на какой-то более светлый, либо однотонный темный, чтобы на нем все эти элементы, как-то выразительно смотрелись, и не отвлекалось внимание на фон. Надпись писать телефон, факс вообще не нужно, потому что по номеру телефона люди и так привыкли, что он вверху справа всегда размещен. Здесь, опять же, нужно добавить кнопочку, а надпись:  Распродажа, Акции и так далее, лучше убрать, либо вынести ее в какой-то отдельный блок, опять же, по юзабилити. Смотрите следующий момент, здесь стоит ротатор, опять же его, если хотите оставить, то лучше его с помощью, допустим, цвета, чтоб его было видно и кнопочки переключения вот тут картинок, чтоб его было видно потому, что сейчас они сливаются с фоном.

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

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

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

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

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

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

 

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



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

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