Como dominar o deseño de maquetación

Unha guía completa para aprender os conceptos básicos do deseño visual.

A pregunta do millón de dólares: cal é o segredo para un bo deseño?

Podemos poñernos filosóficos sobre este , pero en xeral, o proverbial "segredo" do bo deseño reside na forma en que organizas os teus elementos visuais, en relación co teu lenzo e entre eles. Basicamente, acabamos de describir o deseño de maquetación. Que, cando pensas niso, está por todas partes.

Tome o deseño dunha revista, por exemplo. O seu deseño segue un sistema de cuadrícula clásico (imos aprender todo sobre as reixas nun minuto). Todo adoita estar aliñado á esquerda, á dereita e na parte inferior. As columnas teñen especialmente un aliñamento xustificado distinto que fai que a páxina non só sexa visualmente atractiva, senón que tamén sexa fácil de ler e con autoridade. Os grandes títulos atraen a atención do espectador, mentres que o subtítulo presenta un contraste de tamaño para crear unha xerarquía visual da información.

Linda Gaom, Behance

Ver tamén: As cores do arco da vella para deseñadores

Todas estas calidades fan que a páxina sexa deseño limpo, estruturado e fácil de ler, e están en sintonía cos consellos dos que imos falar a continuación. Pero primeiro, entendamos máis sobre o deseño de maquetación en si.

Que é o deseño de maquetación?

O deseño de maquetación refírese á disposición dos elementos gráficos co fin de atraer a atención do lector e transmitir unha mensaxe particular dun xeito visualmente atractivo. .

Entón non estamos a falaro lugar de descanso, mentres que outros elementos dan dirección.

Unha forma sinxela de entendelo é tomando o exemplo do noso sitio web, por exemplo. Os gráficos están claramente separados do texto, así como as chamadas á acción, polo que a atención do espectador vai navegando dun grupo de información ao seguinte.

Principio. #5. Usa o contraste

Asegúrate de ter suficiente contraste no teu deseño.

O contraste axuda a organizar o teu deseño e establecerá unha xerarquía moi necesaria e poñerá énfase no que é importante.

Ademais, un bo uso do contraste tamén engade interese visual ao teu deseño. Aceptémolo, un deseño onde todo teña o mesmo tamaño, forma ou cor vai parecer aburrido. O contraste condimenta as cousas.

O teu primeiro pensamento pode ser o contraste de cores, como cálido versus frío, escuro versus claro, azul versus laranxa. Pero aínda que a cor é un principio extremadamente esencial de contraste, tamén hai contrastes de tipo, aliñamento e tamaño. E lembra, o contraste tamén é relativo. Só ten significado en xustaposición con outros elementos.

Aquí tes algúns exemplos de deseños que usan esta regra dun xeito intelixente e fermoso. Fíxate no contraste na tipografía, na cor e mesmo no contraste no tamaño entre os elementos.

Fonte: Plan de Acción de Reconciliación da IAG

Principio #6. Repetición, Patrón, Ritmo

Cando pensamos na repetición, pensamosdo mesmo elemento unha e outra vez.

Pero é diferente no seu deseño. Definitivamente non é tan aburrido como iso. Cando se usa correctamente, a repetición pode realmente potenciar o teu deseño.

Intenta identificar e reutilizar un motivo ao longo do deseño para que varias áreas se sintan conectadas e formando parte da mesma composición. Axudará ao teu deseño a ter un tema. Ao repetir elementos, non só entregas de acordo coas expectativas da túa audiencia, senón que tamén mellorarás a experiencia do usuario. Ser coherente fai que os usuarios se sintan máis cómodos.

Podes facelo repetindo formas ou símbolos. Ou mesmo un esquema de cores, unha tipografía e o mesmo estilo en xeral.

Un bo hábito é usar unha tipografía cunha familia numerosa. Limite o número diferente de patróns, grosores de liñas/estilos e cores e repítelo. Ademais, tenta manter o estilo das imaxes e dos gráficos iguais. Por exemplo, utiliza ilustracións do mesmo artista.

Fonte: Thepentool.co

Isto é. Estes son os seis principios que che axudarán a organizar o teu deseño e conseguir un deseño máis limpo, máis profesional e equilibrado.

Pero a túa viaxe non remata aquí. O deseño gráfico non é unha ciencia exacta e non debe limitarse a consellos e principios. Como é certo en todas as áreas da creación, non hai ningunha regra xeral. Romper estes consellos de xeito sutil engadirá profundidade e variedadeos teus deseños.

Non obstante, son un excelente punto de partida e animámoste a que os probes. E coméntanos como funcionaron!

Descarga Vectornator para comezar

Leva os teus deseños ao seguinte nivel.

Descarga o ficheiro sobre o deseño do logotipo aquí. Pero o deseño de material impreso, como xornais, revistas, carteis e os seus homólogos dixitais, así como o deseño web, aplicación ou UX/UI.

A palabra "diseño" dános moitas pistas. Significa unha disposición de elementos predeterminados nunha páxina.

Cando un deseño é efectivo, ten un bo aspecto e guía ao espectador a comprender a mensaxe que intenta transmitir o deseño. Comprender o deseño é, polo tanto, fundamental para crear composicións atractivas, eficaces, fáciles de usar e agradables.

Ver tamén: 7 brillantes libros de deseño gráfico que necesitas na túa colección

Se un deseño non transmite ben a súa mensaxe ao público ou, noutras palabras, non "le ben". ", o deseño será ineficaz por moi moderno que pareza. No ámbito do deseño de deseño, o contido supera as tendencias e os trucos.

O propósito do deseño de deseño

Transmitir unha mensaxe rapidamente

Isto é fundamental. O deseño de maquetación establece a relación entre os recursos gráficos para conseguir un fluxo suave de movementos oculares para lograr a máxima eficacia e impacto.

Para crear equilibrio

Usar os principios do deseño de maquetación é a forma máis sinxela de crear un sentido de equilibrio e simetría nos teus proxectos de deseño sen volverse aburrido.

Para crear cohesión

O deseño axúdache a organizar os moitos elementos do teu deseño dun xeito doado de dixerir, cohesionar e lóxico.

Para crear beleza

O equilibrio e a estrutura crean beleza de forma natural.Se o deseño do teu deseño está feito correctamente, será automaticamente atractivo visualmente para o espectador. Canto menos esforzo teñan que facer os espectadores para comprender unha mensaxe, máis atractivo parecerá o seu deseño.

Deseñador de Frank Philippin para o seu libro "I Used to Be a Design Student: Then - Agora. Fonte: DesignBoom

Os elementos do deseño de deseño

Texto

Isto inclúe non só o corpo do texto ou os parágrafos, senón tamén os títulos, subtítulos, cabeceiras e pés de páxina. A tipografía, a cor e o tamaño que elixas conseguirán diferentes efectos sobre como se traducirá o teu deseño para o teu público.

Imaxe

Os tipos máis comúns de imaxes son fotografías, ilustracións ou infografías.

Formas

As formas poden ser xeométricas, que son moi angulares, ou poden ser orgánicas, imitando o mundo natural. Tamén poden ser abstractos. As formas abstractas estiveron moi de moda o ano pasado, xa que vimos que deseñadores web as incorporaban a composicións complexas e extensas.

As formas poden substituír unha imaxe. Ou poden usarse para engadir elementos gráficos a unha páxina, resaltar texto ou delimitar o espazo entre outros elementos visuais.

Espazo en branco

Calquera deseño de deseño terá unha certa cantidade de espazo en branco. que permitirá que os teus elementos respiren e destaquen por si sós.

Os principios de ouro do deseño de maquetación

Notarás que os principiosde deseño de maquetación seguen moitos dos principios fundamentais do deseño. Como usar a cor dun xeito determinado, a tipografía, a repetición, o contraste, a xerarquía e o equilibrio.

Principio n.º 1. Usa cuadrículas

As cuadrículas axudan aos deseñadores a situar varios elementos de deseño, como texto e imaxes, dun xeito coherente e fácil de seguir.

Proporcionan unha sensación de orde, evitan que os elementos se superen entre si. , e o máis importante, as cuadrículas tamén corrixirán o seu aliñamento. Facendo que o teu traballo se sinta máis limpo e profesional.

Fonte: hgmlegal.com

A anatomía das cuadrículas

Poderías pensar que son só liñas verticais e horizontais, pero unha cuadrícula está formada por varias partes. Moitos, de feito. Aquí tes a terminoloxía máis importante que debes coñecer nunha cuadrícula básica:

• Formato é a área completa do teu deseño final. Polo tanto, se deseñas algo para imprimir, o formato é a páxina, e se es un deseñador web, o formato é a páxina web ou a xanela do navegador.
• Marxes son os espazos baleiros intencionados entre o formato e o deseño.
• Liñas de fluxo son as liñas horizontais que separan o teu deseño en seccións paralelas. As liñas de fluxo axudan á lexibilidade do seu deseño e guían ao lector a seguir o contido correctamente.
• Os módulos son os bloques que están formados polas liñas horizontais e verticais.liñas de fluxo de calquera reixa. Se pensas niso, son os bloques de construción de calquera grella. Todos os teus módulos verticais crean as túas columnas, mentres que todas as cuadrículas horizontais crean as túas filas.
• As rexións son grupos de módulos conectados, verticais ou horizontais. Non hai regras sobre como decides organizalas.

Fonte: Radversity

Tipos de cuadrículas

Primeiro utilizáronse as cuadrículas de deseño para organizalas. caligrafía en papel.

Remóntanse xa ao século XIII, cando o artista francés Villard De fusionou o sistema de cuadrícula coa proporción áurea para producir deseños de páxinas impresas con marxes. Podes ver este sistema de cuadrícula ata hoxe, como demostran a maioría dos deseños de libros e revistas impresos. Os editores, editores e deseñadores prefiren usar cuadrículas estándar non só porque teñen un bo aspecto, senón porque os lectores teñen que esperar que determinados elementos de deseño estean nun lugar determinado.

As cuadrículas pódense deseñarse de dúas formas: simétricas. ou asimétrica. As cuadrículas simétricas seguen unha liña central, onde as rexións verticais e horizontais son iguais entre si; e as columnas teñen o mesmo ancho.

Nunha reixa asimétrica , como o nome indica, as marxes e as columnas non son todas idénticas.

En base a esta clasificación, hai cinco tipos principais de cuadrículas de deseño empregadas en todo o mundo nas que pode confiar:

Manuscritoas cuadrículas son o tipo de grade máis común para os documentos. Separan o encabezado, o pé de páxina e as marxes e, basicamente, crean un rectángulo dentro do formato (ou da páxina) que proporciona os límites do teu texto. Son a base de revistas, xornais e libros. Polo tanto, probablemente sexa o deseño co que estás máis familiarizado.

Fonte: UXplanet

Fonte: Radversity

Grallas de columnas son outro dos favoritos na edición de revistas. Un deseño de revista típico usa cuadrículas de columnas para separar o texto en seccións fáciles de ler. Pero tamén son moi populares para sitios web. Podes usar desde dúas ata seis cuadrículas. É posible máis, pero non é común. Unha cousa moi importante sobre as cuadrículas de columnas é que o espazamento entre as columnas, ou os canlóns, estean igualmente distanciados entre si.

As cuadrículas de columnas simétricas son usadas polos xornais, por exemplo, mentres que no deseño web se prefire unha cuadrícula de columnas asimétricas. .

Fonte: UX Planet

Fonte: Radversity

As cuadrículas modulares son similares á cuadrícula de columnas, pero tamén teñen en conta as liñas de fluxo horizontais. Este tipo de cuadrícula é necesario cando tes que organizar varios elementos no teu deseño e as cuadrículas de columnas simplemente non son suficientes.

As cuadrículas modulares teñen módulos do mesmo tamaño, o que fai que sexa moi sinxelo visualizar as túas zonas espaciais de diferentes xeitos.

Fonte: UXPlaneta

Fonte: Radversity

As cuadrículas de referencia son fantásticas para composicións baseadas en texto. Unha liña base é a liña na que descansa o texto ao escribir, e o interlineado é o espazo entre dúas liñas base. Queres saber que tamaño deberían ser o teu título ou subtítulos?

As cuadrículas de referencia están aquí para axudarche a darlle un ritmo fluído ao teu texto.

Fonte: UX Planet

Fonte: Fragaria

As cuadrículas xerárquicas semellan menos unha cuadrícula que todas as súas contrapartes. Non obstante, son moi útiles á hora de organizar os elementos de deseño na súa orde de importancia. As cuadrículas xerárquicas poden basearse en cuadrículas modulares ou incluso podes crear as túas propias. Os sitios web usan moito esta cuadrícula, especialmente as revistas e xornais dixitais tenden a depender máis das cuadrículas xerárquicas que das cuadrículas de columnas na súa transición para converterse en dixitais.

Fonte: UX Plane

Principio #2. Usa o espazo negativo

Moitas veces pensamos que o baleiro, o silencio ou a falta de cor é algo malo. Pero non consideramos como son a base sólida do contraste.

Tamén chamado espazo en branco, o espazo negativo é aquela área do teu deseño que non ten ningún elemento real. É a zona que quedou baleira. Non só rodea os teus activos, tamén crea os vínculos necesarios entre eles. Por iso, o espazo negativo é un elemento de deseño lexítimo e ten un gran impacto na eficacia do seu deseñodeseño é.

Espazo negativo bo e malo

O espazo negativo axudará a separar varias áreas do teu deseño, ao tempo que permitirá que o teu deseño respire. Axuda coa xerarquía visual e o equilibrio visual; pon o foco do usuario nos elementos fundamentais; reduce o nivel de distracción; e, finalmente, engade estilo e elegancia ao teu deseño.

Os deseñadores sen experiencia poden ter a tendencia a cubrir o máximo posible do seu lenzo, ampliando o texto ou explotando un logotipo ou unha imaxe. Pero dar espazo aos teus elementos permítelle ao espectador escoller certas pistas de información de forma máis rápida e cómoda.

Se todo chama a atención do teu espectador, non se escoita nada.

– Aaron Walter, 'Design for emoción'

Unha forma sinxela de determinar o teu espazo negativo é mediante unha cuadrícula modular. Ao colocalo enriba do teu deseño, poderás visualizar facilmente que módulos poden permanecer baleiros e cales se deben cubrir.

Deseñador de Brunswicker, Fonte: Codesignmag.com

Principio #3. Escolle un único punto focal

Algunha vez algún cliente che pediu que agrandases o logotipo? E entón para facer o titular aínda máis grande?

Non se pode enfatizar todo. Derrota o punto do bo deseño. Igual que o tempo, o foco é relativo. Para que un elemento destaque, outro ten que servir de fondo. Algúns elementos deben dominar outros para que se mostre o teu deseñounha xerarquía visual.

O punto focal dun deseño é o único elemento con maior peso visual. É o elemento que atrae a atención primeiro, máis que calquera outra cousa no teu deseño.

Un punto focal anunciará á túa audiencia onde comeza a súa viaxe de visualización no teu deseño. Polo tanto, é o comezo da historia que estás contando.

Isto pódese conseguir normalmente utilizando unha imaxe grande ou unha gran fonte de tipografía. Observe o eficaz que é o punto focal de abaixo

Deseñado por Braulio Amado para Bloomberg Businessweek, Fonte: É agradable que

Pero, aínda que un punto focal chamará a atención da súa audiencia, a seguinte regra axudaralle a guialo.

Principio #4. Pense en proximidade e fluxo

O principio de proximidade é sinxelo. Asegúrate de que os elementos que están relacionados entre si se coloquen xuntos.

A proximidade indica que os recursos visuais están conectados e convértense nunha unidade visual que axuda a organizar o teu deseño.

Así que só se agrupan recursos de deseño que teñan unha relación entre si e use bolsas de información sobre o seu deseño para guiar o seu público ao contido relevante que necesita consumir. Isto tamén se denomina principio de fluxo.

Fonte: Satori Graphics

Un deseño con bo fluxo guiará a mirada dos espectadores por todo o deseño, de elemento en elemento, con facilidade. Os teus puntos focais atraerán o ollo e converteranse