Kiel Majstri Aranĝitdezajnon

Plena gvidilo por lerni la bazojn de vida dezajno.

La milion-dolara demando: kio estas la sekreto de bona dezajno?

Ni povas filozofii pri ĉi tiu. , sed ĝenerale parolante, la proverba 'sekreto' al bona dezajno kuŝas en la maniero kiel vi organizas viajn vidajn elementojn, rilate al via kanvaso, kaj unu kun la alia. Esence, ni ĵus priskribis aranĝan dezajnon. Kiu, kiam oni pensas pri tio, estas ĉie kie oni rigardas.

Prenu ekzemple la aranĝon de revuo. Ilia dezajno sekvas klasikan kradsistemon (ni lernos ĉion pri kradoj en minuto). Ĉio estas kutime vicigita maldekstre, dekstre kaj malsupre. La kolumnoj precipe havas klaran pravigitan vicigon, kiu faras la paĝon ne nur vide alloga, sed ankaŭ facile legebla kaj aŭtoritata. La grandaj titoloj altiras la atenton de la spektanto, dum la subtitolo venas kiel kontrasto en grandeco por krei vidan hierarkion de informoj.

Linda Gaom, Behance

Ĉiuj ĉi tiuj kvalitoj faras la paĝon. dezajno pura, strukturita kaj facile legebla, kaj ili harmonias kun la konsiletoj, pri kiuj ni parolos poste. Sed unue, ni komprenu pli pri aranĝodezajno mem.

Kio estas aranĝodezajno?

Aranĝodezajno koncernas la aranĝon de grafikaj elementoj por altiri la atenton de la leganto kaj transdoni apartan mesaĝon en vide alloga maniero. .

Do ni ne parolasla ripozejo, dum aliaj elementoj donas direkton.

Simpla maniero kompreni tion estas preni la ekzemplon de nia retejo, ekzemple. Grafikaĵoj estas klare apartigitaj de la teksto, kaj ankaŭ la alvokoj al ago, do la atento de la spektanto navigas de unu aro de informoj al la sekva.

Principo. #5. Uzu Kontrasto

Aseguru, ke vi havas sufiĉe da kontrasto en via dezajno.

Kontrasto helpas organizi vian desegnon kaj starigos tre bezonatan hierarkion kaj emfazos kio estas grava.

Pli ol tio, bona uzo de kontrasto ankaŭ aldonas vidan intereson tra via dezajno. Ni alfrontu ĝin, aranĝo kie ĉio estas la sama grandeco, formo aŭ koloro aspektos enuiga. Kontrasto spicas aferojn.

Via unua penso povus esti kolorkontrasto, kiel varma kontraŭ malvarmeta, malhela kontraŭ hela, blua kontraŭ oranĝa. Sed dum koloro estas ekstreme esenca principo de kontrasto, ekzistas ankaŭ kontrastoj de tipo, vicigo kaj grandeco. Kaj memoru, kontrasto ankaŭ estas relativa. Ĝi havas signifon nur ĉe apudmeto kun aliaj elementoj.

Jen kelkaj ekzemploj de aranĝoj, kiuj uzas ĉi tiun regulon en inteligenta kaj bela maniero. Rimarku la kontraston en tipografio, koloro, kaj eĉ la kontrasto en la grandeco inter elementoj.

Fonto: IAG-Repaciiga Agadplano

Principo n-ro 6. Ripeto, Skemo, Ritmo

Kiam ni pensas pri ripeto, ni pensasde la sama elemento denove kaj denove.

Sed ĝi estas malsama laŭ dezajno. Ĝi certe ne estas tiel enuiga kiel tio. Se uzata ĝuste, ripetado povas efektive plifortigi vian dezajnon.

Provu identigi kaj reuzi motivon tra via aranĝo por ke diversaj areoj sentas sin ligitaj kaj parto de la sama komponado. Ĝi helpos vian dezajnon havi temon. Ripetante elementojn, vi ne nur liveras laŭ la atendoj de via publiko, sed vi ankaŭ plibonigos la uzantan sperton. Esti konsekvenca igas la uzantojn sentiĝi pli komfortaj.

Vi povas fari tion ripetante formojn aŭ simbolojn. Aŭ eĉ kolorskemon, tiparo, kaj la sama stilo ĝenerale.

Vidu ankaŭ: Kiel Krei Viglan Jutuban Enkondukon

Bona kutimo estas uzi tiparo kun granda familio. Limigu la malsaman nombron da ŝablonoj, liniopezoj/stiloj kaj koloroj, kaj ripetu ĉie. Ankaŭ provu konservi la stilon de bildoj kaj grafikaĵoj la sama. Ekzemple, uzu ilustraĵojn de la sama artisto.

Fonto: Thepentool.co

Jen. Ĉi tiuj estas la ses principoj, kiuj helpos vin organizi vian dezajnon kaj atingi pli puran, pli profesian kaj ekvilibran aranĝon.

Sed via vojaĝo ne finiĝas ĉi tie. Grafika dezajno ne estas ekzakta scienco kaj ĝi ne devus esti limigita al konsiloj kaj principoj. Kiel estas vera en ĉiuj kampoj de kreado, ne ekzistas malfacila regulo. Elrompi ĉi tiujn konsiletojn en subtilaj manieroj aldonos profundon kaj varion alviaj desegnaĵoj.

Tamen ili estas bonega deirpunkto kaj ni kuraĝigas vin provi ilin. Kaj informu nin kiel ili funkciis!

Elŝutu Vectornator por Komenci

Prenu viajn desegnaĵojn al la sekva nivelo.

Elŝutu dosieron pri logodezajno ĉi tie. Sed la dezajno de presita materialo, kiel gazetoj, revuoj, afiŝoj kaj iliaj ciferecaj ekvivalentoj, same kiel retejo, aplikaĵo aŭ UX/UI-dezajno.

La vorto 'aranĝo' donas al ni multajn sugestojn. Ĝi signifas aranĝon de antaŭdestinitaj elementoj sur paĝo.

Kiam aranĝo estas efika, ĝi aspektas bone, kaj ĝi gvidas la spektanton kompreni la mesaĝon kiun la dezajno provas transdoni. Kompreni aranĝon do estas ŝlosilo por krei allogajn, efikajn, uzeblajn kaj plaĉajn komponaĵojn.

Se aranĝo ne bone transdonas sian mesaĝon al la publiko, aŭ alivorte, ĝi ne "legas bone". ", la dezajno estos senefika kiom ajn laŭmoda ĝi aspektas. En la sfero de aranĝodezajno, enhavo anstataŭas tendencojn kaj trukojn.

La Celo de aranĝodezajno

Por transdoni mesaĝon rapide

Ĉi tio estas ŝlosilo. Enpaĝiga dezajno establas la rilaton inter grafikaj aktivoj por atingi glatan fluon de okulmovo por maksimuma efikeco kaj efiko.

Krei ekvilibron

Uzi la principojn de aranĝodezajno estas la plej simpla maniero krei senton de ekvilibro kaj simetrio en viaj projektaj projektoj sen iĝi enuigaj.

Por krei koherecon

Arpaĝigo helpas vin aranĝi la multajn elementojn de via dezajno en facile digestebla, kohezia kaj logika maniero.

Krei belecon

Ekvilibro kaj strukturo nature kreas belecon.Se via aranĝo estas farita ĝuste, ĝi aŭtomate fariĝos vide alloga por la spektanto. Ju malpli da peno la spektantoj devas fari por kompreni mesaĝon, des pli alloga ŝajnos via dezajno.

Dezajnisto de Frank Philippin por sia libro 'I Used to Be a Design Student: Then - Nun.' Fonto: DesignBoom

Vidu ankaŭ: Pliĝustigu Adobe Illustrator Penilojn

La Elementoj de Enpaĝiga Dezajno

Teksto

Ĉi tio inkluzivas ne nur la tekstokorpon aŭ alineojn, sed ankaŭ titolojn, subtitolojn, kapliniojn kaj piedliniojn. Via elekto de tipografio, koloro kaj grandeco atingos malsamajn efikojn pri kiel via aranĝo tradukiĝos al via publiko.

Bildo

La plej oftaj specoj de bildoj estas fotoj, ilustraĵoj aŭ infografioj.

Formoj

Formoj povas esti geometriaj, kiuj estas tre angulaj, aŭ ili povas esti organikaj, imitante la naturan mondon. Ili ankaŭ povas esti abstraktaj. Abstraktaj formoj estis tre laŭmodaj en la pasinta jaro, ĉar ni vidis retajn dezajnistojn integrigi ilin en kompleksajn kaj disvastigajn komponaĵojn.

Formoj povas anstataŭigi bildon. Aŭ ili povas esti uzataj por aldoni grafikajn elementojn al paĝo, reliefigi tekston aŭ marki la spacon inter aliaj vidaj elementoj.

Blanka spaco

Ajna enpaĝigo havos certan kvanton da blanka spaco. tio permesos al viaj elementoj spiri kaj elstari memstare.

La Oraj Principoj de Enpaĝiga Dezajno

Vi rimarkos, ke la principojde aranĝodezajno sekvas multajn el la fundamentaj principoj de dezajno. Kiel uzi koloron en certa maniero, tipografio, ripeto, kontrasto, hierarkio kaj ekvilibro.

Principo #1. Uzu kradojn

Kradoj helpas al dizajnistoj poziciigi diversajn dezajnelementojn kiel tekston kaj bildojn en maniero kiu aspektas kohera kaj facile observebla.

Ili donas senton de ordo, ili malhelpas elementojn superforti unu la alian. , kaj plej grave, kradoj ankaŭ korektos vian vicigon. Farante vian laboron senti pli pura kaj pli profesia.

Fonto: hgmlegal.com

La anatomio de kradoj

Vi eble pensas, ke ĝi estas nur vertikalaj kaj horizontalaj linioj, sed krado konsistas el pluraj partoj. Multaj, fakte. Jen la plej grava terminologio, kiun vi bezonas scii en baza krado:

• Formato estas la plena areo de via fina dezajno. Do se vi desegnas ion por presado, la formato estas la paĝo, kaj se vi estas retprojektisto, la formato estas la retpaĝo aŭ la foliumila fenestro.
• Marĝenoj estas la intencitaj malplenaj spacoj inter la formato kaj la desegno.
• Flulinioj estas la horizontalaj linioj kiuj apartigas vian aranĝon en paralelajn sekciojn. Flulinioj helpas kun la legebleco de via dezajno kaj gvidas la leganton sekvi la enhavon ĝuste.
• Moduloj estas la blokoj kiuj estas formitaj de la horizontalaj linioj kaj vertikalaj.flulinioj de iu krado. Se vi pensas pri tio, ili estas la konstrubriketoj de iu ajn krado. Ĉiuj viaj vertikalaj moduloj kreas viajn kolumnojn, dum ĉiuj viaj horizontalaj kradoj kreas viajn vicojn.
• Regionoj estas grupoj de ligitaj moduloj, ĉu vertikalaj ĉu horizontalaj. Ne ekzistas reguloj pri kiel vi decidas organizi ĉi tiujn.

Fonto: Radversity

Tipoj de kradoj

La enpaĝigaj kradoj unue estis uzataj por aranĝi manskribo sur papero.

Ili devenas jam de la 13-a jarcento, kiam franca artisto Villard De kunfandis la kradsistemon kun la ora proporcio por produkti presitajn paĝaranĝojn kun marĝenoj. Vi povas vidi ĉi tiun kradsistemon ĝis hodiaŭ, kiel pruvas la plimulto de presitaj libroj kaj revuoj. Eldonistoj, redaktistoj kaj projektistoj preferas uzi normajn kradojn ne nur ĉar ili aspektas bone, sed ĉar legantoj atendis, ke certaj dezajnelementoj estos en aparta loko.

Kradoj povas esti desegnitaj en du manieroj: simetriaj. aŭ nesimetria. Simetriaj kradoj sekvas centran linion, kie la vertikalaj kaj horizontalaj regionoj estas egalaj unu al la alia; kaj kolumnoj havas la saman larĝon.

En nesimetria krado , kiel la nomo sugestas, la randoj kaj la kolumnoj ne ĉiuj estas identaj.

Surbaze de ĉi tiu klasifiko estas kvin ĉefaj specoj de aranĝokradoj uzataj tutmonde, je kiuj vi povas fidi:

Manuskripto.kradoj estas la plej ofta speco de krado por dokumentoj. Ili apartigas la kaplinion, piedlinion kaj randojn, kaj esence kreas rektangulon ene de la formato (aŭ la paĝo), kiu provizas la limojn al via teksto. Ili estas la bazo por revuoj, gazetoj kaj libroj. Do verŝajne ĝi estas la aranĝo, kiun vi plej konas.

Fonto: UXplanet

Fonto: Radversity

Kolumnaj kradoj estas alia ŝatata en revuo-eldonado. Tipa revuo-aranĝo uzas kolumnkradojn por apartigi tekston en facile legeblajn sekciojn. Sed ili estas tre popularaj ankaŭ por retejoj. Vi povas uzi ion ajn de du ĝis ses kradoj. Pli eblas, tamen ne ofta. Tre grava afero pri kolumnaj kradoj estas, ke la interspaco inter la kolonoj, aŭ la defluiloj, estas egale malproksimigitaj unu de la alia.

Simetriaj kolumnaj kradoj estas uzataj de gazetoj, ekzemple, dum nesimetria kolumna krado estas preferita en retejo-dezajno. .

Fonto: UX-Planedo

Fonto: Radversity

Modulaj kradoj similas al la kolumna krado, sed ili ankaŭ respondecas pri la horizontalaj flulinioj. Ĉi tiu speco de krado estas bezonata kiam vi devas organizi diversajn elementojn en via aranĝo kaj la kolumnaj kradoj simple ne sufiĉas.

Modulaj kradoj havas samgrandajn modulojn, kio faciligas bildigi viajn spacajn zonojn en malsamaj manieroj.

Fonto: UXPlanedo

Fonto: Radversity

Bazaj kradoj estas mirindaj por tekst-bazitaj komponaĵoj. Bazlinio estas la linio kie teksto ripozas kiam vi tajpas, kaj gvidado estas la interspaco inter du bazlinioj. Ĉu vi scivolas kiom grandaj devus esti viaj titoloj aŭ subtitoloj?

Bazliniaj kradoj estas ĉi tie por helpi doni al via teksto fluan ritmon.

Fonto: UX-Planedo

Fonto: Fragaria

Hierarkiaj kradoj aspektas malpli kiel krado ol ĉiuj iliaj ekvivalentoj. Tamen, ili estas tre utilaj kiam oni organizas dezajnelementojn laŭ sia ordo de graveco. Hierarkiaj kradoj povas esti bazitaj sur modulaj kradoj, aŭ vi eĉ povas krei vian propran. Retejoj uzas ĉi tiun kradon multe, precipe ciferecaj revuoj kaj gazetoj emas fidi pli je hierarkiaj kradoj ol kolumnaj kradoj en sia transiro al cifereciiĝo.

Fonto: UX-Aviadilo

Principo. #2. Uzu Negativan Spacon

Ni ofte pensas, ke malpleno, silento aŭ manko de koloro estas malbona afero. Sed ni ne konsideras kiel ili estas la solida fundamento de la kontrasto.

Ankaŭ nomata blanka spaco, negativa spaco estas tiu areo en via dezajno kiu ne havas iujn ajn realajn elementojn. Ĝi estas la areo lasita malplena. Ĝi ne nur ĉirkaŭas viajn aktivaĵojn, ĝi ankaŭ kreas la necesajn ligojn inter ili. Pro tio, negativa spaco estas prava dezajnelemento kaj havas amasan efikon sur kiom efika via aranĝodezajno estas.

Bona kontraŭ malbona negativa spaco

Negativa spaco helpos apartigi diversajn areojn en via dezajno, samtempe permesante al via aranĝo spiri. Ĝi helpas kun vida hierarkio kaj vida ekvilibro; ĝi fiksas la fokuson de la uzanto sur la kernelementoj; ĝi reduktas la nivelon de distro; kaj fine, ĝi aldonas stilon kaj elegantecon al via desegno.

Nespertaj dezajnistoj povus havi la emon plenigi kiel eble plej multe de sia kanvaso, per pligrandigo de teksto aŭ krevigado de emblemo aŭ bildo. Sed doni ĉambron al viaj elementoj permesas al la spektanto elekti certajn informindikojn pli rapide kaj pli komforte.

Se ĉio krias por la atento de via spektanto, nenio estas aŭdata.

– Aaron Walter, 'Design for emocio'

Facila maniero determini vian negativan spacon estas uzi modulan kradon. Metante tion sur vian dezajnon, vi povas facile bildigi kiuj moduloj povas resti malplenaj, kaj kiuj devus esti plenigitaj.

Dezajnisto de Brunswicker, Fonto: Codesignmag.com

Principo #3. Elektu Ununuran Fokulon

Ĉu kliento iam petis vin fari la emblemon pli granda? Kaj poste por eĉ pligrandigi la titolon?

Vi ne povas emfazi ĉion. Ĝi venkas la punkton de bona dezajno. Same kiel tempo, fokuso estas relativa. Por ke unu elemento elstari, alia devas servi kiel fono. Iuj elementoj devas superregi aliajn por ke via dezajno montruvida hierarkio.

La fokuso en dezajno estas la unu elemento kun la plej granda vida pezo. Ĝi estas la elemento, kiu altiras la okulon unue, pli ol ĉio alia en via aranĝo.

Fokpunkto anoncos al via spektantaro kie komenciĝas ilia rigarda vojaĝo en via dezajno. Do ĝi estas la komenco de la rakonto, kiun vi rakontas.

Tio ordinare povas esti atingita uzante grandan bildon aŭ grandan fonton de tipografio. Rimarku kiom efika estas la suba fokuso

Desegnita de Braulio Amado por Bloomberg Businessweek, Fonto: Estas agrable, ke

Sed dum fokuso altiros la atenton de via publiko en, la sekva regulo helpos gvidi ĝin.

Principo #4. Pensu pri Proksimeco kaj Fluo

La principo de proksimeco estas simpla. Certigu, ke elementoj rilataj unu al la alia estas kunmetitaj.

Proksima proksimeco indikas, ke la vidaj valoraĵoj estas konektitaj kaj fariĝas unu vida unuo kiu helpas organizi vian aranĝon.

Do nur grupaj dezajnaj valoraĵoj, kiuj havas rilaton inter si, kaj uzu poŝojn da informoj pri via dezajno por gvidi vian spektantaron al la koncerna enhavo, kiun ili bezonas konsumi. Ĉi tio ankaŭ estas nomata fluprincipo.

Fonto: Satori Graphics

Dezajno kun bona fluo gvidos la okulon de la spektantoj tra la aranĝo, de elemento al elemento, facile. Viaj fokusoj tiros la okulon kaj fariĝos