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

Question

[Никита Болдышев]

Как я делаю сам:

1 Просматриваю сайты с дизайн материалами
2 Сохраняю материалы, которые мне понравились
3 Начинаю прототипировать на бумаге каждый блок сайта
4 Составляю единый прототип на бумаге
5 Открываю Photoshop и начинаю создавать макет.
6 Подбираю шрифты и выбираю цвета
7 "Готово"

Самого меня это не устраивает. То, что хорошо получается на бумаге, выглядит очень плохо в готовом варианте.

Хотел бы узнать у других людей, которые этим занимаются, какой у вас подход к делу?

Answer 1

[Кирилл Арутюнов]

Проектирование и прототипирование должны предшествовать открытию фотошопа.
Прототипировать можно как на бумаге, так и с помощью софта.

Не наметив цели, вы не сможете выбрать верный путь. Прототип — это постановка цели.

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

Answer 2

[Dark Hole]

Беру, делаю макет - когда вдохновение есть.
А потом прямо обкатываю нужные моменты.

Вот я вас не понимаю: зачем фотошоп? Реально. В ФШ нет достаточной гибкости. То, что средствами ФШ недостижимо, в HTML - запросто.

Кроме того, я сразу делаю так, как хочу и в результате сразу вижу, что так возможно будет неудобно или некрасиво.

И вообще, забудьте о порядке прототипирования. Вдохновить может даже шрифт(я не шучу) или фраза(чаще всего абсурдная).

Answer 3

[Сергей Сергей]

5, 1, 2, 6, 7.

На бумаге не нравится лишь потому, что присутствует стремление к лучшему.

Answer 4

[Igor Korda]

1. и 2. аналогично.
3. Рисую структуру сайта, что бы понимать объём работы количество шаблонов страниц, прикидываю какие элементы использовать на страницах сайта.
4. Готовлю концепцию сайта. Примерный дизайн "Главной" и "Типичной внутренней" страницы, то есть расставляю элементы, контент, цветовое решение, шрифты, заголовки, исходя из заполненного заказчиком брифа и утверждённой структуры. Это делаю уже на Webflow(в основном) или adobe muse, или в pindengo или чём то ещё подобном, что бы можно было видеть как элементы взаимодействуют с пользователем и между собой.
5. Делаю живой прототип каждой страницы основываясь на данных полученных на этапе 4, так прототипировать проще, так как уже понятно где, что и как располагать, да и заказчик видя "Живой" макет с заголовками, фото и цветами, на который можно потыкать, как правило остаётся доволен. Но это уже выходит не совсем прототип.
6. "Причёсываю" и "допиливаю" всё что сделал в пункте 5., привожу всё к конечному варианту.
На данный момент оптимальная для меня схема.

Фотошоп и аналоги в работе использую только для нарезки контента для сайта.
Для меня это просто трата времени - сначала рисовать на "бумаге" в фотошопе потом верстать. Действительно - то, что нарисовано хорошо, может не иметь нужного эффекта в конечном цифровом варианте. Поэтому для себя я решил - только инструменты интерактивной вёрстки. Да и потом Верстальщикам, лучше если нужно перевёрстывать и программистам хорошо. И заказчик в итоге тратит меньше денег и нервов, так как видит работу непосредственно в интерактивном виде.