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

Бесплатных разборов больше не делаю, только на тренинге по прокачке навыков 😉

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

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

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

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

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

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

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

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

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

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

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

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

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

Первое что необходимо сделать это заменить цвет на какой-то, который будет у вас в цветовой гамме – желтый, зеленый, синий, неважно, короче говоря, который вы оставите.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Здесь вот то же самое, тени необходимо убрать, обводки в один пиксель серым цветом будет вполне достаточно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

По поводу типографики. Очень большие везде размеры шрифтов у вас. Не нужно так делать. Вполне хватит для чтения 14-18 пикселей размера шрифта, для заголовков, там не знаю 21-36 пикселей, пределы сейчас называю. У вас заголовок практически такой же, даже меньше по размеру, как текст для чтения под фотографиями. Но заголовочки должны привлекать к себе внимания, а текст читаться после того, как человек прочитал заголовок. У вас же идет несколько наоборот.

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

Так что еще… Ну и здесь вот по кнопке, не стоит делать на кнопке текст в две строчки, это тяжело воспринимается, тяжело читается. Просто, словосочетания «Обратный звонок» будет достаточно. Люди и так понимают, что они получат, нажав по кнопочке, это же слово «Заказать звонок» можно спокойно убрать и по высоте кнопка уменьшится, соответственно сэкономите свободное пространство.

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

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

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

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

Спасибо большое за внимание и до встречи в следующем видео!

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



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

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