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

Здесь я могу разобрать также и ваши работы

Итак, Алексей, привет!

Приступаем к разбору твоих работ.

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

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

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

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

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

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

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

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

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

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

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

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

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

Вообще, я бы полностью сменил цветовую гамму исходя из тематики сайта и сделал что-то более в коричневых оттенках, потому что здесь очень много различного камня, дерева, кожи и во всех тих материалах присутствует коричневый цвет и ассоциация у людей будет гораздо лучше, если добавить какие-то текстуры на сайт, то будет еще лучше, еще круче. Поэтому, как бы основное, скажем, что бы рекомендовалось сделать по дизайну – изменить цветовую гамму. Следующий момент, это непосредственно по поводу, опять же логотипа, если компания не какая-то мегакрутая, которую все знают, необходимо уменьшить в 1,5-2. Следующее, контакты лучше перенести в правый угол, потому что их все привыкли видеть именно там. Не посередине, а справа. А вот эту вот акцию обычно вешают куда-то на первый экран, непосредственно в центре, но не в шапке. Потому что люди привыкли именно, здесь и наблюдать, а дизайн необходимо делать именно так, как привыкли видеть большая часть пользователей, а не так, как нам, дизайнерам, хочется. Следующее. Опять же, цвета вот эти вот сменить у кнопки, плюс убрать вот эту обводку, потому что, это сильно дешевит дизайн. Менюшку чуть-чуть сделать по высоте побольше, буквально там на 10-15 пикселей, будет смотреться лучше. Почему? А потому что между пунктами меню очень большое расстояние по горизонтали, а по вертикали очень маленькое и какой-то дисбаланс получается. Не совсем красиво. Следующее, я бы рекомендовал фоновую картинку подразмыть, скажем наложить узор и сделать эффект на подобии, сейчас вам покажу, как у меня на сайте, это сейчас в тренде, в моде. То есть немножко подразмывается позади картинка, накладывается вот такая небольшая сетка, если, допустим, увеличить размер, так что-то у меня не увеличивается. Здесь мы видим, что она вот такая сеточка, с помощью узоров в фотошопе можно слой наложить и получиться вот такой вот эффект. Смотреться будет гораздо лучше. Вот эту вот белую плашку, заливку лучше убрать, а текст сделать, соответственно, белым. И восприниматься все будет гораздо проще, легче. Плюс, человек не будет терять вот этот кусок картинки, которую хотелось бы посмотреть. Весь пустой фон за текстом будет виден, сейчас же порядка 35-40% картинки просто-напросто не видно.

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

Дальше, вот этот фон картинки необходимо убрать, просто оставить фон – будет гораздо лучше. То же самое касается всех остальных картинок. Плюс, на лендинге больше увеличивать расстояние между вот блоками с различной информацией, то есть не 25% примерно пикселей, как сейчас здесь, а порядка 50-60, то есть вполне будет хорошо смотреться, если будет такое расстояние. Плюс, сделать заголовки гораздо больше, сейчас они 33,6 пикселей, а вполне подойдет там 48 пикселей. Смотреться будет хорошо.

Так, если применить вот эти все рекомендации ко всем блокам, станет сразу более красиво. Так здесь я бы рекомендовал убрать фоновую картинку, станет чуточку лучше, либо сделать какую-то фоновую заливку с использованием темно коричневого, либо какого-то фона и цветовой гаммы станет чуточку лучше. Фон лучше оставить светлый, но брать не прозрачный, а что бы его было хорошо видно и кнопку желтый с золотистым будет классно сочетаться. Здесь я бы не рекомендовал использовать векторную графику, так как у нас здесь в основном растровая, соответственно лучше придерживаться какого-то одного стиля. Соответственно, если у вас прошло 70% лендинга и вы везде использовали растровую графику, не векторную и не flat стиль, то, соответственно,  лучше продолжать ее использовать. То есть, заменить картинки на какие-то растровые, будет смотреться лучше. Допустим что-то из Web 2.0 лучше подойдет сюда, плюс, уменьшит размер шрифта, что бы он не был таким большим. То же самое касается вот этих вот иконок, вот эти стрелочки я рекомендую в раза 1,5-2 меньше, они, в принципе, будут передавать ту же самую суть, которую и сейчас передают смысловую нагрузку, но при этом не будут привлекать к себе столько внимания. Ну и по поводу текста и иконок те же самые рекомендации, то есть, стиль изменить, ну и здесь то же самое, все те же самые рекомендации, что давал чуточку выше. Просто проработать, доработать и данный лендинг станет гораздо лучше.

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

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

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

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



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

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