Проектування Killer Web UI макетів з Freebies - Ultimate Guide
Сфера веб-дизайну зайняла подих лише за кілька коротких років. Зараз у світі є більше активних дизайнерів, ніж будь-коли раніше, всі вони співпрацюють з інноваційними ідеями проектів. І концепти, що стоять за багатьма з цих тенденцій, були розроблені через професійних графічних дизайнерів.
Це може зайняти місяці або навіть роки, перш ніж ви повністю зрозумієте технічні аспекти побудови інтерфейсу користувача. Необхідно враховувати розміри та розміщення елементів сторінки, а також читаність тексту та міток. Маючи трохи вільного часу, ви можете розібратися в мінімалістському підході до створення веб-сайтів з меншою кількістю і зменшенням плутанини. І навіть тоді існують десятки інших методів проектування.
Для цього посібника я зв'язав пару сучасні методи дизайну інтерфейсу користувача с безкоштовні ви можете завантажити і грати. Я сподіваюся, що це дасть певну мотивацію тим, хто цікавиться кар'єрою в побудові графіки / веб-дизайну. Навіть професійні веб-дизайнери можуть знайти деякі з цих тенденцій корисними для вашого наступного проекту.
Практика з повними шаблонами
Коли у вас є навички розробляти власний макет з нуля, не потрібно починати з шаблонів. Початківці, з іншого боку, можуть відчувати себе більш комфортно, починаючи з повного дизайну і працюючи в більш дрібних деталях.
Є кілька чудових безкоштовних завантажень повних шаблонів веб-сайтів PSD для портфелів, домашніх сторінок, блогів і багатьох інших категорій. Це ідеальний дизайн для початку роботи з ознайомленням з “загальний” веб-макет. Кожен веб-сайт має різні потреби для елементів сторінки, і вам доведеться визначити, які елементи є важливими.
Ось приклад PSD з назвою "AppCivilization", розроблений Мартіном Фабрісіусом. Макет призначений для творчої студії, яка розробляє мобільні програми та, можливо, веб-сайти. До дна ви знайдете невелику панель піктограм програм, представлену в портфоліо. Ви також помітите, що весь дизайн розбитий горизонтально на заголовок, верхнє слайд-шоу, основний вміст і затемнений нижній колонтитул.
Оригінальний джерело - Завантажити
Проектування цільових сторінок
Давайте подивимося на іншу халяву, також розроблену Мартіном. Цей наступний приклад - це цільова сторінка, яку можна використовувати для продажу будь-якого типу продуктів. Як правило, це цифрові товари, які можна завантажити користувачем, тобто програми, фотографії, іконки, шаблони тощо.
Оригінальний джерело - Завантажити
Але найкраща частина його дизайну полягає в тому, що вона дуже гнучка для початківців. Заголовок все ще використовує невелику верхню навігацію з великим зображенням, але особливо очікувані дії користувачів відрізняються. Він великий “Купити!” кнопка, яка виступає прямо над згином. На цільовій сторінці продукту це приверне більше уваги, ніж слайд-шоу jQuery.
Ще однією чудовою технікою користувальницького інтерфейсу є невелика функція відображення iPhone в середині сторінки. Мартін включає в себе знімок перегляду iPhone, кнопку App Store і невеликий список ключових можливостей. Коли відвідувачі шукають деталі продукту, ви не можете зробити це простіше, ніж за допомогою форматованого списку.
Інші шаблони:
Ось кілька безкоштовних шаблонів PSD, які ми випустили в проході:
- Шаблони бізнес-сайту "BiZ" PSD
- Сайт продукту "ThinkJuice" Шаблон PSD
- Шаблон PSD професійний бізнес-сайт
- Портфоліо "Polo360" PSD Шаблон
Вас також можуть зацікавити такі:
- Шаблони бізнес-сайту
- Навчальні посібники + шаблони "Скоро з'являться"
Головна навігація сайту
Меню та кнопки - це лише інструменти для створення набагато більших елементів сторінки. Не можна заперечувати, що основна навігація вашого сайту має дуже важливу мету. Вам потрібно, щоб ваш сайт був легко доступний з можливими запасними методами для мобільних користувачів.
Нижче наведена прохолодна навігаційна панель з ефектом текстури. Стиль підсвічування може бути зображений у вигляді затемненого вікна або як нижня частина, що вказує на вміст сторінки. Цей стиль був помітним протягом багатьох років і чудово виглядає в правильних умовах.
Оригінальний джерело - Завантажити
Ще одна подібна халява - це текстурований заголовок навігації, розроблений Еді Гіл. Мені дуже подобається, як цей другий навігатор містить як список посилань, так і деякі додаткові кнопки сторінок. Ви хочете запропонувати додаткові посилання відвідувачам, де вони можуть знайти ваші профілі в Інтернеті.
Оригінальний джерело - Завантажити
Альтернативні стилі меню
Крім типової горизонтальної навігаційної панелі є інші стилі дизайну для розгляду. Вертикальні посилання можна розділити на різні підзаголовки, які залишають більше місця для вмісту сторінки.
Візьмемо, наприклад, меню freebie нижче розробленого сайту Icojam.
Кожен заголовок побудований для розширення та згортання на основі вибраного об'єкта. Крім того, конструкція дозволяє невеликому лічильнику номерів сидіти в правій частині кожної категорії. Це найкраще заповнити як блог навігації для підрахунку, скільки повідомлень подаються в кожній темі.
Оригінальний джерело - Завантажити
Поради щодо навігації / навчальні посібники:
- Більше 50 чистих скриптів навігації на основі вкладки CSS
- Найкращі практики та приклади навігації по бренду
- Створення мобільної навігації за допомогою jQuery
- Кодування Копіювання Навігації в CSS3
- Проектування навігації з невеликим CSS
Чистіші веб-форми
Сучасний вік Інтернету далекий від статичного місця зустрічей. Користувачі постійно обмінюються інформацією та взаємодіють один з одним щодня. Більша частина цього обміну текстом і засобами масової інформації управляється через веб-форми.
Ми маємо розглядати лише кілька прикладів того, як можна розробити чисті форми входів і кнопок. Дизайн ваших елементів може пройти довгий шлях до запрошення відвідувачів, щоб вони могли їх використовувати. А це, у свою чергу, створює довіру до вашого сайту та збільшує кількість переглядів сторінок.
Поля для входу
Існує декілька чудових прикладів для входу до PSD для входу. Цей безкоштовний вхід через WP Scientist має всі стандартні елементи. Два поля введення для входу / пароля, кнопка "Надіслати" та прапорці для керування сеансовими файлами cookie.
Ця модель дизайну ідеальна, якщо ви можете реалізувати ефекти через jQuery. У верхній правій частині стрілки ви думаєте про налаштування вікна спливаючого стилю. Це чудовий прийом для економії місця на вашому веб-сайті, зберігаючи приховані форми, доки користувач не натисне посилання на реєстрацію.
Оригінальний джерело - Завантажити
Форму нижче можна завантажити безкоштовно завдяки дизайнеру Гіль Гюбрехт. Він використовував подібну картину з зернистим фоном і паперовою текстурою. Те, що мені особливо подобається в дизайні Гіла, - це "великі" елементи. Це набагато зручніше приземлення на форму входу, яка заповнює всю сторінку. Користувачі зможуть легко побачити те, що вони набирають, і менше загрози.
Оригінальний джерело - Завантажити
Якщо ви маєте досвід роботи з розробником інтерфейсу CSS3, то дуже легко перекласти цю графіку в код. Ви навіть можете реалізувати вибраний ефект зовнішнього світіння і округлі кути для кнопок і полів введення.
Контакти
Ще однією формою, яку ви знайдете практично на кожному веб-сайті, є контактна форма. Як правило, вони включають поля для імені відправника, електронної пошти та вмісту повідомлення.
Халява нижче - це приголомшливий приклад використання власних текстур і значків.
Дизайн також використовує текст заповнювача замість міток. Це означає, що, коли форма спочатку завантажує кожне поле, встановлюється значення за замовчуванням (наприклад: ваше ім'я). Але тоді, як ви почнете вводити заповнювач очищається і ваш вміст відображається замість. Усі стандартні браузери підтримуватимуть цей ефект, і це може заощадити місце на сторінці.
Оригінальний джерело - Завантажити
Ще одна чудова халява - це контактна форма з вкладками, розроблена талановитим Jonno Riekwel. Ця конструкція набагато простіша і містить позначки над кожним входом. Це відмінне рішення для великих підприємств або стартапів, яким необхідно надсилати повідомлення через різні відділи компанії.
Оригінальний джерело - Завантажити
Підручники для контактних форм:
- Форма входу / реєстрації: Ідеї та красиві приклади
- Створіть форму входу в аркуші з ефектом Stacked-Paper
- Створіть контактну форму HTML5 / CSS3 на основі Ajax
Стрічки і банери
Всього за 6 або 7 років тому закруглені кути починали зростати в популярних тенденціях дизайну. Тепер ми прийшли ще далі з краплями тіней і кутовими стрічками.
Оригінальний джерело - Завантажити
Деякі з цих елементів можна використовувати як основні елементи дизайну, такі як лічильник коментарів або як дату публікації для блогу. Зшита стрічка вище ідеально підходить для портфелів або сторінок проекту, де ви хочете привернути увагу відвідувача. Ви також можете спробувати подібну вертикальну стрічку, де дизайн падає зверху.
Ці крихітні ефекти сторінки проходять довгий шлях для покращення макета. Відвідувачі звертають увагу і будуть любити ці естетичні примхи. Але врахуйте, що маленькі кутові стрічки є лише частиною цієї тенденції дизайну.
Оригінальний джерело - Завантажити
Додатково повний банер дизайни стали шалено популярні для створення визнання бренду. Ви можете використовувати їх у своєму логотипі, навігації, домашній сторінці або навіть у показаних публікаціях у блогах. Наслідки практично безмежні з хорошими можливостями дизайну.
Упаковка кута
Інший дуже специфічний ефект стрічкового банера виконується, обертаючи дизайн навколо вашого кута сторінки. Це створює ілюзію, що ваша сторінка є 3-D, і стрічка обертається навколо верхньої частини вашого сайту.
Дизайн, наведений нижче, є 100% безкоштовним для завантаження і може використовуватися для власних ідей проекту. Ви можете побачити, як це приверне увагу відвідувачів і чому ця тенденція перетворилася на таке несамовитість. Будьте обережні, щоб не зловживати банерами. Навалом, вони можуть отримати дуже дратує так само, як і старі "Web 2.0" глянцеві / дзеркальні ефекти.
Оригінальний джерело - Завантажити
Проектування за допомогою кнопок
Окрім гіперпосилань, ви отримаєте найбільше взаємодії з відвідувачами за допомогою кнопок. Ці елементи сторінки можуть виконувати будь-які дії за допомогою дзвінків jQuery і Ajax, за винятком того, що ви можете також використовувати кнопки для посилання на статичний вміст, наприклад, безкоштовні завантаження, наприклад!
Комплект UI нижче, розроблений компанією Matt Gentile має набагато більше, ніж просто кнопки. Його набір PSD є фантастичним для початківців, які бажають підібрати градієнти та текстури для створення подібних форм. Часто ви знайдете багато якісніших кнопок у наборах інтерфейсів, ніж з окремими PSD.
Оригінальний джерело - Завантажити
Як створити варіації
Як ви проводите час практикуючи ці методи, ви захочете створити багато різних стилів з плином часу. Це може призвести до перемикання подібних кнопок між різними проектами та макетами. Хорошим прикладом є молочні кнопки, запропоновані дизайнером Роберт ван Клінкен.
Оригінальний джерело - Завантажити
Кожна з перших трьох кнопок має інший стиль градієнта, за винятком наведених і активних станів, які схожі. Під час роботи в Photoshop вам доведеться підбирати кольори між градієнтами або переміщати кольори на шар ефектів. З таким розумінням ви навіть можете побудувати власні кнопки для безкоштовного завантаження!
Оригінальний джерело - Завантажити
Дерево + текстури паперу
Коли вам потрібно приправити ваші основні макети, то вам доведеться рухатися в напрямку більш спритних методів. Текстури завжди раді, якщо ви можете правильно реалізовувати їх за допомогою фонів CSS або вмісту встановленої ширини. І дві найпопулярніші текстури, які я бачив, - це деревина та чисті папери.
Ідея блокнота дійсно проста, але вона може працювати в прохолодному брендинговому дизайні або як елемент елемента інтерфейсу користувача, або вбудований у весь макет. Але папір не завжди виглядає краще самостійно, а інша текстура може допомогти стилям змішатися..
Оригінальний джерело - Завантажити
Зображення будуть виділятися і виглядати чудово загорнуті в зовнішню оболонку. Вся концепція текстури дає вашому сайту певне почуття або емоції. Деревні теми можуть викликати відчуття дому та природи. Там навіть дивовижний дерев'яний комплект веб-інтерфейсу для завантаження Jeremiah Wingett. Якщо ви відчуваєте свою творчість, спробуйте зібрати деякі власні текстури та подивіться, як вони працюють у веб-середовищі.
28 Текстури деревини високого дозволу
Висновок
Кращі веб-дизайнери - це ті, хто практикує щодня і ніколи не дозволяють своїм невдачам стримувати свої кінцеві цілі. Ви повинні бути чутливими і швидко відскакувати від успішних і невдалих спроб. Поради та безкоштовна довідка в цьому посібнику повинні бути гарною відправною точкою для того, щоб почати навчитися будувати різні концепції сторінки для веб-проекту. І ми хотіли б прочитати ваші думки з цього питання в поштовій дискусії.
