Суворова Максима учня 9 -А классу Киево-Печерського лiцею

Суворова Максима учня 9 -А классу Киево-Печерського лiцею № 171 «Лiдер» м. Киева

Дизайн графiчних iнтерфейсiв

Роздiли • • • Поняття графiчних iнтерфейсiв Iсторiя iнтерфейсiв Види iнтерфейсiв та iх застосування Дослiдження та «iдеальный iнтерфейс» Розробка графічного iнтерфейсу web-сайту учбового закладу Список допомiжних матерiалiв

Поняття графiчних iнтерфейсiв

Поняття «iнтерфейсу» в дизайнi Графі чний інтерфе йс кори стувача (дали «ГІК» , англ. GUI, Graphical user interface) — інтерфейс між комп'ютером і його користувачем, що використовує піктограми, меню, і вказівний засіб для вибору функцій та виконання команд. Зазвичай, можливе відкриття більше, ніж одного вікна на одному екрані. ГІК — система засобів для взаємодії користувача з комп'ютером, заснована на представленні всіх доступних користувачеві системних об'єктів і функцій у вигляді графічних компонентів екрану (вікон, значків, меню, кнопок, списків і т. п. ). При цьому, на відміну від інтерфейса командного рядка, користувач має довільний доступ (за допомогою клавіатури або пристрою координатного введення типу «миша» ) до всіх видимих екранних об'єктів.

Графiчный iнтерфейс системи Mac OS 10. 8 Mountain Lion

Графiчный iнтерфейс вэб-сайту Apple

Графічний інтерфейс системи «i. OS»

Графiчный iнтерфейс вэб-сайту «Спорт навколо»

Iсторiя iнтерфейсiв

История графичных интерфейсив • Вперше термин «Графичный интерфейс користувача» (англ. «GUI» ) був выкорыстаный науковцем Дугласом Энгельбартом

Порівняння вдалого інтерфейсу та невдалого i. OS Android

. . . Інші погані приклади Black. Berry Symbian Windows Mobile

Элементи iнтерфейсу системы «i. OS» — кожен елемент має загругленi угли, об’емнiсть, стилизациiю пiд металевый або глянцевий матерiaл.

Вiкна в системi мають стилiзацiю пiд рiзнi матерiали (наприклад, шкiра) та предметы (наприкад, книга).

Дослідження та «iдеальний iнтерфейс»

Правильна композиція. Увага людини. Демонстрація звертання уваги людини, відкрите Якобом Нільсеном, . Червоним виділено перші зони уваги, на які люди більше звертають уваги. На сході строго навпаки.

Правильні елементи графічного інтерфейсу Елемент с закругленимою рамкою сконцентровую увагу в центр предмету «Квадратний» елемент розсіює увагу.

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

Пiктограми програм у системi «i. OS» мають загругленi угли та об’ємнiсть.

Читабелність тексту • • Також немалу роль грає читабельність тексту. На цей впліває багато факторів: колір тексту, колір фону, шрифт, розмір тексту, начірк, відступи, тіні, об’ємність. На зображеннях демонструеться важливість кольорів та видступів.

Приклади шрифтів та їх вживання

Розробка графічного інтерфейсу web-сайту учбового закладу На основі всіх викладенних правил композиціі та «юзабіліті»

Сайт 171 -го лiцею — типовый сайт учбового закладу. Його потрібно переробити.

Розробка графiчного iнтерфейсу

Допомижна литература • • • Артемий Лебедев — «Ководство» Jeffrey Zeldman — «Talking Your Talent to the Web» Ян Чихольд — «Облiк книги» Юрiй Гордон — «От А до Я» Rob Carter — «Working With Computer Type» Edward Taftey — «Visual Explanations: Images and Quantities, Evidence and Narrative» Jacob Nilsen — «Designing User Interfaces for International Use» Jacob Nilsen — «Usability Engineering» публiкацii Джефа Раскiна

Допомижни вэб-сайты • • www. artlebedev. ru — сайт Студии Артемия Лебедева. www. tema. livejournal. ru — блог дизайнера А. Лебедева www. deviantart. com — сайт-збiрник графiчных робот www. uicloud. com — база графiчных интерфейсив www. dafont. com — информацiйний портал, база шрифтiв http: //smoking-room. ru/data/pnp/gui_history/ — ступенi розвитку интерфейсiв http: //marketnotes. ru/about-usability/usability_tips/ — 10 заповiдей Якоба Нельсена http: //archive. org/web. php — «Way. Back Machine» — архів вєбсайтів

Видео-метарiалы • Документальний фiльм «Пiраты Силiконовою Долини» • Документальний фiльм «Стiв Джобс»