Веб дизайн для начинающих. Создание дизайн-макета

Веб дизайн для начинающих. Создание дизайн-макета

Урок №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. Онлайн курсы веб-дизайна. Свободное плавание

Веб дизайн для начинающих. Создание дизайн-макета

Урок №1. Веб-дизайн начало. Введение в профессию

Веб дизайн для начинающих. Создание дизайн-макета

Урок №2. Основы веб-дизайна. Создание прототипа

Веб дизайн для начинающих. Создание дизайн-макета

Урок №3. Цвет в веб-дизайне. Работа с цветом и изображением

Веб дизайн для начинающих. Создание дизайн-макета

Урок №4. Веб-дизайн обучение. Подбор шрифтов и иконок

Веб дизайн для начинающих. Создание дизайн-макета

Урок №5. Школа веб-дизайна. Дизайн веб-интерфейса

Веб дизайн для начинающих. Создание дизайн-макета

Урок №6. Веб-дизайн с нуля. Создание главного экрана

Веб дизайн для начинающих. Создание дизайн-макета