Створення чистого макета веб-сайту у Photoshop - Розробка макета веб-сайту - це більше, ніж упорядкування барвистих зображень та заповнення тексту в текстових кадрах. Це підхід, який говорить про велику кількість бізнесу вашого клієнта. Кольори та графіки веб-сайту визначають характер бізнесу, тоді як якість дизайну та легкий потік навігації веб-сайту повинні зв’язати користувача з організацією та перетворити його на потенційного клієнта.
Розробка гарного вигляду та легкодоступної верстки веб-сайту є обов'язковою для кожного веб-дизайнера, який хоче. Цей підручник покликаний перенести вас через процес створення макету веб-сайту простий і чистий веб-сайт прямо з нуля. Під час процесу ви дізнаєтесь важливі моменти, які допоможуть вам надалі отримати більше знань щодо веб-дизайну. 
Запишіть свої вимоги перед тим, як розробити макет веб-сайту
Перш ніж почати розробляти макет веб-сайту, ви повинні знати, як виглядатиме ваш веб-сайт та які теми ви повинні включити на веб-сайт. Важливо скласти список елементів компонування веб-сайту, який потрібен вашому клієнту на його веб-сайті. Поряд з цим, якість хорошого дизайнера полягає в тому, щоб підготувати макет всього веб-сайту, перш ніж він почне працювати над остаточним шаблоном.
Різні дизайнерські компанії адаптують різні рівні стратегій попереднього проектування, які можуть містити обрамлення, прототипування, макет, бета-версії та багато іншого. У цьому підручнику ми створимо макетну версію перед початком оригінального дизайну шаблону. Я використовую сірі відтінки, які дозволяють ідентифікувати блок макетів
Полотно
Роки раніше, поки ОС і обмежених пристроїв для доступу до веб-сайтів було дуже мало, розміри сторінки були зафіксовані на один або два розміри. Сьогодні сценарій зовсім інший. Кінцеві користувачі отримують доступ до сайтів на настільних комп’ютерах різних розмірів, мобільних телефонах, iPad та планшетах. У цій різноманітній ситуації немає шансів налагодити свою веб-сторінку до певного розміру. Але є деякі стандартні розміри промисловості, застосовані для кожного пристрою. Ви повільно знайдете свій улюблений розмір або ваш Клієнт може передати вам веб-сайт, щоб імітувати розміри.
У цьому випадку ми працюємо над наступними вимірами. Не переживайте за висоту, оскільки вона буде змінюватися з часом. Чим більше вмісту ви додаєте на свій веб-сайт, тим більше буде висота.
Пам'ятайте, що зазвичай прокручувати сторінку вертикально вниз, тому ви можете не зафіксувати певну висоту для своєї веб-сторінки, якщо ви не хочете, щоб користувач прокручував вашу домашню сторінку як Google. Але, горизонтально не потрібно прокручувати. Отже, обмежте свою ширину відповідно до галузевих стандартів і не будьте креативними з горизонтальним прокручуванням.
Для Інтернету роздільна здатність обмежена 72. Останніми зображеннями та сторінками, розміщеними на iPad та кількох планшетах, останнім часом є зображення з більшою роздільною здатністю. Але це рідко, і краще дотримуватися 72, враховуючи швидкість Інтернету по всьому світу.
Виберіть файли за допомогою команди Ctrl + A і намалюйте напрямні однаково по всьому шаблону. Веб-сайт повинен бути акуратно організований з кожним елементом, узгодженим один з одним. І вказівки щодо розробки веб-сайтів допомагають легко отримати його.
Підготуйте макет
Якщо розмістити ваш макетний файл на оригінальному шаблоні, ви зможете заощадити достатньо часу. Дизайн вашого веб-сайту стає настільки простим, що ви в кінцевому підсумку закінчите рамку протягом декількох хвилин. Однак макет допоможе вам лише розробити кадри. Доповнення елементів дизайну деталями, типовою компонуванням та вирівнюванням потребуватиме зайвого часу, ніж малювання макета веб-сайту.
Колірна схема та інші варіанти
Наступне, що потрібно зробити після того, як ви підготуєте свою рамку - це вибрати колірну гаму. Але, краще підготувати свої кольори, перш ніж почати працювати над дизайном.
Вся справа зводиться до повідомлення про те, що підготуйте зброю до початку проектування. Все, включаючи піктограми, зображення та вибір кольорів, має бути готовим до початку роботи. Організація та планування вашої роботи заощадить більше часу і зосередиться на дизайні без перешкод між ними.
Вибір кольорів може бути вибором дизайнера, якщо компанія нова і раніше не має фірмового стилю. У деяких випадках клієнти дають уявлення про те, якими відтінками повинен бути логотип або фон. Що стосується існуючих компаній, де вам може знадобитися переробити цілий веб-сайт, можливо, вам доведеться вибирати ті ж кольори, що відповідають потребам клієнта.
Є безліч веб-сайтів, які можуть допомогти вам вибрати мільйони кольорових схем з архівів. Спробуйте перелічити наступні веб-сайти, щоб насолодитися широким вибором поєднання кольорів.
Color.adobe.com
Colourlovers.com
Тут я вибрав декілька відтінків синього для використання на веб-сайті. Весь веб-сайт планується в рамках наступної кольорової гами. Не забудьте вибрати три-чотири різні кольорові комбінації, оскільки ми не знаємо, якому кольоровому клієнту віддасть перевагу. Після того, як клієнт доопрацює кольорову схему, збережіть значення відтінків і переконайтеся, що кольори відіграють життєво важливу роль у кожній вертикалі організації. Особливо у фірмовому стилі.
Процес проектування
Є багато способів продовжувати працювати з вашими дизайнерами. Немає жорстких і швидких правил компонування веб-сайтів, щоб визначити або слідувати процесу проектування, це здебільшого процес, який дизайнер обере для своєї зручності.
Деякі дизайнери хочуть зібрати цілі блоки та рамки та почати працювати над деталями на другому етапі з наступним типом та, нарешті, вирівнюваннями та коригуваннями. Деякі люблять закінчити одну частину сторінки за один раз і перенести її до наступної частини. Ми слідуємо другому стилю.
Ми закінчимо веб-сайт наступними кроками
- Заголовок і колонтитул
- Що ми робимо
- Послуги
- Форма
- Новини
- Футер |
Заголовок і колонтитул
Правило визначення розмірів заголовка чи банера залишається на вашій творчості. Відповідно до останніх тенденцій, на веб-сайтах з’являється величезне зображення, яке охоплює весь ваш комп'ютерний екран. Стиль згадується як образ героя, який став досить популярним останнім часом.
У цьому випадку ми почали із заголовка висоти 120 пікселів та висоти банера на 550 пікселів. Ширина повинна відповідати розміру документа.
Дизайн із суцільним кольором має плоский вигляд, який не підходить для великих кадрів чи зображень. Щоб уникнути плоского вигляду, я наносив градієнтний шар накладення поверх банера. Це надає банеру глибину, яка повільно перетворюється з одного відтінку в інший.
Далі ми почали імпортувати Логотип та розмістити його у верхньому лівому куті заголовка та ще один більший логотип у центрі банера. Ви також можете спостерігати за формою векторного макета веб-сайту у верхньому правому куті, який використовується для обміну посиланнями в соціальних мережах.
На цьому етапі я закінчив додавати тип у частині заголовка та банера. Назва компанії, фірмове повідомлення із посиланнями та послугами додаються до тексту. Ви також можете спостерігати за прозорою кнопкою на Банері.
Звичайний текст або занадто велика кількість тексту без особливих функцій зіпсує вигляд веб-сторінки; сторінка незабаром народить користувача, що може дозволити йому швидко покинути ваш сайт. Перевірте векторну форму, яку я додав до посилань на послуги вгорі праворуч банера. Стиль простий, але він заповнює порожнечу, уникаючи мирського вигляду.
Виберіть зображення, відповідне бізнесу. В Інтернеті доступні мільйони зображень, і це не займе багато часу, щоб знайти зображення, яке відповідає вашим вимогам.
У моєму випадку я знайшов якісне зображення, яке, на мою думку, добре поєднується з моїм веб-сайтом. У мене немає ділової теми для веб-сайту, тому я вільний вибрати будь-яке зображення, яке добре виглядає на банерній пості.
Спробуйте завантажити деякі зображення HD із сайтів із безкоштовними зображеннями, наведеними нижче
www.pixabay.com
Змішування - це мистецтво, яке ви повинні освоїти, щоб створити красиві банери. Тут я змішав три шари, щоб досягти ефекту, показаного на зображенні вище. Ось що я зробив
- Розмістіть шар зображення поверх банера синього кольору
- Розмістіть накладку «Градієнт» над зображенням
- Змініть непрозорість зображення на 40 відсотків та змініть режим накладання на різницю.
- Перевірте палітру шарів на зображенні вище, щоб зрозуміти, як шари укладаються один на одного.
Ось так виглядатиме ваш Header & Banner, коли ми лише закінчили роботу над ним. Ми працюємо над однією частиною одразу, і настав час перейти до наступного рівня.
Вирівнювання має вирішальне значення, коли мова йде про тип; маєте уявлення про те, як повинен виглядати ваш сайт, а текст слід вирівняти перед його запуском. На цьому рівні я використав два різні текстові кадри, обидва вирівняні зліва.
Наступним кроком є розробка сервісної частини веб-сторінки. Я сконструював металеву зірку в сірих відтінках, щоб продемонструвати різні послуги компанії. Намір використовувати символ зірки - це послуги 5 зірок.
Що стосується вирівнювання тексту Посібники - ваші найкращі друзі. Когерентність усередині типу та об'єктів може бути досягнута, використовуючи білий простір та рівні зазори між елементами конструкції. Я використовував багато вказівок щодо компонування веб-сайтів, щоб побачити, що всі об'єкти в кадрі повинні підтримувати належні проміжки та відстані, які виводять значну кількість білого простору.
Наступним кроком нашого дизайну є створення поля Форма. У цьому випадку я працюю протилежним методу, який ми використовували при розробці банера. Ми розмістимо шар зображення під суцільним кольоровим шаром і накладемо шар градієнта поверх двох шарів, щоб досягти кращого вигляду. Гра з режимами накладання завжди важлива при розміщенні великих зображень.
Вибір зображень для цього сайту не має конкретної теми, пов’язаної з ним. Я думаю, що цей образ допоможе сайту виглядати краще.
Розмістіть зображення під кольоровим фоновим шаром. Щоб закріпити зображення точно за розміром кольорового шару, використовуйте параметри маскування шару.
Подивіться на палітру шарів на наведеному вище зображенні. Суцільний кольоровий шар розташований у верхній частині зображення, режим накладання перетворюється на накладення, а непрозорість зменшується до 65 відсотків.
Я використав карту градієнта поверх двох шарів. Режим накладання змінено на відтінок, а непрозорість залишається такою ж.
Форма форми готова, що підводить нас до кінця четвертого рівня в дизайні нашого веб-сайту.
Наш наступний рівень складається з двох простих текстових кадрів. Він нагадує другий рівень веб-сторінки, і я використав вирівнювання двох полів, подібних до верхнього. Підтримка узгодженості у вирівнюванні - це хороший спосіб використання пробілу.
Коли ми дійшли до заключної частини сторінки, настав час ще раз переглянути розміри нижнього колонтитула. Дизайнер повинен планувати висоту колонтитула на основі посилань, які він повинен використовувати там. У цьому випадку я дав висоту в 170 пікселів футеру. Ширина залишається такою ж, як веб-сайт.
Розмістіть посилання та зображення відповідно до вашої вимоги.
Цим ми закінчили проектну частину нашого веб-сайту. Кольорові комбінації, які ми використовували, мінімальні, ми використовуємо багато білого простору в нашому дизайні та додаємо простий текст з мінімальними шрифтами. Намір - створити чисту веб-сторінку, яка, як ми сподіваємося, виконана.
Будь ласка, ще раз подивіться на дизайн усієї сторінки нижче
