Как правильно создавать макеты для сайта?

Question

[ahillesius]

1. При создании дизайн-макета сайта необходимо отрисовать каждую страницу (окно) сайта? Вопрос вроде очевидный, но при поиске шаблонов, обратил внимание, что они имеют только одно отрисованное окно.
2. Необходимо сначала нарисовать для мобильных устройств, а потом для больших устройств, или достаточно нарисовать только для одного устройства?
3. Чем руководствоваться при создании дизайна сайта? Есть какие-то рекомендации или прописанные директивы?

Answer 1

[Антон Иванов]

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

Answer 2

[Uno]

а аналогия с любой другой работой не проводится интуитивно?
Просят тебя дом построить, и всё - никаких больше вводных. Что хочешь - то и делай.
Унифицированных стандартов макетирования приложений нет, максимум - кейсы/лучшие практики.
Есть такой документ, как техническое задание. Если тебе его не выдали - напиши сам и выдай на согласование сам. Инициативность - косвенный признак профессионализма.

Comments

[ahillesius]

Ранее не занимался UX/UI дизайном и не знаю, как, что должно работать

[Uno]

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

Answer 3

[Юля Жандарова]

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

2. Изначально в идеале стоит быть готовым к тому, что нужны не просто десктопный и мобильный вариант, а несколько форматов десктопа, формат планшета и формат смартфона - это просто правильно, на это стоит самостоятельно обращать внимание заказчика, на этом даже стоит настаивать. Мобильный век у нас все-таки, если на телефоне открывается десктопная версия просто потому, что мобильную не предусмотрели, это ужасно.

3. Все наработки UX и UI вам в помощь. Книги, курсы, видео, лекции. Основные принципы - удобство и понятность структуры + отсутствие вырвиглазности в визуале

Answer 4

[Павел Лурье]

1.

При создании дизайн-макета сайта необходимо отрисовать каждую страницу (окно) сайта? Вопрос вроде очевидный, но при поиске шаблонов, обратил внимание, что они имеют только одно отрисованное окно.

Чем меньше ты отрисуешь страниц, тем выше шанс того, что разработчик будет тебя доканывать или сделает как он это видит. Либо заставит дорисовать необходимое. Давать не до конца отрисованный макет - дурной тон. Разработчик - обычный человек и читать мысли не умеет. Из твоего макета он должен четко понять, что от него требуют. Лучше всего отрисовать все возможные страницы, состояния кнопок, чек-боксов, выпадашек и т.д. и так для все устройств - мобилка, планшет, десктоп. Потом создать кликабельный прототип и записать скрин каст, как должен работать твой будущий сайт с твоими пояснениями. Выкладываешь на ютуб с ограниченным доступом и отправляешь разработчику ссылку вместе с макетом. Это как более наглядное ТЗ, к которому всегда можно обратиться + когда будешь кликать по прототипу можешь найти какие-нибудь ошибки в своей работе.
2.

Необходимо сначала нарисовать для мобильных устройств, а потом для больших устройств, или достаточно нарисовать только для одного устройства?

Все зависит от того, какой сайт ты делаешь. Если для В2С, то сначала мобилка. Если В2В или B2G, то сначала десктоп. Если хорошее отношение с разрабом и делаешь сайт для В2В или B2G, то можешь сделать только десктоп, а мобилку оставить на его усмотрение (но помни, это дурной тон).
3.

Чем руководствоваться при создании дизайна сайта?

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

Есть какие-то рекомендации или прописанные директивы?

Да, и их очень много. Основные описал выше.