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

Если хотите видео-разборы ваших работ — записывайте на тренинг

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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