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

Если хотети чтобы я разобрал ваши работы и прокачал ваши навыки запишитесь на тренинг 😉

Приветствую Вас, Владимир!

Итак, давайте приступим к разбору ваших работ.

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

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

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

Так, переходим обратно к вашим работам. Это то, что касается размеров шрифтов. Так же по шрифтам есть у вас такая проблема — вы слишком много используете различных размеров вообще по всему макету. Здесь вот, допустим, маленький шрифт, потом он идёт пожирнее, здесь какой-то следующий шрифт вообще как бы, не то, что бы по размеру, а вообще по начертанию отличается. Дальше вообще какие-то другие шрифты других размеров, то есть, везде всё разное, такого быть не должно. Я говорю, что максимум использовать необходимо один размер для заголовка и один размер для текста. То есть, побольше размер для заголовков, там порядка 24-36 пикселей, в этих пределах, и 14-17 пикселей для того, что бы прочитать тест и будет достаточно. Так же не нужно вот здесь вот между буковками вставлять интервал, дело это читается тяжело. Такие вот излишества будут не оценены дизайнерами, то есть, это, скажем, школьный уровень, так возможно делали лет 15-20 назад, когда только дизайн зарождался. Это было прикольно, потому что ново, но сейчас никто из веб-дизайнеров это не оценит, а над вами только посмеются, а обычному пользователю, который будет просматривать данный сайт будет очень неудобно читать информацию. Короче говоря, вы никому -никому не угодите, поэтому делать необходимо так, как хотят, непосредственно, посетители данного сайта, что бы им было удобно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И переходим к последнему макету. Это у нас лендинг по часам, на сколько понял. Рыночные часы, здесь, в принципе, если сравнивать с вашим уровнем всё получше, больше качественной графики. Что здесь необходимо заменить? Вот эту кнопку. Посмотрите где-нибудь в интернете жёлтые красивые кнопки в стиле в двойном и так далее, в стиле флэт полно. Вы выбрали какой-то доисторический новый стиль — так делать не нужно. Во-первых, это очень дёшево смотрится, потому что качество графики само по себе, в принципе, нормальное, логотип тоже, в принципе, более и менее, скажем так, а вот кнопка сразу отбивает всё желание что-либо покупать на данном сайте. Сделано непрофессионально, посмотрите в интернете, можно скопировать, смоделировать. По часам здесь всё, в принципе, нормально. Единственно, вот эти заголовки, которые у вас есть на лендинге, они всегда гораздо больше, чем на обычных сайтах. Я рекомендую делать размером, примерно от 36-72 пикселей и всегда ставить жирность. Но вот так вот делать я не рекомендую. То есть, светлый текст на картинке фоновой очень тяжело читается, практически, не воспринимается, и люди не будут напрягаться, не будут читать. Возможно, вы сами прочтёте, потому что это вы сами сделали это ваше творение, но все кроме вас просто забьют, и не будут тратить своё время. Здесь то же самое. Как вы видите, просто-напросто вставив качественные картинки, у вас уже, будто все дизайны уже лучше, если поработаете над типографикой и другими элементами, дизайны будут гораздо лучше.

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

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

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

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



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

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