Negativni prostor u dizajnu: saveti i najbolja praksa

Negativni prostor u dizajnu: saveti i najbolja praksa

Članak razmatra važnost negativnog prostora u dizajnu korisničkog interfejsa za web i mobilne uređaje: definicija, saveti i primeri negativnog prostora u interfejsima.

Često mislimo da su tišina, praznina ili bezbojnost loše za nas. Prihvatamo ih zdravo za gotovo bez razmišljanja da su oni čvrst temelj kontrasta. Samo tišina omogućava nam vrednost zvuka. Samo prazan prostor omogućava nam razumevanje čime želimo da ga ispunimo. Samo bezbojnost omogućava nam da osetimo boje svetlije i dublje kada se pojave na pozornici. A samo odsustvo vazduha omogućava nam da znamo koliko je to bitno. Danas govorimo o vazduhu u dizajnu. Hajde da razgovaramo o negativnom prostoru.

Šta je negativan prostor u dizajnu?

U osnovi, negativni prostor – ili beli prostor, kako se često naziva – je oblast grafičkog interfejsa koja ostaje prazna. To može biti ne samo oko objekata koje postavljate u interfejs, već i između i unutar njih. Negativni prostor je vrsta prostora za disanje za sve objekte na stranici ili ekranu. Ne samo što definiše granice objekata, već i stvara potrebne veze između njih prema Geštalt principima i stvara efikasnu vizuelnu performansu. Zbog toga je beli prostor pravi element dizajna koji ima veliki uticaj na pozitivno korisničko iskustvo. „Beli prostor je poput platna: pozadina drži elemente zajedno u dizajnu, omogućavajući im da se ističu“ – kaže Mads Soegaard iz Interaction Design Foundation.

Negativni prostor grafičkog dizajna često se vidi u logotipima, ilustracijama, posterima i kreativnim slovima gde postaje aktivni deo vizuelne prezentacije što ključne stvari još više čini ekspresivnim. Na primer, na ilustraciji bloga ispod možemo videti kako pozadinski element (mesec) igra ulogu kontrastnog negativnog prostora, što čini da astronaut izgleda živopisnije i dinamičnije.

U UI dizajnu za web lokacije i mobilne aplikacije negativni prostor je veliki faktor visoke upotrebljivosti i upravljivosti interfejsa. Negativni prostor oko elemenata interfejsa takođe se naziva i makro prostor, dok se prostor između njih i iznutra (za slova i tačke) naziva i mikro prostor.

Koja je razlika između belog i negativnog prostora?

Kratak odgovor: nema razlike. Ovi termini su suštini sinonimi.

Zašto se ova pojava naziva u dva različita termina? Odgovoriti je lako ako pratite poreklo. Izraz “beli prostor” potiče od dizajna štampanja još od vremena kada su stranice bile uglavnom bele, pa je beli razmak bio sve oko, između i unutar slova i simbola, kao i oko ilustracija. Danas, kada se koristi u dizajnu, ovaj izraz nema nikakve veze sa belom bojom: sve se više odnosi na prazan prostor, a ne na boju. Izraz “negativni prostor” dolazi od fotografije: na fotografiji oni definišu pozitivni prostor (objekti koji privlače pažnju) i negativni prostor (pozadina).

Ono što je važno imati na umu da negativni prostor u web dizajnu ne mora biti samo beli – možete koristiti bilo koju boju, teksturu, šemu (pattern) ili pozadinsku sliku.

Zbog čega je važan negativan prostor

Zamislite da uđete u sobu koja je u potpunosti napunjena raznim stvarima. Police, kutije, torbe, gomile knjiga i odeće, sto koji je prepun raznih stvari. Da li ćete se moći koncentrisati u takvim uslovima? Da li su vam zaista potrebne sve te stvari trenutno? Da li ćete moći da pronađete ono što vam treba i koliko vremena će vam trebati? Pa, to je sasvim isto što vide i osećaju korisnici otvaranjem stranice ili ekrana koji ne sadrži negativni prostor.

I klijenti i neki dizajneri možda žele da stave što više elemenata i funkcija na jednu stranicu ili ekran misleći da će to spasiti posao i da će biti korisno za klijente. Ali to je greška: u stvari, korisnicima ne treba sve odjednom. Čak štaviše, previše elemenata bez dovoljno vazduha značajno podiže nivo ometanja: preopterećeni informacijama i interaktivnim elementima od kojih većina njima nije potrebna, korisnici će se morati potruditi da pronađu ono što im treba. Kao što je Aarron Valter spomenuo, „ako sve vrišti za pažnjom gledalaca, ništa se neće čuti“.

design quotes UI UX tubik collection

Među prednostima promišljenog pristupa negativnom prostoru u dizajnu mogli bismo pomenuti sledeće:

  • podržava skeniranje stranice
  • poboljšava vizuelnu hijerarhiju
  • čini veze između elemenata vidljivim i prirodno uočenim bez dodatnih sredstava poput tablica, okvira, strelica
  • pruža dovoljno vazduha na stranici da se ne bi osećala pretrpano
  • postavlja korisnikovu fokusnost na osnovne elemente i smanjuje nivo odvlačenja pažnje
  • stranici dodaje stil i eleganciju.

Na primer, pogledajmo odredišnu stranicu Big City Guide. Ovde dizajner primenjuje pozadinsku fotografiju i ona igra ulogu negativnog prostora na makro nivou. Štaviše, elementi fotografije i slova glavnog elementa međusobno su povezani: to čini negativni prostor aktivnim elementom dizajna i daje stranici ujedinjen harmoničan izgled.

web ui design city guide

Osnovni faktori pod uticajem negativnog prostora

Pravilna upotreba negativnog prostora može imati značajan uticaj na sledeće faktore korisničkog iskustva.

Čitljivost i čitkost: ako nema dovoljno prostora između elemenata, oni postaju teški za čitanje i zahtevaju dodatni napor. To može biti jak razlog za napetost očiju i mozga, mada mnogi korisnici neće moći da formulišu problem. Pravilna količina negativnog prostora, posebno mikro prostora, rešava ovaj problem i čini proces prirodnijim. Dakle, negativan prostor direktno utiče na efikasnost tipografije na stranici ili ekranu. U muzici pauze igraju istu ulogu kao i zvukovi. Kada čitate, radi na isti način: pravilno postavljeni prazni prostori olakšavaju čitanje teksta.

Brendiranje: Ako proverite bilo koju smernicu za izradu logotipa, ustanovićete da dizajneri definišu odgovarajuću količinu negativnog prostora oko nje tako da je ispravno uočena. Kršenje ovih pravila štetno je za vizuelne performanse.

Priroda resursa: negativni prostor ima uticaj na takozvani dizajnerski ton. Na primer, resursi za vesti će imati manje belog prostora na početnoj stranici od blogova kako bi se postavilo raspoloženje i razumevanje da je platforma puna podataka koji se dinamički pojavljuju.

Odnos pažnje: dovoljno negativnog prostora poboljšava vizuelnu hijerarhiju i omogućava korisnicima da se fokusiraju na ključne elemente.

typography in ui design

Na osnovu toga, negativan prostor ima uticaj na vizuelnu percepciju u sledećim aspektima:

  • tekstualni sadržaj
  • grafički sadržaj
  • navigacija
  • identitet.

Proverićemo nekoliko primera. Evo početne stranice za The Big Landscape. Bez ikakvih vizuelnih okvira i tabela, zbog uravnotežene upotrebe negativnog prostora, dizajner gradi jaku vizuelnu hijerarhiju i omogućava korisniku da skenira razne blokove sadržaja u deliću sekunde. Ovakav dizajn izgleda organizovano, ali lagan i prozračan. Bijela pozadina i raspored izgleda tako da izgledaju slično časopisu koji skladno informiše čitaoca o ciljevima i prirodi ovog internet časopisa.

web design UI concept tubik studio

Drugi primer je mobilna aplikacija Upper up: ovde je negativni prostor sav crn, što stvara sjajan kontrast osnovnim elementima interfejsa. Za cijeli ekran koristi se samo jedna ravna linija. Ipak, sav interfejs izgleda organizovano i lako čitljiv zbog dovoljno vazduha i bez distraktora. Takođe podržava stilističku minimalističku eleganciju kojom favorizuje estetsko zadovoljstvo.

upper app UI design case study

Zamke koje treba razmotriti

1. Zbunjujuća terminologija. Kada razgovarate sa klijentima koji možda nisu duboko upoznati sa uslovima dizajna, obavezno objasnite značenje negativnog prostora pre nego što opišete rešenje dizajna. Ne-dizajneru može biti teško da shvati zašto je „ovom ekranu potrebno više belog prostora“, gledajući potpuno crnu pozadinu, kao i negativan prostor, možda biti povezano sa nečim lošim – što nije.

2. Želite da smanjite negativni prostor da biste stavili više na stranicu ili ekran. To se događa ne samo kod UI dizajna: možda čujete kako dizajner enterijera preporučuje da uštedite malo prostora klijentu koji želi 4 police za knjige u jednoj sobi umesto dve, ili arhitekti koji objašnjava zašto je potreban prazan prostor oko zgrade koji bi ga učinio da izgledajte i služi bolje. Čak štaviše, ponekad ponovno planiranje elemenata uz bolju upotrebu negativnog prostora stvara iluziju da je soba ili zgrada veća nego što stvarno jeste – a isto se događa i sa podacima koje morate da stavite na mobilni ekran ili veb stranicu. Odlučite šta je najvažnije, šta je sekundarno i šta može biti eliminisano tako da intuitivno orijentiše korisnika. Negativni prostor će vam pomoći da postignete harmoničan izgled ekrana ili stranice čak i ako je pun informacija i funkcija.

3. Loše određivanje prioriteta. Negativni prostor nije lek sve dok promišljena informaciona arhitektura ne stoji iza interfejsa. Pre nego što razmislite o dizajnerskom izgledu, morate da odlučite kako će korisnik pronaći prečicu do svog cilja i rešiti svoj problem sa aplikacijom ili web stranicom. Planirajte ovo pre nego što budete prezentovali; u suprotnom, čak ni najbolja ravnoteža vizuelnih elemenata, uključujući negativan prostor, neće raditi efikasno.


Asteroid style balans bazar beli prostor dizajn fotošop hyppo beba ikigai kako da smanjim sliku kako da smanjim sliku za web korisni pluginovi lični razvoj logo logotipi mali proizvodjaci motivacija online prodaja optimizacija slike optimizacija slike za sajt optimizacija slike za web pcelarstvo stevanovic photoshop plaginovi pluginovi plugins prazan prostor prirodan med prodaja psihologija prodaje radost na poslu saveti slikarstvo smanjivanje slike tipografija trendovi UI umetnost unapređenje biznisa uravnotežen život useful plugins web design web dizajn web dizajn 2020. Zmaja Pyroart život

8 Tipografskih saveta za dizajnere: Kako učiniti da vaši fontovi progovore

8 Tipografskih saveta za dizajnere: Kako učiniti da vaši fontovi progovore

Novi članak posvećen temi UI tipografije: pročitajte zbirku saveta o tome kako tipografiju učiniti funkcionalnom i harmoničnom u korisničkim interfejsima za veb i mobilne uređaje.

Tipografija je način komunikacije sa korisnicima. Vizuelne performanse i čitljivost u digitalnim proizvodima imaju veliki uticaj na korisničko iskustvo. Jedan od guru grafičkih dizajnera, Hoon Kim, jednom je rekao: „Tipografski dizajn je vidljiv i zvučan. Ako imate odličan scenario, sada je vreme da glumite dobre glumce. ”Tipografija može postati glas dizajna. Odgovarajuća tipografija sama za sebe postavlja pravo raspoloženje i prenosi određenu poruku korisnicima. Današnji članak predstavlja savete koji će vam pomoći u stvaranju efikasne tipografije.

Tipografska hijerarhija čini da stvari funkcionišu

Da bi se stvorio dizajn prijatan za percepciju korisnika, svi njegovi elementi trebaju biti dobro organizovani i jasni za navigaciju. Dizajneri postavljaju pravilnu strukturu uspostavljajući vizuelnu hijerarhiju. Organizuje sve vizuelne elemente kako bi korisnici lakše uočili sadržaj.

Vizuelna hijerarhija se može podeliti na različite delove. Jedan od njih koji se odnosi samo na elemente kopiranja naziva se tipografska hijerarhija. Cilj mu je organizovanje kopiranja sadržaja deljenjem na različite vrste kao što su zaglavlja, podnaslovi, kopiranje tela, naslovi i drugo. Razlike između vrsta kopija postavljaju se regulacijom porodice (font-family), veličinama, širinom i bojama fontova.

Jasna tipografska hijerarhija čini tekst čitljivim i lakim za skeniranje. Štaviše, jednostavno je označiti ključne delove teksta kako biste privukli pažnju korisnika i povezali ih sa očekivanim radnjama.

Uzmite u obzir kontekst i publiku.

Kada je u pitanju izbor fontova, bitna stvar koju treba uzeti u obzir je kontekst kopije i potencijalna publika. Svaki font dovodi svoje raspoloženje u izgled. Postoje prijateljski, smešni, ozbiljni, poslovni i mnogi drugi fontovi koji će se uklopiti u određeni dizajn.

Pre nego što odaberete font, morate da naučite ciljeve svog klijenta, kao i potrebe i sklonosti ciljne publike. Vizuelno izvođenje fontova utiče na prvi utisak koji korisnik dobija od proizvoda. Ako vrsta fonta ne odgovara raspoloženju koje proizvod cilja, može doći do nesporazuma sa publikom. Na primer, ako dizajner odabere font koji izgleda previše zabavno i glupo za poslovnu web lokaciju, korisnici će oklevati da li je kompanija pouzdana. Ili, ako je proizvod namenjen mladima, previše formalni font može izgledati dosadno.

Duboka pažnja mobilnoj tipografiji

Dizajneri često eksperimentišu sa tipografijom kako bi projekat bio originalan. Međutim, kada je u pitanju mobilni UI dizajn, tipografima bukvalno nedostaje prostora. Ekrani za mobilne uređaje su prilično mali što postavlja novi izazov dizajnerima da se nose s ograničenjima bez gubitka smisla i funkcionalnosti. Mobilna tipografija zahteva obraćanje posebne pažnje na detalje, od odgovarajuće veličine fontova do dužine linije.

U poređenju sa veb dizajnom, mobilnoj tipografiji je teže dostići dobru čitljivost. Veličina fonta ne bi trebalo da bude premala, jer će na sitnim ekranima izgledati nečitko. Štaviše, ako je tekst prevelik, neće se uklopiti ni na mali ekran. Pored toga, dizajneri moraju da se brinu o nivou kontrasta, jer ekran sa ambijentalnom svetlošću i visokim kontrastom može naštetiti očima korisnika.

Dalje, dizajner treba da razmisli o tipografskoj funkciji. Korisnički interfejs pametnih telefona uključuje tekstualne delove na koje se može kliknuti i dizajneri moraju osigurati da ih korisnici koriste. Ako su ti delovi premali, ljudi ih ne mogu pritisnuti prstom i to je prilično neugodno.

Imajući u vidu sve sitne detalje u mobilnoj tipografiji, dizajneri mogu korisnicima doneti dragocene proizvode.

Minimalizam ne može naškoditi

Ponekad, kada dizajneri imaju za cilj da prikažu sve aspekte digitalnog proizvoda, oni pokušavaju da koriste puno različitih stilova i fontova u jednom dizajnu. Kao rezultat, oni dobijaju dizajn preopterećen nepotrebnim ometajućim detaljima i nedostaje im dobar vizuelni utisak.

Stručnjaci obično pokušavaju da zadrže broj fontova između dva ili tri za isti dizajn. To omogućava suštinski kontrast između elemenata, uz očuvanje ravnoteže i prave poruke dizajna. Primena različitih stilova (podebljana, kurziv) takođe bi trebala biti minimalna. Oni su dobri za naglašavanje zaista važnih delova, ali prekomerna upotreba njih može učiniti da tekst izgleda neuredno.

Takođe, kopiranje sadržaja ne sme preplaviti korisnike nepotrebnim informacijama. Naravno, posao pisca je da stvori odgovarajući tekst ali takodje i dizajneri treba da sarađuju sa njima kako bi bili sigurni da će tekst odgovarati dizajnu.

Tekst mora da “diše”

Nivo čitljivosti se uveliko oslanja na to koliko prostora postoji između slova, reči i linija teksta. Praćenje, kerning i vođenje su procesi prilagođavanja belog prostora između tipografskih elemenata. Beli prostor je područje između elemenata u dizajnerskoj kompoziciji.

Manjak belog prostora može se završiti lošom čitljivošću sadržaja, jer je teško razlikovati reči koje su preblizu postavljene jedna do druge. Odgovarajući beli prostor vizuelno olakšava očima korisnika i omogućava lako prelazak iz jedne reči u drugu, iz jedne linije u drugu. Međutim, pokušajte da ne preterate, jer u suprotnom to može uništiti jedinstvo teksta.

Gradi tipografiju poput naučnika, preispitaj i prepravi kao umetnik

Tipografija je složena nauka koja se sastoji od mnogih pravila i propisa. Oni koji su ih pokrivali u stanju su da stvore čistu radnu tipografiju. Međutim, to nije dovoljno. Klijenti uvek zahtevaju originalnost i emociju, ali to ne može biti urađeno samo prateći pisana uputstva.

Dizajneri nikada ne bi trebali da potisnu svoje umjetničke duše. Mašta i osećaj lepote unose jedinstvenost u bilo koji projekat, pa i u onaj najbanalniji. Pronađite ravnotežu između strogih pravila i neobičnog izbora, a rezultati mogu iznenaditi vas i vaše kupce.

Šarenoj tipografiji je potrebna pažljivost

O ovoj temi se često raspravlja. Neki misle da u tipografiji nema mesta za boju, a neki tvrde da je to potrebno za dizajn lepog izgleda. Nema smisla tražiti pravu stranu spora jer nema ukusa za ukus. Ipak, šarena tipografija postoji i dizajneri je primenjuju prilično često.

Među prednostima šarene tipografije spomenimo element emocije koji dodaje bilo kojem korisničkom sučelju kao i mogućnost isticanja tačaka interesa za korisnike. Štaviše, svaka boja može preneti određenu poruku jer ima uticaja na um i ponašanje korisnika.

Da biste iskoristili sve prednosti, šarenu tipografiju treba primenjivati pažljivo i pažljivo jer je jednostavno pretvaranje korisničkog interfejsa u šareni haos. Evo korisne kontrolne liste za ovakve slučajeve:

Neka bude kontrast. Veliki problem koji šarena tipografija može doneti je loša čitljivost. Pravilan kontrast između fontova i pozadine pomoći će da se ovo izbegne. Međutim, osigurajte da kontrast izgleda prijatno i ne opterećuje oči.

Ne koristite previše boja. Ponovo pokušajte da ne pretvorite UI u nered. Previše boja izgleda distraktivno i amaterski.

Harmonija boja. Zapamtite osnove lekcije iz umetnosti. Koristite kolo boja i šeme da biste izabrali odgovarajuću paletu.

Pazite sa efektima. Fluorescentne, luminiscentne, metalne i užarene boje imaju svoje osobine i ne mogu uvek izgledati dobro na digitalnom ekranu.

Naučite osnove tipografije

Možda zvuči previše očigledno da neki dizajneri ignorišu osnove nauke o tipografiji. Oslanjaju se na moderne alate koji automatski biraju font ili se samo nadaju da će biti dovoljne estetske karakteristike odabranih fontova. Takav pristup izgleda kao učenje čitanja bez znanja abecede.

Dizajneri koji ne poznaju koncepte i anatomiju slovopisa ne mogu u potpunosti iskoristiti potencijal tipografije. Svako odlučuje sam ako treba da nauči nauku dubinski, ali osnove su temelj svakog zanata. O temi tipografije postoji prilično veliki broj dobrih knjiga koje možete proučiti, ali o njima ćemo pisati u nekom drugom članku.