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

Хотите чтобы я персонально делал разбор ваших сайтов? Тогда вам сюда 😉

Итак, Александра, добрый день. Давайте приступим к разбору ваших работ. Как обычно я буду показывать различные ошибки и недочеты от самых больших к более мелким, потому что, избавляясь от больших работ, ваша работа становится более целостная, более дорогая. Соответственно, вы сможете продавать их за гораздо большие деньги, если будете исправлять изначально большие ошибки, и потом только мелкие. Почему? Потому что, когда люди заходят на любой сайт, они изначально видят, им в глаза бросаются самые большие косяки. Соответственно, если сначала вы будете работать над мелкими и закрывать глаза на большие, то соответственно, никогда не сможете продать свои работы дорого и ваши работы будут смотреться не профессионально. Людей они будут немного раздражать.

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

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

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

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

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

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

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

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

Следующий момент, который я бы вам рекомендовал – это не делайте повторные такие copy/pust – ные блоки, то есть, точно такой же повторяющийся заголовок, как в предыдущем блоке. Текст с картинкой, поменяйте картинку, поменяйте заголовок, поменяйте сам контент, текст, но оставьте все, скажем, начертания, размер шрифтов, тип и т.д. То есть, структура пускай сохраняется та же, а контент непосредственно меняется. Почему? Потому что, когда человек будет видеть, допустим, такую работу как сейчас, он будет воспринимать ее как будто, я не знаю, незаконченной, как будто это какая-то скопированная работа. Когда у вас будут постоянно разные картинки и у вас будут разные заголовки и т.д., сайт будет смотреться уникальным и как будто он уже завершенный на 100%. И заказчики такие сайты принимают гораздо быстрее и охотнее, то есть, такая небольшая фишечка. Ну и опять же, здесь пустое пространство просто уберите, не нужно его так оставлять.

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

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

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

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

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

Следующий момент. Вот здесь вот, вот в этом блоке с карточкой товара, с продукцией необходимо выровнять все по одной линии, по левому краю. Пусть у вас картинка идет, соответственно весь текст необходимо по этой линии выровнять слева, то есть подзаголовок, название самой продукции, ценник, кнопочка, тогда будет смотреться гораздо лучше и гармоничнее, легче восприниматься. Потому что сейчас все в разброс, такого быть не должно. Случайный товар – это как бы название подкаталога. Я бы рекомендовал разместить непосредственно по центру. Описание товара слишком большое сейчас. Шрифт я рекомендую сделать 14 пикселей, будет вполне достаточно. Лучше сделать ссылку, либо кнопку «читать подробнее». Потому что люди, когда просматривают бегло какие-то товары, они всю информацию не читают, только когда просмотрев там, допустим, 50 каких-то товаров, выбирают 1-2 и начинают их подробно изучать. Соответственно, изначально не нужно такой большой текст делать. Когда уже у вас будет какая-то страничка с полным описанием товара, тогда можно, да, но на страничке с каталогом этого делать не нужно.

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

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

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

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

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

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

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

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

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

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

Здесь, в принципе, все хорошо.

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

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

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

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

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

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

Так, здесь, в принципе, более и менее.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 

 

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



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

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