Transcripciones
1. Introducción: Esta semana estaremos
buscando crear un lenguaje visual para nuestros sitios web o nuestra aplicación
web. Empezaremos eligiendo fotografías que se
complementen y funcionen bien juntos
y cómo podemos editar esas fotos un poco también. Identificaremos las formas que ya existen dentro de tu
tipografía, tu logotipo, o cualquier otro elemento para que
podamos reutilizar o utilizar estas formas
para otros elementos. Escogeremos un estilo de
ilustración que complementa las
formas existentes que tenemos. Después intentaremos
descubrir texturas que funcionen bien con este
estilo de ilustración y patrones también. Echaremos un vistazo a
los gradientes y cómo elegir o seleccionar un degradado efectivo
para trabajar con tus diseños. Y luego finalmente,
elegiremos un conjunto de iconos y
hablaremos de cómo podemos modificar un conjunto existente para trabajar con nuestros diseños en lugar crear
siempre un conjunto completamente nuevo. El lenguaje visual normalmente
será muy,
muy sutil en una
interfaz de usuario o diseño de sitios web, pero realmente puede agregar personalidad
y siempre está ahí. Por lo que tenemos que ser conscientes de ello y trabajar con él
más que en contra de ella.
2. fotografías: Por lo que has trabajado tus
colores y tu composición, pero en cuanto
agregues una foto, va a cambiar todo. Tiene sus propios colores, y un poco tiene su
propia composición también. Si no tienes un fotógrafo
profesional
o un buen conjunto de fotos de stock, probablemente valga la
pena
ni siquiera usar fotos en absoluto. Puedes comprar un conjunto
de fotos de stock relativamente baratas como las que
tengo en la pantalla aquí. Pero no van
a tener mucho carácter. Van a utilizar una paleta de colores muy
estándar, composiciones
muy, muy estándar. No va a ser
demasiado único al respecto. Y a menos que puedas
gastar dinero loco en un fotógrafo profesional, esto
te va a causar algunos problemas. Aquí. He recogido casi al azar nueve fotografías de oficina que simplemente no funcionan juntas. Estos dos tienen un estilo similar, pero están
demasiado orquestados. Uno de ellos está posando
directamente para la cámara y la otra imagen
simplemente se siente desingenuo. Hace que se sienta barato, falso, y no muy confiable. Aquí hay otra
foto de nuestro set. Esto se ve mucho mejor. Es como si un tiro de acción en medio de
una llamada importante. Se siente más
creíble como aquí hay una persona realmente trabajadora. A esto se le llama fotografía de
francotiradores. Parece que no
sabían que la cámara estaba ahí. Y tal vez podamos
construir un set con este estilo específico como este. Otro de estos aquí, este podría ser un conjunto bastante
bonito en mi opinión, pero quisiéramos encontrar más
fotos en ese estilo. A lo mejor podríamos crear una especie
de conjuntos de personas hablando, gente teniendo conversaciones
alrededor de la oficina. Y de nuevo, tiene una sensación
más genuina. No parece que estén
posando para la cámara. Desafortunadamente, este conjunto
de fotos probablemente no se va a quedar bien en ningún sitio web
porque es bastante caótico. Hay mucho pasando en
la imagen y pasamos mucho tiempo tratando de equilibrar el caos y la conformidad
y nuestro sitio. No queremos agregar
una capa extra de caos en un lugar donde
no necesariamente se vea genial. No obstante, podríamos
recolectar un conjunto de fotos en este estilo,
pero recortarlas. Entonces hay un único punto
central de interés, o al menos menos
pasando en la imagen. Al tener cierto estilo o reglas en torno a cómo
recortamos las fotos, podemos hacerlas sentir alineadas
sin realmente tener conseguir fotos que
originalmente sí se sintieron alineadas. Ambas fotos tienen
un artimazo visual similar. Tienen estas fuertes líneas
repetitivas, repitiendo líneas como una técnica muy común
en la fotografía. Y aunque hace que
estas fotos se vean realmente geniales y hace que
funcionen bien juntas, podría ser demasiado fuerte un artimazo visual para ir
y poner en nuestra página web bajo estas fuertes líneas
verticales podría ser metiendo bastante con nuestra
rejilla existente. Sería mejor
crear un conjunto de fotos usando una versión mucho más sutil de esta técnica de fotografía. Ambas fotos tienen líneas
continuas
y también tienen el bono añadido de que
ambas fotos confían en un
pilar central en el medio. Sería mucho más fácil trabajar estas fotos en nuestra composición
existente y aún así poder alinear esa línea central de alguna
manera a nuestra cuadrícula existente. Asi fuera de las opciones que
he llegado para crear un set a partir de
las fotos que tenía. He elegido este estilo aquí. Normalmente tenemos cerca de 2.5
personas en una conversación no mirando la cámara con
una baja profundidad de campo E, el fondo es borroso. Hay menos caos
en el fondo. Y las poses se ven lo suficientemente
naturales como para que esto se sienta como un conjunto de fotografías razonablemente
premium. Así que he vuelto a salir y he buscado algunos sitios web de
fotografía de stock, y he encontrado cuatro
de las fotos y las he
recortado para tener
ese mismo estilo. Todos tienen dos
personas en la foto. Ninguna de las personas está mirando directamente a la
cámara ni posando. Todos tienen una baja profundidad
de campo y
todos están profundamente en una conversación
importante. El problema es que
no todos fueron llevados en la misma oficina
al mismo tiempo. Por lo que parte del
balance de blancos está mal. Se siente como si hubiera
diferente iluminación en las diferentes imágenes. Ahora, no te preocupes si no eres un experto en fotografía,
tampoco. Pero lo que he hecho aquí
es que acabo de ajustar el balance de blancos e hice
un balance de blancos un poco más fresco. He añadido algunos sobres azules. No arregla todo, pero fue muy simple
y ahora hace que todas las imágenes se
sientan un poco unificadas. Es, por supuesto, no particularmente
interesante y
puede ser que estos no son
mis colores de marca. No sé por este conjunto
exacto de fotos. Vamos a intentarlo de nuevo, pero esta vez con un balance de blancos más cálido. Por lo que esta vez estamos agregando
algunos sobres amarillos. Entonces esto se ve bien,
pero creo que puedo hacerlo un poco más interesante. Entonces lo que he hecho aquí
es que he enfriado las sombras y
calentado los reflejos. Se llama tonificación dividida. También he añadido un
sutil tinte púrpura. A lo mejor ahora lo miro en realidad, no es tan sutil, pero al menos se puede
ver en el video. Y ahora creo que todas estas
fotos se ven bien, pero también creían que
pertenecían juntas y tal vez pertenecían a una marca. Acabo de crear
una simple maqueta aquí ese tipo de
parece un banco. De nuevo, si soy honesto. Y ahora se puede ver que esta imagen se ve
bastante bien con estos botones y el texto
y los otros colores. Pero podría cambiar esto
con cualquiera de esas fotos. Y no sólo
va a quedar bien, se va a sentir una línea como si fuera parte de
la misma página web. Si no podemos conseguir fotos de buena
calidad, posible que
queramos
simplemente evitar usar fotografía en nuestra aplicación
web o en nuestro sitio web por completo, generalmente
queremos evitar cualquier cosa que se vea
un poco demasiado artificioso, pero también cualquier cosa que
parezca demasiado compleja. Solo queremos
fotografías muy, muy simples en nuestra página web
porque ya
trabajamos duro para
asegurarnos de que no hubiera demasiado caos a la hora de elegir
nuestros conjuntos de fotografías, probablemente
queramos tener cosas similares que suceden
en las fotografías, así
como sería
dentro de un estilo similar. Podemos crear reglas para cómo se
debe recortar una fotografía, y también para filtros específicos podríamos querer ponerla encima. Hagámoslo a continuación.
3. Formas: Entonces aquí hay algunas formas, las hemos visto antes. Tienen algunas características, o triángulo tiene estos puntos
muy precisos y podría ser utilizado más
en un sitio de ingeniería. Una plaza está muy equilibrada y
tal vez los usaría más en banca o algo
que quiera parecer seguro o autoritario. Los círculos son en general mucho
más suaves y se sienten como un todo. Probablemente se usó más
en bienestar o sitios que uno parezca
tranquilo de alguna manera. Aunque no leería demasiado
en nada de eso. Similar a creer en los colores
significan cosas diferentes. Aquí hay niveles de
subjetividad. Y obviamente estas
no son las únicas formas. Hay unos con más puntos, hay unos con
diferentes ángulos. Casi infinito
número de formas que podríamos usar para componer iconos o simplemente diferentes
texturas alrededor de nuestra página web. Cada forma tiene
cientos de variantes. El espesor de la línea. ¿ Aparece la línea más gruesa
en un extremo que el otro? ¿ Tiene bordes redondeados? ¿ Están los bordes cónicos? Hay muchas más
variantes justo aquí. Entonces, ¿cómo decidimos
qué forma y cuántas formas se pueden usar en nuestros iconos y nuestras ilustraciones? Bueno, similar a cómo el punto de partida
para nuestra cuadrícula básica debe ser nuestra tipografía
porque constituye la mayor parte del sitio web. Posiblemente el punto de partida para elegir qué formas
funcionan en nuestros iconos, en nuestras ilustraciones
también debería ser nuestra tipografía elegida. Esta t ya son
miles de lugares
alrededor de mi diseño de sitio web
sin que yo ni siquiera lo intente. Así que vamos a asegurarnos de que todo lo
demás funcione bien con él. Entonces con mi tipografía
escogida específica, podemos ver que hay un
marcado contraste en el ancho de línea. Hay muy gruesas y muy delgadas usadas
en todo el tipo. Si tuviera que crear
un ícono que
creía funcionaría bien
con este tipo de letra. Me aseguraría que tenga este marcado contraste en anchos de
línea también. Esta tipografía también utiliza
un ángulo muy específico lo largo de esta curvatura muy
específica que se puede ver en la
parte inferior de la T aquí, que solo estoy
demostrando con esta forma de huevo que
sigue esa misma curva también usar a lo largo de
esta tipografía es este tipo de cono
de espesor a delgado. No se transfiere
directamente de una línea gruesa a una línea delgada. Se corta y
nunca termina en un punto. Siempre tiene un borde
ligeramente plano. medida que miramos a través de todos
los glifos vemos que en su mayoría usan todas las mismas formas y ángulos de
ancho de línea. Esa tipografía realmente usa mucho
la forma de cuña sin embargo. Es una
forma muy específica para esta tipografía. Entonces podríamos usar esta misma forma en nuestros iconos o ilustraciones o cualquier otro
lenguaje gráfico para mantener todo sintiéndose
un poco unificado. Hablaremos de
crear iconos e ilustraciones más adelante
en este video. Pero estas son las
formas que
potencialmente podríamos usar para ayudar a
crear esas cosas. Pero recuerda, cada vez que
pare las cosas en nuestro diseño, siempre
queremos
que haya un elemento de conformidad y un
elemento de contraste. Si solo tuviéramos una
sola tipografía o si tuviéramos caras de tipo que
no contrastaran demasiado, podríamos querer ir por el
contrario y usar formas y un estilo de ilustración general que luzca completamente diferente. Este sitio web, por ejemplo, tiene textos de
encabezado muy similares, pero tiene un estilo de
ilustración. Parece casi dibujado a mano. Es una ilustración muy simple y no hay
nada más en la página, es solo un fondo de un
color completamente liso. El marcado contraste entre
las caras de tipo y el estilo de
ilustración funciona completamente bien en este
contexto porque hay tan poco otro contraste
en la misma página. Si sí tenemos una tipografía
que es bastante complicada, posible que
deseemos que
los elementos visuales de la página
contrasten eso al ser
particularmente simples. Entonces supongamos que tengo
estos dos tipos de letra aquí. Ahora el tipo de letra de encabezado
es bastante complejo. Entonces en esta instancia, querría que el lenguaje visual anulara fuera bastante simple, pero tomemos algunas
de esas formas que identificé antes de la tipografía principal y uso ellos para esta ventana
emergente modal aquí. Entonces, en primer lugar, en lugar
de esquinas redondeadas, pensé que podría
parecer interesante
tener estas esquinas ligeramente
cónicas usando el mismo
ángulo que se usa desde la cuña en la tipografía. A continuación, he agregado una
cruz como una especie de botón de cierre para
este pop-up modal. Y he optado por usar
un contraste similar en pesos de
línea que también se usa en el tipo de letra de encabezado, con la línea más delgada utilizada
como recorte a través de la x. Y finalmente, he agregado
una especie de gris swoosh en la parte inferior izquierda de
este pop-up modal, que es el mismo ángulo swoosh que se usa en la parte inferior
de la t minúscula, a, e, y muchas de las otras letras que he
identificado en esta tipografía. Ahora, creo que este pop-up
modal encaja más con el estilo
de la tipografía utilizada sin hacerla demasiado
complicada o añadir demasiado
contraste adicional al diseño. Este es solo un ejemplo
muy simple de cómo puedo usar esas formas que he identificado
desde la tipografía dentro de un simple elemento de interfaz de usuario. Similar a cómo, cuando
hablamos de color, no solo
estamos hablando un puñado de
nombres de color que tenemos. Cuando hablamos de formas. No son solo cuadrados,
triángulos y círculos. Hay todo tipo de
formas para las que
ni siquiera tenemos esos nombres
bien conocidos. Las cualidades de estas formas
pueden cambiar drásticamente cambiando el ancho de línea y
las cualidades de la línea. A medida que elegimos formas
que podemos usar dentro del
lenguaje visual de nuestros diseños, queremos ser conscientes de
lo complejas que
son las formas en los tipos de letra que ya
hemos elegido. Si la tipografía es ya
hemos elegido, tener mucho contraste dentro de ellos y muchos tipos de formas
diferentes. No queremos estar introduciendo demasiadas formas nuevas
en nuestros diseños. Si empezamos con algunas caras de tipo mucho
más simples, probablemente
podamos añadir mucho
más contraste en las formas. Y veremos algunos ejemplos
de esto cuando veamos la
ilustración y la creación de íconos.
4. Ilustraciones: Debido a que la topografía de
este sitio web es tan simple, significa que pueden tener un
poco más de una obra con las ilustraciones e incluso
este fondo swoosh, esta ilustración
es bastante grande, es bastante compleja, y usa algo de textura ahí también. Ninguna de estas cosas
sería posible si tuviera una
tipografía muy complicada en la parte superior, y por supuesto, una paleta de colores razonablemente
pequeña. Y aquí hay otro ejemplo de alguna topografía muy simple, mucho espacio en blanco,
lo que nos permite
jugar con la ilustración
un poco más. Soy consciente de que estoy mostrando
muchas páginas de inicio aquí. Así que sólo para desplazarse hacia abajo
y se puede ver mucha de la iconografía y las animaciones
sutiles son mucho más complejas en
esto porque sí tiene tanto espacio en blanco
y sí tiene una tipografía
tan simple. Y último ejemplo, esta
también tiene unas fuentes muy,
muy estándar. Por lo que puede usar este
estilo de ilustración
muy rayado, muy realista, dibujado a mano, y se ve muy bien. El contraste entre
estas dos cosas funciona perfectamente porque no
hay demasiado color, ya no
hay demasiada complejidad en la página. Entonces es un buen ejemplo
contrastante con ese último que miramos. Esta tiene una tipografía un poco más
complicada, una
paleta de colores un poco más compleja con el color de
fondo aquí. Y por lo tanto tiene un estilo ilustrativo un poco menos complejo. Entonces aquí hay un diseño
que creé antes. Me viste crear esto, y no estoy particularmente
contento con la ilustración. Acabo de meter uno aquí
sin pensar demasiado, voy a sacar esta
ilustración para que podamos tratar de meter algunas
diferentes aquí. Pero antes de hacerlo, una
cosa que quiero sugerir es que tus colores no
tienen por qué ser realistas. Recuerda, antes,
dijimos que el valor es mucho
más importante que el matiz a la
hora de elegir colores
voluntad eso es especialmente cierto cuando estamos descubriendo
cómo elegir nuestros Hughes, Este tipo tiene un verde laptop, que es un poco extraña. Probablemente se pueda ver
eso en el mundo real, pero también podría tener una ilustración donde
el cielo es naranja, donde la
piel de la persona es verde, donde el agua es roja. Y mientras consigamos bien
los valores, van a quedar bien. Pero jugando con los matices, podemos hacerlo más interesante. Y por supuesto podemos conseguir nuestros colores de marca
en su manera de no poder. Entonces como acabamos de hablar
cuando se trata de formas, tal vez
queramos crear
una ilustración que sea solo un patrón de formas. Y así tal vez en cambio tengo estos
triángulos y círculos de colores aleatorios aquí. Ahora me he dado un
reto porque la tipografía que estamos usando para
el texto de visualización aquí, Es un gran complejo, pero también es un poco geométrico. Estas formas geométricas que he añadido como ilustración aquí. No creo que
funcione muy bien. Y eso es porque realmente no
tenemos ningún contraste entre el texto de visualización y
la ilustración. Aunque eso significa que
se ve bonito y uniforme, significa que hay
ilustración
realmente no está agregando nada
al diseño y en realidad no
hay ningún interés visual aquí. Tan similar a uno de los
ejemplos que acabamos de mirar, voy a usar una ilustración
dibujada a mano, pero voy a mantenerla un poco
contenida dentro de un círculo. Tiene un
lugar muy específico en el que vive. Ahora he elegido esta ilustración de
gato sin otra razón real que el hecho de que
tenga estas cuña es, y esta cuña pie izquierdo y el pez en su
pizarra blanca tiene una cara de cuña. Y hay muchas
cuñas en ella, similares a cómo mi tipografía
tiene muchas cuñas. Entonces estoy siendo consciente de las
formas de la tipografía, pero no
las estoy copiando en el mismo estilo, por lo que sigue ahí
el contraste. Ahora veamos este diseño. Un fresco, pero esta vez hemos cambiado las caras de tipo
a algo que manera realista como más parecido a
lo que probablemente estarás trabajando con una agencia de diseño web
moderna. El tipo de letra es
mucho más estándar. Es muy boxy, es sans serif, y más que eso,
es un uso excesivo. Así que todos están
acostumbrados y potencialmente abordan viendo estos
tipos de letra por todas partes. Esto presenta
ahora un reto muy
diferente porque para nosotros crear una ilustración que
funcione con estos tipos de letra, puede ser mucho más complejo conseguir algún
contraste ahí. Pero también tiene que ser porque de lo contrario este
diseño corre el riesgo de ser visualmente monótono y hacer que nuestros
usuarios se duerman. Esta es una ilustración usamos antes en el
curso que podría funcionar bastante bien aquí tiene este genial estilo 3D que está
muy de moda en este momento. Y agrega mucho
interés visual, proporciona mucho contraste con
la tipografía y encaja bastante
bien en esta sección. Un gran inconveniente es
que como no tuve tiempo para crear mis
propias ilustraciones, y rara vez lo haces. Es una
ilustración muy utilizada es un
estilo de ilustración muy usado por lo menos. Así que realmente no
quiero usar esto junto a una tipografía muy
sobreutilizada. Podrías ser perdonado
por pensar que en realidad ya has
visto este diseño. Podríamos querer
en cambio simplemente crear algo salvaje y caótico. De lo contrario, nuestros
diseñadores simplemente buscan muy lejos para conformarse y aburrido. Así que para contrastar que
acabo de crear algunas formas locos salvajes
sin razón real consciente para ellas. Y personalmente,
creo que esto hace mucho mejor contraste
con la topografía. Podemos hacer que este luzca más
interesante en un video posterior. Pero cuando estamos
hablando de texturas y patrones y gradientes, similares a emparejar
diferentes tipos de letra. Cuando estamos eligiendo un estilo de
ilustración, queremos que haya algún
nivel de contraste entre nuestros elementos existentes
y la tipografía, pero en su mayoría queremos que se sientan conectados y alguna
forma de conformidad. Cuanto más limpio y
sencillo sea el resto de los elementos en nuestro diseño, más loco y loco puede ser
la ilustración. Y si ya
tenemos bastante contraste en los elementos
existentes, vamos a querer una
ilustración que sea un poco más contenida y un
poco menos loca.
5. TEXTURAS: La mayoría de los diseñadores web
van a
mirar tipografía y color y tal vez pensar en
composición o aprender a mejorar
un poco sus composiciones. Pero rara vez van a pensar en qué lenguaje
visual. Y aunque
lo hagan, normalmente está en el
contexto de las formas, como acabamos de hablar. No obstante, el
lenguaje visual siempre está ahí, lo
pensemos
o no. Y al igual
que si tratamos de elegir una tipografía sin personalidad,
solo con la esperanza de que
no estemos comunicando nada
con solo usar colores planos, ejemplo, seguía
muy comunicando algo. Esto significa que la mayoría de
los sitios web van a evitar incluso considerar texturas o
patrones o gradientes. Por lo que podemos querer al menos considerar agregar estos
a nuestros sitios web o aplicaciones porque
va a ser muy fácil para nosotros crear una personalidad única y una aplicación web memorable. Podríamos
hacerlo potencialmente más utilizable al llamar la atención
quizás a un elemento
que es interactivo. Como por ejemplo, cuando
usamos gradientes en un botón para que parezca
un poco más 3D. Quizás podríamos usar
una textura en su lugar. Por lo que a veces podríamos
usar una textura para hacer que algo se vea más
realista o skeumórfico. Y tal vez a veces la gente
quiere interactuar con él. No creo que los diseñadores
hablen lo suficiente de esto, pero tengo un bolígrafo en mi escritorio en este
momento y a menudo hago clic el botón en la parte posterior cuando en realidad no
necesito hacerlo. Al igual que, nadie necesita
hacer clic en ese botón solo porque algo al
respecto se siente bien. Y veremos esto
en el siguiente módulo sobre animación mucho más. Pero si el botón se siente más bonito, vamos a querer
hacer click sobre él. Pasemos algún
tiempo buscando una textura que creemos que
funcione con nuestro branding. Ahora, puede que estemos tentados a simplemente copiar uno que se veía
bien en otro sitio web, pero estamos tratando de crear una experiencia única para
nuestro sitio de marketing aquí, o dar personalidad única
a un tablero. Así que intentemos encontrar
un patrón único. Podemos buscar
algo como Pinterest. Y la gente realmente ha
subido todo tipo de texturas
y patrones diferentes aquí. Y podríamos usar esto
para inspirarnos, o quizás podríamos simplemente
copiar algunas texturas que encontramos. Hablaremos un poco
sobre la diferencia entre una textura
y un patrón en breve. Pero primero, voy
a mirar texturas. Ahora aquí está el diseño que
creé un poco antes. Y qué pasa si cambié
esta línea recta una textura fresca pintada a mano a
través de la pantalla como esta. Ahora personalmente, creo que hay al instante hace que se
vea super cool. Había una
línea aburrida a través de la página, y ahora se ve
realmente interesante, pero este interés
llama nuestra atención. Crea una enorme cantidad de contraste en un lugar
que no es muy importante y es casi ahora lo primero que noto
en esta página, recuerda, la única razón por la que tenemos un color diferente en
el fondo mientras nos desplazamos hacia abajo por la página para
romper la monotonía visual, um, idealmente hacerlo con
algún tipo de ritmo. Por lo tanto, la línea recta en el fondo
donde cambiamos de blanco a morado no es particularmente importante
ni interesante. Y en todo caso, queremos llamar menos atención sobre ella, no más. Entonces tal vez este sea un lugar realmente
malo para usar una textura. Algo así como la topografía podría ser mucho más importante. Probablemente lo más
importante es que
podamos aprender desde
cualquier lugar, en, en cualquier momento. Entonces en mi opinión, el mejor lugar para dibujar
más contraste serían palabras
demasiado específicas
en este rubro, haciendo un poco
de textura aquí,
probablemente el mejor lugar en el
que podríamos poner algunos. Podríamos añadir también algunas texturas interesantes a esta rara ilustración
de un gato que tengo. Porque ya tenemos cierta cantidad de
interés visual en esta ilustración. Probablemente no queremos como
una textura realmente dura, realmente
complicada como esta. Tal vez podríamos
suavizar o simplificar esta textura por lo que es un
poco menos dura. Pero nuevamente, aquí es un círculo de
fondo. Quizás este no el
lugar más importante para poner textura. Entonces lo que he hecho
aquí es que he
agregado directamente algo de textura
a la ilustración. Le da un poco más
de una sensación táctil, lo
hace más
visualmente interesante. En realidad lo he
hecho directamente en un programa de dibujo para que
se vea muy único. Simplemente abro la ilustración
en Procreate en el iPad, elegí una textura y
acabo de garabatear algunos de los colores sobre algunas
áreas un poco. Pero esto
agrega muy fácilmente una textura única. Y esta es ahora una pelota completamente nueva. Tengo algunas otras
ilustraciones más pequeñas aquí abajo,
casi iconos, pero un poco demasiado grande y complejo para
ser considerado íconos. Ahora puedo añadir los mismos
pinceles y se
usan cosas en esa ilustración superior para agregar un poco de
textura a estos, lo que los hace
sentir más alineados. Considerando que no creé
ninguno de los dos conjuntos de ilustraciones, les
hace sentir un poco más como si pertenezcan juntos. Tengo por supuesto, ya
ajustado los colores de estas ilustraciones para que se vean del mismo tipo
de colores a. Las texturas se pueden utilizar
cuando queremos que nuestra aplicación web o
sitio web se sienta muy única. Incluso podemos encontrar una textura muy
personalizada dibujada a mano
pinté a mano o
incluso crear la nuestra propia e importarlos y
utilizarlos en nuestras imágenes. Probablemente se sienta un poco demasiado único para ser utilizado para una marca
muy corporativa. No obstante, para algo
que es un poco corporativo, todavía
podíamos usar
texturas bastante sutilmente como lo hice con la
ilustración del gato en este mismo video. Y debido a que el
lenguaje visual es tan único, significa unir
todos nuestros elementos de marca, todos nuestros diferentes
visuales a lo largo la página web entonces
se vuelve realmente fácil. Cada parte de nuestro sitio web al instante
parece que pertenece a la misma marca
porque está usando una textura que realmente
no se usa en ningún
otro lugar en Internet.
6. Patrones: Ahora un patrón es ligeramente
diferente a una textura o un patrón es algo que se
repite sobre un área grande. Esto significa que
se pueden usar mucho más sutilmente en el fondo
de algo. Significa que pueden cubrir
un área más grande obviamente, pero también tiene una ventaja de
desarrollo, que es que podría ser
una imagen particularmente pequeña o SVG que se repite
sobre un área grande. Entonces la imagen original es muy, muy pequeña y
muy rápida de cargar. Entonces, por ejemplo, si
quisiéramos agregar un patrón a este mismo diseño que acabamos de
agregar texturas también. manera realista, probablemente no
haría esto porque tal vez haya
demasiada complejidad en el diseño en general. A lo mejor volvería a ir por
esta forma de cuña triángulo, que ahora se usa
en mi ilustración, así
como mi tipografía de visualización. Por lo que podría tener un patrón de
repetición simple usando los triángulos de
colores ligeramente diferentes. Ahora en este caso,
sugeriría que este patrón no
funciona porque hay demasiado poco contraste entre el patrón
y la tipografía. No sólo ambos
usan formas de cuña, también
son ambas
muy geométricas. Y por esa razón
siento que
necesitaría un poco de contraste para hacer que el patrón realmente
agregue algo al diseño. Porque actualmente, no
creo que esto esté agregando nada que no sea alguna complejidad
innecesaria, tal vez similar a cómo elegimos este gato dibujado a mano en la parte superior, queremos algunos triángulos ligeramente más
dibujados a mano . En cambio, si hubiéramos elegido una tipografía un poco más
humanista o algo incluso dibujado a mano, entonces los triángulos geométricos
podrían funcionar un poco mejor. Pero con todos los
triángulos agudos en la tipografía, creo que los triángulos
dibujados a mano en el fondo aquí
van a funcionar mejor aquí. Y nota que también he añadido un pequeño cuadro morado
detrás del texto, por lo que no tenemos
la distracción de el patrón esté
directamente detrás del texto. Por lo que un patrón
normalmente será mucho más sutil. Será menos distraente para un usuario porque será
lo mismo cubriendo la zona. También es técnicamente menos trabajo. Es más fácil de mantener, es más fácil para la página
web cargar. Normalmente podemos salir con esto más en algo
más corporativo o profesional
buscando incluso dashboard de nuestra aplicación web. Solo para
diferenciarlo de alguna manera, hacerlo más único y darle una sensación un poco más premium.
7. Degradados: Los gradientes pueden ser una forma muy
fácil de crear algún lenguaje visual
que es un poco más complicado que los colores básicos. Si tus colores de branding
eran anaranjados y azules, probablemente haya muchas
empresas por ahí con una naranja muy similar
y un azul muy similar. Pero cuando creamos un gradiente de naranja a azul en tan solo
un cierto nivel, podríamos ser la
única empresa que
hay usando ese gradiente exacto, que va a hacer que
nuestras aplicaciones se sientan un poco más único y ser
un poco más memorable. Creé este diseño antes cuando estábamos
hablando de formas. Tenemos esta tipografía muy boxy
sans serif. Por lo que realmente queremos que las
formas, las otras formas, los patrones o texturas
que usamos con ella
sean muy fluidas y fluidas. Trabajar con una tipografía como esta en realidad puede ser
bastante divertido cuando
llegas a esta etapa porque hemos elegido tipos de letra tan
simplistas, podemos divertirnos un
poco más con lo visual idioma. Entonces, por supuesto, podemos añadir algunos gradientes sutiles a estas formas y
todo el fondo. Y es menos
distraente detrás de esta tipografía porque tenemos mucho más
espacio para crear contraste. Observe estos gradientes
son básicamente entre tonos ligeramente
diferentes de azul. Muy raramente queremos
elegir colores en extremos opuestos de
la rueda de color. De hecho, si yo, por ejemplo, quería crear un degradado
amarillo a azul, ya
sabemos que el suelo medio
va a ser gris y queremos evitar que se ponga gris en nuestros diseños
siempre que sea posible. Nuestros gradientes idealmente no deberían moverse demasiado lejos alrededor de la rueda de
color en su conjunto. Esto significa que los
gradientes que creamos
exigirán un poco menos
atención por parte de nuestros usuarios. Pero también significa que el
color en medio
del gradiente todavía
va a ser un poco vibrante. Una buena solución si
sí queríamos crear un
gradiente un poco más complicado para áreas más pequeñas, es que por supuesto puedes poner una tercera parada en
medio de tu gradiente. Y esto creará
algo un
poco más único para nuestra marca, pero también se asegura de que
el color en el medio
sigue siendo bastante vibrante
y no a gris. Por supuesto, en mi ejemplo aquí, potencialmente podría
haber
algunos problemas de legibilidad. Sólo estamos lidiando
con tres líneas de texto son tan sobre el gradiente. Entonces aquí es menos importante. Pero sí siempre queremos
tener en cuenta que aunque el contraste de color entre el primer plano y el
fondo sea bueno, si hay mucha
complejidad en el fondo, eso todavía va a
hacerlo más difícil para leer el texto. Algo así como un gradiente no es tan complicado como un patrón. Y entonces normalmente está bien. Cada
combinación de colores imaginable ya se ha utilizado para una marca en
algún lugar en línea. Hace que sea muy difícil
para ti llegar a un esquema de color único
para tu marca si no
vas a usar el otro lenguaje visual lo largo del resto
de este módulo. Una cosa que puedes hacer
es crear un degradado. Los gradientes son instantáneamente
más únicos que solo un color plano
y no son mucho trabajo técnico
para agregar a un sitio web. Todavía queremos que estos
sean sutiles, por lo que casi siempre
queremos usar colores que están cerca uno del otro
en la rueda de color, lo que también nos impedirá conseguir un horrible color gris
en algún lugar de el medio de nuestro gradiente. Y si estamos utilizando un gradiente excesivamente en nuestros diseños, sobre todo si es un fondo, queremos reducir la
cantidad de complejidad de otros colores e imágenes
que se utilizan en el diseño. Y tal vez queramos aumentar los espacios en blanco en otras áreas.
8. Iconos: Los iconos pueden marcar una gran diferencia
en una aplicación web. Sé que somos algo
más adelante en este curso, pero no subestimes
lo importantes que pueden ser los iconos. Podrían tener fácilmente toda la personalidad de
un logotipo para comunicar mensaje de
tu marca y
sin embargo resumir lo que algo significa en
un solo símbolo. Esto significa que la gente
puede detectarlo muy rápidamente antes de que comiencen a
leer algo en una página. Normalmente puedes encontrar el botón Guardar y el botón de
archivos adjuntos. Y los iconos normalmente traducen idiomas y dialectos de manera
más rápida que cualquier otra cosa. Ayudar a las personas a identificar
dónde hay un ícono. Y para mantener un mensaje coherente, queremos que nuestro icono se ponga para que todos sientan que
pertenecen juntos. Ahora, a menos que tengamos un presupuesto
particularmente grande, normalmente
vamos
a comprar un conjunto de iconos y probablemente
ajustarlos un poco. Hay algunos conjuntos de
iconos completamente gratuitos muy
fáciles de usar por ahí como
Font Awesome y icono de héroe. Sólo realmente vamos a utilizar estos para prototipos. Realmente no tienen las características únicas que queremos para nuestros conjuntos de iconos. Si utilizamos estas son
aplicación muy rápidamente, parece que otras diez aplicaciones
que ya has visto. Pero crear nuestros propios
conjuntos de iconos es realmente difícil. Queremos que luzcan
consistentes a través de nuestro sitio. Queremos que trabajen en
diferentes tamaños a veces. Y los necesitamos para
comunicar fácilmente algo. Por lo que muy raramente vas a crear uno desde cero tampoco. Si bien estamos
buscando un conjunto de iconos, queremos mantener siempre esas palabras clave de
branding en nuestros cerebros, pero también queremos ser conscientes de cómo se ve nuestra tipografía. Nuevamente, porque estos siempre
van a sentarse junto a algunos textos. Queremos que realmente no tengan demasiado contraste con
la topografía en absoluto. Casi como pertenecen
a la tipografía. Entonces si nuestra tipografía
es bastante geométrica, podríamos querer un icono bastante
geométrico junto a ella. Si parece dibujado a mano o
tiene un elemento humanista, podríamos querer un
ícono un poco más humanista junto a él. O si como estos dos tipos de letra que
he estado usando aquí, uno de ellos tiene
mucho contraste, líneas
gruesas y delgadas. Tal vez queramos mantener ese
contraste en los iconos. Considerando que si estuviéramos usando
el otro tipo de letra para nuestros botones y cosas de interfaz de usuario
general, es posible que
queramos tener un icono con un peso de línea
consistente. En mi opinión personal, al buscar conjuntos de iconos, quieres
mirar las formas y características de
tu tipografía, específicamente la que se
utilizará los próximos dos íconos. Y eso probablemente sea más importante que tus palabras clave de
branding. Una vez que hayas comprado un
conjunto de iconos que hayas elegido, un conjunto gratuito de iconos. A menudo tendrás 200 iconos o algún número loco
como ese en el set. Realmente no quieres usarlos
a todos. Quieres seleccionar
las que van a ser útiles para la
aplicación específica que estás creando. Utilizarás un subconjunto de estos
iconos que compartirás con otros diseñadores o desarrolladores
al crear cosas nuevas. Al decidir qué significa
cada icono, normalmente
me resulta útil ir
a Google Images y escribir archivos adjuntos,
ícono, por ejemplo. Ahora para esto, es
relativamente fácil. Cada imagen que
regresa es de un clip de papel. A veces un clip con un poco más o una
cruz junto a él, lo que probablemente signifique algo
un poco diferente. Si vas a Google
Images y
buscas algo
así como ícono de advertencia, y al menos la mitad de las
imágenes son del mismo ícono. Sabes que ese es un
símbolo universalmente aceptado para esa cosa. Porque así es como la
gente ha etiquetado sus imágenes en
sus propios sitios web. No puedo pensar en
un solo ejemplo donde haya hecho
esto y no haya encontrado un resultado bastante concluyente para qué icono debería
usar para algo. Una vez tenemos nuestro
subconjunto de iconos y hemos decidido lo que significa cada
icono para nosotros. Probablemente vamos a querer
hacer algunos ajustes. Rara vez se obtiene un conjunto de iconos
que funcione perfectamente con su tipografía y con
su mensaje de marca. Quizás necesites redondear un poco
los bordes o tener
líneas más delgadas o algo así. Un problema común,
sobre todo si tenía unos conjuntos de iconos
bastante únicos
como el que tengo, es que en algún momento
voy a necesitar un ícono que simplemente
no tengo en este conjunto. Entonces, por ejemplo, tal vez
necesito un ícono de guardar. Este conjunto no
tenía un ícono de guardar. He hecho una búsqueda de
imágenes de Google para ícono de
Guardar y encontré que
normalmente es un disquete antiguo. Ahora he pasado por el conjunto de iconos
originales buscando algunas formas
ahí dentro que pudiera usar para crear un disquete. Entonces solo puedo hacer
algunas ediciones sutiles, recortando los
bits que quiero guardar y haciendo algunos pequeños
ajustes a ellos para crear una nueva forma de un disquete sin
crear nuevas líneas, curvas, ángulos, o cualquiera
de ese tipo de cosas. También querrás crear
algunas reglas específicas sobre qué color pueden ser y
qué tipo de tamaño pueden ser. Esto es algo muy útil
documentar en tu sistema de diseño. Entonces otros diseñadores que trabajan
en la misma aplicación, no vayan y se peguen iconos en el tamaño incorrecto o
el color equivocado. Un error muy común que
he visto a través diferentes diseños de
aplicaciones web es que las personas usan iconos
para el tamaño incorrecto. Si tienes un ícono, eso es muy simplista y
lo vuelas demasiado grande, se va a quedar mal. Esto es como conseguir una tipografía muy simplista y
convertirla en un rubro grande. Un pequeño ícono muy simple
no funciona grande. No tiene la personalidad y las características
para sacar eso. De igual forma, un ícono muy
complicado, uno con más de un color, por ejemplo, no va a quedar demasiado bien cuando lo
hagas realmente pequeño. Si tienes un icono y
solo son 30 pixeles por 30 pixeles, no
puedes tener diferentes anchos de
línea ahí. Sólo va a
parecer un pequeño lío raro. Por lo que necesitamos tener
restricciones sobre cómo se pueden usar nuestros conjuntos de iconos. Y soy casos muy raros
en algunas aplicaciones, posible que
deseemos una
versión grande del ícono y una pequeña versión
del mismo ícono para ser utilizada
en diferentes lugares. Queremos elegir un conjunto de
iconos que coincida con nuestras palabras de marca y
nuestra marca existente. Pero también queremos que nuestro
conjunto de iconos coincida con la
topografía que se utilizará junto a la hora de
elegir nuestros tipos de letra, preferiríamos elegir uno que pagas para conseguir
algo más único y eso es un
poco más profesional y funciona en más circunstancias. Con iconos. Esto es aún más cierto porque en realidad no
necesitas tanto dinero para conseguir un conjunto
decente de iconos. Vamos a querer crear reglas
muy específicas en
cuanto a qué tamaños y colores se pueden
utilizar estos iconos a lo largo de nuestra
aplicación o nuestra página web. Entonces otros diseñadores
y desarrolladores no van haciéndolos demasiado grandes o demasiado pequeños cuando ya sabemos
que no van a funcionar así.
9. Resumen: Las ilustraciones,
fotos, texturas, o patrones que utilizamos a
lo largo de nuestro diseño, todos
estamos comunicando más el mensaje de la
marca. Queremos tener un estilo
coherente que
utilizamos en todos nuestros
diseños para una sola marca. Si hemos elegido una tipografía
fuerte, tenemos una cuadrícula única y una
interesante paleta de colores. Sólo deberíamos necesitar
usar nuestro lenguaje visual mucha moderación a
lo largo de nuestro diseño. Los principales lugares que usaremos el lenguaje
visual es en nuestros sitios de marketing o nuestra
aplicación, la página principal, donde necesitamos
trabajo adicional para captar atención de
las personas
y comunicar los valores de nuestra marca. Para un dashboard o una sección de
administración de nuestro sitio, usaremos el lenguaje visual
mucho más moderadamente, pero esto no
significa que no existiera. estilo de icono, por ejemplo, puede ser bastante único para adaptarse a nuestra marca y trabajar bien
con nuestra tipografía. Cada aplicación tiene algún
tipo de sitios de marketing o página de inicio y Acerca de Nosotros
página una página de contacto. Estas son páginas que la gente
ve cuando aún no han tratado mucho con tu empresa
o marca. Hay menos familiarizados con la personalidad o el
significado de la marca. Sin embargo, estas son las áreas donde nuestro lenguaje visual
será más importante. Y vamos a querer
obtener ilustraciones o fotografías que
no sólo sean únicas, sino que realmente comunicen
quiénes somos.
Rob Sutcliffe, UI Designer / Developer
