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

Кто еще хочет разбор работ? :)

Добрый день, Ирина!

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

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

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

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

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

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

Второй момент по поводу этих рамок. Данные рамки должны быть одинаковые со всех сторон, то есть, если у вас, допустим, сверху, (давайте сейчас увеличим), здесь какое-то количество пикселей, там, 2 пикселя, грубо говоря, соответственно, то и слева точно такое же количество пикселей должно быть. А у вас порядка четырёх — то есть, в 2 раза больше. Смотрится это некрасиво, не профессионально. То есть, как делать обводку? На сам деле очень просто делать в фотошопе. На первоначальном этапе я не рекомендую рисовать там всякие фигуры, с помощью…пока вы, скажем, на глаз не определяете ровно это вот расстояние, можно вообще от фигуры избавиться. Удалим. Так, ну давайте сейчас немножечко проредактирую размер. Представим, что у нас картинка будет изначально вот такого вот размера. Как сделать у нее обводку? Заходите в системы, вот такой вот значок, выбираете «обводка» вылезает вот такое вот вспомогательное окошко. Здесь вставляете 1- 2 пикселя, выбирайте цвет. Можно немножко убавить непрозрачность, поиграться с цветовыми параметрами и будет смотреться красиво и гармонично. То есть, если вы посмотрите вот, допустим, вот эта рамка гораздо приятнее смотрится, чем вот эти вот жирные и не совсем пропорциональные, и ровные. То есть, если вы сделаете ко всем вот такие вот рамочки, смотреться будет гораздо лучше.

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

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

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

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

Что касается текста, то в заголовках необходимо сделать пожирнее. Уже сразу будут к себе привлекать больше внимания. Шрифт можно сделать 14 пикселей поменьше для чтения, и здесь необходимо сделать чуть побольше свободного пространства слева и справа. Уменьшив текст — это будет смотреться вполне гармонично. Ну, что касается футера, в принципе, всё хорошо, единственное, необходимо уменьшить по размеру, потому что слишком много свободного. Вот такие вот замечания по второму сайту. Переходим к следующему.

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

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

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

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

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

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

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

Картинка классная, рамочка хорошая. Очень просто и понятно. Единственное, что необходимо сделать, вот эти стрелочки заменить, допустим, на какое-то сочетание коричневых цветов, то есть, тёмный, светлый оттенок. Будет смотрится гораздо лучше. При этом подвинуть их немножечко налево, здесь направо наоборот, чтобы было какое-то свободное пространство примерно одинаковое. Вот здесь вот, допустим, линия у вас идёт, здесь получается порядка 10-15 пикселей, соответственно, здесь то же самое должно быть слева 20 пикселей, тогда смотреться будет гармонично, а иначе, кажется, как будто вот это элемент просто прилеплен к краю.

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

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

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

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

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

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

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

 

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



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

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