Transcripciones
1. Introducción: Hola ahí. Mi nombre es Jenna y soy la artista
detrás de jehna Soy un diseño de patrón de superficie en diseñador
gráfico y web y Oren Creative con sede
en Sydney, Australia. Si eres creativo, tienes
prisa como yo, más probable es que hayas tenido que construir un sitio web para
mostrar mejor tu trabajo Como los creativos naturalmente quieren que este sitio web sea lo más hermoso, impactante y
memorable posible Para que podamos enviar a
clientes potenciales o clientes. A lo largo de los años, como
diseñador en crecimiento, ha sido imperativo para mí
crear impresionantes sitios web de
portafolios, tanto estética
como funcionalmente El mejor presumir de mi caminar. Con mi formación de
licenciatura
y experiencia en diseño, he podido aplicar el pensamiento de
diseño a mi lado. Esto combinado con años
de experiencia manejando tanto la cartera
como los sitios de comercio electrónico, significa que he tenido mucho tiempo
para cometer errores y
aprender realmente los fundamentos del
diseño para información privilegiada web En esta clase, te voy
a llevar a través diez pasos procesables que simples pero realmente impactantes para
elevar rápidamente tu Vamos a cubrir una gama de
elementos
fundamentales de diseño que hacen que los
sitios web sean coherentes y hermosos. Cosas como familias de tipografía y paletas de colores efectivas, así
como
mejoras más técnicas como arreglar velocidad de carga de
tu sitio y
crear diseños fáciles e inteligentes con imágenes
PNG a lo largo de
la clase serán tomar un sitio web simple de una página y aplicarle los diez consejos Para que puedas
ver visualmente paso a paso, el impacto que cada tip
está teniendo en el sitio web. Y empieza a imaginar cómo esto
potenciará tu propio lado. Esta no es una clase de
desarrollo web, pero sí se enfoca en el diseño
gráfico
específicamente para sitios web. Los principiantes pueden
tomar absolutamente esta clase, pero esta clase está
diseñada principalmente para
personas que están a punto de construir su sitio web o que ya
tienen un sitio web que quieren mejorar
estética y funcionalmente Me enfocaré principalmente en
crear cambios simples en
su sitio web actual
que mantendrán a su sitio web actual
que mantendrán los visitantes comprometidos e
interesados en su contenido. Al final de esta clase, te
haré pensar de
manera diferente sobre tu sitio web. Tendrás una gran
comprensión de los fundamentos del diseño y es
más importante, una lista
procesable de cambios
rápidos que puedes hacer y que mejorarán drásticamente el aspecto, la sensación y la función
de tu Estoy muy emocionada
de enseñar este tema. Así que vamos a saltar de inmediato.
2. Lo que aprenderás: Antes de detener esta clase, hablemos rápidamente
sobre el formato de las lecciones y
lo que Aprenderás. Los diez consejos de esta clase se dividirán en
tres categorías. Branding, mantenimiento de interés
y funcionalidad. Puedes pensar en estas tres
categorías como el aspecto, sensación y la función
de tu sitio web. En caso de que te preocupe, no
importa en qué plataforma esté construida tu
sitio web. Podrás aplicar
estos consejos para Godless. La sección más grande de
esta clase es el branding. Ahora, antes de que entres en pánico, sé que la marca puede ser
una palabra un poco aterradora. Quizá estés pensando, no
tengo marca, solo
estoy haciendo cosas bonitas. Pero el hecho es que, no importa lo que estés creando, tienes una identidad de marca. En pocas palabras, una marca es un conjunto de características que distingue a
tus productos de los demás. Esto puede estar compuesto por un logotipo, fuentes
específicas, una combinación de colores y muchos otros factores. Bueno, estas cosas ayudan a
definir quién eres y deben reflejar la identidad, la
personalidad y los valores de tu marca. En esta clase, cubriremos algunos elementos
de branding
que pueden amplificar un sitio web Y hablaremos
sobre cómo elegir estos elementos para
reflejar mejor tu identidad de marca. Una vez que tu marca esté
clara en tu sitio web, entraremos en la categoría de
interés
de mantenimiento, que puedes pensar que mejora la sensación de tu sitio. Esta sección cubre una gama de técnicas que puede
utilizar para
involucrar aún más al público y
mantenerlos en su sitio web por más tiempo. Por último, las últimas lecciones tienen que ver con la función del sitio web. Esta sección ayudará a
optimizar rápidamente tu sitio para que los usuarios puedan disfrutar de todo
el otro trabajo duro que has puesto en tu sitio web. No hay nada peor que
crear un sitio web hermoso, pero nadie ve porque
tarda demasiado en cargarse. En cada lección, estaré aplicando el consejo relevante a este
sencillo sitio web de una página Poco a poco se puede ver
el impacto que tienen. Aunque voy a estar demostrando estos cambios en Wordpress, realidad no
voy a estar enseñando ningún desarrollo web
en esta clase. También quiero estar entrando en la optimización
de motores de búsqueda. Si sientes un sitio web básico antes todos mis consejos
deberían ser fáciles de
aplicar en cualquier
plataforma de alojamiento de sitios web utilizando un diseño simple de
front-end. Si no has construido un
sitio web antes, no hay problema. Estos son conceptos simples
que podrás
aplicar a medida que aprendas los
conceptos básicos del desarrollo web. Te recomiendo que veas
todas
las lecciones primero y luego decidas
qué consejos
vas a aplicar
en función de lo relevantes que
sean para tu sitio web, hablarás sobre tu
proyecto en el siguiente video.
3. Tu proyecto: Tu proyecto para esta clase, nosotros para implementar al menos uno o más de los diez consejos
que voy a estar compartiendo. Tu primer paso
es simplemente tomar una captura de pantalla de tu
sitio web tal como está ahora. Una vez que hayas implementado
tus consejos elegidos, toma otra captura de pantalla
y publícalo en la galería del proyecto
para que podamos comparar el impacto
antes y después. Me gustó mucho este
proyecto
porque es súper fácil de implementar y terminarás con un
gran registro visual y comprensión
de las diferencias, estos pequeños cambios y
haciendo en tu sitio web. Puedes subir
tu proyecto usando el botón crear proyecto bajo esta clase y compartir
tus capturas de pantalla. Esto me permitirá
darle comentarios sobre cualquier cambio que realice
en su sitio web. También he proporcionado un libro de trabajo de
marca simple para que lo rellenes para ayudar a
que estos cambios sean más fáciles Esto ayuda específicamente a solidificar lo que aprendes en las lecciones 123 Entonces, si este es tu enfoque, no
dudes en compartirlo. Este es un proyecto para. Vamos a saltar a la
lección número uno
4. Branding: tipografía: Empecemos con la propina número uno. Cómo mejorar sus
sitios web diseñados seleccionando la Tipografía Es muy fácil subestimar
las fuentes de potencia
que pueden tener en nuestro sitio web Pero creo que las fuentes son en realidad el
activo más importante de tu marca. Comunican rápidamente la identidad de
su marca, proporcionan importantes señales visuales sobre la
información de auditoría
que se debe leer y definir
el tono
general y el estado de ánimo de una página También son un
elemento clave para garantizar una gran experiencia de usuario a la
hora de seleccionar fuentes. Lo más importante a considerar es la jerarquía
tipográfica Ahora la
jerarquía tipográfica de fuentes es simplemente un sistema de ordenar fuentes para comunicar a los raiders la importancia
de la información Cuando se hace de manera efectiva, la jerarquía
FUN puede crear una experiencia de usuario mucho
mejor. Agregar estructura y
organización visual a tu contenido, así
como reforzar el reconocimiento de
marca. Hay tres lágrimas básicas para el
sitio web en jerarquía que
debes considerar. Encabezados, subencabezamientos
y texto corporal. Sencillo, ¿verdad? A la hora de
seleccionar estos fondos, estarás haciendo algo
conocido como emparejamiento de fuentes. El objetivo del emparejamiento de fuentes es
elegir diferentes fuentes que creen contraste visual de
manera armónica. Antes de entrar en algunos ejemplos de emparejamiento de
fuentes, definamos algunos términos. Acabamos de tocar
qué jerarquía y maridajes de fuentes Pero aquí hay algunos otros tiempos de Tipografía
estándar. Serifs, un tipo de letra con una pequeña proyección al
final de los pequeños El
ejemplo más famoso de esto es Times New Roman Las fuentes san-serif
son las fuentes más comunes
que ves en Estas son tipografías sin trazos
ni adornos Un ejemplo estándar
de esto es Colibri. letra de script son
esencialmente fuentes que imitan la escritura a mano
y las serifas de losa,
tan similares a las Serifs, tan similares a las Serifs, pero mantienen el grosor y el grosor del trazo Ahora que ya sabes con qué
estás trabajando, vamos a elegir algunas fuentes. Esta es la mejor olla. Una regla básica del emparejamiento de fuentes
es que los opuestos se atraen. A la hora de elegir fuentes, quiero
que consideres dos cosas. ¿Estas fuentes
reflejan el tipo de servicio o producto
que represento? Y todos ellos fáciles de leer. hora de elegir fuentes, ¿considera el estado de ánimo que quieres que tu
marca se comunique, tu marca lúdica
y accesible ¿O tiene un relleno bohemio
mínimo? maridajes de fuentes comunican la estética
general de tu marca. Echemos un
vistazo a estos ejemplos. La primera es a los emparejamientos de fuentes de
estilo minimalista que acabo de armar
usando Puedes
descargar muy fácilmente las fuentes de Google a tu computadora y
muchos creadores de sitios web ya
las
tendrán disponibles. Lo que funciona sobre estos
emparejamientos y Crea esa vibra
minimalista
es la legibilidad y estructura Estas fuentes son todas sans serifs y esa falta de
proyección sobre las letras, así
como el
espaciado que tenemos aquí, crea un Look muy limpio
y práctico Nuestro segundo ejemplo está aquí, tener una estética más lujosa, de
gama alta. Estos emparejamientos están aplicando
mucho opuestos atraen al
combinar serifs y fuentes de
script para los
encabezados y luego apoyándolo con
un
sans serif realmente limpio sans serif Este de aquí es un ambiente sofisticado muy
agradable y es un ejemplo de un emparejamiento de
fuentes que puedes comprar, en este caso en Etsy Hablaremos un poco más de
esto al final de la lección. Las últimas maridajes de fuentes exudan una vibra
muy juguetona y phon. La suave ronda de fuentes mantiene
las cosas lúdicas en comparación con las fuentes
limpias Cera que comunican
una estética más lux. Puedes jugar
con combinaciones para ver qué tipo de vibra comunican y averiguar qué tipo de Estética
estás tratando de evocar Para un sitio web de una página, voy a ir por un look
bastante alto Entonces voy a usar
este emparejamiento de fuentes aquí. Voy a empezar a llenar esto
y voy a marcar el libro de trabajo, que puedes acceder
bajo esta lección Pongo en H nombre de fuente así
como se ata. También voy a
dejar de llenar algunas palabras que representan la Estética que estoy
tratando de crear. Pero también agregaremos a
esto a medida que avancemos. Ahora que hemos
aprendido alguna teoría, vamos a aplicarla a esta página Tenemos alguna jerarquía
tipográfica básica pasando aquí, lo cual es bueno Y las fuentes son
bastante legibles. Pero en realidad no están trayendo nada más a un lado. No representan exactamente el sofisticado
campo fresco al que estoy tratando de ir. Entonces vamos a reemplazarlos
con los emparejamientos de fuentes
que intenta antes Voy a empezar
haciendo algo como esta fuente titular ya que claramente es algo
muy importante. Y entonces algo
como esto sería un lema y esto es
obviamente texto corporal Quiero que todos mis titulares
sean mayúsculas. Eso obviamente es demasiado pequeño, pero solo
lo haremos bonito y grande. Cambia un poco la altura de la línea. Y quiero que
todas estas sean minúsculas. Y entonces queremos
hacer esta fuente body
y bonita fuente sans serif legible Ya
puedes ver la diferencia que está
trayendo a la página Ten en cuenta a la hora de
elegir tu Tipografía, te
recomiendo usar no
más de tres fuentes diferentes para todo tu sitio web El uso de
fuentes termini, estilos de fuente o tamaños de fuente puede hacer que el
sitio parezca desestructurado Mantener las cosas limpias con un máximo de tres fuentes son aplastadas. Todo tu sitio web crea una coherencia visual y ayuda a
reforzar tu marca Ahora que tienes
tus fuentes, toquemos rápidamente la
mejor manera de usarlas. Entonces, en primer lugar, tenemos
line-height o leading, que es el espacio vertical
entre dos líneas de texto Las investigaciones muestran que el uso adecuado
de los espacios en blanco entre líneas de textos puede aumentar la
comprensión hasta en un 20% La longitud de columna es la
cantidad de palabras que se dividen horizontalmente antes de
pasar a la siguiente línea, entre
40 y 60 palabras se consideran las más atractivas
visualmente Vamos a enfrentar define una distancia entre caracteres
y dejar que una altura defina la altura de esos
caracteres. Negrita y cursiva. A diferentes
opciones de formato y armonía se
trata de crear cohesión
entre los elementos Cuando se trata de Tipografía, eso significa usar fuentes
similares y espaciado
de línea y formato
consistentes Entonces eso es una plaza, pero los trucos de
formateo aquí, voy a hacer esta línea hola, un poco más grande para mejorar
la legibilidad Y entonces tal vez también capitalizar esto un botón para avanzar en
la jerarquía visual No queremos que sea demasiado grande, pero eso se ve bien,
un poco más legible. Entonces este botón, sólo
voy a
transformarlo a mayúsculas y cambiar la fuente a esa misma
frase, Sarah También voy a
revisar y cambiar todas estas otras fuentes para
mantenerlo consistente en todo el sitio. Al mantener el tamaño y el espaciado consistentes en todo el sitio, se verá
mucho más coherente. Esto se ve
mucho mejor ya. Realmente ya se puede ver las diferencias
que está haciendo al sitio web. Es más claro, más fácil de leer, y se siente más en la
marca con esa estética limpia y
de lujo que estoy
tratando de representar. Ese es solo uno de los consejos hasta el momento. Antes de pasar
a la siguiente lección, quiero tocar rápidamente los derechos
de autor frontales. He adjuntado un recurso
a esta lección que enumera algunos lugares para encontrar fuentes
sin derechos de autor, así
como lugares para comprar La mayoría de las plataformas de sitios web le
permitirán descargar cualquier
fuente personalizada en su sitio web, pero siempre asegúrese de comprar la licencia apropiada
antes de instalar una fuente. A menudo también puedes comprar maridajes de fuentes
prefabricados en
estos Si no quieres
descargar fuentes personalizadas, siempre
puedes aplicar lo que
has aprendido aquí y crear emparejamientos de fuentes con fuentes
preinstaladas Si quieres dar
el paso extra, siempre
puedes convertir
tu propia letra en una hermosa fuente
para usar en tu sitio Hay algunas clases realmente
geniales aquí en Skillshare que pueden
mostrarte cómo hacer esto también
5. Branding: paletas de color: El consejo dos es todo acerca de las paletas de
colores. de colores de su sitio web es un componente enorme
para crear una marca hermosa. Tener una
paleta de colores cohesiva que represente la identidad de
su marca mejorará enormemente la apariencia de su
sitio web De hecho, según un estudio
de la Universidad de Lille,
lote, Color puede aumentar reconocimiento de
marca
hasta en un 80 por ciento. Hay algunas cosas que hacen que un buen
esquema de color del sitio web sea esencial. Colores. Lo primero que la gente
notará cuando
visite tu sitio. Los colores determinan la identidad visual de tu sitio web y marcas. Un buen esquema de color puede
impactar enormemente el estilo y la
consistencia de Your Side Los colores evocan
respuestas emocionales que pueden impactar la forma en que alguien siente
que estoy visitando tu sitio web Y por último, los colores
crean jerarquía visual. Un
esquema de color de sitios web es más que solo tu logotipo y color de
fondo. Incluye cada color que aparece en tu sitio web. Tu cabeza arriba, pie, secciones, botones, colores de texto. A pesar de que el calor se
usa en tus fotos, todos contribuyen a la
paleta de colores que estás presentando. Teniendo en cuenta que el
60% de las personas aceptan o rechazan nuevos productos
basados únicamente en el color. Conseguir esta paleta correcta
es muy importante y juega un papel muy importante en
la configuración del estado de ánimo y la estética
de tu ciencia. Agradecidamente, no es muy
difícil saber por dónde empezar. Si eres artista o diseñador, elegir colores para representar
tu marca puede ser sencillo. Solo echa un vistazo a tu trabajo. ¿Hay colores que siempre
usas que te atraen naturalmente? Tal vez solo
uses realmente tonos cálidos o colores contrastantes
Ajanta al elegir una paleta para
tu sitio web y marca, dibujar colores
a partir de tu propio logotipo o producto asegurará
un aspecto cohesivo Incluso puedes llevar esto
a un nivel
más personal mirando la ropa y los artículos que compras de colores
o tonos similares que te atraen. Estos artículos representan en quién
eres nuevo en torno a tu identidad puede ser
una manera muy agradable presentar tu sitio web. Alternativamente, puedes analizar el estado de ánimo general de tu espalda. Piensa en la Estética
que intentas presentar. ¿Quieres que tu sitio web se lea como minimalista,
iluminado,
audaz, bohemio, tal vez
hasta Ciertos colores están asociados con ciertos movimientos
estéticos. Por lo que conocer tu
Estética puede hacer que escoger estos colores sea
mucho más fácil. Entonces, ¿cuántos colores debería
haber en tu paleta? El enfoque simple es seguir una jerarquía similar a lo que hemos hablado
y Tipografía, y elegir un color primario, secundario y acento Una regla general en el
diseño web es 603010. Esta regla sugiere que el 60 por ciento del sitio debe ser
el color dominante, 30% debe ser el secundario, y el diez por ciento para el acento Por supuesto, las reglas están hechas para
romperse y recomiendo encarecidamente experimentar y usar
cualquier cantidad de colores que creas que mejor
representa tu marca Como dijimos antes, ciertos movimientos estéticos están asociados con ciertos colores. Entonces este ejemplo
aquí se trata de una estética minimalista, limpia El minimalismo suele
asociarse con colores
neutros y tonos terrosos, que podemos ver
en estos ejemplos Tener un color brillante muy
saturado aquí se sentiría
muy fuera de lugar. Formula lux mira de nuevo, los neutros son muy importantes Pero esta vez los colores del
axón y más saturados y vamos a tener más presencia y
rodar en un sitio web También hay más
contraste sucediendo aquí. De hecho, he seleccionado esta
paleta específicamente para nuestro sitio de maquetas para ir con
estas fuentes que elegimos antes Y los he puesto en el libro de trabajo de
branding junto con los códigos hexagonales para que pueda copiarlos y pegarlos
en el sitio En breve volveré a por qué
los elegí. A la hora de seleccionar paletas
más lúdicas y phon usando colores con más blanco
en ellas es bastante estándar Esto puede crear un aspecto pastel
encantador. Esta estética también suele
jugar con combinaciones de
colores complementarios contrastantes y divididas con una saturación bastante alta. Una paleta como esta es más atrevida y
llamativa en comparación con una paleta como esta que es más sofisticada
pero aún DIVERTIDA. Pero todas estas Paletas aún
crean un estado de ánimo muy amable, brillante y feliz Elegir el
combo correcto se reduce a tu trabajo y al estado de ánimo
que intentas crear. Algo que también querrás
considerar es la psicología del color. La psicología es esencialmente
la idea de que ciertos colores desencadenan emociones
específicas. Aplicado al diseño web, muchos diseñadores eligen
colores en función la experiencia emocional que
quieren entregar a los usuarios. Cuando no has
entendido lo que representa cada color, elegir colores para tu sitio web puede ser más intuitivo. Así que tomemos todo lo que han aprendido en esta lección
me aplican aquí. El único color se encuentra
actualmente en este sitio web. ¿Por qué? ¿Negro y cualquier color
de las fotos? Se trata de una maqueta del sitio web de
un artista. Decidí elegir colores
inspirados en la Historia del Arte, como el blues profundo y metas que son atemporales
y hermosas. Los blues también están
vinculados a sentimientos de comunistas y confiabilidad, lo que creo que
funcionaría bien para el estado de ánimo que quiero evocar También quiero mantener muchos espacios en blanco para mantener un aspecto
fresco y limpio Actualmente, el único color
de fondo es el blanco. Entonces voy a
comenzar con agregar colores de
fondo y
caer por debajo de 603010 La estructura equilibrará los
colores visualmente a medida que avanzamos. Dejaré el fondo
así por ahora y seguiré desarrollándolo a
medida que cambie el sitio. Rápidamente haré de este
botón un color de acento a, y también cambiaré estas fuentes del color opuesto para que
sea más legible. Por fin aplicamos a las propinas hasta el momento, y ya se ve
mucho mejor. Quiero comparar. Vamos a comparar. Esto, es. Esto no es ahora
que hemos aplicado algunos colores de fondo
y algo de Tipografía, eso ya se ha hecho hasta
ahora, solo a consejos adam, dos de cada diez Y ya se ve
mucho mejor que esto. Simplemente así, mucho mejor. Creo que eso es muy emocionante. Vamos a tomar tres
6. Branding: imágenes, videos y tu estética: Ahora que hemos cubierto
Tipografía y color, hablemos
del poder Imágenes, Vídeos y tu estética
general Las imágenes hermosas no son una olla
central para ningún sitio web, ya sea que esté
vendiendo un producto, servicio o simplemente
compartiendo información. Realmente solidifican la vibra
y la estética de un sitio web. Las buenas imágenes, especialmente cuando se
trata de imágenes de productos, pueden significar la diferencia entre
un usuario que convierte o no. A pesar de que
las imágenes de alta calidad
aportarán profesionalismo
a su sitio web. Asegurar aquellas imágenes
que sean consistentes en Estética y tono
las llevarán al siguiente nivel. Tener imágenes de
la misma sesión de fotos o editadas con el
mismo filtro aporta una coherencia a un sitio web
que puede
vincularse a la marca que ya creó con su esquema de color He creado dos ejemplos de estética
diferente
con las fotos aquí. A la izquierda, estamos construyendo
sobre nuestra marca minimalista. Hay algunas cosas
que hacen que estas imágenes funcionen tan bien juntas. Lo más importante
a tener en cuenta aquí es que todas las imágenes tienen tonos muy cálidos, terrosos y una edición
bastante oscura Esta es la misma sensación que la
paleta de colores minimalista que creamos Estas imágenes también se toman de manera bastante similar cuando se
trata de espacios en blanco Si agregaste una imagen aquí con edición
más brillante y tonos fríos, esto cambiará el estado
de ánimo del look en general. Es importante
considerar el papel de cada imagen individual
entre la totalidad. Estas imágenes evocan una vibra mucho
más feliz, lúdica. Esto funcionaría
bien con algunas de las fuentes más suaves y Brad
o Paletas que creamos La principal diferencia aquí
es que estas imágenes se editan para tener una exposición
mucho mayor, manteniéndolas iluminadas, alegres Esos prácticamente no puntales o colores en estas
imágenes en absoluto Las expresiones faciales y el posicionamiento más cercano
a la cámara crean una vibra bastante amigable. El contenido de video es otra herramienta
increíble para
elevar tu sitio. Los videos son una
manera increíble de transmitir conceptos
emotivos sin palabras, el medio perfecto para resaltar tu
proceso de trabajo y ayudar a comunicar
rápidamente a audiencias
potenciales el valor de tu trabajo Si su trabajo tiene un proceso de
fabricación muy práctico o
una historia única detrás de él. Agregar un video
de alta calidad y
bien elaborado de esos detalles en su sitio web no solo agrega una sensación de
tacto a su sitio, sino que
comunica visualmente el valor de lo que ha creado
a través de , ya que un medio
nunca ha sido más accesible o consumido
que en este momento Con 96% de las personas
diciendo que recurren a los
videos para conocer más sobre
un producto o servicio. Utilizar este medio es imprescindible. Algunas otras formas en las que podrías compartir información a través de
videos en tu sitio web incluyen un video introductorio explicando tu
producto o servicio. Un video que da instrucciones sobre cómo usar su
producto o servicio. Un
video estilo campaña que destaca la forma en que tu producto o
servicio podría impactar a alguien. Una recopilación de
testimonios o historias de clientes, metraje
detrás de escena o videos de
proceso que pueden
ayudarte a sentirte más involucrado. Entonces vamos a aplicar esta teoría aquí. Actualmente tenemos
algunas imágenes y todas
son de muy
alta calidad, lo cual es genial. Pero no todos están hablando
necesariamente el
mismo lenguaje visual. Estos tienen un tono un poco
diferente a estos otros
y realmente no se ajustan al esquema de color que
hemos establecido. Ahora porque esto es
solo un sitio de maquetas. No he tomado una sesión de fotos
específica. Acabo de quitarle estas
imágenes al chapotear. En este caso, solo
voy a usar fotos de la misma sesión de Unsplash,
que es esta Así como mejor, algo
mucho esos matices como estos. De hecho voy
a quitar estos
sólo porque no van a
sumar mucho por estar aquí. De hecho, a pesar de
que son imágenes muy bonitas que en realidad
quitan la coherencia en el
sitio al ser tonos más cálidos La mayoría de
las imágenes y colores
tenemos ahora un blues que es agradable. Quiero más de ese excelente color
dorado para mi paleta. Acabo de tomar esta imagen y la convertí en un BATNA
de ancho completo No hay nada de malo en usar el mismo activo
dos veces. En este caso. Va a ayudar a unir
la página. Pongamos eso aquí
abajo por ahora. Ahora. No nos quedan fotos, pero no estamos exactamente haciendo el mayor número de otras. Nosotros sí tenemos. Esta, por ejemplo, es una imagen muy, muy bonita. Y se enlaza ésta sólo porque es
de la misma sesión de fotos. Pero realmente creo que podríamos hacer que este contenido sea más interesante
visualmente. Creo que cualquiera puede
convertirlo en una especie de collage y podemos jugar con la relación entre nuestras fotos
y el esquema del alcohol. Podemos volver
a este contenido. Entonces sólo voy a empezar por crear un sexual de dos columnas. Y te voy a mostrar lo que quiero
decir con collage en un segundo. Queremos que esta imagen
sea el foco principal. Entonces, naturalmente, va a
ocupar la mayor cantidad de bienes raíces. Entonces quiero que el otro
lado sea uno de los colores que están
en nuestro esquema se pega con mucha parada cool. Ahora voy a
duplicarlo e invertirlo. Y voy a sustituir esta
imagen con todo lo que son sólo para mantener el
mismo aspecto visual. Este es un poco el Look
básico que quiero, pero se ve raro
en el medio Así que voy a ir por una división de 70, 30. Eso se ve bastante genial. Entonces ahora voy a tomar algo de este contenido y ponerlo aquí. Las principales cosas que quiero tomar, el hecho de que se trata de diseño del hogar y esta última frase donde es
específicamente para ropa de cama de lana pay pop y home deco. Volveré al resto de este contenido. Pero creo que podemos comunicar visualmente
el mismo sentimiento sin mostrarlo solo como
un párrafo de texto estándar Creo que eso es mucho,
mucho más efectivo. También he escrito en esta
sección, realza tu espacio. Creo que al decir
lo que trabajarás hace en lugar de
lo que realmente es. A menudo puedo ayudar a comunicar mejor
lo que estás ofreciendo. Quiero agregar algunos
videos a este sitio. Así que de nuevo, solo voy
a agarrar
una libre de derechos de autor esta vez de Pexels Estoy buscando en el Cuenta la misma historia visual que el resto de mi marca. Este es genial. Vamos a añadir un como fondo
de una nueva sección y
ponerla en bucle. Acabo de agregar
algunos textos encima de este video ya que creo que es solo una forma realmente dinámica
visualmente mostrar información. Al tener este video aquí, simplemente
captaremos la atención de un
usuario y al instante le comunicaremos ¿de
qué trata este sitio web?
7. Branding: la importancia de tu historia: La propina número cuatro
es todo sobre ti. Este puede ser el activo más
subestimado que cada
persona tiene acceso Ese activo es Tu
Historia. Y tu Y. Contar una historia en tu sitio web puede parecer un paso obvio, pero muchas veces se pasa por
alto y lado como poco importante Te voy a decir tu página
Acerca de en tu sitio web. Quizás la página más importante e
impactante que crees. Priorizar y
dedicar espacio para compartir tu historia y personalidad
en tu sitio web es una forma hermosa y extremadamente
efectiva de ir a cosas
esenciales con la
audiencia, la conexión y la confianza Tu historia importa
tanto porque agrega un elemento humano
a tu WACC Los humanos siempre
anhelan la conexión. Al compartir una parte
de nosotros con los demás, podemos comenzar a construir
una relación. Cuando alguien lee tu historia
y se conmueve de alguna manera, ya sea
porque empatiza, se relaciona contigo o te inspira Esa persona ahora está
inevitablemente más comprometida e invertida en ti
y por supuesto, en tu trabajo. Esta base de conexión también de repente agrega
valor al caminar. Cuando miramos un
producto, por ejemplo, y no sabemos nada de él
excepto la forma en que se ve. Inconscientemente
le damos un valor basado puramente en ese aspecto Sin embargo, cuando conoces a las
personas que hicieron el producto, el arduo trabajo y los procesos
que se llevaron a hacerlo, y la inspiración
detrás de por qué
sentían que necesitaba
existir en este mundo. Has visto ese mismo
producto como más valioso. En la superficie, nada cambia. Es tu conexión emocional con algo que agrega ese valor. Ese es el poder que puede tener
contar tu historia. Simplemente compartiendo tu por qué, puedes ayudar a las personas a comprender el verdadero valor de tu trabajo. He reunido algunos
ejemplos de formas PFK-1 de compartir información sobre
ti en tu En primer lugar, tenemos este refresco, que es algo
que estuvo de moda en Instagram por un tiempo, pero en realidad es una adición muy
DIVERTIDA a un sitio web Algo como esto puede
decirle a alguien de forma rápida y visual alguna
información personal identificable sobre ti Puedes personalizar
las opciones y mantenerla en tu estilo
para que sea relevante. Tener una lista corta de información
interesante sobre ti puede ser poético y phon, forma de compartir un poco
de personalidad para mantener la visualización
de esta información bastante visual hace que
sea más probable un usuario la califique que si
fuera solo un bloque de texto También puedes compartir
tus cosas favoritas o una breve historia personal. Usar mis cintas y tu estilo para
segmentar tus valores de servicios, o cualquier otro tipo de
información que quieras
compartir es otra
técnica que podrías usar, agregando interactividad a esto usando algo
como efectos de hover Por lo que también ayudó a aumentar los intereses y el compromiso de los
usuarios, cubrirá más sobre este
concepto en la lección seis. Actualmente en mi sitio web, tengo una lista rápida
para resumir mi estilo y definitivamente podrías agregar
lindas ilustraciones aquí también. También tengo una línea
de tiempo de mi historia e historia
laboral para que la gente pueda entender cómo
llegué a donde estoy. También he usado algunas
ilustraciones aquí para apoyar visualmente
el concepto de crecimiento. Agregar estas cositas de información
personal identificable solo ayuda a los usuarios a conectarse contigo
y, a su vez, les permite invertir más
en
8. Branding: utiliza tu encabezado y pie: Mi quinto consejo es Utilizar
la presentación de tu Encabezado y sacarlo para
representar mejor tu marca Aprovechar al máximo su diseño de
encabezado y pie es una excelente manera de mejorar
el aspecto de su sitio web. Tu encabezado y pie de página van por todas las páginas de tu sitio web. Por lo tanto, es una gran parte de establecer el tono y la
sensación de tu sitio. Quieres que tu Encabezado
y Pie de Página incluyan los
colores y la identidad de tu marca. Fácil acceso
al menú a todas sus páginas, especialmente a su cartera,
tienda o sobre páginas, cualquier enlace social y forma
fácil de contactarlo, como una caja de entrada o
suscripción,
su logotipo, su
aviso de derechos de autor y política de privacidad, y cualquier otro enlace que desee
acceder en todas las páginas. Esencialmente, quieres usar
tu cabeza para introducir tu marca y comunicar rápidamente lo que hay en tu sitio. Y quieres usar
tu Pie de página para compartir información
importante que
mejore la usabilidad del sitio. Elegir un estilo de Encabezado que funcione mejor
con tu branding y el tipo de función de
menú que requieras es realmente importante. Echemos un vistazo a algunos estilos
diferentes de
encabezado y pie de página y el impacto que tienen en el
aspecto de un sitio web. Muchos creadores de sitios web tienen
plantillas que puedes ver. Y acabo de entrar en el sitio de Shopify para mostrarte algunos estilos diferentes
que puedes crear Cuando se trata de implementar
esto en tu propio sitio, posible
que estés limitado en
lo que puedes construir, pero vale la pena
conocer el potencial de cómo pueden ser un Encabezado y
Pie de Página. Echemos un
vistazo a algunos ejemplos. Este es un encabezado simplista muy
agradable que utiliza esta transparencia Esta también tiene
una muy buena foto. Tiene el
nombre de la marca enorme en la parte inferior para que pueda acceder a la página de inicio fácilmente en cualquier momento. También tiene
aquí las columnas completas que incluyen información del sitio, enlaces
importantes, una caja de suscripción
al boletín. Y luego en la parte inferior tiene los enlaces más técnicos como derechos de autor y política de privacidad. Este diseño tiene algo similar con la imagen de ancho completo, pero esta vez
tiene un keto opaco Sé que a menudo con
encabezados como este, puedes configurarlo para que se desplace para que permanezca en la página todo
el tiempo. El Pie de Página para éste
es un poco más sencillo. No obstante, esta vez
incluyó vínculos sociales. Este último ejemplo está más
integrado en el sitio. Simplemente tiene una barra de
anuncios simple en un color diferente, un logotipo centrado,
y luego el menú. Y simplemente veremos rápidamente
el encabezado móvil aquí. Nuevamente, esto es realmente
simple y limpio, lo cual es ideal para algo tan clave para navegar por el sitio. Puedes encontrar mucha
inspiración cuando se
trata de diseño de
encabezado y pie de página mirando este
tipo de plantillas. Actualmente esta página
no tiene cabeza. Acabamos de tener el
logo en la parte superior y un copyright
Florida en la parte inferior. Empecemos con el Encabezado. A pesar de que este es
un sitio de una página, agregar un menú
ayudará con la navegación Voy a insertar un
encabezado que construí antes. Este encabezado es un diseño simple realmente
agradable que solo
ayudará a guiar a un usuario. He agregado las
secciones principales de esta página, así
como dos opciones
adicionales de menú para diario y contacto, que solo lo fingiremos
a páginas adicionales que he construido. Puedes ver que he agregado uno
sobre los colores de acento
al tener para mantener esa consistencia
de color. Vamos a
profundizar un poco más con el Pie de Página. Voy a incluir esta caja de
suscripción en el pie de página. Dado que esto es teóricamente solo un sitio web de una o dos páginas, funcionaría bien
en este caso tener una caja de suscripción en cada página Entonces comencemos con eso. Hará que ese texto sea blanco. De hecho voy a
cambiarlo para simplemente decir newsletter y
convertirlo en un pequeño incentivo. Ahora que ya lo he
hecho, agreguemos una sección secundaria
a la foto. Algunas cosas que quiero incluir
en este otro menú, cualquier enlace social,
nuestro logo nuevamente, y tal vez incluso alguna
información sobre la marca. Creo que lo voy
a crear como dos columnas con el
menú de un lado, otra información en la parte superior. Sí, así es como
se ve realmente bien. Y ahora en el costado, voy a agregar el
mismo menú de navegación que usé en la cabeza apagada. Genial, así que creo que
se ve muy bien. Tengo navegación en un lado, que acabo de tomar el mismo menú ya que los golpearé en ti. Y luego información del otro lado
sin vínculos sociales. También he agregado este borde dorado solo para atar un poco más ese color de
acento. Voy a agregar rápidamente en una sección de derechos de autor
para acabar con esto. Creo que se ve muy bien. Y vamos a echar un
vistazo ahora a cómo
se ve eso realmente en la página. Eso se ve muy bien. Yo sólo voy a deshacerme de esta sección porque ya
no la necesitamos. También voy a añadir aquí
el estandarte dorado. Simplemente separe estas
dos secciones. Y ese es el Furda. Puedes ver que es un espacio mucho más optimizado para el usuario ahora que realmente se vincula la marca que creamos anteriormente, te puedes imaginar si este
fuera un sitio de varias páginas, cuánto impacto
tendría eso en la facilidad de uso, así
como los sitios Consistencia
estética
9. Mantener el interés: experiencia de usuario y flujo básico de una página web: Ahora que hemos terminado
todos los consejos de branding, estos siguientes cambios
se basan en
mantener a los visitantes de tu sitio web comprometidos. consejo seis trata sobre el aspecto más importante
de involucrar a los usuarios, que se trata de brindar
una buena experiencia de usuario. Ahora, he estado lanzando mucho
este término experiencia de usuario a lo largo de esta clase. Pero profundicemos en lo que
realmente significa en pocas palabras, diseño de experiencia de
usuario o diseño de UX, es el proceso de hacer que
algo sea utilizable, accesible y agradable
para usarlo como sea posible. Cuando se trata de diseño web, significa considerar cada
interacción que el usuario tiene en su sitio web y
asegurarse de que esté optimizado. La experiencia de usuario de su sitio no puede
ser subestimada Las investigaciones muestran que si un sitio web
tiene una mala experiencia de usuario, hasta el 89% de las personas cambiarán al sitio web de un
competidor Además de eso, el 38% de los usuarios
dejarán de interactuar con contenido de
un sitio web si la capa no
es atractiva o está desactualizada La parte más importante del diseño de UX es comprender
a los propios usuarios. Se trata de entender
su quién, qué, dónde, cuándo y por qué. Es ideal para su uso ya
que tiene una experiencia positiva, intuitiva y fluida al navegar por su sitio web. Proporcionar esta experiencia de
usuario significativa no solo le permite definir mejor un viaje de visitantes
en su sitio web, sino que también permite que
los consumidores se sientan más seguros de usted y de lo
que les está proporcionando. Nuevamente, construyendo ese
sentido de confianza. Ahora, no espero que te
conviertas en diseñador de UX de la noche a la mañana, pero sí quiero que
empieces a considerar esta perspectiva cuando
se trata de un diseño de sitio web, hay algunas áreas clave diseño
de UX para
que consideres. Esto incluye información
bien organizada, enfoque de
interacción, diseño usabilidad, diseño
visualmente atractivo
e investigación de usuarios Recorre su
sitio web tal y como es ahora, y hágase algunas preguntas
relacionadas con estas áreas. ¿Es esto fácil de usar? ¿El lector experimenta
Flow o se siente culpable? ¿Le quedaría claro a un
usuario que iban a ir a continuación? ¿Botones y lugares intuitivos? ¿Son los textos lo suficientemente grandes como
para leerlos y así sucesivamente. Hay muchos
recursos en línea
sobre formas de mejorar la experiencia
del usuario. Pero una cosa general que me
gusta hacer al considerar UX es aplicar el concepto
de menos es más. Cosas como tomar grandes
bloques de textos y agregar el botón
Leer más para
hacerlo más digerible. O incluso ocultarlo de una
manera visual como una imagen flip box. Algo que puedes considerar
cuando se trata de menos es más Abrazar espacios en blanco,
priorizar la jerarquía visual, categorizar la información, segmentar la información
con viñetas, botones de topo de
incursión o elementos visuales
interesantes, mantener las páginas
consistentes y hacer que las
grandes áreas de información
sean más interactivas y las
grandes áreas de información Voy a demostrar algunos ejemplos
realmente básicos en el sitio web de maquetas Veamos esto,
mi sección persisten como un ejemplo rápido de diseño de experiencia de
usuario. Ahora bien, este es un contenido realmente
genial y se ve mucho
mejor que cuando empezamos seguro. Pero siguen siendo bastantes
textos para digerir en un
grupo grande como este. Porque aquí tenemos
subtítulos claros. Creo que una
experiencia muy de usuario sería algo así como un sistema de toggle para
romper esta información. He seguido adelante y construí esto para que veas a lo que me refiero. Este es el mismo contenido,
excepto que ahora es más interactivo y fácil digerir ya que se ha
desglosado en secciones, realmente
estaban utilizando espacios en blanco y jerarquía visual aquí también. Entonces, en general, es una experiencia mucho
más agradable visual y funcionalmente Simplemente rápidamente,
mirando esta página es sección está interrumpiendo un poco
el flujo del lado Estos márgenes son un poco discordante. Se vería mucho mejor como sección de ancho completo para crear
esencialmente un diseño
más atractivo, lo que aprendimos es muy
importante para los usuarios Para arreglar esto, voy a convertir esto en una imagen de
ancho completo He decidido invertir esto y hacer del
patrón el fondo de esta sección y agregar una caja azul
oscuro dentro de ella. Mientras estamos aquí, también
voy a agregar este titular
al centro aquí y también
agregar una superposición oscura. Impresionante, eso se ve mucho más bonito y en realidad también se
enlaza muy bien en el encabezado Ahora que eso ha cambiado cuando nos desplazamos por toda
la página, tiene un Flow visual muy
agradable. Y seguiremos trabajando
en eso a medida que avancemos. Qué consistencia de página espacial también
serán las cosas de las que
hablamos en esta lección. Solo quiero
pasar y agregar algunos buenos espacios en blanco y relleno a las áreas donde se ve un poco encima de la
otra, como aquí Eso solo va
a hacer que se vea un poco más profesional. Así que he añadido un poco de espaciado y acabo de cambiar
alrededor de algunas cosas. Cambio un poco este texto y muevo este botón
hacia abajo hacia abajo. Ahora lo que estoy viendo esto,
en realidad
creo que quiero mover esta imagen a este lado
si puedo. Déjeme ir. Sí, siento que eso
solo funciona un poco. Me aseguré de que todos
los textos fueran todos iguales y se hayan eliminado cosas que ya no son
relevantes. Agregué algunas palabras extra. Ese espaciado se acaba de marcar una gran diferencia en la página Flow
10. Mantener el interés: el poder de las PNG: El consejo siete se trata de
El poder de los PNG. Hay dos cosas muy
chulas de las que quiero
hablar cuando se
trata de PNGs En primer lugar, los PNG son una gran opción para guardar
imágenes de alta calidad para la web Y en segundo lugar,
tienen la capacidad ahorrar con
fondos transparentes. Quiero comenzar
compartiendo la diferencia entre un PNG y un JPEG. Hay pros y contras en ambos tipos
de imágenes
a hora de guardar
imágenes para tu sitio web, un archivo PNG puede contener
más datos que un JPEG, lo
que significa que puede ser una imagen de
mayor calidad, pero también puede ser un archivo más grande, lo que luego puede afectar la velocidad de
carga de tu Sin embargo, los PNG tienen compresión
sin pérdidas, lo que esencialmente significa que
puede reducir el tamaño de una imagen PNG
manteniendo Estos archivos seguirán
siendo mucho
más grandes que los JPEGS que utilizan compresión con
pérdida Esto hace que el
tamaño de la imagen sea mucho menor, pero con menos datos
para usar, un JPEG, calidad de la
imagen puede
sufrir y es posible que encuentres ciertos colores y
detalles se perderán. Elegir si usar un
PNG o JPEG se reduce a tu juicio y
lo importante que
será esa calidad de
las imágenes para tu audiencia. Por ejemplo, si eres
fotógrafo y
tienes tu
portafolio de fotografía en tu sitio web, tener estos es una
imagen de alta calidad es realmente importante. Como se mencionó, que
el dejar de pagar J's puede tener
fondos transparentes, haciéndolos muy
útiles para la web. Utilizar los
fondos transparentes de Piaget puede dar como resultado algunas oportunidades realmente interesantes
y únicas cuando se trata Ahora antes de que te
preocupes por los grandes tamaños de archivo, quiero que solo explores las posibilidades de lo que
Piaget's podría ofrecer De tu lado. Volveremos a liderar el espacio y los tamaños de imagen
en menos de diez. Quiero mostrarte algunos
ejemplos de PNGs en sitios web. Este es mi
sitio web actual e hice esta ilustración
como PNG para crear un fondo realmente dinámico para esta inflamación que está
muy en mi estilo artístico. Le da a la gente una idea
muy rápida de lo extraño que hago Dibujé estas flores
y las procreo y luego las
guardo como un PNG con un fondo
transparente Otro ejemplo que he creado es esta
sección de poco valor de este lado. Las líneas onduladas y los
círculos texturados son ambos PNG. Estas líneas, por ejemplo, acabo de crear la ola en Illustrator y la guardé
con un lado transparente. Y luego se aseguró de que
los códigos hexagonales de los colores coincidieran con
lo que había en el costado. Cualquier cosa circular o con bordes
texturizados
va a ser un PNG. Y esa estilización artística
solo aporta una vibra DIVERTIDA, lúdica y diferente
al diseño web, que por lo demás es muy
afilado y estructurado Nada sabes
lo que define un PNG? Lo verás por todas partes. Desplazamiento
Diseño de sitios web en Pinterest. Se puede decir que esto es un Piaget, entonces también lo es Podrás encontrar
inspiración sobre la
mejor manera de usar PNGs con mucha facilidad Probablemente el mejor uso de
PNGs que personalmente he visto es por Mike cuesta
para el sitio web sound snap Ahora bien, este es un sitio web súper
hermoso que definitivamente habría
tomado alguna codificación loca. Pero todas estas bellas
ilustraciones habrían tenido que ser guardadas como PNGs con
fondos transparentes para conseguir esas líneas orgánicas Este diseño del sitio se da cuenta realmente en
gran medida en PNGs
por su estética Puedes ver el sitio web
en detalle en snip sand.com y
ahorrarte algunos PNGs geniales A pesar de que puede tener la
tentación de poner textos en sus compilaciones de imágenes
para crear diseños geniales Te recomiendo que guardes todos tus textos directamente
en tu sitio web. Si tu texto es una imagen,
no está resaltado. Y esto significa que
los motores de búsqueda como Google no
pueden leerlo y entender
el propósito de tu sitio. Si planeas que tu
sitio se pueda encontrar en Google, solo tener ese texto
legible puede significar toda la diferencia
entre que tu sitio web aparezca o te
pierdas entre la basura Al mirar esta página, hay algunos lugares que creo que sería muy DIVERTIDO usar PNGs, pero vamos a ser
bastante sencillo detener esta sección y cómo
hemos tomado esta imagen y estas frases y la
hemos convertido en esto Todo lo que queda en esta sección de contenido es esta sección. Y esto es solo describir
este estilo de persona. Creo que esto sería
algo muy DIVERTIDO exhibir visualmente usando PNGs Al mirar este contenido, lo
he desglosado
en tres palabras principales, ornamentado, atemporal y tranquilo, que describe el estilo Voy a guardar
algunas imágenes PNG en Illustrator que coincidan con
esas tres palabras. Acabo de tomar
estos un pick gratis, pero si este es mi propio trabajo, dibujaría mis propias imágenes
para mostrar mi foto de estilo. Voy a rastrear rápidamente
esta imagen para quitar el fondo
blanco. Voy a seleccionar Sketch
y comprobar que ignore blanco está seleccionado. Bonito. Voy a
expandirlos y desagruparlos. He creado tres salidas, todas de las mismas dimensiones para
poner cada PNG para guardarlas. quiero en la mesa de trabajo del
mismo tamaño para asegurar que todos se vean
consistentes en el costado He elegido estos tres y solo voy a
asegurarme de que estén
alineados a la mesa de trabajo para
que los centrados en la página necesiten
asegurarse de que
los kabeles correctos seleccionen los Haremos la misma fase J. Y ahora los vamos
a explotar Mi forma favorita de guardar
imágenes como esta para PNG es ir Archivo,
Exportar, Exportar para Pantallas. Y entonces cada mesa de trabajo
individual vendrá con su propia caja. Y solo puedes marcar los
que quieres explorar, en este caso, todos ellos. Entonces voy a bajar
aquí y asegurarme de que esto esté en PNG o elegiré PNG ocho. Después solo presiona exportar y guárdala en una carpeta
que podrás encontrar más adelante. Así que vamos a insertarlos
aquí en la página. Los voy a tener
como tres imágenes a continuación. Esta es una manera muy buena de
mostrar información como esta. Y puedes imaginar que
puedes hacer que los PNGs sean aún más interesantes al tener fondos
coloreados, agregar texturas y obviamente tener imágenes que sean relevantes para lo que sea que
intentes mostrar También quiero cambiar estas imágenes de
revisión a PNGs. Entonces es un poco
más interesante que solo un rectángulo. Así que volvamos
a Illustrator. Esta vez acabo de tomar este
trazo de pincel de cerdo libre, y solo voy a trazar la
imagen también Otra vez. Ignorar Blanco está activado. Voy a subir el umbral
para que vuelva. Eso se ve bien. Entonces
voy a expandirla. Y elegir el color
de esto es realmente fácil, gracias a nuestra paleta de colores. Voy a tener
ese acento azul. Ahora estos son
actualmente rectángulos, pero lo que quiero hacer es recortar, enmascararlos en este
círculo y luego tener
este bonito
trazo de pincel detrás Igual que antes. Acabo de crear
tres mesas de trabajo son las mismas dimensiones y
voy a jugar con el diseño y
enviarlo al banco Por lo que solo comprobará rápidamente esos que no hay
fondo blanco detrás de aquí. Una forma rápida de probar
esto es simplemente hacer un fondo oscuro
y ponerlo atrás. Y se puede ver que
no aparece blanco. Así que mientras no tengamos
nada más detrás de esta imagen, cuando la guardemos como PNG, será transparente. Ahora voy a seguir adelante y exportar datos de la
misma manera que lo hacía antes. Y luego podemos insertarlos. Y voilá, ahora solo se ve un poco
más interesante Estos son solo dos ejemplos de PNG muy
simples, pero ya puedes empezar
a ver el potencial de imágenes de
fondo
transparentes y todas las cosas que podrías
crear con solo capas
11. Mantener el interés: animación y movimiento: Mi octavo consejo es agregar Animación y Movimiento
a tu sitio web. Animación y Movimiento es
una estrategia súper efectiva para involucrar a los usuarios en su sitio web. Esto puede incluir cosas pequeñas
como animaciones de botones y imagen se desplaza a cosas más grandes
como imágenes fijas dinámicas, fondos de
video,
gráficos en movimiento e incluso regalos Los gráficos en movimiento atraerán la atención de
las personas y
los mantendrán en tu sitio web por más tiempo, aumentando las posibilidades de que interactúen con tu contenido. De hecho, la investigación ha encontrado que los visitantes del
sitio web
permanecerán ocho por ciento más
en las páginas web con Videos. Vamos a saltar a
algunos ejemplos de
formas de agregar movimiento
a tu sitio. Quiero mostrarte algunas formas de
agregar movimiento simple
a tu sitio. Quería comenzar con un ejemplo
simple de imagen fija. Estamos viendo la galería de
patrones aquí, y se ve bastante bien. Pero quiero agregar una textura
al fondo igual que una forma súper sutil de agregar
movimiento a la página. Y quiero que esta textura
sea una superposición. Ahora sólo voy
a fijarlo a fijo. Una imagen fija solo significa que cuando alguien está
desplazando la página, la imagen permanece en
la misma posición, lo que crea movimiento Se puede ver en las especificaciones aquí, El permanecer en el mismo lugar, lo que da la ilusión de
que se mueve. Y es una
forma muy sutil de agregar movimiento, pero es un poco más llamativo que
un fondo estático Voy a agregar esa misma imagen de estilo
fijo en
el fondo aquí. Acabo de agregar esta
misma imagen fija en la sección de revisión aquí. He cambiado las proporciones de la misma para que el texto sea
más amplio que las imágenes. Y se puede ver
cómo ese poco de movimiento
extra agrega esa
buena cantidad de intereses. Sólo un poco más dinámico. Se ve muy bien sin, sin
distraer del contenido, que
es lo principal El siguiente ejemplo que
quiero mostrarles es esta sección de calibración. Ahora bien, esto se ve bien tal
cual, pero creo que podría ser
mucho más interesante. Voy a utilizar el flotar
masivo aquí y convertir estas imágenes
estáticas en cajas abatibles para crear un Movimiento
más interactivo Este es el tipo de
cosas que vamos a
crear cuando se ciernen, se voltean Y en lugar de tener una imagen
y luego la información, vamos a poner la
información en la imagen. Creo que solo quiero la
imagen del frente. Y he añadido un
pequeño borde dorado solo para traer de nuevo ese color de
acento. Y luego tendremos esta información y
el botón en la parte posterior. Creo que eso se ve
mucho más interesante. Así que voy a seguir adelante
y hacer estos otros dos. Esta es solo una forma mucho
más atractiva presentar información. La interactividad de la misma
implica el uso de lunares, por lo que habrá más inclinación
a involucrarse con este contenido Lo último que
voy a hacer es agregar algunos efectos básicos de animación
al resto de esta web. Entonces imágenes como estas, tal vez estas, y
probablemente estas también. Solo voy a agregar
algunas alimentaciones u otras configuraciones de animación simples que cuando se cargue la página, estas imágenes se moverán a medida que te
desplazas más allá de ellas. Los efectos de animación son una característica de diseño de front-end bastante básica. Entonces, cuando se trata de
hacer esto tú mismo, solo echa un vistazo a qué hospedajes de
sitios web estás usando. La mayoría de ellos tendrán opciones
básicas de animación que puedes aplicar a
cualquier imagen estática. Los he agregado en, así que vamos a
actualizarlo y previsualizarlo, y te
mostraré cómo se ve. Se puede ver ese sutil desvanecimiento. Es solo crear un
poco más de intereses. Y puedes hacer cualquier
tipo de fade ins que quieras. Con esto. Acabo de elegir algunas
realmente básicas. También he agregado esta lista en el mismo fondo de video
que menos de tres. Ya puedes ver lo mucho más interesantes que son estas
páginas con todo este movimiento
12. Funcionalidad: puntos de interrupción y diseño en primer lugar de móvil: consejo nueve se trata Breakpoints y
Diseñar Mobile First, al diseñar un sitio web, es realmente importante
analizar primero forma en que su audiencia ideal estará viendo
su sitio web desde Por ejemplo, si estás
vendiendo productos y principalmente usaste Instagram
para promocionar tu trabajo, entonces la mayor parte de tu
audiencia estará haciendo clic en el enlace de
tu biografía de Instagram, y viendo el sitio web
en sus teléfonos. Alternativamente, si tiene un sitio de cartera de currículum vitae y envía esto por correo electrónico a
posibles empleadores, este probablemente
se verá en el escritorio Ahora bien, si no sabes
qué puntos de interrupción, nuestro punto de interrupción es un tamaño
específico al que contenido
y el diseño de
un sitio web se
adaptarán para brindar una
mejor experiencia de usuario Aunque puedes crear
tantos puntos de interrupción como quieras, el sitio web promedio
tiene tres Breakpoints Estos permiten que el
sitio web funcione de
manera diferente en función de si el usuario está viendo en una
computadora de escritorio, tableta o móvil. Obviamente, la pantalla de un teléfono tiene una
forma y tamaño completamente diferentes. Así que el escritorio de la computadora, y
tantas veces lo que has diseñado para un tipo de pantalla no se
tradujeron bien en una novela. Si vas a tener
un porcentaje decente de personas viendo tu
sitio web desde sus teléfonos. Recomiendo encarecidamente diseñar primero un sitio web
móvil. Ahora a menudo se siente
más intuitivo diseñar primero
el sitio de escritorio y luego tratarlos
como una idea de último Pero si vas a tener
mucho uso móvil, recomiendo tomarles muy en serio el diseño
móvil. Según zip, sí,
52% de la gente dice que una mala experiencia móvil les
hará perder
la fe en acompañar. Y además de eso utiliza
cinco veces más probabilidades de
salir de un sitio web que no está
optimizado para dispositivos móviles. Es mucho más fácil diseñar para dispositivos móviles y lo último para computadoras de escritorio que al
revés, ya que está
escalando su diseño hacia
arriba, no hacia abajo. hora de diseñar para móviles, tienes mucho menos espacio. Por lo que te obliga a priorizar contenido de la
página y crear
una experiencia intuitiva Si puedes hacer que tu sitio web
se vea bien en el móvil, puedes hacer que se vea
increíble en el escritorio. Primero construí todo este escritorio de
página web. Y se puede ver cuando
miro los puntos de interrupción, Empecemos con tablet Se ve bastante bien hasta ahora. Pero como algo así obviamente no se ha
traducido bien. Y en el móvil, se
puede ver ciertas secciones
simplemente no han funcionado bien. Si tuviera que construir algo como este botón Mobile First, se habría traducido
bien a tablet y escritorio. Pero debido a que hice de
la manera opuesta, esto es simplemente crear trabajo
extra para mí. Se puede ver algunas áreas simplemente
no están funcionando en absoluto. Ahora que hemos cambiado
el modo de respuesta, algunas áreas se ven bien aunque. Y de nuevo en la tableta, se
puede ver que el espaciado está un
poco fuera en los lados. Y no creo que
esto hubiera pasado si hubiéramos pasado
del móvil al escritorio. Otra vez, algo así. Tiene un espaciado realmente extraño. Y si
lo hubiera construido Mobile First, no
creo que eso
hubiera pasado. Entonces es algo
a considerar si tu audiencia va
a estar mucho en el móvil, Diseñar
primero este sitio de telefonía móvil te hará
reír mucho más fácil.
13. Funcionalidad: velocidad y tiempos de carga: Mi consejo final para mejorar
tu sitio web es enorme, optimizando la velocidad de carga de tu
sitio. Quiero comenzar esta
lección con el hecho que podría hacerte
sentir un poco triste. La investigación ha demostrado que 39% de los usuarios no
estaban comprometidos si un sitio web
tarda demasiado en cargarse. Ahora tal vez te estés preguntando
¿cuánto tiempo es demasiado? Bueno, la triste verdad es que 53% de los
visitantes del sitio web sobre Hawk, Ningún tráfico potencial
abandonará ningún sitio web que tarde
más de 3 s en cargarse. Ese es el tiempo que
me ha llevado leer esta frase. Así que has puesto
todo el trabajo duro, creado un sitio web impresionante
lleno de contenido increíble y más de la mitad de la
gente va
a verlo saliendo
antes de siquiera decirlo. Estoy seguro de que puedes
ver lo importante es realmente
un
sitio web de carga rápida. Antes de entrar en cómo
mejorar la velocidad de tu sitio, necesitamos saber qué es
actualmente y por qué. Google tiene esta increíble
herramienta que hace que esta súper fácil llamada
PageSpeed Insights. Voy a usar esta herramienta en el sitio de una página que creamos
durante esta clase y usaré para explicar
qué puedes hacer para mejorar la velocidad de
carga de tu sitio Entonces primero vamos a agarrar el enlace URL de nuestra página web
publicada,
copiarlo, pegarlo
aquí y dar clic en Analizar. Ahora va a llegar a
estas dos secciones, móvil y escritorio. Esto se debe a que estos
dos modos diferentes tienen diferentes espadas de carga Tu Velocidad del Sitio Móvil casi siempre será
peor que tu escritorio. Incluso si tu
sitio móvil está optimizado. Solo porque
las computadoras de escritorio tienen mejores procesos y a menudo, una conexión a
Internet más confiable. Voy a mirar primero
el escritorio solo porque realmente no he
construido este sitio para móviles. Por lo que Google
ha realizado análisis en esta página web y diagnostica
su desempeño. Se divide en secciones
completas. Rendimiento, accesibilidad,
mejores prácticas y SEO o optimización de
motores de búsqueda. Estos resultados solo
se aplican a una página web. Entonces, si tienes un sitio de
varias páginas que tenga una página Acerca de, página de
portafolio, etc. necesitarás analizar
cada uno individualmente Cuando estamos hablando de
tu sitio a Loading Speed, queremos ver esta sección de
rendimiento. Todos estos datos aquí están relacionados con la velocidad de carga de su
sitio. Pero el número principal que necesitas
saber es tu Índice de Velocidad, que es el
tiempo total de carga de tu Página Web. Este primer contenido para pintura es tiempo que tarda cargarse
la primera pieza de
información. Y este
contenido más grande full paint, es cuánto tiempo tarda en cargarse
el archivo más grande de tu página. Este gran número aquí es
tu Speed School en general. Idealmente quieres que esto
esté en la zona verde,
pero honestamente, cualquier cosa en los altos de los 70 a los 80
es bastante genial Performance también tiene un mapa de
árbol visual que te muestra las etapas en las que se está Cargando el contenido de tu
página. Bajo el mapa del árbol,
tenemos oportunidades, y aquí es donde
puede comenzar a ver sugerencias sobre cómo
mejorar la velocidad de su sitio. Echemos un vistazo a guardar
imágenes en formatos de próxima generación. Y puedes ver que me está mostrando las imágenes reales que más tiempo están
tardando en cargarse. Sugiriendo que convierta
estos formatos de próxima generación como el pago web De hecho estoy usando un plug-in
que automatiza esto para mí, lo cual es una gran razón de por qué esta puntuación ya es tan buena Pero puedes buscar fácilmente
una imagen, convertirla en línea. Y encuentro al usar
estos convertidores, las imágenes no pierden mucho. Si la desigualdad, mi preferencia
es guardar una imagen como PNG primero para
esa alta calidad y luego convertirla
a Página web después. Esta sección está
relacionada con mi back-end, que podrías volver a
tratar con un plugin, pero solo dejaría
algo como esto Ahora esos dos son
específicos de este sitio web. Pero si llego a
esta sección de auditoría pasada, estos son algunos otros
problemas que
puede enfrentar al
mirar su velocidad del sitio. Las imágenes de tamaño adecuado se relacionan con tener las imágenes del
tamaño adecuado para sus puntos de interrupción Aplazar imágenes fuera de la pantalla está sugiriendo que
configura un cargador perezoso, lo que solo significa que
las imágenes que están en la página pero no son visibles hasta
que se desplaza hacia abajo En realidad, no cargues
hasta que el usuario llegue a ellos. Como puedes ver, hay
muchas otras sugerencias. Cuando se trata de mejorar la velocidad de
tu sitio. Solo necesitas mirar
la sección de oportunidades. Al hacer clic en
él,
prácticamente te dirá exactamente
lo que necesitas hacer. Si no entiendes
lo que significa, solo busca en Google la
frase y habrá bastantes instrucciones
sobre cómo hacerlo. La mayoría de las mejoras de velocidad del sitio
estarán en torno a
cómo se guardan las imágenes y
cómo ha construido su sitio web. Siempre
volverán a recibir sugerencias de las que no
puedes hacer nada. Se. No te preocupes por esos. Si tus puntajes en la zona roja, y todo está
relacionado con el backend, probablemente
necesites buscar actualizar tu alojamiento web La siguiente sección
es la accesibilidad, que se vincula con la experiencia
del usuario y
cosas como la legibilidad Esta es una gran escuela, pero una sugerencia que
tienen aquí es de fondo y
los colores de primer plano no tienen
una relación de contraste suficiente Si hacemos clic en esto,
nos muestra dónde piensa que esto aplica. En este caso, está diciendo mi texto gris sobre el fondo de la
grúa, tal vez difícil de leer para algunas
personas, así
como este texto blanco sobre
el fondo azul claro. Esto es algo bastante
fácil de arreglar. Las mejores prácticas tienen que ver
con backend y citar. Así que asumiendo que no estás haciendo
ninguna cosa loca de codificación, normalmente deberías
estar a salvo aquí. Y finalmente, la puntuación SEO es la
facilidad con la que los motores de búsqueda pueden
entender tu contenido. Ahora no voy a entrar en SEO, pero agregar una meta descripción es algo bastante importante
y estándar
que hacer y mejoraremos mucho
este puntaje. Una meta descripción es solo un breve resumen de lo que trata
una página en particular. Puede fácilmente Google cómo agregar una meta descripción
foia proveedor del sitio web Ahora ya sabes lo que significan estos números de
teléfono, y lo mismo todo
se aplica al móvil. Tendrá algunas sugerencias
diferentes para tu sitio móvil. Por lo que se asegura de
pasar por ambos. Pero eso es
prácticamente todo lo que necesitas
saber para mejorar la velocidad de tu sitio.
14. ¡Es tu turno!: Lo hicimos una vez agregamos burbuja. Así es como el cuerpo del módem. Eso fue mucho
contenido para asimilar. Entonces,
resumimos rápidamente cada uno de los diez consejos y
hagamos que
pienses cuáles funcionarían
mejor para tu sitio web Las primeras cinco lecciones
de esta clase exploraron desglosar los fundamentos
visuales creación
de una marca Esto incluyó Tipografía, donde cubrimos la jerarquía
tipográfica básica, cómo elegir
emparejamientos de fuentes que coincidan con su marca y la mejor manera de
usarlos en su sitio web, así
como alguna información rápida
sobre fuentes, así
como alguna información rápida Luego nos ocupamos de
Paletas de Colores y desglosamos cómo elegir colores
que reflejen tu trabajo Cuántos colores tener
en la paleta de tu marca, y cuánto de cada color
usar en tu sitio web, así
como alguna psicología básica
del color. En la lección tres,
hablamos de elegir las imágenes adecuadas para tu marca y el poder del contenido de video. Y en menos de cuatro,
profundizamos en la importancia de compartir
tu historia en tu sitio web. Voy a
explorar la quinta y última lección de
branding Utilizando
tus
encabezados y pies de página y hábitos para usarlos
para establecer el tono y el
estado de ánimo de tu sitio Lección seis a ocho, alacena todas las cosas
se sienten y mantener usos comprometidos incluyendo la experiencia
del usuario pensando, Creando
imágenes interesantes usando PNGs, Explorando el poder del movimiento
con animación y video Perdí sus lecciones eran
todo sobre la función. Esto incluyó analizar
su audiencia y potencialmente
Diseñar Mobile First, así
como cómo comprender y optimizar la
importante velocidad del sitio de OCO Echemos rápidamente un
vistazo al antes y
después sobre el sitio web de Mockup
Example Entonces aquí tenemos el sitio web
antes. No se veía tan
mal al principio, pero ahora que tenemos evidencia
visual de lo mucho mejor que podría ser, es
difícil volver atrás. Me viste aplicar H de
los diez consejos para esta página, comenzando por la Tipografía,
agregando los colores, jugando con los
diseños y el espaciado Y así ahora sabes el impacto que puede tener cada uno de
estos cambios. Esta es la página completa
con todos los consejos aplicados. Y creo que se ve
realmente hermoso y
definitivamente está mucho,
mucho más optimizado. Al hacer estos cambios
tú mismo no te abrumes. Si no se ve
perfecto de inmediato. Tómese tiempo para experimentar y jugar con
lo que ha aprendido. Tienes toda la anología nombrada aquí. Así que sólo tienes que descomponerlo
punta por punta y ver qué pasa. Siempre estoy aquí para
darte comentarios y me encantaría ver alguno antes de los
cambios que hagas tu sitio web en
la sección de proyectos. Cada pequeño cambio
que hagas cuenta para mejorar tu sitio web. Me encantaría verla. Antes de que terminemos. Quiero darte las
gracias por ver mi primera clase de
Skillshare Significaría el mundo
para mí si pudieras dejar una reseña y dejarme saber qué
piensas de esta clase. También puedes
seguirme aquí en Skillshare y serás notificado de
cualquier clase nueva que cree Realmente espero que hayas encontrado algún
valor en estas lecciones. Me encanta enseñar este tema y realmente no puedo esperar
a escuchar cuál de estos consejos te pareció más útil y qué creas
con este nuevo conocimiento. Gracias de nuevo y feliz sitio web
Jehna Creates, Designer, Artist, Forever Student
