Слике и цртежи

Графика се најједноставније може дефинисати као представљање информација помоћу слика, боја и облика. Рачунарска графика је област рачунарских наука која се бави изучавањем метода за рад са дигиталним графичким садржајима. Развој рачунарске графике започео је педесетих година прошлог века када је приказан први цртеж на рачунарском монитору. Након тога, креирани су и први програми за цртање и прве рачунарске игре са графичким елементима. Седамдесетих година прошлог века, развојем катодне цеви са екраном у боји, започиње интензиван развој рачунарске графике, који траје и данас.

Графички софтвер служи за креирање, обраду и приказ дигиталних графичких садржаја на рачунару. У зависности од намене и начина на који се слика представља, графички софтвер може се поделити на више група.

Софтвер за растерску графику служи за обраду фотографија и слика које се састоје од пиксела. Примери:

Adobe Photoshop
Corel PHOTO-PAINT
GIMP (бесплатан софтвер отвореног кода)
Paint.NET
Microsoft Paint

Софтвер за векторску графику користи геометријске облике (линије, криве, полигоне...) за креирање илустрација, логоа и техничких цртежа. Примери:

Adobe Illustrator
CorelDRAW
Inkscape (бесплатан софтвер отвореног кода)
LibreOffice Draw

Софтвер специфичан за UI/UX дизајн посебно је намењен за израду прототипа, макета и интерактивних дизајна веб страница и апликација. Омогућава сарадњу више дизајнера у реалном времену и лако тестирање изгледа и функционалности интерфејса. Примери:

Figma је најпопуларнији онлајн алат за тимски рад и дизајн интерфејса
Adobe XD је софтвер за креирање прототипа и интерактивних интерфејса
Sketch је популаран међу дизајнерима који користе macOS
Framer је софтвер који комбинује дизајн и израду прототипа са могућношћу кодирања

Софтвер за 3D моделирање, анимацију и рендеринг се користи у дизајну, архитектури, филмској и видео индустрији за израду тродимензионалних модела, сцена и анимација. Примери:

Autodesk 3ds Max
Autodesk Maya
Blender (бесплатан и веома популаран алат)
Cinema 4D

Софтвер за 2D/3D техничко цртање и дизајн (CAD - Computer-Aided Design) користи се у инжењерству, архитектури и индустријском дизајну за израду прецизних техничких цртежа и модела. Примери:

AutoCAD
SolidWorks
CATIA
PTC Creo (раније Pro/ENGINEER)

Прегледачи слика са основним функцијама за уређивање, омогућавају брзо прегледање и једноставне измене дигиталних фотографија. Примери:

Microsoft Photos
IrfanView
XnView
ACDSee

Растерска графика

Растерска слика састоји се од правоугаоне мреже тачака које се називају пиксели. Сваки пиксел има:

свој положај (координате x и y),
боју,
и интензитет осветљености.

Резолуција растерске слике одређена је бројем пиксела по ширини и висини. На пример: \(3072\times{2048}=6291456px≈6Mpx\)

Термин резолуција у рачунарској графици може се односити и на:

резолуцију екрана – густину пиксела по инчу (Pixels Per Inch – PPI),
резолуцију штампе или скенирања – густину тачака по инчу (Dots Per Inch – DPI).

Координатни систем у 2D рачунарској графици има две димензије: хоризонталну (x оса) и вертикалну (y оса). У овом систему, тачке се дефинишу као пар бројева, где је x координата која означава положај на ширини екрана, а y координата која означава положај на висини екрана. У већини случајева, координата (0,0) налази се у левом горњем углу екрана, а вредности x и y расту ка десној и доњој страни екрана.

Растерска графика игра кључну улогу у дизајну корисничких интерфејса, посебно када је реч о:

Фотографијама и реалистичним сликама које се користе у позадинама, галеријама производа, корисничким профилима и визуелним садржајима који захтевају детаље и нијансе боја.
Иконама и UI елементима који се често креирају у растерском формату за специфичне резолуције. Модерни дизајнери морају водити рачуна о различитим густинама пиксела на различитим уређајима (1x, 2x, 3x резолуције).
Оптимизацији за веб и мобилне уређаје где је неопходно балансирати квалитет слике и величину фајла. Формати као што су JPEG, PNG и WebP се користе у зависности од потреба дизајна.

Главни изазов растерске графике је што губи квалитет при увећавању. Ово је посебно проблематично у респонзивном дизајну где се интерфејс мора прилагодити различитим величинама екрана. Због тога дизајнери морају:

Креирати графику у вишеструким резолуцијама (@1x, @2x, @3x)
Користити SVG формат када год је то могуће за иконе и једноставне графичке елементе
Оптимизовати слике за брзо учитавање без губитка видљивог квалитета

Векторска графика

Векторски цртеж се формира коришћењем геометријских елемената као што су тачке, линије, криве, елипсе и полигони, заснованих на математичким изразима. Захваљујући томе, векторска слика може се неограничено увећавати без губитка квалитета. Векторска графика се најчешће користи за логотипе, илустрације, техничке цртеже и графички дизајн.

Векторска графика је постала стандард у UI/UX дизајну захваљујући својим предностима:

Скалабилност без губитка квалитета чини векторску графику идеалном за респонзивни дизајн. Иста икона или логотип може се користити на мобилном телефону, таблету, десктоп рачунару и великим екранима без икаквих измена.
Мале величине фајлова омогућавају брже учитавање страница и апликација, што директно утиче на корисничко искуство. SVG фајлови су често десетак пута мањи од еквивалентних растерских слика високе резолуције.
Лака измена и прилагођавање дозвољава дизајнерима да брзо мењају боје, величине и облике елемената без потребе за поновним креирањем графике.

SVG (Scalable Vector Graphics) је постао незаменљив формат у дизајну интерфејса јер:

Подржава интерактивност и анимације директно у кôду
Може се стилизовати помоћу CSS-а
Приступачан је за скрин ридере (читаче екрана)
Има малу величину фајла
Савршено се приказује на екранима високе резолуције (Retina, 4K)

Комбиновање растерске и векторске графике

У професионалном UI/UX дизајну, дизајнери често комбинују обе технике:

Векторска графика за иконе, логотипе, дугмад, илустрације и све елементе интерфејса који треба да буду скалабилни
Растерска графика за фотографије, сложене текстуре, реалистичне слике и ситуације где је неопходан висок ниво детаља

Дизајн систем и графика

Дизајн систем (Design System) представља скуп стандарда, компоненти и смерница који осигуравају конзистентност визуелног идентитета и корисничког искуства. Графички елементи су централни део сваког дизајн система. Компоненте графичког дизајна у дизајн системима су:

Иконографија представља скуп икона које деле исти визуелни језик. Доследност у величини, дебљини линија, стилу углова и општем изгледу икона је кључна за професионалан изглед интерфејса.
Илустрације доприносе јединственом визуелном идентитету бренда. Многе компаније развијају препознатљив стил илустрација који се користи кроз све њихове производе.
Типографија и графичка хијерархија раде заједно да створе јасну и читљиву структуру информација. Графички елементи као што су линије, облици и боје помажу у дефинисању визуелне хијерархије.

Графички формати

Формат датотеке представља начин на који се информације кодирају за складиштење у датотеци. Формати датотека могу бити власнички или слободни, затворени или отворени итд. Власнички формати дизајнирани су од стране одређених компанија, организација или индивидуа и заштићени су ауторским правима. Супротно власничким форматима, слободни формати су у јавном домену. За затворене формате датотека не постоји јавно доступна документација и њихове шеме за кодирање информација представљају пословну тајну. Отворени формати су доступни свима и обично добро документовани од стране организација за стандардизацију.

Екстензија датотеке представља суфикс одвојен тачком од имена датотеке, указујући на формат датотеке. Екстензија помаже оперативном систему да асоцира датотеке одређеног формата са одређеним софтвером – на пример датотеке са екстензијом txt асоцира са софтвером Notepad, датотеке са екстензијом docx асоцира са софтвером Microsoft Word итд. Асоцијације датотека одређеног формата са одређеним софтвером у оперативном систему Wиндоwс може да се мења.

Избор правог формата слике је кључан за оптималне перформансе и квалитет интерфејса:

JPEG (Joint Photographic Experts Group) је идеалан за фотографије и сложене слике са много боја. Користи компресију са губитком, што омогућава мале величине фајлова, али може довести до губитка квалитета.
PNG (Portable Network Graphics) подржава транспарентност и користи компресију без губитка. Идеалан је за логотипе, иконе и графику која захтева оштре ивице и транспарентну позадину.
SVG (Scalable Vector Graphics) је векторски формат заснован на XML-у. Најбољи избор за иконе, логотипе и једноставне илустрације у UI дизајну.
WebP је модеран формат који нуди бољу компресију од JPEG и PNG формата, уз подршку за транспарентност и анимације. Све популарнији у веб дизајну.
GIF (Graphics Interchange Format) подржава једноставне анимације и ограничену палету боја. Користи се за мале анимације и икону индикатора учитавања, али га све више замењују модернији формати.

Приступачност и графика

Приступачност (Accessibility) мора бити у центру пажње при раду са графичким елементима:

Алтернативни текст (alt text) за све слике које носе информације је неопходан како би особе које користе скрин ридере могле да разумеју садржај.
Контраст између текста и позадине мора бити довољан да обезбеди читљивост за особе са оштећењем вида. WCAG смернице препоручују минимални контрастни однос од 4.5:1 за нормалан текст.
Боје не смеју бити једини носиоц информације јер особе са далтонизмом можда неће моћи да их разликују. Увек користите додатне визуелне знакове као што су иконе, облици или текстуалне ознаке.

Закључак

Разумевање разлике између растерске и векторске графике, као и њихових оптималних примена, је фундаментално знање за сваког UI/UX дизајнера. Модерни дизајн алати као што су Figma, Adobe XD и Sketch олакшавају рад са обе врсте графике и омогућавају креирање флексибилних, скалабилних и приступачних интерфејса. Кључ успешног дизајна је у правилном избору технике за сваку ситуацију и константној оптимизацији за најбоље корисничко искуство.