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

зробити

Повноекранний

Завдання від клієнта FarFaar нещодавно потрапило на мій стіл. Окрім того, що тема мене влаштовувала, клієнт також надав нам багато приємних фотографій, які було б шкода не використовувати.

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

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

Паралакс

Явним вибором став популярний ефект прокрутки паралаксу, який я хотів спробувати розробити довго.

Ми створюємо ефект Паралакс, щоб об’єкти, що знаходяться на передньому плані Інтернету, рухались швидше, ніж фон під час прокрутки.

Таким чином, наш мозок сприймає вміст як об'єкт, який знаходиться ближче до наших очей, ніж фон, що створює враження тривимірного ефекту. Хоча ми знаємо, що екран плоский.

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

Накладання фотографії, підгонка тексту та створення самого ефекту займе час, але кінцевий результат того вартий.

Гаразд, тому веб-сайт перероблено, створено паралакс. Знову виникає запитання: це має певну додану вартість?

Цього разу я прокручую веб-сторінки і думаю про те, чого йому ще не вистачає. Я зупинюсь над розділом Галерея. де я бачу прекрасну вступну фотографію з хлопчиком біля вогнища. Але я не чую жодного вогню.

У той момент мені спадає на думку додати до галереї звук тріскучого багаття, що поглибить досвід гортання фотографій. Звичайно, ви можете «загасити» його в будь-який час.

Друкарня

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

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

А якщо говорити про кольори, то я дуже смачно ставлюсь до веб-сайтів, які трохи темні.

Не нудна біла павутина і темний шрифт, а навпаки. Звичайно, слід наголосити на тому, щоб контраст між фоном і текстом був достатнім.

Ящики

Іноді, коли я почув поле з полями, я уявляв собі шаблон. Товариш по команді Чейкі переконав мене, що, на його думку, про веб-проекти може бути інакше.

Коли я беру для прикладу веб-сайт Lalala Kidscafé, я бачу стандартні розділи вікон, але оброблені нестандартно.

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

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

Однак це тема для окремої статті, тож колись наступного разу.

Трохи натхнення до кінця

Композиція, кольори, шрифти, зображення, графічні елементи, ефекти. Це всі елементи, з яких складається наш комплект, який називається веб.

Творчі веб-проекти

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

Серед перших я б згадав сторінку Awwwards, де ви знайдете низку креативних веб-проектів з усього світу.

Перевага полягає в тому, що всі знайдені вами сайти вже закодовані та працюють. Тож немає ескізів із Pinterest чи Instagram, де ми можемо знайти багато натхнення, але ніхто не знає, який із них справді можна зробити з точки зору розробника.

Колірні палітри

Я дуже люблю використовувати color.adobe.com при виборі кольорів. Товариші з Adobe створили цю ідеальну сторінку, яка допоможе нам створити омріяну кольорову палітру додаткових кольорів або вибрати одну з тисяч кольорових палітр від колег з усього світу.

Шрифт

Перейдіть до гарнітури. Правильний вибір шрифтів - одне з найважливіших рішень при створенні веб-сайтів. Однак ми не можемо дозволити відвідувачу сайту не мати можливості читати текст на основі неправильно підібраного або занадто маленького шрифту.

Майте на увазі, що Інтернет не повинен містити величезну кількість різних розмірів шрифтів або скорочень. Все в міру.

Ви можете знайти натхнення для якісних безкоштовних шрифтів та акцентів у статті нашого колишнього колеги Лукаша.

Фотографія

За допомогою фотографій та графіки ми допомагаємо відвідувачам легше та швидше розуміти веб-вміст.

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

Чого не забути

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

Ми, дизайнери, повинні пам’ятати, що сьогодні люди відвідують веб-сайти переважно з мобільних телефонів. Тож спершу розробити мобільний? Особисто це полегшує мобільну версію для мене після настільної версії.

Хоча дизайн дуже важливий, і іноді в ньому добре літати, все повинно мати свої правила. У дизайні повинен бути порядок, і все повинно мати сенс. І ми, дизайнери, і розробники.

Однак ми не хочемо, щоб наші колеги-розробники дивилися на нас криво через те, що ми розробили розділи, над якими їм доведеться проводити довгі години.

Звичайно, важливий і експорт, який доставить все необхідне розробнику. Удачі вам у наступному проекті.:)