Креш-курс по UI-дизайну



Ми завжди в пошуках хороших статей про дизайні, щоб потім використовувати їх у роботі над сайтом «Я люблю ІП». Сьогодні ми перевели ще одну статтю, яка розповідає, чим відрізняється UI-дизайн від UX-дизайну і на яких основних принципах будується дизайн інтерфейсів.

UI vs. UX

Якщо ви хоч трохи цікавилися дизайном додатків, то напевно чули терміни «UI» і «UX». Але чим же вони відрізняються?
У найпростішій формі, UX-дизайн — це те, що робить інтерфейс корисним, а UI-дизайн робить його красивим. Дизайн інтерфейсів — це суміш візуальної ієрархії і елементів інтерфейсу. Щоб розібратися, чим відрізняється прекрасний дизайн від просто хорошого, необхідно зрозуміти, що дизайн інтерфейсів — це всього лише один з шарів цілого дизайн-процесу. Можливо, саме тому ці два терміни так часто плутають. У цій статті я постараюся розповісти, в чому ж полягає різниця між ними з точки зору дизайн-процесу.
Згідно з книги Дж. Гарретта «Елементи досвіду взаємодії», UX-дизайн можна визначити через п'ять основних рівнів. Давайте почнемо з самого абстрактного.

Читати далі →

Як робився новий дизайн сайту viva64.com розробників аналізатора коду PVS-Studio

10 років сайту viva64.com!

Сайту viva64.com — основний майданчику розробників аналізатора коду PVS-Studio виповнилося 10 років! Домен був зареєстрований 09.11.2006 року, а останнє серйозне оновлення дизайну було виконано в грудні 2010 року. Настав час щось змінити.


Читати далі →

Landing Page як заміна всього сайту


Здрастуйте, шановні хабрапользователи! Пропоную поговорити про landing page. Багато хто з вас чули, а, напевно, більшість знають, що це. Але все одно хотілося б трохи загострити на цьому увагу.

Landing page (Цільова, посадкова сторінка) — це можливість для продавця або сервісу за кілька секунд розповісти про свої товари і послуги найголовніше, а для потенційного клієнта — переконатися в тому, що він потрапив «точно в ціль». Одне із завдань створення цільових сторінок — формування позитивного сприйняття реклами і заміна «стандартного» трюку, заснованого на різних импликациях, повноцінним інформаційним блоком.
Читати далі →

10 головних редизайнів новинних медіа в 2016 році

В цьому році поміняв дизайн РБК, Риа Новости, перезапустился Life.ru. Ми зібрали в одному матеріалі головні редизайны російських і західних новинних майданчиків. З картинками «До» і «Після» і коментарями команд про те, навіщо вони змінили сайт.

Російська газета

image

Читати далі →

Техніки захоплення уваги користувача — від фокусника та спеціаліста з питань професійної етики в Google

Я експерт в області того, як в технологіях використовуються слабкі місця нашої психіки. Ось чому я пропрацював останні три роки як фахівець Google з етики в дизайні. Моя робота полягала в проектуванні ПО таким чином, щоб захистити уми мільярда людей від «хитрощів».

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

Як технологія експлуатує слабкі місця нашого розуму?

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

image
Це я, той, що творить «чари» за допомогою спритності рук, на дні народження моєї матері

Саме це і роблять дизайнери з вашим розумом. Вони грають на психологічних вразливості (свідомо чи несвідомо) для того, щоб захопити вашу увагу.

І я хочу показати вам, як вони це роблять.

Читати далі →

22 photoshop-плагіна для фронтенд-розробника

Пропоную читачам «Хабрахабра» добірку 22 доповнень (скриптів) помічників, необхідних фронтенд-розробнику.

Hexy

Hexy

Сумно вибирати шари в макеті і кожен раз запускати палітру кольорів тільки для того, щоб отримати шіснадцяткове значення того чи іншого кольору. Hexy дозволяє використовувати інструмент «Піпетка»: натисніть на колір об'єкта і скопіюйте його в буфер обміну.

Читати далі →

Створення Responsive Landing Page на WordPress від А до Я



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

Читати далі →

Що таке оптимізація конверсії і чим займаються всі ці хлопці

Всім привіт, мене звати Василь і я працюю в компанії, яка займається збільшенням конверсії сайтів за рахунок інноваційних технологій та аналітики.
За відносно тривалий наше існування на російському ринку ми зіткнулися з деякими, досить специфічними проблемами і найбільш специфічна з них полягає в питанні: " Хлопці, а че за хрень, ви таке робите, і головне навіщо мені за неї платити?!"

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

image

Читати далі →

Як підвищити рівень конверсії цільової сторінки сайту з допомогою психології бажання

Створення спокусливих для споживача пропозицій — не така складна задача. Все, що вам потрібно — зрозуміти, що рухає вашими потенційними покупцями. Як тільки ви розберетеся з тим, чого вони насправді бажають, у вас з'являться інструменти для створення пропозицій, від яких просто неможливо відмовитись. Нижче переклад статті Аарона Бишела, яка містить кілька психологічних методик, використовуваних успішними компаніями для стимуляції бажання купувати їх продукцію, а також поради про те, як оптимізувати цільові сторінки і маркетингові акції.
Читати далі →

5 вбивць сумовитих лэндингов

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

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

Ми вступили в нову еру оптимізації посадкових сторінок. Дизайнери, професійні маркетологи, SEO-оптимізатори, CRO, UX-експерти та інші фахівці об'єднали свою колективну мудрість для розробки нового типу посадкових сторінок, які виходять за стандартні рамки і не піддаються традиційній логіці. Це будуть посадкові сторінки майбутнього.

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

image

Читати далі →