Nola masterizatu diseinuaren diseinua

Diseinu bisualaren oinarriak ikasteko gida osoa.

Milioi dolarreko galdera: zein da diseinu onaren sekretua?

Hori buruz filosofikotzat jo dezakegu. , baina, oro har, diseinu onaren "sekretu" esaera zure elementu bisualak antolatzeko moduan datza, oihalarekin erlazionatuta eta elkarren artean. Funtsean, diseinuaren diseinua deskribatu berri dugu. Pentsatzen duzunean, begiratzen duzun toki guztietan dago.

Hartu aldizkari baten diseinua, adibidez. Haien diseinuak sareta-sistema klasiko bati jarraitzen dio (sareei buruzko guztia minutu batean ikasiko dugu). Dena ezkerrera, eskuinera eta behealdean lerrokatuta egon ohi da. Batez ere, zutabeek lerrokadura justifikatua daukate, orria ikusmen erakargarria ez ezik, irakurtzeko erraza eta autoritatezkoa ere bihurtzen duena. Titulu handiek ikuslearen arreta erakartzen dute, eta azpitituluak, berriz, tamainaren kontraste gisa etortzen dira informazioaren hierarkia bisuala sortzeko.

Linda Gaom, Behance

Kalitate horiek guztiek osatzen dute orria. diseinu garbia, egituratua eta irakurterraza, eta bat datoz jarraian hitz egingo ditugun aholkuekin. Baina lehenik eta behin, uler dezagun diseinuaren diseinuari berari buruz.

Zer da Diseinuaren Diseinua?

Diseinuaren diseinua elementu grafikoen antolaketari dagokio, irakurlearen arreta erakartzeko eta mezu jakin bat modu bisual erakargarrian helarazteko. .

Beraz, ez gara hitz egiten ariatsedenlekua, beste elementu batzuek norabidea ematen duten bitartean.

Hori ulertzeko modu erraz bat gure webgunearen adibidea hartzea da, adibidez. Grafikoak testutik argi bereizten dira, eta ekintzarako deiak ere bai, beraz, ikuslearen arreta informazio multzo batetik bestera nabigatzen ari da.

Printzipioa. #5. Erabili Kontrastea

Ikusi ere: Egin zure aldizkariaren azalaren diseinua

Ziurtatu diseinuan nahikoa kontraste duzula.

Kontrasteak zure diseinua antolatzen laguntzen du eta beharrezkoa den hierarkia ezarriko du eta garrantzitsua dena azpimarratuko du.

Hori baino gehiago, kontrastea ondo erabiltzeak ere interes bisuala gehitzen du zure diseinu osoan. Eman dezagun, dena tamaina, forma edo kolore berekoa den diseinua aspergarria izango dela. Kontrasteak gauzak hobetzen ditu.

Zure lehenengo pentsamendua koloreen kontrastea izan daiteke, hala nola, beroa eta freskoa, iluna versus argia, urdina versus laranja. Baina kolorea kontrastearen printzipio ezinbestekoa den arren, mota, lerrokadura eta tamaina kontrasteak ere badaude. Eta gogoratu, kontrastea ere erlatiboa da. Beste elementu batzuekin juxtaposizioan baino ez du esanahia.

Hona hemen arau hau modu dotore eta eder batean erabiltzen duten diseinuen adibide batzuk. Kontuan izan tipografian, kolorean eta baita elementuen arteko tamainaren kontrastea ere.

Iturria: IAG Adiskidetzeko Ekintza Plana

6. printzipioa. Errepikapena, Eredua, Erritmoa

Errepikapenean pentsatzen dugunean, pentsatzen duguelementu beraren behin eta berriz.

Baina diseinuan ezberdina da. Zalantzarik gabe, ez da hori bezain aspergarria. Behar bezala erabiltzen bada, errepikapenak zure diseinua indartu dezake.

Saiatu diseinu osoan motibo bat identifikatzen eta berrerabiltzen, hainbat eremu lotuta senti daitezen eta konposizio beraren parte izan daitezen. Zure diseinuak gai bat izaten lagunduko dizu. Elementuak errepikatuz, zure ikusleen itxaropenen arabera ematen ez ezik, erabiltzailearen esperientzia ere hobetuko duzu. Koherentea izateak erabiltzaileak erosoago sentituko ditu.

Formak edo ikurrak errepikatuz egin dezakezu hori. Edo kolore-eskema bat, letra tipo bat eta, oro har, estilo bera.

Ohitura ona da familia ugariko tipografia erabiltzea. Mugatu ereduen, lerroen pisu/estiloen eta koloreen kopurua, eta errepikatu. Gainera, saiatu irudien eta grafikoen estiloa berdin mantentzen. Adibidez, erabili artista beraren ilustrazioak.

Iturria: Thepentool.co

Hori da. Hauek dira zure diseinua antolatzen eta diseinu garbiagoa, profesionalagoa eta orekatuagoa lortzen lagunduko dizuten sei printzipioak.

Baina zure bidaia ez da hemen amaitzen. Diseinu grafikoa ez da zientzia zehatza eta ez da aholku eta printzipioetara mugatu behar. Sorkuntzaren arlo guztietan egia den bezala, ez dago arau gogorrik. Aholku hauek modu sotilean hautsteak sakontasuna eta barietatea gehituko dizkiozure diseinuak.

Hala ere, abiapuntu bikainak dira eta probatzera animatzen zaitugu. Eta jakin iezaguzu nola funtzionatu duten!

Deskargatu Vectornator hasteko

Eraman zure diseinuak hurrengo mailara.

Ikusi ere: Ikasi puntu-lerroei buruz Illustrator-en Deskargatu fitxategia logo diseinuari buruz hemen. Baina inprimatutako materialaren diseinuak, adibidez, egunkariak, aldizkariak, kartelak eta haien pareko digitalak, baita web, aplikazioak edo UX/UI diseinuak ere.

‘Diseinua’ hitzak argibide asko ematen dizkigu. Orrialde batean aurrez zehaztutako elementuen antolaketa esan nahi du.

Diseinu bat eraginkorra denean, itxura ona du eta ikuslea gidatzen du diseinuak transmititu nahi duen mezua ulertzera. Diseinua ulertzea, beraz, funtsezkoa da konposizio erakargarriak, eraginkorrak, erabilerrazak eta atseginak sortzeko.

Diseinu batek bere mezua ondo helarazten ez badio publikoari, edo bestela esanda, ez du "ondo irakurtzen". ", diseinua ez da eraginkorra izango modan dagoen arren. Diseinuaren diseinuaren alorrean, edukiak joerak eta trikimailuak ordezkatzen ditu.

Diseinuaren helburua

Mezu bat azkar transmititzea

Hau da gakoa. Diseinuaren diseinuak aktibo grafikoen arteko erlazioa ezartzen du begien mugimenduaren fluxu leuna lortzeko eraginkortasun eta eragin handiena lortzeko.

Oreka sortzeko

Diseinuaren diseinuaren printzipioak erabiltzea da sortzeko modurik errazena. oreka eta simetria zentzua zure diseinu-proiektuetan aspertu gabe.

Kohesiotasuna sortzeko

Diseinuak zure diseinuko elementu asko erraz digeritzen, kohesionatu eta logiko batean antolatzen laguntzen dizu.

Edertasuna sortzeko

Oreka eta egiturak modu naturalean sortzen dute edertasuna.Zure diseinuaren diseinua behar bezala egiten bada, automatikoki erakargarria izango da ikuslearentzat. Ikusleek zenbat eta ahalegin gutxiago egin behar duten mezu bat ulertzeko, orduan eta erakargarriagoa izango da zure diseinua.

Frank Philippin-en diseinatzailea 'I Used to Be a Design Student: Then - libururako. Orain». Iturria: DesignBoom

Diseinuaren diseinuaren elementuak

Testua

Horrek testuaren gorputza edo paragrafoak ez ezik, izenburuak, azpitituluak, goiburuak eta orri-oinak ere hartzen ditu barne. Zure tipografia, kolorea eta tamaina aukeratzeak efektu desberdinak izango ditu zure diseinua zure ikusleengana nola itzultzeko.

Irudia

Irudi mota ohikoenak argazkiak, ilustrazioak edo infografiak dira.

Formak

Formak geometrikoak izan daitezke, oso angeluak direnak, edo organikoak izan daitezke, mundu naturala imitatuz. Abstraktuak ere izan daitezke. Forma abstraktuak oso modan egon dira azken urtean, web-diseinatzaileek konposizio konplexu eta zabaletan sartzen ikusi baititugu.

Formek irudi bat ordezka dezakete. Edo orri bati elementu grafikoak gehitzeko, testua nabarmentzeko edo beste elementu bisualen arteko espazioa mugatzeko erabil daitezke.

Zuzki zuria

Edozein diseinu-diseinuak zuriune jakin bat izango du. horrek zure elementuei arnasa hartzeko eta bere kabuz nabarmentzeko aukera emango die.

Layout Designaren Urrezko Printzipioak

Ohartuko zara printzipioak direla.diseinuaren diseinuak diseinuaren oinarrizko printzipio asko jarraitzen ditu. Kolorea modu jakin batean erabiltzea bezala, tipografia, errepikapena, kontrastea, hierarkia eta oreka.

#1. printzipioa. Erabili Sareak

Sareek diseinu-elementu ezberdinak, adibidez, testua eta irudiak, koherente eta erraz jarraitzeko moduan kokatzen laguntzen die diseinatzaileei.

Ordenaren sentsazioa ematen dute, elementuek elkarren mendean hartu ez dezaten. , eta garrantzitsuena, sareek zure lerrokatzea ere zuzenduko dute. Zure lana garbiagoa eta profesionalagoa izan dadin.

Iturria: hgmlegal.com

Sareen anatomia

Lerro bertikalak eta horizontalak besterik ez direla pentsa dezakezu, baina sare bat hainbat zatiz osatuta dago. Asko, hain zuzen. Hona hemen oinarrizko sareta batean ezagutu behar duzun terminologia garrantzitsuena:

• Formatua zure azken diseinuaren eremu osoa da. Beraz, inprimatzeko zerbait diseinatzen baduzu, formatua orria da, eta web diseinatzailea bazara, formatua web orria edo arakatzailearen leihoa da.
• Marjinak formatuaren eta diseinuaren arteko nahita hutsuneak dira.
• Flow-lerroak zure diseinua atal paraleloetan banatzen duten lerro horizontalak dira. Flowlinek zure diseinuaren irakurgarritasuna laguntzen dute eta irakurlea gidatzen dute edukia zuzen jarrai dezan.
• Moduluak lerro horizontalek eta bertikalek osatzen dituzten blokeak dira.edozein saretako fluxu-lerroak. Pentsatzen baduzu, edozein sareren oinarriak dira. Zure modulu bertikal guztiek zure zutabeak sortzen dituzte, eta zure sare horizontal guztiek zure errenkadak sortzen dituzte.
• Eskualdeak konektatutako moduluen taldeak dira, bertikalak edo horizontalak. Ez dago araurik hauek antolatzea erabakitzeko moduari buruz.

Iturria: Radversity

Sare-motak

Diseinu-sareak lehen aldiz antolatzeko erabiltzen ziren. eskuzko idazkera paperean.

XIII. mendetik aurrerakoak dira, Villard De artista frantziarrak sareta-sistema eta urrezko proportzioa batu zituenean inprimatutako orrialde-diseinuak marjinekin ekoizteko. Sare-sistema hau gaur arte ikus dezakezu, inprimatutako liburu eta aldizkarien diseinu gehienek frogatzen duten moduan. Argitaletxeek, editoreek eta diseinatzaileek sare estandarrak erabiltzea nahiago dute itxura ona dutelako ez ezik, irakurleek diseinu-elementu jakin batzuk leku jakin batean egotea espero dutelako.

Sareak bi modutara diseina daitezke: simetrikoak. edo asimetrikoa. Sare simetrikoak erdiko lerro bati jarraitzen diote, non eskualde bertikalak eta horizontalak elkarren berdinak diren; eta zutabeek zabalera bera dute.

sare asimetriko batean , izenak dioen bezala, ertzak eta zutabeak ez dira denak berdinak.

Sailkapen honetan oinarrituta, mundu osoan erabiltzen diren bost diseinu-sare-mota nagusi daude, haietan fida zaitezke:

Eskuizkribuasaretak dokumentuetarako sareta mota ohikoenak dira. Goiburua, oina eta marjinak bereizten dituzte, eta, funtsean, zure testuari mugak ematen dizkion formatuaren (edo orriaren) barruan laukizuzen bat sortzen dute. Aldizkari, egunkari eta liburuen oinarria dira. Beraz, ziurrenik gehien ezagutzen duzun diseinua da.

Iturria: UXplanet

Iturria: Radversity

Zutabe-sareak aldizkariak argitaratzeko beste gogokoenak dira. Aldizkariaren diseinu tipiko batek zutabe-sareak erabiltzen ditu testua erraz irakurtzeko ataletan bereizteko. Baina oso ezagunak dira webguneetarako ere. Bi edo sei sareta erabil ditzakezu. Gehiago posible da, baina ez da ohikoa. Zutabe-sareei buruzko gauza oso garrantzitsua da zutabeen arteko tartea, edo erretenak, elkarrengandik berdin urrun egotea.

Egunkariek zutabe-sare simetrikoak erabiltzen dituzte, adibidez, web diseinuan zutabe-sare asimetrikoak hobesten diren bitartean. .

Iturria: UX Planet

Iturria: Radversity

Sare modularrak zutabeen sarearen antzekoak dira, baina fluxu-lerro horizontalak ere hartzen dituzte kontuan. Sare-mota hau beharrezkoa da zure diseinuan hainbat elementu antolatu behar dituzunean eta zutabe-sareak nahikoak ez direnean.

Sare moduluek tamaina bereko moduluak dituzte eta horrek oso erraza da zure espazio-eremuak modu ezberdinetan bistaratzea.

Iturria: UXPlaneta

Iturria: Radversity

Oinarrizko sareak bikainak dira testuetan oinarritutako konposizioetarako. Oinarrizko lerroa testua idazten duzunean gelditzen den lerroa da, eta lehen lerroa bi oinarri-lerroen arteko tartea da. Zure goiburuak edo azpitituluak zenbaterainokoak izan behar diren galdetzen al duzu?

Oinarrizko saretak hemen daude zure testuari erritmo jarioa ematen laguntzeko.

Iturria: UX Planet

Iturria: Fragaria

Sare hierarkikoak sare guztiak baino gutxiago dirudi. parekoak. Hala ere, oso erabilgarriak dira diseinu-elementuak garrantzia-ordenaren arabera antolatzeko. Sare hierarkikoak sare modularetan oinarritu daitezke, edo zurea ere sor dezakezu. Webguneek sare hau asko erabiltzen dute, batez ere aldizkari eta egunkari digitalak sare hierarkikoetan baino gehiago fidatu ohi dira zutabeen sareetan digital bihurtzeko trantsizioan.

Iturria: UX Plane

Printzipioa. #2. Erabili espazio negatiboa

Askotan uste dugu hutsunea, isiltasuna edo kolorerik eza txarra dela. Baina ez dugu kontuan hartzen nola diren kontrastearen oinarri sendoa.

Zuriunea ere deitzen zaio, espazio negatiboa zure diseinuko benetako elementurik ez duen eremua da. Hutsik utzitako eremua da. Ez ditu zure ondasunak inguratzen soilik, haien artean beharrezkoak diren loturak ere sortzen ditu. Hori dela eta, espazio negatiboa diseinu elementu egokia da eta eragin handia du zure diseinuaren eraginkortasuneandiseinua da.

Eremu negatibo ona eta txarra

Eremu negatiboak zure diseinuko hainbat eremu bereizten lagunduko dizu, eta, aldi berean, zure diseinua arnasa hartzen utziko du. Ikusmen hierarkia eta ikusmen oreka laguntzen du; erabiltzailearen arreta oinarrizko elementuetan ezartzen du; distrazio maila murrizten du; eta, azkenik, zure diseinuari estiloa eta dotorezia gehitzen dizkio.

Esperientziarik gabeko diseinatzaileek beren oihal gehiena betetzeko joera izan dezakete, testua handituz edo logotipo bat edo irudi bat lehertuz. Baina elementuei lekua emateak aukera ematen dio ikusleari informazio-zantzu batzuk azkarrago eta erosoago hautatzeko.

Denak ikuslearen arretarako deia egiten badu, ez da ezer entzuten.

– Aaron Walter, 'Design for emozioa'

Zure espazio negatiboa zehazteko modu erraz bat sareta modular bat erabiltzea da. Hori zure diseinuaren gainean jarriz gero, erraz ikus dezakezu zein modulu egon daitezkeen hutsik eta zeintzuk bete behar diren.

Brunswicker-en diseinatzailea, Iturria: Codesignmag.com

3. printzipioa. Aukeratu foku bakarra

Bezeroren batek logotipoa handitzeko eskatu al dizu inoiz? Eta gero titularra are handiagoa izateko?

Ezin duzu dena azpimarratu. Diseinu onaren puntua garaitzen du. Denbora bezala, fokua erlatiboa da. Elementu bat nabarmentzeko, beste batek atzealde gisa balio behar du. Elementu batzuek beste batzuk nagusitu behar dituzte zure diseinua bistaratzekohierarkia bisual bat.

Diseinu baten ardatza pisu bisual handiena duen elementua da. Begiak lehenik erakartzen dituen elementua da, zure diseinuan beste ezer baino gehiago.

Fokagune batek zure ikusleei zure diseinuan non hasten den jakinaraziko dio ikusleei. Beraz, kontatzen ari zaren istorioaren hasiera da.

Hori normalean irudi handi bat edo tipografia iturri handi bat erabiliz lor daiteke. Kontuan izan beheko fokua zein eraginkorra den

Braulio Amado-k diseinatua Bloomberg Businessweek-erako, Iturria: Polita da

Baina foku batek zure ikuslearen arreta erakartzen duen arren, hurrengo arauak gidatzen lagunduko du.

#4. printzipioa. Pentsa Hurbiltasuna eta Fluxua

Hurbiltasunaren printzipioa sinplea da. Ziurtatu elkarrekin erlazionatutako elementuak elkarrekin jartzen direla.

Hurbiltasunak adierazten du ikusizko aktiboak konektatuta daudela eta zure diseinua antolatzen laguntzen duen ikusmen-unitate bat bihurtzen dela.

Beraz, elkarren artean harremana duten diseinu-aktiboen multzoak soilik eta erabili zure diseinuko informazio-poltsak zure ikusleak kontsumitu behar duten eduki garrantzitsura bideratzeko. Horri fluxuaren printzipioa ere deitzen zaio.

Iturria: Satori Graphics

Emari ona duen diseinu batek ikusleen begia eramango du diseinu osoan, elementuz elementu, erraztasunez. Zure fokuak begia tira eta bihurtuko dira