Разбор дизайна сайтов (1 часть)

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

Приветствую вас друзья!

Итак, долгожданное видео, которое я вам обещал — разбор ваших работ.

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

Так что еще хотел сказать. К сожалению, не все работы смог открыть. У части работ, которые вы прислали, ссылочки некоторые получились битые. Либо вы отправляли ссылки на свой Яндекс Диск, и соответственно я не видел просто работы. Поэтому разобрать их я физически не смогу. Грубо говоря, я их не увидел. Соответственно, раз не увидел, то не смогу разобрать.

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

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

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

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

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

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

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

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

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

По поводу юзабилити и удобства. Здесь вот у вас сверху вход и регистрация. Они нужны только вам. То есть, по факту допустим, за год у вас зайдет сюда десять тысяч человек, и данная кнопочка необходима только вам, соответственно, свою суть они теряют. Они не нужны людям и никакой полезной информации не несут. Вы спокойно можете зайти на данные странички, напрямую вбив в адрес браузера, и попасть куда необходимо, хотя здесь я вижу регистрацию, но непонятен тип сайта. Здесь вроде сайт визитка, вроде что-то похоже на лэндинг, с предложением каких-то услуг, и что-то наподобие блога, либо портала. Я рекомендую еще более конкретно определить тип сайта, цель сайта и его задачи. То есть, все пихать и соединять различные типы сайтов не нужно, такое не работает. У сайта должна быть какая-то одна единственная задача, которую он должен решать. Поэтому я рекомендую здесь убрать, если сайт должен продавать услуги автора, а судя по основным блокам, выгоды, бафтари, ну и так далее. То есть цель продавать какие-то услуги. Кнопочки социалок есть в подвале, соответственно, их отсюда лучше убрать, чтобы человек не уходил на сторонние сайты. Так и еще один момент. Вот здесь вот первый экран получается где-то порядка 700 пикселей по высоте. Я рекомендую сразу разместить уникальные торговые предложения. Если не знаете такое, почитайте в интернете. Плюс то, какую услугу вы предлагаете, и кнопку соответственно заказать. Почему? Потому что большая часть людей, когда заходит на сайт, если не находит информацию на первом экране вот этом, они даже не скролят, не читают, а просто переходят к следующему сайту. Наверняка вы знаете, (вы сами, скорее всего, так делали), что когда ищете в Яндексе либо в Google какую-либо информацию, то открываете сразу десять сайтов и там по 3-5 секунд бегло просматриваете. Не находите что-то важное, видите, что сайт не соответствует вашим запросам, вы сразу закрываете, даже не тратите время, поэтому самую важную информацию в первом экране необходимо разместить. Люди не будут читать и тратить свое время.

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

Дальше переходим. Более простой сайт. «Ticket Stub» называется. Насколько я понял, это сайт где различные фильмы выкладываются. Что-то наподобие варезника пиратского, с не лицензионным контентом, ну и так далее. И так, давайте приступим. По поводу колористики. На начальном этапе я вообще рекомендую, когда вы только практикуетесь и создаете первые дизайны, не включать в свои дизайны серые и красные цвета, потому что это такие цвета которые, ну либо очень яркие, либо.. Вот серым цветом тяжело работать новичкам. Они не видят грань, где необходимо сделать светлее, где темнее и получается откровенная лажа, честно говоря. Поэтому, первые полгода я не рекомендую вообще прикасаться к данным цветам, лучше использовать какие-то другие, там белый, синий, зеленый, черный и так далее. Здесь я просто рекомендую изначально сменить цветовую гамму, и станет гораздо лучше, ну, вот серый, как минимум, заменить на какой-то другой цвет, либо просто уменьшить его оттенок, ближе к белому, и смотреться будет гораздо лучше. Это касается как вот этих блоков с менюшкой, так и этих вспомогательных блоков, где ссылки.

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

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

По поводу сетки выравнивания в менюшку. Здесь я рекомендую выровнять по левому краю. Сейчас текст выравнен по правому. Это смотрится некрасиво, непрофессионально. Самый основной фактор, люди не привыкли что так на большинстве сайтов расположено меню и текст на нем, поэтому выровняйте по левому, и сделайте так, как люди привыкли видеть менюшку. По поводу интерфейса, различных кнопок и так далее. Здесь у вас получаются стили блока со ссылками подробнее и так далее, практически идентичные с блоками для меню. Такого быть не должно, то есть кнопки точно такие же. Фиг пойми, что такое кнопка, что какой-то вспомогательный блок, что меню. Меню должно четко отличаться от кнопок, от каких-то вспомогательных блоков и так далее. Поэтому, как-то с помощью цвета, с помощью формы, разграничьте их. Они должны отличаться, визуально не должно быть сходства. Это первый момент. Второй момент, не нужно делить меню на такие основные блоки. Смысла в этом нет, вы только тратите драгоценное пространство. Гораздо проще это все объединить в один блок, и сделать гораздо меньшие отступы между текстами. Он займет примерно вот столько места. Вы просто растрачиваете впустую вот такое количество места. Поэтому я рекомендую все объединить, и не тратить пустое пространство понапрасну. Так здесь поиск по высоте чуть-чуть поменьше сделайте. Слишком какой-то гигантский и не пропорциональный получается. По поводу графики, вот этого вот логотипа. Здесь я рекомендую убрать различные подцветки, градиенты, тени британские. Данные стили были популярны лет пять-шесть назад, когда Photoshop только появлялся в России. В веб-дизайне люди только начинали пользоваться, было круто, красиво, прикольно. Сейчас это прошлый век, это не модно. Это устарело, и это показатель того, что делал не профессионал. Поэтому, лучше это вообще не использовать чем использовать, скажем так. Я рекомендую, вообще убрать данный логотип. Потому что он ни о чем не рассказывает, о чем сайт. Вместо него лучше написать, я не знаю там, все фильмы 2015 года скачать бесплатно. Чтобы, когда человек заходит, он понимал, куда он попал, и что он здесь может найти. Данный логотип, все равно нафиг никому не нужен, кроме создателей данного сайта, и никто его запоминать не будет. Поэтому старайтесь делать для людей, а не для себя дизайн. Это я уже начал по юзабилити. Следующий момент. Менюшку я уже сказал объединить. Такое меню люди не привыкли видеть, и лучше сделать похожим на стандартное, либо сверху обычное меню. Гораздо будет лучше, и понятнее для обычного рядового пользователя. Следующий момент. Я уже говорил в предыдущем видео, что если делаете ссылки, то подчеркиваете их, чтобы люди видели, что по ним можно перейти, либо делайте кнопку отдельную, как-то выделяйте ее.  В принципе, здесь видно кнопки, но они по стилям такие же как менюшка, и не понятно, что это такое вообще. Короче говоря, вот такие рекомендации по данному сайту. Вот это вообще «вернуться назад» можно убрать, это лишнее, так как, по высоте сайт маленький, никто им пользоваться не будет, все просто напросто проскролят. Такие вот рекомендации по второму сайту.

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

По типографике. Так, как это лэндинг, люди не любят вчитываться в информацию. Они обычно делают вот так вот. Все очень-очень бегло просматривают, и, соответственно, здесь максимум что может броситься в глаза это картинки, потому что заголовки у вас очень маленькие, и в глаза не бросаются. На лэндинге заголовки можно делать просто гигантские, для того чтобы привлекали внимание. Раза в два можете спокойно сделать больше, ничего в этом страшного нет, и на лэндингах это нормально. Другое дело, что на сайтах-визитках, в интернет-магазинах, это делать не нужно. На лэндинге можно спокойно это делать, поэтому первая рекомендация — сделайте заголовки в два, два с половиной раза больше. Сейчас я найду блоки. Вот первый момент тоже. Здесь вот этот текст выровняйте по вот этой линии, по направляющей, где «акция месяца!». Потому что некрасиво смотрится, сейчас я немножко передвину. Ну, вот так вот примерно. Здесь слово перенесите на следующую строчку, смотреться будет профессионально. Потому что сейчас непонятно какое выравнивание, портит общее впечатление. Это первый момент.

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

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

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

По графике, вот здесь вот, я рекомендую, различные тени у картинок убрать. Смотрится некрасиво, и, наоборот, только дешевит. Если вы уберете, смотреться будет гораздо лучше. Так, и еще одна рекомендация, которая, скажем, так бросается в глаза. Вот здесь вот подложка такая у текста, слишком мало свободного пространства до краев. Давайте я вам покажу, прям нарисую, как будет лучше. Возьму сейчас инструмент, допустим, вот так вот, уменьшу прозрачность, и покажу то, что я имею ввиду. Здесь опять-таки, лучше использовать шрифт с засечками. Давайте возьмем стандартный — Times New Roman, чтобы привлекал внимание. Так, вот смотрите, смотреться будет чуточку лучше, если вы сделаете отступы по краям слева, справа, сверху и снизу — побольше. Просто напросто увеличьте расстояние, и читаться будет гораздо лучше. Это первый момент. Второй, выровняйте текст по центру. Потому что сейчас зачем-то выровнено по левому краю, но не совсем красиво и гармонично смотрится. Если по центру выровняйте, будет гораздо лучше, но это тоже самое касается нижнего текста вспомогательного. Это, пожалуй, последний момент, что я хотел сказать. Ну, это к данному сайту, ну и вообще ко всем относится, я рекомендую показывать состояние активных элементов. То, что касается различных интерфейсов, активных пунктов меню, кнопок при наведении, при клике и так далее. Если вы в таком предпросмотре варианте не показываете, то хотя бы в макете, (я в одном из видео показывал, как это делается, у нас в группе в контакте), создавайте папки либо слои, с различными состояниями элементов интерфейса. То есть, в обычном состоянии, при наведении, при клике, но это касается не только этой работы, но и вообще всех.

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

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



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

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