+7(919)219-14-03
Звоните прямо сейчас
Социальные сети
Веб дизайн для начинающих. Создание дизайн-макета

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

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

7 июля 2021 в 17:30

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

После этого Антон расскажет и покажет, что же такое модульные сетки и как их нужно применять в своих проектах, а после этого расскажет, что такое адаптивный макет и адаптивный сайт (все покажем на примерах реальных сайтов).

Практика будет обширной, т.к. Антон закончит работу над своим проектом, дорисовав его до самого конца.

Видео-уроки:

https://zen.yandex.ru/media/id/5f5a7a2e186bea34b535fa36/veb-dizain-dlia-nachinaiuscih-sozdanie-dizainmaketa-609424e9a5f87026b1b6c30e

1)Модульные сетки дизайн-макета. Одним из самых важных инструментов в веб-дизайне являются модульные сетки, позволяющие упорядочить и структурировано расположить весь объем вашей информации. Таким образом, используя их, мы можем из хаоса и груды информации создать порядок.

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

3)Примеры разделов сайта. -О нас
-Портфолио
-Продукция/услуги
-Команда
-Отзывы
-Форма заявки
-Футер

4)Создание дизайн-макета в фотошопе (Adobe Photoshop).

https://zen.yandex.ru/media/id/5f5a7a2e186bea34b535fa36/veb-dizain-dlia-nachinaiuscih-sozdanie-dizainmaketa-609424e9a5f87026b1b6c30e

Самые часто задаваемые вопросы на уроке №7. Веб дизайн для начинающих. Создание дизайн-макета

1. Какую ширину стоит использовать для макета, если делать десктопный вариант?

На начальных порах советуем делать универсальный макет, который "убьет двух зайцев" - и стационарные компьютеры, и ноутбуки. Делайте макет шириной 1920 пкс, а контент в нем помещайте по центру на ширину в 1170 пкс. Все фоны и второстепенные фотографии могут выходить за пределы 1170 пкс, таким образом они заполнят пространство на Full HD мониторах.

2. Сколько колонок в модульной сетке лучше использовать?

Оптимальное количество колонок - 12, т.к. на такой сетке можно создать и 3х-колончатую структуру, и 4х, и 2х. Т.к. размеры мониторов растут, то скорее всего скоро будут использоваться 18-ти и 24х-колончатые сетки.

3. Стоит ли создавать сетки самостоятельно?

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

4. Обязательно ли использовать горизонтальный ритм в сетках?

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

5. Часто ли заказчики просят адаптивный дизайн?

Все зависит от нескольких факторов:
- от самого заказчика (насколько он "прошаренный" и ведет ли аналитику - с каких устройств пользователи заходят на сайты его тематики чаще всего); поверьте, если заказчики, которые не знают, что такое "адаптивный сайт";

- от бюджета (даже если заказчик знает, что ему нужен адаптив, он может от него отказаться из-за ограниченного бюджета на проект); вы, конечно, можете предложить ему сделать адаптив в подарок, и тогда хорошо себя зарекомендуете, но в будущем, скорее всего, этот заказчик будет всегда у вас просить подобные подарки;

- от самого проекта (есть проекты, которые не требуют тех же мобильных версий, т.к. основной поток ЦА идет именно со стационарных компьютеров).

6. Достаточно ли для адаптива сделать десктопную и мобильную версию?

Это зависит от разработчика. Есть верстальщики, которые с легкостью сделают плавный переход между десктопным макетом и мобилкой, но это человек, который имеет большой опыт работы с адаптивом и хорошо ладит с bootstrap + знает UX. Тут, на самом деле, многое зависит от заказчика – если к вам обращается клиент и говорит, что ему нужен адаптив, то чаще всего он говорит конкретно: "мне нужен десктоп и мобилка" или "мне нужен адаптивный макет – желательно и на ноутбук, и на планшет, и на смартфон".

Мы разобрали модуль №7. Веб дизайн для начинающих. Создание дизайн-макета

Дальше интересней и насыщенней, следующей урок - Свободное плавание. Подписывайся чтоб ничего не пропустить.

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

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


Подарок внутри! Подписка на обновление блога по Web-дизайну.
Бесплатный подарок для подписчиков нашего блога->
Курсы по Веб-дизайну!
* Поля, обязательные для заполнения
Нажимая "Подписаться", Вы принимаете условия обработки персональных данных.
Теги: Web-дизайн

Другие статьи блога

Жидкие формы
Жидкие формы
3D графика и реализм
3D графика и реализм
Основы веб-дизайна. Создание прототипа
Основы веб-дизайна. Создание прототипа

Наверх
array(5) { ["id"]=> int(0) ["ip"]=> string(12) "3.85.167.119" ["language"]=> string(2) "en" ["gmt"]=> int(0) ["guest_id"]=> string(32) "2c40c1d53a3108c76933e14743eb55eb" }