Перейти к содержимому
  • Блок 4 - Наращивание дизайна на каркас

    Используя имеющиеся макеты лендингов, на которых спроектированы идеальные предложения, Вы нарастите толковый дизайн, используя простые техники и правила!

    7 занятий в этой категории

    1. Использование сетки сайта

      16 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_06/16_%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%B5%D1%82%D0%BA%D0%B8_%D1%81%D0%B0%D0%B9%D1%82%D0%B0.mp4.22cd67777d150347597f634626bc7f1a.mp4 4 До 5 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Frazrabotka-landingov-v-adobe-muse%252Fblok-4-narashhivanie-dizajna-na-karkas%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

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

      Если вы новичок в программе, рекомендуем вместо гибкого значения ширины указывать для начала постоянную ширину. А дальше осталось настроить количество столбцов и ширину страницы. Для всех проектов, которые я разрабатываю лично, устанавливаю стандартную сетку, доказавшую свою жизнеспособность на протяжении 2-х лет точно. Параметры – ширина 960 пикселей и кол-во столбцов – 12. Ширина одного столбца – 8 пикселей. От средника тоже всегда избавляйтесь, он только путает человека.

      Обратите внимание на доп.настройки: нужно убрать все поля, достаточно изменить только первый параметр, а далее все изменится автоматически.

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

      О том, какие преимущества несет сетка, вы узнаете позже. Рассмотрим еще такое понятие, как типовые сетки. Под этим понятием я подразумеваю некий популярный для новичков набор столбцов.

      • 0 комментариев
      • 273 просмотра
    2. Управление отступами и размерами элементов

      17 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_06/17_%D0%A3%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC_%D0%BE%D1%82%D1%81%D1%82%D1%83%D0%BF%D0%B0%D0%BC%D0%B8_%D0%B8_%D0%B2%D0%BE%D0%B7%D0%B4%D1%83%D1%85%D0%BE%D0%BC.mp4.653aa4fbb13529a65799f2cbc37f4348.mp4 11 До 15 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Frazrabotka-landingov-v-adobe-muse%252Fblok-4-narashhivanie-dizajna-na-karkas%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

      1. Проблема отступов между элементами

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

      • Размеры любого элемента задаются по сетке

      Например, сделаем кнопку. Создаем текстовый фрейм, пишем "Кнопка", меняем цвет текста и фона. Как нам понять, какого размера должна быть кнопка? Ваша задача сделать так, чтобы высота и ширина кнопки были кратны сетке.

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

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

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

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

      Самое главное – не оставлять расстояние между элементами в пределах от 0 до 40 пикселей, а также от 40 до 80 пикселей. Либо оставляем на расстоянии 40 пикселей (середина), либо 80. Других вариантов быть не должно.

      Бывают случаи, когда одной высоты недостаточно. Если мы ставим расстояние между двумя блоками, то в данном случае мы будем брать расстояние 160 пикселей, то есть 2 по 80 пикселей.

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

      • 0 комментариев
      • 294 просмотра
    3. Связка блоков между собой

      18 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_06/18_%D0%A1%D0%B2%D1%8F%D0%B7%D0%BA%D0%B0_%D0%B1%D0%BB%D0%BE%D0%BA%D0%BE%D0%B2_%D0%BC%D0%B5%D0%B6%D0%B4%D1%83_%D1%81%D0%BE%D0%B1%D0%BE%D0%B9.mp4.daeeb8cffeaf77912f5ef461152a2b1f.mp4 5 До 5 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Frazrabotka-landingov-v-adobe-muse%252Fblok-4-narashhivanie-dizajna-na-karkas%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

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

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

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

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

      19 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_06/19_%D0%9F%D0%BE%D0%B4%D0%B1%D0%BE%D1%80_%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B9_%D1%81%D1%85%D0%B5%D0%BC%D1%8B_%D0%BB%D0%B5%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3%D0%B0.mp4.259d22d9e917c8e186582da3f52fc1fd.mp4 18 До 30 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Frazrabotka-landingov-v-adobe-muse%252Fblok-4-narashhivanie-dizajna-na-karkas%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Высокая сложность Скрыть

      Когда вы перенесете макет из Balzamig в Adobe Muse,  будет готово текстовое наполнение, будет создан логотип, и в целом у вас будет еще огромное количество работы, вы столкнетесь с подбором цветовой схемы. Цветовая схема – это определенный набор цветов, который полностью описывает дизайн лендинга. В своих работах я использую достаточно ограниченный список сервисов, позволяющих использовать цветовые схемы, но их будет более чем достаточно.

      1. color.adobe.com
        Его задача заключается в подборе оттенков и цветов к конкретному цвету. Достаточно передвигать бегунок в цветовом блоке, чтобы сервис автоматически подобрал оттенки. Также есть выбор разных цветовых систем. По умолчанию включена "Последовательная".

        Это значит, что в зависимости от движения бегунка остальные объекты на цветовом круге будут расположены именно таким образом. Если выберем "Монохромную", то все остальные элементы несколько изменят свое положение.

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

        Открыв фотографию, сервис может определить так называемое "Цветовое настроение" и подбирать идеально сочетаемые цвета. Если вы испытываете проблему даже с подбором базового оттенка, то с помощью этого сервиса вы решите данную проблему, загрузив понравившуюся фотографию.
         
      2. Colllor.com
        Фишка сервиса в том, что он позволяет быстро подобрать схожие оттенки к уже имеющимся. Сервису нужно сообщить hex-код – это название какого-либо цвета или оттенка на языке машины. Его вы можете получить прямо Adobe Muse. Просто нажимаете на предмет, переходите в настройки заливки, копируете его, вставляете в сервис данный код.

        Далее пройдет некоторое время, сервис предложит все разнообразие оттенков от самого темного до самого светлого. Ваша задача, используя курсор, проводить по лесенке и сравнить оттенки с исходным. Все внимание должно быть обращено под двигающийся курсор на пару кругов. Таким образом вы можете подобрать либо более светлый, либо более темный оттенок. Самое главное – благодаря данному сервсу вы никогда не столкнетесь с неестественно подобранными цветами на своем сайте.
         
      3. flatcolors.net
        Здесь есть уже подобранная коллекция цветов. Пролистывая страницу, вы можете подобрать базовый оттенок для сайта. Щелкаете на цвете, у вас копируется hex-код. Далее мы можем перейти в предыдущий сервис и подобрать дополнительные оттенки и цвета.

      Но для нас все-таки самое главное – научиться переносить цветовую схему в программу Adobe Muse. В программе есть функция "цветовой набор". Он также есть в adobecolors. На странице представлены наборы цветов, которые ранее выбирали люди. Вы можете выбрать какие-то из них.

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

      Чтобы перенести в Muse цветовую схему, сделайте скриншот определенной схемы. Далее скопируйте палитру, зайдите в программу и нажмите "Вставить". Далее эту цветовую палитру нужно перевести в палитру программы. Переходим в "Образцы", удаляем все установленные по умолчанию, нажимаем в данной области и выбираем "Удалить все неиспользуемые образцы". У вас останется 4 образца: черный, белый, серый и отсутствие цвета.

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

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

      • 0 комментариев
      • 396 просмотров
    5. Фотоматериалы для лендинга

      20 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_06/20_%D0%A4%D0%BE%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%B0%D0%BB%D1%8B_%D0%B4%D0%BB%D1%8F_%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F.mp4.365114c56c7dbc91682edf8a988036f8.mp4 8 До 10 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Frazrabotka-landingov-v-adobe-muse%252Fblok-4-narashhivanie-dizajna-na-karkas%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

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

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

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

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

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

      Вбиваете в поиске тот запрос, что мы писали на фотостоках. Сервис автоматически найдет все фотографии со всех фотостоков по данному запросу.

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

      • 0 комментариев
      • 349 просмотров
    6. Создание градиентных эффектов

      21 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_06/21_%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D1%8D%D1%84%D1%84%D0%B5%D0%BA%D1%82%D0%BE%D0%B2_%D1%81_%D0%B3%D1%80%D0%B0%D0%B4%D0%B8%D0%B5%D0%BD%D1%82%D0%B0%D0%BC%D0%B8.mp4.8790896c3ac938b8eb8661de655a1834.mp4 8 До 10 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Frazrabotka-landingov-v-adobe-muse%252Fblok-4-narashhivanie-dizajna-na-karkas%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      Еще один популярный для меня инструмент, который значительно упрощает работу с дизайном – это тонировка. Это, по своей сути, возможность наслаивать элементы друг на друга. Если у нас есть 2 прямоугольника (кнопка и задний фон),то кнопка может быть либо на переднем фоне и будет видна, либо на заднем фоне и не будет видна.

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

      Берем некий прямоугольник, который используется в качестве заливки блока, заливаем блок фотографией. Далее появляется проблема - фото и текст сливаются. Это можно решить быстро и красиво с помощью тонировки.

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

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

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

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

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

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

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

      • 0 комментариев
      • 253 просмотра
    7. Ускорение работы через стили

      22 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_06/22_%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9_%D0%B2_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B5.mp4.cea9331ee619ab1f7b2042a85fcce4d8.mp4 8 До 10 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Frazrabotka-landingov-v-adobe-muse%252Fblok-4-narashhivanie-dizajna-na-karkas%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть
      • 0 комментариев
      • 220 просмотров
×