Як скласти ТЗ для дизайнера – отримуємо ідеальний PSD макет

Якщо хочете отримати хороший дизайн, причому швидко і дешевше, дотримуйтесь лише двох простих правил:

Знайте, чого хочете, складіть чітке ТЗ
Не еб#те мозок дизайнеру

Готуємо ТЗ

Шукаємо лише інформаційні сайти - не сайти фірм, не корпоративні блоги, не інформаційні розділи у комерційних тематиках, а саме - інформаційні сайти.

І просто сайти будівельної тематики:

1metallocherepica.ru
1podveryam.ru
1polestnicam.ru
1postroike.ru
1pooknam.ru
1poclimaty.ru

Уважно вивчаємо їх, дивимося, які елементи присутні, що подобається та уявляємо, яким буде наш сайт і, за допомогою Balsamiq Mockups малюємо/складаємо акуратний макет нашого майбутнього сайту.

Balsamiq Mockups дуже просто в освоєнні, не вимагає спеціальних навичок і взагалі накидати ТЗ у ньому – хвилин 40 максимум.

Далі, отриманий макет 3 сторінок, експортуємо у звичайні картинки, заливаємо на файлообмінник та відправляємо дизайнеру для складання PSD макета або одразу досвідченому верстальнику.

Макет, який я створив, можна завантажити для прикладу.

Як експортувати?

Зразок ТЗ для складання PSD макету (для дизайнера)

Логотип і favicon можна взяти вже готові звідси: https://www.iconfinder.com/search/?q=fence або зробити їх основі.

Замість ?q=fence - пишемо ваш запит типу ?q=blood або ?q=pool

Потрібно приблизно таке:

Головна -http://jpegshare.net/20/33/2033b23369bf1111bbefc674159f9e18.png.html

Поодинокі сторінки -http://jpegshare.net/23/ea/23ea4bcc1a8e2f8225853609f323e541.png.html

Можливо, вам доведеться скопіювати текстову інформацію, тому прикладаю файл макета, який можна відкрити у програмі Balsamiq Mockups, офіційний сайт: https://balsamiq.com/download/.

Відповідно, посилання на те, що намалювали, ставите свої і файл макета теж даєте свій.Не переплутайте бл#ть!

Вимоги до шрифтів

Бажано використовувати для всіх текстів на сайті комбінацію з кількох шрифтів:% шрифти%

Бажано використовувати для текстів, заголовків і посилань комбінацію 2 кольорів:% кольори, що сподобалися, шрифтів%

Сайти, які подобаються і чому:

1metallocherepica.ru - шрифти, колір шрифтів та заголовків, кольори, логотип 1podveryam.ru - мінімалізм, кольори, логотип 1polestnicam.ru - мінімалізм, логотип 1postroike.ru - мінімалізм - мінімалізм, логотип 1poclimaty.ru - мінімалізм, логотип

Обов'язково потрібно промалювати для верстальника:

Випадаюче меню
Посилання при наведенні
Підписати шари
Списки

Виділення тексту (цитата)

Якщо в горизонтальному меню 5 елементів - саме вони повинні бути зображені в макеті.

Макет вам будуть малювати близько 5-9 робочих днів. І на виході ви отримаєте приблизно таке:

Головна -http://jpegshare.net/10/a2/10a20ff4e0e051d9921d80bab10ea332.png.html

Категорії -http://jpegshare.net/fc/80/fc80c8e35393ddb03ec414414e915970.png.html

Поодинокі сторінки -http://jpegshare.net/54/34/543434b0cb512d7ca732ebea6e7d6c69.png.html

Оплачуємо, беремо файли та віддаємо верстальнику, який зробитьнам з цього шаблон Wordpress. Але це тема для окремого посту.

Далі, якщо в дизайні десь у заголовку або в тексті (який буде текстом, а не картиною) - помилка або друкарська помилка - не треба просити це виправити, це буде робити верстальник і це можна буде потім змінити/змінити, вписати самому.

Після цього беремо наші файли і вирушаємо до верстальника, йому ми даємо такі вимоги:

Потрібна адаптивна верстка
На кожній сторінці не повинно бути тегів

і т.д., але має бути лише один тег

на кожній сторінці, і в нього має бути розміщено заголовок.
Потрібно використовувати теги , , і т.д. Блок зробити вище за кодом.