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

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

Приветствую Вас, Иван!

В этом видео мы приступаем к разбору ваших работ.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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