Створення макету сайту

163

Створення макету сайту, це дуже цікавий і захоплюючий процес. Багато часто задають питання з чого почати створення дизайну макету, з чого почати розробку сайту. Як зробити так, що б сайт був привабливим, що запам’ятовується, а так же легким і зручним у плані юзабіліті. Особисто я ділю роботу щодо створення макетів для сайту на два типи. Перший це макет сайту для себе і подальшого його продажу, а другий це створення дизайну сайту для замовника. У цьому пості, я розповім вам як я створюю макети для сайтів, а так само розповім якого прогресу досяг і чого навчився за все той час, який я присвятив створення макетів.

Думаю, що ви помітили оновлення дизайну на моєму блозі? Як воно вам? В цей раз я відійшов від улюбленого мною мінімалізму і вирішив не багато додати колірної гами в шаблоні. Перш ніж цей шаблон з’явився і я остаточно вирішив, що саме він буде особою блогу, я встиг намалювати ще три різні версії для блогу Все про все. Головною проблемою було те, що закінчуючи черговий макет для редизайну блогу, в голові з’являлися думки того як ще, що то додати в дизайн або виправити в ньому. Саме макет який ви бачите зараз на блозі можна мабуть назвати чимось середнім і оптимальним, своєрідним «гібридом» всіх робіт по редизайну складеним в одному.
Взагалі редизайн блогу був приурочений до триріччя блогу Все про все і повинен був з’явитися на блозі 28 січня. Але виникли деякі затримки з різних сторін. І новий дизайн блогу з’явився тільки два дні тому. Над блогом працювали два верстальника. Перший взяв спочатку макет, сверстал і натягнув його на WordPress. Другий верстальник Ілля, вже прийняв сирої шаблон і зайнявся доопрацюванням і привів шаблон до того увазі який зараз ви спостерігаєте.
Хочеться почути вашу думку про самому шаблоні, про те як вам дизайн, як юзабіліті, може де помітили баг або ще що. Пишіть!

Ну, що ж, а тепер повернемося до самої теми поста про створення макету сайту.

І так як я вже сказав, що я ділю роботу на дві категорії:

  • Для себе і на продаж
  • Робота з замовником

Для себе і на продаж

Напевно це мій найулюбленіший варіант створення макета. Його єдиний мінус, що за роботу ні хто не платить і зовсім немає жодної впевненості в тому, що макет потім хтось купить. Але мені все одно подобається, от просто так відкрити Фотошоп і почати створювати макет. Зауважте, що практично майже завжди я створюю макет відразу в програмної середовищі. І лише зрідка з початку малюю на папері, а потім переношу все в Фотошоп.

За весь час роботи з Фотошопом і створення макетів для сайтів і блогів у мене вже виробилася стратегія і черговість дій.
І так, відкривши Photoshop робота йде в наступному напрямку:

  • Розмітка
  • Колір бекграунду майбутнього макета
  • Робота над лого
  • Меню блогу
  • Контент
  • Сайдбар
  • Футер

Ось так я працюю майже завжди і в 99% випадків. Тобто створивши лого і якщо треба шапку, я переходжу до того як буде виглядати навігація майбутнього макета. Потім починаю наповнювати макет текстом. Раніше я постійно заповнював макет «рибою» типу такого: Lorem ipsum dolor sit amet, consectetur adipiscing elit., але одного разу Webmozg, сказав мені, що дане наповнення макета не зовсім вірне і не може показати помилки допущені при розташуванні тексту.

Найкращим способом, наповнення макета стало копіювання тексту з будь-яких новинних сайтів. А зовсім не давно у себе в Twitter, один з моїх фоловерів опублікував посилання на сервіс рефератів від Яндекса. Цей сервіс і став відмінним рішенням для набивання текстів в макеті. Так, що тепер всі мої макети йдуть з людськи зрозумілим текстом.

Закінчивши з текстами, я переходжу до сайдбару. Тут завжди є багато способів і опцій як показати сайдбар. Я намагаюся нічого не вигадувати, а елементарно вставляю в макет лише самі не обходимые виджиты які є на будь-якому блозі:

  • Пошук по блогу
  • Кнопки підписки і лічильники передплатників
  • Свіжі записи
  • Популярні записи
  • Коментарі
  • Архіви
  • Лічильники відвідувачів

Не знаю чому, але самим моїм не улюбленою справою у створенні макету сайту, є промальовування сайдбара. Особисто у мене він займає найбільше часу. Може у вас так само, а може і навпаки, щось інше забирає найбільше часу.

Ще один момент при створенні макету, це визначитися, які розміри давати картинок в постах. У мене є два розміру:

  • 302х200
  • 600х200

Віддаю перевагу працювати з другим 600х200. Між іншим для дизайну який зараз на блозі, був обраний «експериментальний» варіант картинок 302х200. Але, подивившись тему в дії і зрозумівши, що надто багато доведеться виправляти на блозі в плані картинок які зараз містять розмір 600х200, було прийнято рішення змінити розмір картинок в макеті і використовувати розмір 600х200.

Футер, робиться швидко, так як намагаюся в футер взагалі нічого крім копірайтів не виносити. Чого не можна сказати зараз для цього шаблона де в футері аж три колонки.

Самим важливим, що ще я зрозумів при розробці макетів особливо для блогів, що в шаблоні і макеті зобов’язана бути присутнім кнопка іменована «Вгору». І якщо вже ми говоримо про юзабіліті, то ця кнопка дуже корисна, оскільки дозволяє відвідувачеві в один клік повернутися на початок сторінки.

Ось так я створюю макети сайту або блогу для себе. Як я сказав, що єдиний мінус цієї роботи, це те, що за роботу вам платять та 50/50, що потім макет хто купить. Що я роблю з макетами після завершення роботи? Або складаю їх в папку поруч з іншими роботами, або…..видаляю.

Робота з замовником

За роботу, все теж саме. Відмінність тільки в тому, що замовник дає вам ТЗ і ви працюєте вже з ним. Останнім часом, я віддаю перевагу працювати тільки з ТЗ від замовника, майже не беру роботу де замовляють макет і кажуть зроби як ти це бачиш. З одного боку немає жодних рамок і обмежень якими є робота з ТЗ, з іншого, це потім дозволить замовнику «мати ваш мозок» в плані тут перероби, а тут треба додати. З цього віддаю перевагу працювати тільки з ТЗ. А ви?

Знову таки, при роботі з замовником, повністю відійшов від «сів за комп і намалював макет». Я уважно вивчаю ТЗ, якщо з’являються моменти або не зрозумілі, або ті нюанси які забув вказати замовник, я звертаюся до замовника за поясненнями.

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

Плюси такої роботи, вам за неї платять. І ще один плюс, це те, що починаєте працювати тільки після повної згоди замовника. Саме цей момент не дозволить замовнику мережа вам на шию в плані виправлень то і цього. Звичайно ж виправлення і доопрацювання бувають, але вони мізерні.

Коли макет готовий, я заливаю його на один з хмарних сервісів і даю посилання замовнику. Після схвалення роботи, отримую гроші і пересилаю PSD макет замовника. До речі ось ще один момент: при роботі з фрілансерами або замовниками як і коли брати чи давати гроші за роботу? Або платити або брати гроші вперед, припустимо хоча б половину, або платити і брати гроші в кінці роботи. Як то я написав ось цей пост, але зараз якщо чесно я переглянув свою думку і думаю по іншому. Прочитайте цей пост якщо ще не читали його, раджу.

На цьому все. Я розповів вам про створення макету сайту, про те, чого навчився і в що зараз вірю в плані роботи з фрілансерами і замовниками.
Чекаю ваших відгуків по темі поста, а так само не забудьте написати про те чи подобається вам новий дизайн блогу Все про все.