Мы расскажем о том, какие самые популярные разделы одностраничных сайтов существуют и используют в своей работе веб-дизайнеры, а затем покажем эти разделы на примерах реальных сайтов. Немного затронем тему размеров макетов и модульных сеток для прототипов, а после этого Антон покажет, как создать прототип с помощью ресурса wireframe.cc.
Видео-уроки:
1)Прототип сайта и его задачи.
В этом видео мы расскажем о том, что такое прототип сайта, для чего его нужно создавать.
Что такое прототип сайта? Задачи прототипа сайта
2)Инструменты для создания прототипов.
Существует большое множество программ и сайтов, которые позволяют создавать прототипы. Перечислим самые популярные и удобные инструменты для создания прототипов:
1. Сайты-редакторы для создания онлайн-прототипов.
- www.moqups.com
- www.balsamiq.com
- www.wireframe.cc
2. Программы из пакета Adobe.
3)Популярные разделы сайтов.
Самые популярные разделы сайтов являются:
- главный экран (главный раздел, шапка сайта)
- о нас (о компании)
- портфолио (проекты)
- продукция (услуги)
- команда (персонал)
- отзывы
- клиенты
- цены (стоимость)
- форма заявки
- контакты
- футер (подвал сайта).
4)Размер макета сайта и модульные сетки в прототипах.
Когда мы приступаем к разработке прототипа или макета важно понимать, какой размер макета сайта нам необходим. На сегодняшний день существует огромное количество устройств, на которых можно просматривать сайты - стационарные компьютеры, ноутбуки, нетбуки, планшеты, смартфоны, а также телевизоры и часы.
5)Создание прототипа сайта на wireframe.cc
wireframe.cc — самый простой инструмент прототипирования интерфейсов и сайтов для веб-дизайнера.
Самые часто задаваемые вопросы на уроке №2. Основы веб-дизайна. Создание прототипа
1. Что такое прототип сайта?
Прототип – это структурная схема вашего будущего макета. В качестве примера можно привести чертежи зданий - это схема того, из каких частей оно состоит, какие параметры имеет, но непонятно, какой у него будет внешний вид. Тоже самое и с прототипом сайтов - это лишь эскиз того, какую структуру будет иметь макет.
2. Должен ли веб-дизайнер заниматься разработкой прототипа?
Есть 3 варианта развития событий:
· вы фрилансер и к вам обращается заказчик с уже готовым прототипом (это скорее всего тот самый заказчик, который заботится о своем проекте и заранее подготовил такую структуру сайта - прототип - которая отвечает его задачам); от вас требуется только крутой дизайн.
· вы фрилансер и к вам пришел заказчик, который хочет сайт; в таком случае вам самому нужно сделать прототип для того, чтобы согласовать будущую структуру сайта.
· вы работаете в веб-студии, команда которой имеет в штате проектировщика или UX-дизайнера; в таком случае именно этот специалист занимается разработкой макета, а затем передает его вам на стадию дизайна.
3. Нужно ли добавлять в прототип реальные тексты?
Да, это желательно. Таким образом вы уже в прототипе сможете понять, сколько места у вас занимают текстовые блоки, а значит сможете грамотно расположить весь остальной контент.
4. Что делать, если заказчик не предоставляет тексты на момент создания прототипа?
Используйте "рыбу" – это не имеющие логического смысла блоки текста, которые можно использовать в своих проектах. Текст-рыбу можно сгенерировать на ресурсе Яндекс рефераты.
5. Стоит ли использовать фотографии и цветовые решения в прототипах?
Нет, не стоит. Прототип, как и чертеж, не цветной. Его задача - показать последовательность разделов и их структуру. Цвет и изображения не стоит подбирать на этапе прототипирования, т.к. они отвечают за эмоциональный окрас проекта.
6. Что делать, если заказчик утвердил прототип, а на этапе дизайна решил поменять структуру разделов?
Если вы заключали договор и в документах прописано, что созданный прототип согласован, то заказчику придется доплатить. Если вы не заключали договор, тогда объясните ему, что доработка прототипа несет за собой временные и финансовые затраты - он либо откажется от изменений, либо согласится, но доплатит.
7. Почему не стоит создавать прототипы в фотошопе?
Прототипы можно создавать в фотошопе, но это будет долго. Даже если вы отлично владеете программой, то прототипирование все равно займет у вас много времени. Это связано с тем, что фотошоп не заточен на создание прототипов. А вот мокапс, акшур, вайрфрейм, бальзамик - да. В них работа идет заметно быстрее, потому что и инструменты в них продуманы для создания прототипов.
8. Мне обязательно делать в своем проекте все популярные разделы сайтов?
Нет. В презентации мы показали самые основные разделы, но это не значит, что все они будут решать задачу клиента. Например, если вы делаете сайт-визитку, то раздел "цены" вам точно не пригодится и т.д.
9. Можно ли использовать в своем проекте меню-гамбургер?
Меню-гамбургер – это очень спорная тема последних лет. Это одна из тех иконок, которая интуитивно может быть непонятна пользователю. Ее знают только самые прогрессивные и активные пользователи интернета, поэтому если ЦА будущего сайта - это в основном 30-50-летние люди, то советуем не экспериментировать с гамбургером.
10. Какое оптимальное количество блоков в разделе "Наши преимущества"?
От 3 до 8. Если меньше, тогда будет казаться, что у вас совсем нет преимуществ, а если больше, то как будто вы пишете все подряд. Это касается не только раздела о преимуществах, а всех разделов, которые состоят из блоков.
11. Раздел "Отзывы" еще актуален?
В целом, да. Если вы кроме текста отзыва дадите еще ссылку в соцсети на человека, который написал отзыв, то это будет намного доверительнее. Но честно говоря, мало кто доверяет этому разделу. Если кто-то действительно известный оставлял о вашей компании отзыв, то этому отзыву скорее всего будут доверять.
12. Если заказчик просит сделать макет сайта, то о каком размере макета идет речь?
Чаще всего вас будут просить сделать макет для десктопа, т.е. для стационарного компьютера, или ноутбука. Для того, чтобы сделать универсальный макет и для того, и для того, нужно сделать макет шириной 1920 пикселей, а контент внутри разместить на ширину 1170 пикселей.
13. Обязательно ли использовать модульную сетку в прототипе?
Желательно. Если вы уже в прототипе будете работать с сетками, тогда ваш макет будет более структурированный и аккуратный.
Мы разобрали модуль №2. "Основы веб-дизайна. Создание прототипа"
Дальше интересней и насыщенней, следующей урок - Работа с цветом и изображением. Подписывайся чтоб ничего не пропустить.
Урок №1. Веб-дизайн начало. Введение в профессию
