+7(919)219-14-03
Персональный менеджер
Основы веб-дизайна. Создание прототипа

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

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

17 мая в 21:30

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

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

1)Прототип сайта и его задачи.

В этом видео мы расскажем о том, что такое прототип сайта, для чего его нужно создавать.
Что такое прототип сайта? Задачи прототипа сайта

https://zen.yandex.ru/media/id/5f5a7a2e186bea34b535fa36/osnovy-vebdizaina-sozdanie-prototipa-60828195b04fef640c644ee4

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. "Основы веб-дизайна. Создание прототипа"

https://zen.yandex.ru/media/id/5f5a7a2e186bea34b535fa36/osnovy-vebdizaina-sozdanie-prototipa-60828195b04fef640c644ee4

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

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

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

https://zen.yandex.ru/media/id/5f5a7a2e186bea34b535fa36/vebdizain-nachalo-vvedenie-v-professiiu-6080579644dc5d3de85b98db



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

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

Landing page на заказ
Landing page на заказ
МЛМ онлайн
МЛМ онлайн
Конструктивная критика
Конструктивная критика

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