Hoe Master Layout Design

Hoe Master Layout Design
Rick Davis

In folsleine hantlieding om de basis fan fisueel ûntwerp te learen.

De fraach fan miljoenen dollar: wat is it geheim fan goed ûntwerp?

Wy kinne filosofysk oer dizze gean , mar oer it algemien leit it sprekwurdlike 'geheim' fan goed ûntwerp yn 'e manier wêrop jo jo fisuele eleminten organisearje, yn relaasje ta jo doek, en mei elkoar. Yn prinsipe hawwe wy krekt it ûntwerpûntwerp beskreaun. Wat, as jo der oan tinke, oeral is wêr't jo sjogge.

Nim bygelyks de opmaak fan in tydskrift. Har ûntwerp folget in klassyk rastersysteem (wy sille yn in minút alles leare oer raster). Alles is normaal ôfstimd links, rjochts en ûnderoan. De kolommen hawwe foaral in ûnderskate rjochtfeardige ôfstimming dy't de side net allinich visueel oantreklik makket, mar ek maklik te lêzen, en autoritatyf. De grutte kopteksten lûke de oandacht fan de sjogger, wylst de ûndertitel komt as in kontrast yn grutte om in fisuele hiërargy fan ynformaasje te meitsjen.

Linda Gaom, Behance

Al dizze kwaliteiten meitsje de side ûntwerp skjin, strukturearre en maklik te lêzen, en se binne yn oerienstimming mei de tips dy't wy folgjende sille prate. Mar litte wy earst mear begripe oer it layout-ûntwerp sels.

Wat is Layout-ûntwerp?

Layout-ûntwerp giet it om de yndieling fan grafyske eleminten om de oandacht fan de lêzer te lûken en in bepaald berjocht op in visueel oansprekkende manier oer te bringen .

Dat wy prate netit rêstplak, wylst oare eleminten rjochting jouwe.

In ienfâldige manier om dit te begripen is troch bygelyks it foarbyld fan ús webside te nimmen. Grafiken binne dúdlik skieden fan de tekst, en sa binne de oproppen ta aksje, sadat de oandacht fan de sjogger navigearret fan de iene kluster fan ynformaasje nei de oare.

Principle #5. Brûk Kontrast

Soargje derfoar dat jo genôch kontrast hawwe yn jo ûntwerp.

Kontrast helpt jo ûntwerp te organisearjen en sil in heul needsaaklike hiërargy fêststelle en klam lizze op wat wichtich is.

Mear dan dat, goed gebrûk fan kontrast foeget ek fisuele ynteresse ta troch jo ûntwerp. Litte wy it sizze, in yndieling wêr't alles deselde grutte, foarm of kleur is, sil saai útsjen. Kontrast spices dingen op.

Jo earste gedachte kin kleurkontrast wêze, lykas waarm tsjin koel, tsjuster tsjin ljocht, blau tsjin oranje. Mar wylst kleur in ekstreem essinsjeel prinsipe fan kontrast is, binne d'r ek kontrasten fan type, ôfstimming en grutte. En tink derom, kontrast is ek relatyf. It hat allinnich betsjutting yn njonkeninoar mei oare eleminten.

Hjir binne wat foarbylden fan layouts dy't dizze regel op in tûke en moaie manier brûke. Merk op it kontrast yn typografy, kleur, en sels it kontrast yn de grutte tusken eleminten.

Boarne: IAG Reconciliation Action Plan

Principe #6. Herhelling, patroan, ritme

As wy tinke oan werhelling, tinke wyfan itselde elemint hieltyd wer.

Mar it is oars yn ûntwerp. Sa saai is it perfoarst net. As it goed brûkt wurdt, kin werhelling jo ûntwerp eins machtigje.

Besykje in motyf te identifisearjen en opnij te brûken yn jo yndieling, sadat ferskate gebieten ferbûn fiele en diel fan deselde komposysje fiele. It sil jo ûntwerp helpe om in tema te hawwen. Troch eleminten te werheljen leverje jo net allinich neffens de ferwachtingen fan jo publyk, mar jo sille ek de brûkersûnderfining ferbetterje. Troch konsekwint te wêzen makket de brûkers har nofliker.

Jo kinne dit dwaan troch foarmen of symboalen te werheljen. Of sels in kleurskema, in lettertype, en deselde styl yn it algemien.

In goede gewoante om yn te kommen is om in lettertype te brûken mei in grutte famylje. Beheine it ferskillende oantal patroanen, line gewichten / stilen, en kleuren, en werhelje troch. Besykje ek de styl fan ôfbyldings en grafiken itselde te hâlden. Brûk bygelyks yllustraasjes fan deselde keunstner.

Boarne: Thepentool.co

Dat is it. Dit binne de seis prinsipes dy't jo helpe om jo ûntwerp te organisearjen en in skjinner, profesjoneler en lykwichtiger yndieling te berikken.

Mar jo reis einiget hjir net. Grafysk ûntwerp is gjin eksakte wittenskip en it soe net moatte wurde beheind ta tips en prinsipes. Lykas wier is yn alle gebieten fan 'e skepping, is d'r gjin hurde thumbregel. It útbrekken fan dizze tips op subtile manieren sil djipte en ferskaat oan tafoegjejo ûntwerpen.

Dochs binne se in geweldich útgongspunt en wy moedigje jo oan om se te besykjen. En lit ús witte hoe't se wurken!

Download Vectornator om te begjinnen

Nim jo ûntwerpen nei it folgjende nivo.

Sjoch ek: Auto Trace krekt nivo omheech Download bestân oer logo-ûntwerp hjir. Mar it ûntwerp fan printmateriaal, lykas kranten, tydskriften, posters, en har digitale tsjinhingers, lykas web-, app- of UX/UI-ûntwerp.

It wurd 'yndieling' jout ús in protte hints. It betsjut in arranzjemint fan foarbepaalde eleminten op in side.

As in yndieling effektyf is, sjocht it der goed út, en it liedt de sjogger om it berjocht te begripen dat it ûntwerp besiket oer te bringen. It begripen fan layout is dêrom de kaai foar it meitsjen fan boeiende, effektive, brûkerfreonlike en noflike komposysjes.

As in opmaak syn berjocht net goed oerbringe oan it publyk, of mei oare wurden, it "lêst net goed" ", it ûntwerp sil net effektyf wêze, nettsjinsteande hoe trendy it liket. Op it mêd fan layout-ûntwerp ferfangt ynhâld trends en gimmicks.

The Purpose Of Layout Design

Om in berjocht fluch oer te bringen

Dit is kaai. Layout-ûntwerp fêstiget de relaasje tusken grafyske aktiva om in glêde stream fan eachbeweging te berikken foar maksimale effektiviteit en ynfloed.

Om lykwicht te meitsjen

It brûken fan de prinsipes fan layout-ûntwerp is de maklikste manier om te meitsjen in gefoel fan lykwicht en symmetry yn jo ûntwerpprojekten sûnder saai te wurden.

Om gearhing te meitsjen

Layout helpt jo de protte eleminten fan jo ûntwerp op in maklik fertearbere, gearhingjende en logyske manier te regeljen.

Om skientme te meitsjen

Balans en struktuer meitsje natuerlik skientme.As jo ​​layout-ûntwerp goed is dien, sil it automatysk visueel oansprekkend wurde foar de sjogger. Hoe minder de taskôgers moatte dwaan om in berjocht te begripen, hoe oantrekliker jo ûntwerp sil lykje.

Ontwerper fan Frank Philippin foar syn boek 'I Used to Be a Design Student: Then - No.' Boarne: DesignBoom

The Elements of Layout Design

Tekst

Dit omfettet net allinich it tekstlichem of paragrafen, mar ek kopteksten, subkoppen, kopteksten en fuotteksten. Jo kar foar typografy, kleur en grutte sil ferskate effekten berikke oer hoe't jo yndieling oersette nei jo publyk.

Ofbylding

De meast foarkommende soarten ôfbyldings binne foto's, yllustraasjes of infografiken.

Foarmen

Foarmen kinne geometrysk wêze, dy't heul hoekich binne, of se kinne organysk wêze, de natuerlike wrâld imitearje. Se kinne ek abstrakt wêze. Abstrakte foarmen binne yn it ôfrûne jier tige trendy west, om't wy webûntwerpers sjoen hawwe dy't se yn komplekse en útwreide komposysjes opnimme.

Foarmen kinne in ôfbylding ferfange. Of se kinne brûkt wurde om grafyske eleminten oan in side ta te foegjen, tekst te markearjen, of de romte tusken oare fisuele eleminten ôf te skieden.

Wite romte

Elke layout-ûntwerp sil in bepaalde hoemannichte wite romte hawwe. dat sil tastean jo eleminten te sykheljen en stean út op har eigen.

De Gouden Prinsipes fan Layout Design

Jo sille merke dat de prinsipesfan layout-ûntwerp folgje in protte fan 'e fûnemintele prinsipes fan ûntwerp. Lykas it brûken fan kleur op in bepaalde manier, typografy, werhelling, kontrast, hierargy en lykwicht.

Principe #1. Brûk Grids

Grids helpe ûntwerpers ferskate ûntwerpeleminten lykas tekst en ôfbyldings te pleatsen op in manier dy't gearhingjend en maklik te folgjen sjocht.

Se jouwe in gefoel fan oarder, se hâlde eleminten fan elkoar oerweldigje , en vooral, rasters sille ek korrizjearje jo ôfstimming. Meitsje jo wurk skjinner en profesjoneler te fielen.

Boarne: hgmlegal.com

The anatomy of grids

Jo tinke miskien dat it gewoan fertikale en horizontale rigels binne, mar in raster bestiet út ferskate dielen. In protte, yn feite. Hjir is de wichtichste terminology dy't jo witte moatte yn in basisraster:

  • Opmaak is it folsleine gebiet fan jo definitive ûntwerp. Dus as jo wat foar print ûntwerpe, is it formaat de side, en as jo in webûntwerper binne, is it formaat de webside of it browserfinster.
  • Marzjes binne de opsetlike lege spaasjes tusken it formaat en it ûntwerp.
  • Flowlines binne de horizontale rigels dy't jo yndieling skiede yn parallelle seksjes. Flowlines helpe by de lêsberens fan jo ûntwerp en begeliedt de lêzer om de ynhâld goed te folgjen.
  • Modules binne de blokken dy't wurde foarme troch de horizontale linen en fertikaleflowlines fan elk raster. As jo ​​der oer tinke, binne se de boustiennen fan elk raster. Al jo fertikale modules meitsje jo kolommen, wylst al jo horizontale rasters jo rigen meitsje.
  • Regio's binne groepen fan ferbûne modules, fertikaal of horizontaal. D'r binne gjin regels oer hoe't jo beslute om dizze te organisearjen.

Boarne: Radversity

Typen fan rasters

Yndielingsrasters waarden earst brûkt om te regeljen hânskrift op papier.

Se datearje al yn de 13e iuw, doe't de Frânske keunstner Villard De it rastersysteem mei de gouden ferhâlding fusearre om printe side-opmaak mei marzjes te meitsjen. Jo kinne dit rastersysteem oant hjoed de dei sjen, lykas de mearderheid fan printe boek- en tydskriftlayouts bewize. Utjouwers, redakteuren en ûntwerpers brûke leaver standertrasters net allinnich om't se der goed útsjen, mar om't lêzers binne kommen om te ferwachtsjen dat bepaalde ûntwerpeleminten op in bepaald plak steane.

Grids kinne op twa manieren ûntwurpen wurde: symmetrysk of asymmetrysk. Symmetryske rasters folgje in middenline, dêr't de fertikale en horizontale regio's lyk oan elkoar binne; en kolommen hawwe deselde breedte.

Yn in asymmetrysk raster , lykas de namme al fermoeden docht, binne de marzjes en de kolommen net allegear identyk.

Op grûn fan dizze klassifikaasje binne d'r fiif haadtypen fan yndielingsrasters wrâldwiid brûkt wêrop jo kinne fertrouwe:

Hânskriftraster binne de meast foarkommende soarte raster foar dokuminten. Se skiede de koptekst, fuottekst en marzjes, en meitsje yn prinsipe in rjochthoek binnen it formaat (as de side) dy't de grinzen oan jo tekst leveret. Se binne de basis foar tydskriften, kranten en boeken. Dus it is wierskynlik de yndieling wêrmei jo it meast bekend binne.

Boarne: UXplanet

Boarne: Radversity

Kolomgrids binne in oare favoryt yn tydskriftpublisearjen. In typyske tydskriftopmaak brûkt kolomrasters om tekst te skieden yn maklik te lêzen seksjes. Mar se binne ek tige populêr foar websiden. Jo kinne alles brûke fan twa oant seis rasters. Mear is mooglik, dochs net gewoan. In tige wichtich ding oer kolomrasters is dat de ôfstân tusken de kolommen, of de goaten, op likefolle ôfstân fan inoar lizze.

Symmetryske kolomrasters wurde brûkt troch bygelyks kranten, wylst in asymmetrysk kolomraster de foarkar hat yn webûntwerp .

Boarne: UX Planet

Boarne: Radversity

Modulêre rasters binne fergelykber mei it kolomraster, mar se ek rekken mei de horizontale flowlines. Dit soarte fan raster is nedich as jo moatte organisearje ferskate eleminten yn jo opmaak en de kolom raster binne gewoan net genôch.

Modular raster hawwe gelyk grutte modules dy't makket it hiel maklik om te visualisearjen jo romtlike sônes op ferskillende wizen.

Boarne: UXPlanet

Boarne: Radversity

Baselinerasters binne fantastysk foar tekst-basearre komposysjes. In basisline is de rigel dêr't tekst rêstt as jo typen, en liedend is de ôfstân tusken twa basislinen. Freegje jo jo ôf hoe grut jo koptekst of subkoppen wêze moatte?

Basislinerasters binne hjir om jo tekst in floeiend ritme te jaan.

Boarne: UX Planet

Boarne: Fragaria

Hierarchyske rasters lykje minder op in raster dan al har tsjinhingers. Se binne lykwols heul nuttich by it organisearjen fan ûntwerpeleminten yn har folchoarder fan belang. Hierarchyske rasters kinne basearre wurde op modulêre rasters, of jo kinne sels jo eigen meitsje. Websites brûke dit raster in protte, benammen digitale tydskriften en kranten hawwe de neiging om mear op hiërargyske rasteren te fertrouwe as op kolomrasters yn har oergong nei digitaal te wurden.

Boarne: UX Plane

Principle #2. Brûk Negative Space

Wy tinke faak dat leechte, stilte of gebrek oan kleur in minne saak is. Mar wy beskôgje net hoe't se de solide basis fan 'e kontrast binne.

Sjoch ek: Drawing for Joy: In ynterview mei TitsayEk wol wite romte neamd, negative romte is dat gebiet yn jo ûntwerp dat gjin eigentlike eleminten hat. It is it gebiet dat leech bliuwt. It omfettet net allinich jo fermogen, it skept ek de nedige bannen tusken har. Dêrtroch is negative romte in rjochtfeardich ûntwerpelemint en hat in massive ynfloed op hoe effektyf jo yndielingûntwerp is.

Goede vs minne negative romte

Negative romte sil helpe om ferskate gebieten yn jo ûntwerp te skieden, wylst jo jo yndieling ek kinne sykhelje. It helpt mei fisuele hierargy en fisuele lykwicht; it set de fokus fan de brûker op de kearneleminten; it ferleget it nivo fan ôflieding; en úteinlik foeget it styl en elegânsje ta oan jo ûntwerp.

Unexperience ûntwerpers hawwe miskien de oanstriid om safolle mooglik fan har doek yn te foljen, troch tekst op te skaaljen of in logo, of in ôfbylding op te blazen. Mar it jaan fan jo eleminten romte lit de sjogger bepaalde ynformaasjeoanwizings rapper en nofliker kieze.

As alles ropt om de oandacht fan jo sjogger, wurdt neat heard.

– Aaron Walter, 'Design for emoasje'

In maklike manier om jo negative romte te bepalen is troch in modulêr raster te brûken. Troch dat boppe op jo ûntwerp te pleatsen, kinne jo dan maklik sjen hokker modules leech bliuwe kinne, en hokker ynfolle wurde moatte.

Designer by Brunswicker, Boarne: Codesignmag.com

Prinsipe #3. Kies in inkeld fokuspunt

Hat in klant jo oait frege om it logo grutter te meitsjen? En dan om de kop noch grutter te meitsjen?

Jo kinne net alles beklamje. It ferslaat it punt fan goed ûntwerp. Krekt as tiid is fokus relatyf. Foar ien elemint om út te stean, moat in oar as eftergrûn tsjinje. Guon eleminten moatte oaren dominearje om jo ûntwerp wer te jaanin fisuele hierargy.

It fokuspunt yn in ûntwerp is it iene elemint mei it grutste fisuele gewicht. It is it elemint dat it each earst lûkt, mear dan wat oars yn jo yndieling.

In fokuspunt sil jo publyk oankundigje wêr't har besjenreis begjint op jo ûntwerp. It is dus it begjin fan it ferhaal dat jo fertelle.

Dit kin meastentiids berikt wurde troch in grutte ôfbylding of in grutte boarne fan typografy te brûken. Merk op hoe effektyf it ûndersteande fokuspunt is

Ontworpen troch Braulio Amado foar Bloomberg Businessweek, Boarne: It is moai dat

Mar wylst in fokuspunt de oandacht fan jo publyk sil lûke yn, de folgjende regel sil it helpe.

Prinsipel #4. Tink oan Proximity and Flow

It prinsipe fan tichtby is ienfâldich. Soargje derfoar dat eleminten dy't mei-inoar besibbe binne byinoar pleatst.

Tichtbyheid jout oan dat de fisuele aktiva ferbûn binne en ien fisuele ienheid wurde dy't jo yndieling helpt te organisearjen.

Dus allinich klusterûntwerpaktiva dy't in relaasje mei elkoar hawwe, en brûk pockets mei ynformaasje oer jo ûntwerp om jo publyk te lieden nei it stik relevante ynhâld dat se moatte konsumearje. Dit wurdt ek wol it streamprinsipe neamd.

Boarne: Satori Graphics

In ûntwerp mei goede trochstreaming sil it each fan 'e sjoggers liede troch de yndieling, fan elemint nei elemint, mei gemak. Jo fokuspunten sille it each lûke en wurde




Rick Davis
Rick Davis
Rick Davis is in betûfte grafysk ûntwerper en byldzjende keunstner mei mear as 10 jier ûnderfining yn 'e yndustry. Hy hat wurke mei in ferskaat oan kliïnten, fan lytse startups oant grutte bedriuwen, en hat har holpen om har ûntwerpdoelen te berikken en har merk te ferheegjen troch effektive en ynfloedrike fisuele.In ôfstudearre fan 'e School of Visual Arts yn New York City, Rick is hertstochtlik oer it ferkennen fan nije ûntwerptrends en -technologyen, en konstant de grinzen ferdriuwe fan wat mooglik is op it fjild. Hy hat in djippe ekspertize yn software foar grafysk ûntwerp, en is altyd entûsjast om syn kennis en ynsjoch te dielen mei oaren.Neist syn wurk as ûntwerper, Rick is ek in tawijd blogger, en is wijd oan dekking fan de lêste trends en ûntjouwings yn 'e wrâld fan grafysk ûntwerp software. Hy is fan betinken dat it dielen fan ynformaasje en ideeën de kaai is foar it befoarderjen fan in sterke en libbene ûntwerpmienskip, en is altyd entûsjast om online te ferbinen mei oare ûntwerpers en kreativen.Oft hy in nij logo foar in klant ûntwerpt, eksperimintearret mei de nijste ark en techniken yn syn atelier, of skriuwt ynformative en boeiende blogposts, Rick is altyd ynsette foar it leverjen fan it bêste mooglik wurk en helpt oaren om har ûntwerpdoelen te berikken.