Як зробити макет сайту, якщо ви новичок: крейзі – способи

Як зробити макет сайту, якщо ви новичок: крейзі – способи

Категория: Дизайн

15 / 12 / 2016

51645 просмотров

277 4.2021660649819 5

Зміст

Створення макетів сайтів: розвага для обраних ->

Розробка макета сайту: етапи ->

Спосіб №1. Нарізка макета з шаблону сайту ->

Спосіб №2. Створення макета сайту в майжефотошопі ->

Спосіб №3. Онлайн-інструмент для створення макетів ->

Для початку задумайтеся над тим, чому ви вирішили створити макет сайту самостійно. Ця робота вимагає різнобічних знань від людини в області ІТ і дизайну, аналітичного та творчого мислення одночасно. А ще якоїсь частини вашого часу. Окей, є 4 причини того, чому вам могло це знадобитися. Якщо у вас інша - пишіть в коментарі, доповню.

Створення макетів сайтів: розвага для обраних

Причина # 1. Інтерес до розробки макетів сайту

Ваші інтереси дуже специфічні? Ми тут нікого не засуджуємо. Самим же стало колись цікаво, і почали цим займатися! До того ж, тяга до пізнання - наша відмінна риса. Хвалю вашу цікавість.

Причина # 2. Розробка макета сайту як вид заробітку

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

До речі, робота веб-дизайнера - це не жарти. Ось тут нижче я просто залишу графік зарплат в залежності від стажу (за даними DOU за травень-червень 2016). Ні на що не натякаю. Просто прихований хантинг.

Діаграма залежності зарплати веб-дизайнера від стажу

Причина # 3. Складання ТЗ на розробку макету сайту для дизайнера

Часто перед НЕДІЗАЙНЕРОВ стоїть необхідність показати макет веб-сайту - іноді просто для ілюстрації своєї ідеї, але іноді і для підкріплення ТЗ. Звичайно, це не обов'язково і грамотний дизайнер сам зрозуміє вашу ідею і навіть зробить краще, ніж ви очікуєте. Однак якщо ви точно знаєте, чого хочете, краще це показати, а не розповідати.

У KOLORO можете замовити макет сайту, і ви отримаєте саме те, що очікуєте. Як це у нас вийде? Ми тонкі психологи.

Причина # 4. Вам терміново треба намалювати макет сайту, а ви навіть не знаєте що це

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

Розробка макета сайту: етапи

Перш ніж створити макет сайту вам доведеться продумати структуру сайту, зробити прототип і вибрати колірну схему. Про все це по порядку.

Етап 1: структура макета сайту

Обов'язково заздалегідь сплануйте архітектуру сайту - що і куди буде вести і як будуть взаємопов'язані елементи. Можете зробити це в голові, на папері або скористайтеся MindMap для побудови структури. Побудова MindMap при проектуванні сайту допоможе вам визначитися з кількістю сторінок, які необхідно намалювати. Ви будете мати детальне уявлення про проект в цілому. Як це зробити? Можете використовувати онлайн-інструменти MindMup або Bubblus.

зовнішній вигляд mindmup & bubblus

Зручно також користуватися додатком Coggle, яке ви можете підключити до Google Drive.

Як підключити coggle

Мені подобається Coggle тим, що майнд-карта завжди під рукою, їй зручно ділитися з колегами, і тут добре підібрані кольори елементів інтерфейсу. До того ж працює права кнопка мишки, що дозволяє добре налаштовувати карту. У мене вийшла ось така структура для головної сторінки сайту.

Приклад зовнішнього вигляду карти сайта

На першому етапі проектування макета створюється mind-map сайту

Етап 2: Створення прототипу сайту

Далі можна відразу почати малювати макет сайту в фотошопі, але, навіть якщо робити макет з цікавості, спочатку слід намалювати прототип сайту. При покрокової розробки, протототипування - невід'ємний етап, який зміцнює психічне здоров'я веб-дизайнера. При створенні прототипу намічаються ключові блоки майбутнього сайту (шапка, слайдер, кнопки, контакти, структура матеріалу та ін.). Це дозволяє істотно заощадити час на етапі відтворення макета тому можна буде побачити приблизний результат і безболісно внести зміни.

Приклад структури сайту: ось.

Втомилися? Зробіть життя простіше і замовте розробку сайту в KOLORO. Ми врахуємо ваші побажання і ви отримаєте саме те, що хотіли.

Створення прототипу сайту онлайн

Зазвичай я користуюся двома найбільш популярними онлайн-інструментами для створення прототипу сайту: Moqups і Mockflow. В обох випадках є можливість створювати прототипи безкоштовно, але з обмеженим функціоналом. Тарифи для першого сайту починаються від $ 13 / міс. (10 проектів, 1 Гб), а для другого - від $ 14 / міс. (Необмежену кількість проектів + ​​25 Гб в хмарі). Ще все рекомендують Mockingbird. І я порекомендую, але тільки з поваги до Eminem, тому що тут 3 проекти обійдуться вже в $ 12 / міс., А безкоштовних інструментів менше.

Тепер про особисте враження. Moqups зручніше і інтуїтивно зрозумілий навіть з першого відвідування. Тут багато готових блоків і іконок - якраз те, що потрібно, щоб швидко пройти етап прототипування. Крім того, елементи зручно центрувати щодо середини сторінки або інших елементів. Трохи заважає обмеження в 300 об'єктів для сторінки в безкоштовному режимі - для макета односторінкового сайту може бути замало. Є можливість вставляти елементи з воркфрейма Bootstrap. Mockflow дозволяє робити трохи менше, і з ним потрібно пару хвилин розібратися і звикнути до нього, проте більшу кількість простору на диску може когось залучити.

приклад того як виглядає макет сайту в moqupsприклад того як виглядає макет сайту в Mockflow

Прототипи сайту в Moqups і Mockflow

Як запрототипувати майбутній сайт?

Розглянемо на прикладі Moqups як можна створити прототип сторінки з текстом для блогу.

Крок 1. Додаємо шапку (текст можна змінити).

крок 1 в створенні прототипу з Moqups

Крок 2. Додаємо блок для картинки і напис (заголовок статті). За допомогою стилів можна зручно змінювати розмір, шрифт та інше форматування тексту.

крок 2 в створенні прототипу з Moqups

Крок 3. Додаємо текст і задаємо ширину колонки. Всі блоки зручно центруються щодо середини сторінки.

крок 3 в створенні прототипу з Moqups

Крок 4. Текст треба б розбити картинкою. Та й ширина колонки занадто велика, 500 рх буде краще. На щастя, можна її швидко поміняти. Великий плюс: виділені елементи зменшуються відносно один одного і мій блок з картинкою теж зменшився.

крок 4 в створенні прототипу з Moqups

Крок 5. Додамо сайдбар (бічну колонку), тут вже буде просто. Розмістимо поле для пошуку і блок для підписки на розсилку (з привабливою картинкою і яскравою кнопкою).

крок 5 в створенні прототипу з Moqups

Крок 6. Припустимо, наша стаття вийшла такою маленькою. Ще можна додати опитування і рейтинг статті. Вийшов акуратний прототип сторінки для блогу. Додавайте інші елементи на свій смак.

крок 6 в створенні прототипу з Moqups

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

приклад створення прототипу з Moqups

Прототип додатки для смартфона

Етап 3: Робимо красивий макет сайту: вибираємо колір

Від вдалого вибору квітів залежить сприйняття сайту і бренду користувачами. Не раджу покладатися на свої сили - підбір вдалого відтінку може зайняти годинник. Тому рекомендую використовувати готові палітри кольорів для веб. У Google недавно вийшов докладний гайд по вдалим кольорам для матеріального дизайну (тренд веб-дизайну). Ці кольори гармонійно поєднуються, і ви можете бути впевнені в їх привабливості. За допомогою Materialpalette можна вдало підібрати два кольори - основний і акцент, а також подивитися, як вони будуть виглядати в інтерфейсі. Трохи більше квітів на Material Design Colors.

вибір вдалого кольору

Представили сайт? Зробили прототип? Вибрали кольору? Тепер можна перейти до створення самого макета. Пропоную вам кілька способів.

Увага! Тут не буде рад по тому як зробити макет сайту в фотошопі - це тема для окремої статті, тут більш прості способи.

Спосіб №1. Нарізка макета з шаблону сайту

або існуючих сайтів

Цей спосіб підійде вам, якщо ви хочете:

  • розібратися в основних інструментах Photoshop;
  • знайти різні референси для свого майбутнього сайту і зібрати їх воєдино;
  • відчути себе дизайнером на пару годин;
  • продемонструвати веб-дизайнеру або агентству (наприклад, нам :) найбільш докладний бачення сайту;
  • підкріпити ТЗ на розробку сайта не тільки «ось тут кнопочки призову, а тут роздільник і лідомагніт». .

Плюси такого підходу до розробки макета:

  • ви зможете уникнути поширених помилок, надивившись на якісні сайти;
  • зрозумієте, як не треба робити, щоб було добре;
  • виконавці веб-дизайну будуть чітко уявляти, чого ви очікуєте;
  • це дуже швидко - за кілька годин ви зробите макети для всіх сторінок сайту.

Мінуси:

  • ви так і не зрозумієте до кінця, що таке веб-дизайн;
  • деякі референси, які ви знайдете, верстальник не реалізує без зміни інших частин сайту.

можливість кастомізації макета сайту

Як це робиться

Найпростіший і швидкий спосіб зробити макет сайту - вибрати шаблон під певну CMS і переробити його під себе. Тому для початку треба визначитися з CMS, що значно спростить розробку сайту. Однак врахуйте, що дизайн сайту буде обмежуватися тими елементами, які є в шаблоні. Звичайно, ви можете змінити кольори, проте окремі елементи інтерфейсу вже готові і їх змінити ви не зможете.

! Якщо ви будете робити «рагу» з різних сайтів, не забувайте десь в блокнотику олівчиком писати вихідні. Це спростить подальшу розробку дизайну і верстку макета.

Макети сайтів під Wordpress

Найбільш популярна CMS - це Wordpress. Наприклад, тут ви знайдете багато сучасних шаблонів для цієї CMS. Навіщо? Сайт на шаблоні прискорює запуск проекту в рази, проте він не буде унікальним. Хоча, якщо ви будете використовувати оригінальні ілюстрації, зображення і креативний підхід - навіть шаблонний макет можна переробити до невпізнання. Головною перевагою є те, що ваш сайт гарантовано буде адаптивним і взагалі красенем в плані відображення на різних пристроях.

Перегляньте різні шаблони і виберіть такий, який вам найбільше до смаку. Я ще трохи пошукала на Envato Market і знайшла шаблон Dalton, який мені сподобався найбільше. Зайшовши на демонстраційну версію шаблону, ви відразу побачите концепт корпоративного сайту. Натиснувши на меню, ви зможете подивитися більш детально, які функції є у ​​шаблону, як будуть виглядати різні сторінки. Найкраще приділити цьому півгодини і як слід розібратися в тому, що є в шаблоні

приклад шаблону сайту

Що далі? Підбираємо розмір макета сайту, ріжемо і клеїмо

Коли ви вже освоїлися в шаблоні, можна приступати до його нарізці. Дуже добре, якщо дозвіл вашого екрану 1920 рх або більше - це дозволить просто робити скріншоти частин сайту і з'єднувати їх в редакторі. Робота з макетом починається з шапки (header), далі - різні блоки (body), в кінці - земельна ділянка (footer).

Вам знадобиться:

  • зручний інструмент для знімка обраної області (screen capture tool), я використовую Lightshot – він пропонує зберегти зображення в окремий файл або копіює його в буфер обміну;
  • Photoshop - для склеювання нарізаних частин зображень.

Етапи створення макета для сайту на основі шаблону

Крок 1. Вибираємо ширину макета сайту

Вирішіть, яку сторінку ви будете робити першої. Не починайте з головною - її краще залишити наостанок, тому що це найбільш важлива сторінка сайту і спочатку краще трохи набити руку. У прикладі я буду робити сторінку «Про нас» - тут буде цікава інформація про компанію та її співробітників. У мене вже є прототип сайту, тому я знаю, що роблю. До речі, як там ваш прототип?

Відкрийте Photoshop і задайте ширину макета сайту 1920 рх. Цього буде достатньо для того, щоб побачити, як сайт буде виглядати в браузері. Якщо у вас дозвіл менше - ставте таку ширину, яку дозволяє монітор. Щодо висоти поки не турбуйтеся - тут складно вгадати і все одно доведеться розтягувати / звужувати область.

задаємо ширину макета сайту

Крок 2. Продовжуємо створення макета сайту в Photoshop

Підберіть в шаблоні таку шапку, яка вам подобається. Виріжте її за допомогою зручного інструменту, відкрийте документ в Photoshop і вставте туди (Ctrl + V). За допомогою інструменту переміщення (V) помістіть шапку вгорі. Мені подобається шапка з topbar, де є контактна інформація про компанію.

Крок 2.а. Робіть відразу правильний макет сайту

Тепер у вас є два шляхи - змінювати текст в зображенні або писати супутній текст в текстовому файлі. Що зручніше? Все залежить від ваших цілей. На особистому досвіді можу сказати, що краще це зробити в макеті, відразу підібравши шрифт і розміри. Так безпечніше і буде WYSIWYG у дії (What You See Is What You Get, «що бачиш, то і отримаєш»).

Крок 3. Йдемо до успіху

Наповнюйте свій макет різними блоками і редагуйте їх відповідно до своїх потреб. На даному етапі можна не гратися з квітами, якщо у вас немає навичок використання Photoshop. Для того щоб збільшити висоту макета, використовуйте інструмент «Рамка» (С).

Що вийшло

приклад макета сайту

Через пару хвилин роздумів, нарізки і склеювання найбільш вподобаних шматків, у мене вийшов структурований макет сторінки «Про нас»

Про що не варто забувати

  1. Називайте кожен шар з блоком адекватно, відповідно до того, що там є. Інакше потім зовсім заблукаєте.
  2. При підборі шрифту треба вибрати різний розмір для заголовків і основного тексту. При цьому краще керуватися бібліотекою веб-шрифтів Google Fonts. Не забудьте відфільтрувати кириличні шрифти.

вибір шрифту для макета

Спосіб №2. Створення макета сайту в фотошопімайже

Вам підійде спосіб №2, якщо:

  • у вас немає Photoshop (совість не дозволяє чи ні місця на диску) або ви ще не навчилися ним користуватися;
  • ви хочете познайомитися з HTML кодом і CSS стилями без втручання в розмітку;
  • вам потрібен інтерактивний макет сайту.

Раджу шикарний безкоштовний інструмент для створення макетів Macaw. Для роботи з програмою її треба завантажити і встановити - справа кількох хвилин. У програмі можна в візуальному режимі практично верстати макет, тому що ви відразу зможете опублікувати його і побачити HTML-код і CSS. Трохи докладніше про роботу програми. У Macaw є істотний недолік - вона створює неадаптивною веб-сторінку. Як з цим боротися? Тут вже знадобляться навички верстальника, щоб підключити фреймворк (наприклад, якщо робити макет сайту під Bootstrap). Однак якщо потрібно просто показати працює макет колегам - Macaw відмінно підійде.

як виглядає неадаптивний шаблон сайту

Так виглядає неадаптивний шаблон на різних пристроях. Хочеться плакати

Для початку роботи запустіть програму у себе на комп'ютері. Вашій увазі пропонується новий документ з шириною сторінки 1200 рх з сіткою макета сайту. За замовчуванням між стовпцями є відступ (padding), тому між створеними елементами буде відстань. Малювати вам доведеться тільки в межах колонок, тому що якщо ви вийдете за них, блоки будуть відображатися один під одним. Так що стежте за ними.

Ви можете самостійно задавати ширину стовпців, їх кількість і відстань між ними. Якщо ви хочете, щоб елементи «прилипали» один до одного, задайте 100% ширину колонки і приберіть між ними відступ. Навіщо вам ця сітка? При HTML верстці макету сайту буде простіше зробити адаптивний шаблон, тому що сучасні фреймворки використовують саме 12-Стовпчикові сітку.

сітка редактора

Ви можете змінити ширину робочої області, потягнувши її справа, або задавши розмір самостійно

Що далі? макетуємо

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

Крок 1.

Для початку необхідно створити шапку. Це буде контейнер з висотою 100 рх і нижньою межею, товщиною в 1 рх.

початок роботи з редактором зі створення макета

Усередині іншого контейнера буде логотип, а всередині наступного - меню. Для окремих елементів меню не потрібно створювати окремі блоки, досить встановити достатню відстань між словами (word spacing).

робота з редактором крок 1

Крок 2

З готової шапкою можна приступати до решти блокам. У наступному блоці у мене буде фон, який необхідно окремо завантажити.

крок 2 в роботі з візуальним редактором

Крок 3. Створення інтерактивного макета сайту

Продовжую перетягувати блоки і вставляти в них текст. Кнопку створюю за допомогою спеціального інструменту «Кнопка» (логіка!). Macaw дозволяє створювати інтерактивний макет з різними станами кнопок і можливістю перемикання між сторінками.

Зверніть увагу на наступні виділені елементи. Вони допомагають перемикатися між різними блоками і організовувати їх. Наприклад, текст повинен бути в певному контейнері, а не бовтатися просто так.

особливості роботи з редактором макета

Якщо натиснути File -> Publish, ви отримаєте готову сторінку, у якій можна буде переглянути HTML-код і CSS в різних вкладках. Це дуже зручно, якщо ви хочете побачити, як виглядає розмітка.

Що вийшло

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

порівняння шаблону і самого макета

Особливості такого способу створення макета сайту:

  • щоб зрозуміти тонкощі роботи програми, треба витратити додатковий час;
  • навіть коли вже вник в програму, все ще іноді не зрозуміло, чому вона поводиться так, а не інакше;
  • про адаптивність можна забути, якщо не доробляти самому;
  • дійсно зручно створювати макет і навіть трохи розібратися в верстці - можна побачити, як взаємодіють елементи і взагалі якась структура;
  • в стилях можуть з'являтися такі речі «width: 16.6666666666%», які треба буде виправляти; просто необхідно розуміти, що тут WYSIWG, а не більше.

Спосіб №3. Онлайн-інструмент для створення макетів

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

Зручний інструмент для створення інфографіки, яким я користуюся вже давно - сервіс Creately. Тут є десятки і сотні компонентів для створення UI дизайну під різні пристрої (більше під мобільні). Вам точно сподобається, покажу деякі з них.

функціонал інструменту creately

Ще тут зручно редагувати елементи, додавати текст (і навіть робити кнопки з посиланнями!). Загалом, лише за кілька хвилин у мене вже вийшло те ж саме, що і в Macaw, тільки акуратніше. Однак такий макет не зробити сильно інтерактивним. До цього способу не буде кроків тому сервіс добре інтуїтивно зрозумілий. На скрині я постаралася максимально відобразити можливості сервісу.

робота з інструментом по створенню макетів сайту creately

Можливості сервісу Creately

У Creately мені подобається, що:

  • можна виділити кілька об'єктів, розподілити і вирівняти їх відносно один одного;
  • для того щоб поділитися макетом з одним, можна експортувати зображення в будь-якому зручному форматі;
  • є готові елементи призначеного для користувача інтерфейсу (наприклад, браузер), що дозволяє краще зрозуміти проект.

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

P.S. Дана стаття є ознайомчої і не дозволить вам стати веб-дизайнером. За серйозними знаннями доведеться ще багато покопатися в інтернетах.

Контактная информация:

hi@koloro.ua

+38 (044) 223 51 20

Подготовил:

Инна Дитяшова

Копирайтер

277 голосов

Понравилась статья?
Оставьте свой голос :-)
comments powered by HyperComments

Похожие материалы

Бесплатная консультация. Звоните

сделать запрос
up-btn

Розкажіть нам про ваш проект

Отримайте консультацію вже зараз!

Спасибо за ваше сообщение!

КОНТАКТЫ

сподобались наші статті?

наші новини сподобаються також !