"Сміливий, плаский і красивий" - це нове гасло веб-дизайну. Останнім часом, flat інтерфейси набувають популярності. Такі компанії, як Microsoft і Google, в значній мірі сприяють цій тенденції: Windows 8 і матеріальний дизайн відповідно.
Сьогодні, більшість нових веб-сайтів відштовхуються від цієї концепції при розробці дизайну. Отже, що ж являє собою плаский дизайн веб-сайту? Давайте розглянемо кілька важливих аспектів.
Місце! Багато місця!
Ваш сайт повинен бути просторим. Ви не повинні заповнювати його великою кількістю компонентів. Наприклад, зробіть меню навігації великим і простим.
Погляньте на панель навігації sitepoint.com. Це виглядає просто, елегантно й привабливо. Можете бути певні, користувачам сподобається таке рішення.
Якщо ви створюєте блог, статті повинні бути добре відокремлені один від одної. Це також стосується інтернет-магазинів, де правильне розміщення продуктів є дуже важливим.
Сміливі кольори тексту і фону
Поєднуючи сміливі кольори для тексту і фону, ви можете виділити ваш контент серед інших веб-сторінок.
Вибір комбінацій з більш ніж 5 кольорів може заплутати аудиторію. Безкоштовні веб-інструменти, як Adobe Color CC можуть допомогти вам обрати гарне поєднання кольорів. Пошукайте по ключовому слову "flat" і ви отримаєте ряд пласких колірних поєднань.
Погляньте на flat ui кольори, які пропонує flatuicolors.com. Це може бути прекрасною відправною точкою для вас.
Панорамні зображення і відео-фони
Використання великого красивого фону - гарний спосіб зробити ваш сайт більш привабливим. Відео фони стали дуже популярними останнім часом. Великі компанії, такі як PayPal використовують відео-фони на своїх цільових сторінках.
Однак ви повинні бути обережні при використанні відео-фонів. Вони не повинні стати причиною сповільнення вашої веб-сторінки. Ви завжди повинні мати запасне зображення в разі, якщо відтворення відео є неможливим.
Як приклад, сторінка PayPal:
Використання нетематичних відеокліпів та зображень в якості фону може призвести до зниження ефективності сторінки.
Зрозумілі шрифти
Використання зрозумілих шрифтів - це один з найбільш важливих факторів у створенні прозорого і красивого дизайну. Текст на вашому сайті повинен бути читабельним і доступним. Apple.com - це еталон.
Деякі шрифти, які ви можете розглянути: helvetica Neue, Open Sans, Source Sans Pro, Raleway та ін. Helvetica - платний шрифт, в той час як останні 3 знаходяться у вільному доступі на Google Fonts. Ви також повинні вміти гарно підібрати розмір, Занадто великий або маленький текст чи підпис можуть знизити якість дизайну вашої веб-сторінки.
Іконкові веб-шрифти
Іноді, повідомлення або команду краще зобразити за допомоги символів. Іконки активно використовуються в наші дні, так як з ними легко працювати і вони мають величезну кількість переваг. Ви можете більш детально дізнатися про іконкові веб-шрифти у цій статті.
Використовуючи піктограми замість тексту в деяких місцях, ви можете зробити ваш сайт більш привабливим та зрозумілим. Я також рекомендую не використовувати спрайт зображення, так як, на відміну від іконочних веб-шрифтів, їх неможливо змінювати за допомогою CSS, а ще вони погано виглядають на Retina дісплеях.
"Ні" тіням та градієнтам
Пройшли ті часи, коли ми використовували CSS тіні і градієнти, щоб зробити веб-компоненти більш реалістичними.
Сміливий і привабливий логотип
Ваш логотип повинен відповідати дизайну сайту. Іноді, використовуючи невірний логотип, ви можете вплинути на загальний дизайн сайту. Спробуйте зробити простий, але ефективний логотип, який буде доповнювати дизайн сайту. Також, намагайтесь використати максимум два кольори в логотипі. Добре, якщо ці кольори зустрічаються в колірному рішенні самої веб-сторінки.
Логотип scotch.io в якості прикладу:
Прозорі шари
Краще всього використовувати RGBA. Наприклад, якщо навігаційна панель фіксується у верхній частині сторінки, використайте RGBA для створення глянцевого ефекту.
Apple використовує прозорість панелі навігації.
Паралакс ефект
Ефект паралакса - одним з найпопулярніших ефектів веб-розробки. Веб-сторінки, такі як сторінка профілю Twitter, сторінки продуктів Apple і багато інших використовують цей ефект для створення красивого дизайну.
Ви можете легко створити ефект паралакса на вашому сайті, використовуючи GumbyFramework's Parallax Component.
Інтуїтивно-зрозумілий UI
Спробуйте зробити компоненти веб-сторінки максимально простими та зрозумілими шукаючи аналоги з реального світу. Наприклад, перемикачі замість радіо-кнопок можуть поліпшити загальний дизайн.
Погляньте на набори кнопок і перемикачів, передбачених FlatUI.
Висновок
Я сподіваюся, що наведені вище 10 кроків створення привабливого плаского дизайну допоможуть вам при розробці UI. Ви також повинні пам'ятати, що простий, чистий і інтуїтивно зрозумілий дизайн завжди буде популярним.
Сподіваюся, вам сподобалося читати цю статтю :)
Ще немає коментарів