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

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

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

Тож, дещо узагальнюючи, ми пропонуємо вважати, що такими складовими є:

  • Розмітки
  • Типографія
  • Колірні палітри
  • Компоненти
  • Іконки
  • Дизайн-принципів

Що це все таке — зараз розберемося. І почнемо з розміток!

Розмітки

Розмітки англійською зазвичай називають Layouts. Це слово ще можна перекласти як «шаблони» чи «каркаси» (але оскільки ми вже використовували це слово для ескізів, то щоб уникнути плутанини, тут будемо використовувати термін «розмітка»).