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

P.s. на тренинг где вы можете получить разбор ваших работ осталось еще пара мест…

Итак, приветствую Вас Николай!

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

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

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

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

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

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

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

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

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

По поводу логотипа. Картинка более и менее нормальная. Правильно сделали, что используете везде векторную графику — это плюс.

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

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

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

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

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

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

Переходим к четвертой работе. Опять же здесь такие же ошибки. Как вы видите, на всех дизайнах они практически одинаковые. Соответственно, если вы их исправите, то все работы станут гораздо лучше. Опять же, вам необходимо написать, о чем компания и какие услуги предоставляет. Указать контактную информацию, и кнопочку с обратным звонком, для удобства клиентов. Картинку необходимо сделать поменьше по высоте. Фон лучше использовать либо белый, либо серый. Картинку лучше по краям размыть, для того чтобы происходил плавный переход или же картинку заменить, сделав ее на всю ширину макета. Смотреться будет гораздо гармоничнее, и отображаться на всех разрешениях мониторов. Обрезать по краям нельзя, если вы все же так сделали, то необходимо сделать плавный переход в фон. Опять такая же ошибка, как и в предыдущих работах. Необходимо все выравнивать по одной линии. Меню с контентом выравнена, но картинка в шапке нет. Текст меню сделать поменьше, опять слишком большой размер. Закругления лучше убрать, потому что с точки зрения верстки, это будет тяжело сделать. И не совсем практично и красиво смотрится. Расстояние между словами границ должно быть одинаковое. Социальные кнопки под меню вставлять не нужно, так как эта справочная информация способна увести пользователя с сайта, и вместо того, чтобы человек заказал здесь какой-нибудь диван, либо мебель, он идет в социальную сеть. Там начинает общаться с друзьями, и вообще забывает о своем заказе. Соответственно, лучше всего делать вот эти кнопки бесцветными, помещать, непосредственно, в футере. Если посмотрите на самые крупные интернет магазины, то так сделано везде. Придерживайтесь таких правил, вместо того чтобы придумывать, необходимо смотреть уже на лучших. Почему? Потому что там сидит целая команда из десятков сотен человек, которые тестируют все цвета, расположения и так далее. Вместо того, чтобы что-то придумывать, возьмите уже готовую схему и сделайте. Будет точно также и гораздо лучше. Шрифт меню сделайте поменьше, точно так уменьшите по высоте. Вместо закругления лучше сделать сплошную заливку, будет смотреться чуточку лучше. Левый блок должен быть одинаков по структуре. Если в левом блоке у вас отступ порядка 40 — 50 пискелей, то соответственно, в правом должно быть точно такой же отступ, то есть, по структуре они должны быть одинаковые. Единственно, что может различаться, это контент. Соответственно, здесь какое-то меню с текстом, а здесь примеры каталога. Но, тем не менее, структура у блоков должна быть одинаковая, чтобы людям проще было воспринимать информацию. Тоже самое должно касаться свободного пространства, слева и справа от текста. В левом блоке оно минимальное, а в правом гораздо больше. Увеличьте расстояние между текстом и картинками, и визуально разграничьте расстояние между блоками. Это можно сделать с помощью свободного пространства или с помощью разделения какой-то линией. Можете использовать разные варианты. Заголовок сделайте чуть-чуть пожирнее, и выровняйте расстояние.

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

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

По поводу социальных кнопочек я уже говорил. Лучше их перенести в футер и обесцветить. По поводу кнопки тоже самое. Если у вас фон темный, то кнопочку лучше сделать светлой, вообще какого-то другого цвета. И здесь, допустим, желтый будет смотреться самое то. Опять же, я не рекомендую использовать, если вы пока не умеете, единые какие-то цвета. Например, красное на красном. В принципе, это можно делать.  Но опять же, если вы хотите сделать линию, то сделайте это как теснение. То есть, делаете две линии, одну смещаете на пиксель вверх, другую на один пиксель вниз и выбираете изначально пипеткой цвет. Давайте я вам в фотошопе сейчас покажу как это сделать. Выбираете инструмент линию, но перед этим с помощью инструмента пипетка определяете цвет фона. Затем переходите обратно на линию, и рисуете первую линию. У меня получилось два пикселя, необходимо в один сделать. Зажимаете Shift, чтобы линия была прямая, и рисуете. В слоях сразу ее дублируете, верхний слой делаете чуточку темнее, нижний слой делаете чуточку светлее. Переходим на инструмент перемещение, смещаем его на вот эту линию вниз, и у нас получается такой эффект тиснения. Но сейчас мы видим, что слишком сильно получилось свечение нижней линии. Необходимо чуть-чуть уменьшить. Так вот будет самое то. После этого растрируем данный текст в новый слой и объединяем. Такие линии будут гораздо приятнее и комфортнее смотреться для глаза. То есть, визуально вы отделили, и при этом они не бьют так сильно по глазам, как вот эти красные линии. Так рекомендую делать. Увеличьте свободное пространство между линиями и заголовками, и между блоками по вертикали. Так будет гораздо лучше. Ну и рекомендации по тексту. Везде используйте один шрифт для чтения, одного размера и одного начертания. У вас везде совершенно разные шрифты и разные размеры. Где-то невытянуты. Такого быть не должно. Старайтесь чтобы человеку было максимально легко и комфортно воспринимать текст. Люди, когда будут заходить на сайт, то в самую последнюю очередь они будут думать о том, кто создавал этот дизайн, скорее всего вообще не будут думать. Если же они увидят такую информацию, что текст неудобен для чтения, то они просто отматерят создателя сайта и все. Как бы люди такие интересные существа, что если все хорошо, то они этого не замечает. Когда все плохо, то соответственно море критики. Поэтому я рекомендую делать как рассказывал в курсе. Придерживаться этих правил по тексту. То есть, один шрифт для всего контента, 14-18 пикселей самое то.

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

Ну что ж, на этом все. Спасибо за внимание. Желаю вам успешно все доработать, и сделать первую продажу!

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



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

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