Урок №7. Веб дизайн для начинающих. Создание дизайн-макета
Очень насыщенный урок, потому что мы продолжим рисовать макет. На занятии мы сперва покажем на примерах разделы сайта, которые чаще всего используют дизайнеры в своих проектах.
После этого Антон расскажет и покажет, что же такое модульные сетки и как их нужно применять в своих проектах, а после этого расскажет, что такое адаптивный макет и адаптивный сайт (все покажем на примерах реальных сайтов).
Практика будет обширной, т.к. Антон закончит работу над своим проектом, дорисовав его до самого конца.
Видео-уроки:
1)Модульные сетки дизайн-макета.
Одним из самых важных инструментов в веб-дизайне являются модульные сетки, позволяющие упорядочить и структурировано расположить весь объем вашей информации. Таким образом, используя их, мы можем из хаоса и груды информации создать порядок.
2)Адаптивный веб-дизайн.
Адаптивность сайта – это его способность корректно отображаться на всех устройствах (стационарные компьютеры, ноутбуки, планшеты, смартфоны).
3)Примеры разделов сайта.
-О нас
-Портфолио
-Продукция/услуги
-Команда
-Отзывы
-Форма заявки
-Футер
4)Создание дизайн-макета в фотошопе (Adobe Photoshop).
Самые часто задаваемые вопросы на уроке №7. Веб дизайн для начинающих. Создание дизайн-макета
1. Какую ширину стоит использовать для макета, если делать десктопный вариант?
На начальных порах советуем делать универсальный макет, который "убьет двух зайцев" - и стационарные компьютеры, и ноутбуки. Делайте макет шириной 1920 пкс, а контент в нем помещайте по центру на ширину в 1170 пкс. Все фоны и второстепенные фотографии могут выходить за пределы 1170 пкс, таким образом они заполнят пространство на Full HD мониторах.
2. Сколько колонок в модульной сетке лучше использовать?
Оптимальное количество колонок - 12, т.к. на такой сетке можно создать и 3х-колончатую структуру, и 4х, и 2х. Т.к. размеры мониторов растут, то скорее всего скоро будут использоваться 18-ти и 24х-колончатые сетки.
3. Стоит ли создавать сетки самостоятельно?
На наш взгляд, нет. За вас это сделали профессионалы – люди, которые в дизайне и проектировании проработали не один год, и они не просто создают так, как им кажется верным, а они точно знают, какую оптимальную ширину колонки и межколонника нужно использовать. Если вы только-только начинаете создавать макеты, то не пытайтесь привнести что-то кардинально новое, сперва научитесь работать по уже существующим схемам и принципам.
4. Обязательно ли использовать горизонтальный ритм в сетках?
Нет, не обязательно. Горизонтальные направляющие используются довольно редко, это скорее дело привычки. Вы можете создать самостоятельно блок из горизонтальных линий, используя встроенную сетку в фотошопе. Почитайте полезную статью по работе с сетками и направляющими.
5. Часто ли заказчики просят адаптивный дизайн?
Все зависит от нескольких факторов:
- от самого заказчика (насколько он "прошаренный" и ведет ли аналитику - с каких устройств пользователи заходят на сайты его тематики чаще всего); поверьте, если заказчики, которые не знают, что такое "адаптивный сайт";
- от бюджета (даже если заказчик знает, что ему нужен адаптив, он может от него отказаться из-за ограниченного бюджета на проект); вы, конечно, можете предложить ему сделать адаптив в подарок, и тогда хорошо себя зарекомендуете, но в будущем, скорее всего, этот заказчик будет всегда у вас просить подобные подарки;
- от самого проекта (есть проекты, которые не требуют тех же мобильных версий, т.к. основной поток ЦА идет именно со стационарных компьютеров).
6. Достаточно ли для адаптива сделать десктопную и мобильную версию?
Это зависит от разработчика. Есть верстальщики, которые с легкостью сделают плавный переход между десктопным макетом и мобилкой, но это человек, который имеет большой опыт работы с адаптивом и хорошо ладит с bootstrap + знает UX. Тут, на самом деле, многое зависит от заказчика – если к вам обращается клиент и говорит, что ему нужен адаптив, то чаще всего он говорит конкретно: "мне нужен десктоп и мобилка" или "мне нужен адаптивный макет – желательно и на ноутбук, и на планшет, и на смартфон".
Мы разобрали модуль №7. Веб дизайн для начинающих. Создание дизайн-макета
Дальше интересней и насыщенней, следующей урок - Свободное плавание. Подписывайся чтоб ничего не пропустить.
Урок №8. Онлайн курсы веб-дизайна. Свободное плавание
