Видео-разбор 5 дизайнов сайта Татьяны Прошиной

Хотите также чтобы я разбирал ваши работы? Записывайтесь на тренинг, если остались места 😉

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дальше по стоматологии. Увеличим масштаб. Здесь в принципе работа очень хорошая. Все моменты, которые нужно доработать .

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

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

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

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

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

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

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



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

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