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

Не получается дизайн? Не знаете как с делать «конфетка»? Научим и покажем тут. Да, и еще работы разбрем ваши 😉

Приветствую Вас, Татьяна!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Здесь первым моментом, что необходимо сделать — я бы изменил текстуру, текстуру фоновую либо на коричневую, либо на какую-то темно-бардовую. Смотрелось бы это гораздо более богато, потому что само вот это красное дерево ассоциируется с каким-то вот этим богатством, потому что его используют в дорогих машинах, при производстве дорогих столов в крутые офисы, ну и так далее. Хочешь, не хочешь, но человек при виде красного дерева сразу понимает, что это такой премиум-сегмент. Черно-белое — это какой-то незаконченный вариант, и здесь как раз-таки, если вы текстуру сделаете сзади темно-коричневой, здесь у вас полупрозрачный фон, будет смотреться прикольно. И по поводу текстуры: размер ее сделайте поменьше, потому что слишком большие вот эти вот куски получаются и они сильно сильно бьют по глазам, потому что такой текстуры при таких пропорциях, когда у вас такие небольшие кнопочки, текст и так далее, такого не бывает. Текстуру необходимо в данном случае уменьшить раза, наверное, в 2,5-3, ну, плюс-минус, тогда смотреться будет гораздо лучше.

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

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

По цветовой гамме все хорошо. Что у нас тут еще? В принципе, все, по всем остальным пунктам для начала подойдет, все хорошо.

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

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

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

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

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



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

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