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

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

Итак, Дмитрий, приветствую в этом видео!

Я, как и обещал, дам обратную связь по пяти вашим работам.

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

Ну что, давайте приступим, начнём с первой работы. Увеличиваем масштаб и пойдём по порядку. Уберу сетку пока. Отключаем с направляющими. Так, что у нас по первой работе. Я бы сюда рекомендовал добавить побольше качественной графики, потому что переизбыток просто векторной графики она и не flat и не тех. дизайн, то есть, если бы вы делали всё flat, то, казалось бы, что это в одном стиле, но так как у вас просто стиль 90-х кажется, как будто это набросок, поэтому вы либо доработаете, я рекомендую до flat, то есть, добавить тени, такие вот моменты. Посмотреть, как рисуются веб-дизайны, то есть, смоделировать, либо добавить какие-то свечения, отражения и так далее, то есть, ближе к веб 2.0. Будет сайт сразу смотреться дороже и чуточку профессиональнее, потому что заказчики, которые хотят дизайн за пару тысяч, они именно хотят немножко понтовые сайты, не совсем эффективные, лучше первоначально не делать именно такие, потому что такое продать будет довольно-таки тяжело. Ещё я бы не рекомендовал использовать такие вот косые линии, потому что человеческому мозгу они не совсем привычны, так как у нас всё в природе, в жизни устроено немножко по-другому. То есть, горизонтальные и вертикальные линии, наш мозг их гораздо проще воспринимает, то есть, я рекомендую избавлять от таких вот премудростей, их в основном можно использовать, когда есть какая-то аудитория у сайта, креативные дизайнеры, архитекторы и так далее, которые поймут все эти фишки и которым это интересно. Для простых людей понимать информацию вот в таком формате сложнее, поэтому, чем проще будет, тем лучше.

Далее, по структуре. У вас на моих сайтах перебор с блоками, с меню, то есть, в идеале вообще должно быть одно меню, у вас часто 2 или 3 меню. То есть, здесь сверху идёт первое, потом второе и третье. Для человека усвоить такую информацию просто нереально. В двух меню люди начинают путаться, а в трёх подавно. Старайтесь структурировать и объединять данную информацию, то есть, вот так, допустим, менюшку можно как-то по каким-то критериям объединить, добавить какой-то один пункт и сделать выпадающий список — это будет гораздо лучше, сразу освободится какое-то пространство. Тоже самое вот эти все пункты меню, это по сути какая-то вспомогательная информация и можно, допустим, добавить сервис, точно так же выпадающий список. А, к примеру, вот такой вот здесь будет появляться с пунктами, так будет гораздо проще и лучше, то есть, с точки зрения конверсии, с точки зрения юзабилити это гораздо эффективнее. Плюс, как вы видите, все вот эти места, они освободятся, потому что, если в пределах вот этого первого экрана человек не найдёт нужную информацию на сайте, соответственно, мы, как дизайнеры должны правильно все эти блоки разместить. Что у нас здесь ещё? В принципе, остальное всё нормально. Вот такие вот моменты, в виде логотипов компании клиентов лучше делайте обесцвеченными и, допустим, при наведении делайте, что бы была подсветка, потому что графика сама по себе привлекает внимание, если человек перейдёт на какой-то сайт, по сути, данная компания потеряет клиента и деньги, так делать не нужно. Что ещё? Вот здесь вот очень плохо заметен адрес, то есть, его необходимо сделать как раз-таки белым, потому что это важная информация и людям она очень часто нужна. То есть, такая информация, как телефон, контакты, адрес и так далее, всегда должна быть выделена крупным, ярким и так далее, что бы люди могли быстро связаться с владельцами с пейджерами данной компании. В основном, как видите, больше здесь по юзабилити, по дизайну, в принципе, либо в стиле flat лучше сделать ближе, так, как я думаю, у вас опыта хватит для этого, либо веб 2.0, в тех. дизайн лучше не соваться. Это у нас по первой работе.

Перейдём ко второй. Приступим. Во-первых, я бы рекомендовал сменить цвет немножко на более голубой, он как-то более позитивно воспринимается людьми и темные такие оттенки ближе к чёрному воспринимаются не так хорошо, не так позитивно людьми. Можно использовать тёмно-коричневые оттенки и так далее, но, что касается синего, зелёного цветов, лучше использовать поближе к голубому и так далее. Следующий момент, логотип не нужно делать таким большим, если это никакой-то бренд в виде Coca-Cola на который люди посмотрят и сразу поймут, что это за компания, то есть, будет ассоциация с качеством, обслуживанием и так далее, то не нужно так сильно выделять. Здесь гораздо важнее для человека понять, куда он попал, если он искал автомойкуто, соответственно, этот текст необходимо сделать чуть побольше, автомойка, допустим, и желательно уточнить в каком городе. Сейчас это писать не буду. Всё остальное это логотип и название компании необходимо сделать менее светлым. Оттенок я сейчас подбирать не буду просто-напросто. Уменьшите прозрачность, чтобы не привлекало слишком много внимания. Автомойку можно так и оставить, либо чуть подвинуть.

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

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

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

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

Следующее, что здесь точно необходимо сделать — это в типографике у вас сглаживание вообще никакое не стоит. Из-за этого шрифты коряво вот здесь, как будто лесенка, поставьте либо чёткое, то есть, смотреться будет гораздо лучше, сейчас покажу результат. Как бы шрифт тоже изменился, потому что у меня нет шрифта, который вы используете. Тем не менее, что бы не было таких вот лесенок, здесь выбираете либо чёткое, либо плавное. Что касается кнопки. Её необходимо делать в виде кнопки. Если это кнопочка, то, соответственно, подчёркивания не нужно, потому что люди и так будут знать, что мне необходимо кликнуть и перейти. Подчёркивание даётся человеку для того, что бы понял, что это не обычный текст, а ссылочка, по которой можно перейти на какую-то следующую страничку. С кнопкой всё проще. Подчёркивать здесь не нужно, то есть, подчёркивание убираете, желательно сделать, допустим, синим, ближе к 3D, что бы была похожа на реальную кнопку. На моих многих сайтах можете посмотреть, как я это делал, просто смоделировать, либо в других курсах я показывал, как это делается, бесплатно. То же самое, что касается логотипа, слишком сильно он выделяется, но как бы, если в городе, для которого делается сданный сайт данную стоматологию особо не знают, то не нужно так сильно её выделять. Гораздо лучше написать, что стоматология в таком-то городе, режим работы и так далее, это будет гораздо полезнее для людей. В принципе, здесь выгоды показаны хорошо, расположение следующее, опять же перебор с блоками, неправильное расположение, то есть, по факту получается опять же, первая менюшка, вторая менюшка, в принципе, всё. Но любых профессионалов получается много и слишком большая разброска по вертикали, человек будет тяжело ориентироваться. Лучше вот эту информацию вносить на отдельную какую-то страничку, объединять весь данный пункт в какое-то одно название, допустим, услуги компании и на этой страничке уже показывать о всем не нужном. Единственно, конечно, бывают исключения, но только в том случае, если проведены АБ-тесты и они показали, что это необходимо на каждой страничке, на большинстве сайтов столько менюшек только вредит.

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

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

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

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

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

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

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

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

На этом всё. Спасибо за внимание. Если что пишите в контакте по данному комментарию!

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



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

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