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

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

Приветствую Вас, Надежда!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Следующий момент. У вас в шапке слишком много текста. Вот это слово «Что одеть?» вообще можно убрать, просто оставить вот этот вот момент, но уменьшить немного текст и выровнять по левому краю, смотреться будет лучше. Логотип я бы сделал полностью белым или вот таким темно-зеленым, чтобы не привлекало к себе много внимания, потому что если это какой-то мировой бренд в виде Coca-Cola, Snikers, Adidas и Nike, то не стоит к нему привлекать много внимания.

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

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

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

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

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

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

На этом все. Спасибо за внимание. Если что – пишите.

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



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

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