Разбор работ по веб-дизайну 5 (за опрос от 03.09.2015)

Заключительная часть разборов. Следующие будут только на тренинге по прокачке навыков

Приветствую Вас, уважаемый коллега!

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

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

То, что касается типографики. Первое, что я хотел бы порекомендовать – это чуть-чуть уменьшить размер заголовка до такого значения, что бы данный заголовок уместился не в 4, а в 3 строчки, то есть, буквально чуть-чуть. Смотреться будет гораздо лучше плюс все у вас вот это подвинется немножечко наверх и кнопка «обсудить детали» будет видна на первом экране, потому что сейчас, у нас, допустим, 720 пикселей по высоте, ну, примерно это небольшой экран ноутбука, скажем так, и вот вы можете потерять некоторые продажи, если люди, допустим, вам не позвонят, а захотят сначала ознакомиться. Кто не будет скролить, они могут уйти с вашего сайта. Соответственно, повысив всю информацию чуть выше сделав, люди могут нажать «обсудить детали» и какой-то определенный процент останется на сайте и, возможно, закажет, то есть, продаж будет чуточку больше. Так, и по типографике сделать везде одинаковым по начертанию текст для чтения, если он здесь такой, то, в принципе, здесь точно такими же нужно сделать, либо наоборот взять за основу начертания, размер и так далее, а вот это вот блок с текстом и применить его везде в каждом блоке, что бы везде был одинаковый стиль. Восприниматься будет лучше.

По сетке, по выравниванию все хорошо, в принципе, расстояния везде хватает, везде достаточно, ничего не липнет друг к другу.

По графике, в принципе, тоже нормально. Единственное, так как вы здесь предоставляете свои услуги, то, соответственно, одной картиночки для, скажем, вашего портфолио, для просмотра мало. То есть, у вас по ссылке каталог здесь есть, но желательно выложить хотя бы там 6 картинок и потом поставить только после этого кнопку «заказать услугу» или «купить», потому что по одной картинке человек не будет все равно принимать решение о покупке, ему необходимо больше вариантов.

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

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

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

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

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

Следующий момент. Что необходимо сделать? Увеличить количество, точнее увеличить расстояние между строчками, потому что, если читать у вас этот текст, который предназначен, как контент для чтения, то он тяжело читается, потому что маленькое расстояние между строчками – это первое, что необходимо изменить, и второе – вам необходимо выравнивать текст по левой стороне, не выравнивать по обоим краям, потому что это смотрится не как текст для чтения, а просто как какое-то черное пятно. Попробуйте отойти метров на 5-10 и вы поймете, что это все сливается в один какой-то прямоугольник черный, черно-серый такой оттенок и читать никто это не будет.

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

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

По поводу сетки. Сделайте побольше свободного пространства, потому что во многих моментах у вас между картинками и текстом, и между блоками прям минимальное количество, там 2-3 пикселя, необходимо сделать 15-20-25 пикселей, что бы смотрелось красиво и гармонично. Не бойтесь вот этого свободного пространства, смотреться, восприниматься информация будет проще и лучше. Так, ну и по сетке я уже говорил – необходимо выровнять (по типографике уже говорил) по левому краю. Это касается не только текста, это касается также и всех элементов, особенно вот этого правого блока. Лучше, если вы выровняете по левому краю все элементы, которые здесь есть, что бы не было таких вот непонятных сдвигов, что бы информация вся смотрелась едино и красиво. То есть, если вы все сдвинете налево, восприниматься и читаться информация будет гораздо проще.

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

Следующее по поводу активного пункта меню. Он у вас какой-то здесь несколько непонятный, что-то как-то обрезается снизу. Лучше просто меняйте цвет у заголовка данного пункта меню – будет гораздо лучше, потому что сейчас то ли вы сверстали неправильно, то ли изначально в дизайне как-то неправильно нарисовали – смотрится как-то коряво. Сделайте попроще, что бы смотрелось не косячно. Так, дальше, различные chek-boxы  у вас есть какие-то оригинальные. От них лучше избавиться, сделать обычные черные точки, хотя бы как у вас везде в списке перечисления такие вот синие кружочки – смотреться будет проще и лучше. Не нужно усложнять, потому что данный chek-box, он загружает отдельную картиночку, скорость загрузки сайта понижается и вы теряете часть аудитории. Если бы вы здесь что-то продавали, ну здесь я вижу, что на рекламе зарабатываете, тем не менее, будет меньше кликов по рекламе, соответственно, вы получите меньше дохода. Так, ну и соответственно, по поводу рекламы. Здесь у вас какой-то переизбыток, контента, в принципе, мало, но реклама в изобилии. Вот здесь банер, всякие вот такие есть вставочки, кнопки от Яндекс диска (можно пожертвовать на сайт), снизу куча различных кнопок, ссылки продаются у вас совершенно ненужные. Честно скажу, многого на этом не заработаете, но, как бы люди…людей это отталкивает и они не будут повторно заходить, потому что это усложняет восприятие информации. Люди, допустим, что-то ищут, наталкиваются на ссылки совершенно не по теме и второй раз они не будут заходить – это, во-первых. Во-вторых, поисковые системы будут понижать ваш сайт выдачи и вы будете получать меньше трафика с Яндекс и Google. Поэтому подумайте, чего вы действительно хотите, и я бы рекомендовал от этого избавиться. Плюс, ну, это отнимает какое-то свободное пространство – совершенно не нужно это делать, скажем так. Так, по поводу графики еще у вас тут градиент в правом блоке, есть такое небольшое свечение, как будто светлого оттенка линия идет – от него тоже лучше избавиться. Никакой полезной информации она не несет, только усложняет восприятие информации. По поводу графики, единственно пожелание – это выбрать просто какие-то качественные фотографии, потому что сейчас они затемненные, некачественные, очень маленькие. Лучше фотографии делать побольше и покачественнее. Даже в Яндекс и Google можно найти гораздо лучше фотографии по качеству. То же самое касается и всей графики, которая у вас в шапке. Здесь, допустим, по центру более и менее качественная, с краю сильно выбивается графика по качеству, либо вы ее так обработали и слишком светлой сделали, менее контрастной. Ну вот, в принципе, такие рекомендации и по юзабилити, как я уже говорил, лучше избавиться от рекламы и сделать только качественный по контенту сайт, что бы он был для людей. Если уж хотите рубить бабло, скажем, на сайте, то не нужно там заморачиваться на контенте. Делайте просто нереальное количество банеров и зарабатывайте, но не смешивайте данные понятия – это несколько не то, скажем. Ладно, не будем отходить от темы дизайна. На этом разбирать данный сайт я закончу и перехожу к следующему.

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

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

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

Следующее по сетке. Все у вас здесь в хаотичном порядке, вы просто накидали все элементы сайта, графику, элементы интерфейса, тексты, все расположено непонятно как. Вроде бы есть какие-то три колонки, но они расставлены немного, скажем так, интуитивно, в шапке вообще непонятно что творится. Добавьте обязательно сетку и выровняйте все по ней, выровняйте по одному какому-то краю, по центру, либо по левому. Плюс добавьте побольше свободного пространства, что бы было как-то проще воспринимать объекты, потому что они у вас прям липнут к границам различных блоков, а должно быть гораздо больше, если у вас здесь порядка 3-5 пикселей, то должно быть 30-40 пикселей между разными блоками – так будет информация проще восприниматься. Можно больше, но вряд ли меньше.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Всем пока!

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



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

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