Transcripciones
1. Introducción: Hola, Mi nombre es Kathy If Orania y en un diseñador y desarrollador Web. A lo largo de los años, he trabajado en innumerables proyectos para clientes que van desde pequeñas empresas, grandes corporaciones. Cada proyecto que yo hubiera ido me brinda la oportunidad de estirar mi creatividad y empujar los límites tan tradicional diseño Web. A lo largo de los años he desarrollado algunas técnicas simples pero efectivas que ayudaron a maquillar sitio web Destacan de todos los demás es Esto es realmente importante porque hoy en día todos tienen un sitio web con cada vez más sitios web en Internet es ella para dejar un impresión duradera en los usuarios y para hacer de su sitio web Sandow en general. Entonces en este curso, siempre compartiendo estas técnicas contigo así como demo ing algunos grandes ejemplos. Pero otros diseñadores y desarrolladores que utilizamos técnicas similares para que su sitio web destaque también
estarán trabajando juntos en un proyecto de clase y que transformará una página
Web por debajo del promedio en una bien diseñada. Al usar estas técnicas algunos básicos qué conocimiento de diseño y desarrollo se
sugerirían solo para que pudieras seguir un poco mejor. Entonces si estás listo para llevar tu sitio Web al siguiente nivel, aprende a hacer que destaquen sus palabras, empecemos
2. Hacer tu investigación: antes de empezar con cualquier desarrollo de diseñador, es realmente importante hacer tu investigación. En primer lugar, podrías pasar horas dos días, dos años incluso investigando para encontrar la mejor información posible. No obstante, esta clase nos vamos a centrar en dos cosas en particular conociendo tu base de usuarios y definiendo el objetivo de tu sitio trasero. Conocer tu base de usuarios es extremadamente importante ya que mucho Decatur tus diseños hacia tu conjunto de usuarios. Esto es ir por cualquier cosa desde diseños. Dos colores demasiado lejos Opciones. El mejor modo de tipo de explicar esto es un espectáculo. Un ejemplo. Entonces, para un ejemplo fúnebre, vamos a fingir que estamos diseñando un sitio web para alguien que es mayor. Entonces me encontré con este sitio web de casa de la vejez, que creo que es un buen ejemplo de lo que tipo de quieres estar buscando. No es perfecto, pero tiene muchos de los atributos correctos, por lo que la navegación es realmente simple de seguir. Um, y todo el contenido está muy bien presentado. No hay nada de fantasía en ello, pero eso es lo que lo hace fácil. Es fácil de entender, fácil de desplazarse a través de información fácil de encontrar. Ahora pon esto en contraste con el sitio web de Red Bull, que es un sitio web realmente elegante perdido yendo en muchas animaciones, videos de fondo. Pero para alguien que es mayor, esto podría ser demasiado. Podrían encontrarse con esta página Web y no saber realmente lo que está pasando, sentirse abrumados y simplemente un poco de darse por vencidos tratando de encontrar la información que quieren. Otro buen ejemplo de mostrar de conocer tu base de usuarios es un contraste entre Wal Mart y Nike. A pesar de que ambos son sitios web de comercio electrónico, sus diseños atienden de manera muy diferente a diferentes bases de usuarios. Por lo que una persona típica que viene a la página web de Walmart podría ser vista como alguien que quiere
precios bajos , ella productos y simplemente obtenerlo realmente fácilmente. Y eso es una especie de lo que atiende el sitio web de Walmart. Amigo Trabajando el inicio, tienen un montón de pancartas, uh, precios
más bajos. Abarrotes gratis, realmente tratando de enfatizar que vienen en un WalMart es barato. Estoy justo debajo. Es todos tus departamentos de tienda realmente fáciles de encontrar, algunos haciendo un proceso fácil para venir a la página web y obtener tus productos baratos. En contraste, Nike quiere que sus usuarios sientan que están comprando los mejores productos y típicamente las personas que lo compran ahora quiere ir más rápido. Deportistas. Tienen cierta imagen que intentas mostrar. Por lo que Nike quiere defender esa imagen. Por lo que su página web es agua muy limpia. Um pérdida de animación, mucho video para tratar de enfatizar esa sensación de lujo para sus usuarios, similar a conocer tu base de usuarios. Conocer el objetivo de tu sitio web también es realmente importante para hacer un diseño eficiente para tu sitio. Por lo que ejemplos de metas para el mismo sitio web de comercio electrónico serían vender aquí tus productos. Poner para tu sitio web es mostrar tu trabajo o para Blawg sitio web es conseguir más lectores. Un buen ejemplo de un blogger o sitio web de noticias es un sitio web geográfico de grupo nacional. Entonces justo desde la primera página, se llega al sitio web energie ist stories. Entonces ves sus últimas historias, Um, toda la información de noticias y solo hay mucho contenido de inmediato. Por lo que vienes a la página web, ves contenido, haces clic en él y luego estás enganchado. ¿ Quieres empezar a leer cada vez más. Best Buy es un ejemplo de un sitio web de comercio electrónico, por lo que no les importa tanto tener un gran contenido. Simplemente quieren mostrarte los productos que haces clic y compras. Por lo que se llega al sitio justo desde arriba. Es solo las últimas ofertas y básicamente productos para que compres. Um, y sin embargo esto solo está mostrando el contraste entre tipo de un nuevo sitio en, luego un sitio web de comercio electrónico. Entonces una vez que tienes tu base de usuarios y el objetivo de tu sitio web encontrar es hora de encontrar
inspiración para que puedas encontrar inspiración, fácilmente
se va a salir a Google y escribir,
um, um, los sitios web de
tus competidores y ver lo que están haciendo o simplemente pasando aleatoriamente por Internet y visto si te encuentras con algo. Eso es bonito, sin embargo, a los sitios web que siempre tiendo a ir a encontrar inspiración es awards dot com, que cuenta con algunos de los mejores sitios web o mejores sitios de diseño en Internet por increíbles diseñadores y desarrolladores. Estos aires a menudo realmente progresivos y de pensamiento hacia adelante sitios web, por lo que es posible que no quieras implementar todos sus aspectos de diseño, pero definitivamente podrías quitarte pedacitos y piezas. Otro buen sitio está regateado. Eso. Esto tiene miles y miles de diseños de usuarios de todo el mundo de los que podrías inspirarte. Entonces, de nuevo, la cosa es, que no quieres copiar el dedo del pie ningún diseño, pero es genial mirar alrededor para ver qué hay ahí fuera e inspirarse a sí mismo antes de saltar a un proyecto.
3. Cómo configurar tu proyecto: Entonces ahora que sabes la importancia de hacer tu investigación antes de empezar un proyecto, te
vamos a presentar nuestro proyecto de clase, que básicamente está tomando esta página Web mal diseñada que estoy usando para comercializar la clase que estás viendo en este momento, otros
dos usuarios de escultura o personas interesadas en el diseño Web, y vamos a tomarlo y transformarlo en una página web bien diseñada. Entonces vamos a hacer eso explorando diferentes elementos del diseño Web como tipografía, layout, colores, animaciones y transiciones de transistores e imágenes. Y aunque no tengas experiencia en codificación, está
bien, porque todo va a estar pre codificado. Entonces todo lo que vas a tener que hacer son clases de Assam o comentor. Poco frecuentes. Alguien es un código, así que será realmente fácil caer. También estamos usando Code Ben, que es un editor de código en línea, por lo que no habrá necesidad de descargar ningún programa. Todo lo que hagamos estará justo aquí en tu navegador en esta página. Entonces si no tienes una cuenta de pluma de código ya pausa el video y ve al código pen dot io e inscríbete para obtener una cuenta gratuita. Por lo que ahora que tienes tu cuenta gratuita apuntada rápido. El enlace de punto de partida en nuestra descripción de clase el cual te llevará a una página como esta. Ten tus vistas diferentes. Simplemente haz clic, cámbiate y elige qué vista quieres usar. Yo personalmente prefiero el lado, pero todo es preferencia personal. Entonces lo que vamos a hacer ahora es básicamente sólo tenerlo encima del proyecto haciendo clic en cerdo arriba arriba . Lo que eso hace es copia el punto de partida aéreo a tu cuenta para que todos los cambios que
realices se guarden en tu propia cuenta. Y solo para evitar cualquier confusión, vamos a renombrar el punto de partida a trabajar. Por lo que ahora nuestro proyecto está configurado y estás listo para ir. Entonces la única otra cosa que podríamos estar usando es nuestro repositorio, que también dejaré un enlace a una descripción de clase y eso solo va a almacenar algunas imágenes . Pondré ahí arriba el proyecto de la clase de meta y ahí tendremos nuestra guía de diseño, que todos explican un poco más tarde. Entonces una vez que tengas configurada esta página, básicamente
estás lista para ir y ah, empecemos con nuestros proyectos de clase.
4. Diseño de diseños originales: De acuerdo, Entonces el primer elemento de diseño con el que estará trabajando para un proyecto son los layouts. Entonces estoy seguro de que todos han visto antes qué página como esta. Es bastante genérico. Entonces tienes tu gran pancarta giratoria, arriba tu pegajoso, um, menú, y luego simplemente muy afortunado lo hace. Y luego tienes tus pequeños iconos con las noticias debajo. Eso hasta te podría gustar este es bastante básico. Pero entonces podríamos ir. Esto es un poco más interesante, pero de nuevo, probablemente
has visto algo parecido antes, así que tienes tu deslizador arriba. Ah, tu grande da tus imágenes con tu información debajo. Por lo que no hay nada intrínsecamente malo con una página Web como Esto es genial muestra información . El único problema es, ¿es sólo una especie de mezcla juntos? Si una persona visita tu sitio web, no tendrá una impresión duradera. Um, así y otra vez, dependiendo del oro, tu sitio web, es posible
que no necesites esa impresión duradera. Pero si estás queriendo tener un mayor impacto en tus usuarios y es mejor
alejarte de este estilo de diseño típico,
así que como dije, así que como dije, no
hay nada intrínsecamente malo en este tipo de diseño Web o en qué diseño de página y él funciona. Por eso tanta gente lo usa, Um, porque es efectivo. Pero la cosa es que aún se pueden mantener muchos de los mismos elementos sin que sea exactamente el mismo tipo de diseño que se ve a través de toneladas de otras páginas web. Por lo que echaremos un vistazo a esta página, que es un sitio web que tipo de cae la misma guía. También tiene el mismo tipo grande de diseño de banners de héroe, la misma navegación flotante. Pero lo cambiaron lo suficiente para que como que tiene su propio estilo original. Entonces sólo la forma en que tipo de las superposiciones del dispositivo y los promedios de fondo hace un poco más interesante de mirar en lugar de sólo líneas rectas que se ven en la otra página Web. A pesar de que viene por aquí, son cuadras. Tiene un poco más de interés por ello, con el fondo y las superposiciones, Um, y sólo todo lo que pasa con ello. Para que puedas ver desplazándote por esta página. Tiene todos los mismos elementos en las mismas características que esta página de aquí, pero acaba de hacerlo de una manera que proporciona ese poco más creatividad, lo
que le permite destacar que tienen una impresión mejor duradera para sus usuarios. Entonces aquí hay otro sitio web que creo que está realmente bien hecho en el sentido de que mantiene dos más los componentes tradicionales de un sitio web. Pero se hace de una manera que lo hace muy original,
um, um, y se cruza con el mensaje que el sitio tratando de retratar así que aquí se puede ver sigue siendo el mismo gran banner de héroe o como tienen, Ah, página como esto. Todavía tienes a ese gran héroe. Pero sólo la forma en que el Texas cortado por la imagen de la persona lo hace más interesante, e incluso sólo el tamaño y la limpieza de todo lo que le rodea como que le da esa sensación mawr limpia, um, limpia,
um,
y moderna. Entonces si te desplazas hacia abajo, solo el lado del espacio en blanco de los usos, realmente enfatiza ,
um, o realmente te permite enfocarte en el contenido que hay ahí en lo que encontré. Particularmente interesante es su uso de estas imágenes de fondo para el lo hizo al agregar en una pequeña imagen en la parte inferior de la Div. Esa es una especie de salpicadura de pintura casi hace que parezca que no es solo un div de
línea recta y le da una sensación más interesante. Um, entonces eres tipo de líneas rectas más tradicionales que verías oír, o particularmente a través de esta barra azul. Entonces ahora que hemos explorado algunas ideas sobre cómo transformar una simple página Web en algo un poco más creativo y más único, vamos a aplicar estos elementos a nuestro proyecto de clase. Por lo que he trazado sólo una plantilla sencilla de lo que ya tenemos. Ah, marco de alambre
muy básico. Um, y luego he hecho uno que es o el marco de alambre de lo que esperamos lograr, uh, a través del nuevo diseño. Si desea abrir estos por su cuenta, podría
abrir nuestro enlace de repositorio e ir a la guía de diseño. Y entonces seré la clase,
uh, uh, bien diseñado inicio PDF y diseño de clases Pdf. Entonces, solo para recapitular, nuestro punto de partida de un proyecto de clase es un cortador de galletas muy recto, además de unas líneas rectas, Um, no muy interesante. Muy básicamente fuera. Y cuando miramos, miren esta página, los elementos que realmente me gustaron de ella fueron Este lado fue esta idea de tipo de enmascarar las dibs en enmascarar muchas de las líneas rectas. Entonces cuando miras lo que hemos hecho con nuestros recién, hemos aplicado eso a nuestra página a nuestra manera. Entonces, en lugar de tener aquí todas estas líneas rectas para cada una de las secciones, hemos aplicado ondas a través de cada una de las partes superiores de las dibs, modo que solo proporciona una sensación más fluida de la página Web en lugar de todo el
corte duro recto líneas también arriba arriba. Lo que realmente me gustó de este sitio fue la apertura del banner héroe y sólo el tamaño, el uso a pantalla completa del mismo. Entonces lo hemos hecho también. Por lo que hemos hecho un gran héroe de top, lo hemos
hecho agradable y limpio. Pero lo que hemos hecho es una especie de encogido la imagen. Entonces en lugar de solo ser una gran imagen de rojo a través, vamos a convertir la imagen en un lob un poco más débil. Um, ese May podría no tener mucho sentido ahora mismo, pero para cuando terminemos nuestro proyecto, tendrá mucho más sentido desde este sitio. Los elementos que realmente me gustaron fueron los dibs superpuestos. Entonces sólo una especie de idea de este material se superpone encima de esta imagen de fondo. Vamos a tomar esa idea y llevarla a nuestro lado también. Para que pudieras ver aquí mismo en los pequeños iconos que tendrán nuestro texto para los azulejos tipo de superposición con los propios iconos y luego aquí abajo, similar a lo que hizo la otra página. Vamos a tener una imagen de fondo, pero el div en la parte superior de ella y simplemente un poco se desplazó hacia abajo. Entonces otra vez, la idea de solapar el contenido. Por lo que esperemos, si miras esta página y cuando miras la versión construida de la misma que podías ver aquí mismo, podrías imaginar que cuando construimos esta versión de la página web Oh, mira mucho más bonita. El diseño será mucho más interesante. Entonces en la siguiente parte de esta clase estará entrando en el código y en realidad cambiando nuestro proyecto para volverse a lucir más como este
5. Cómo implementar el diseño: Entonces ahora que sabemos cómo queremos que luzca nuestro nuevo dedo del pie Leo Así que tenemos un diseño aquí mismo, como ser explorado antes de querer pasar por el código y actualizar esta página para empezar a lucir más así. Entonces de nuevo, esto es sólo un marco básico de alambre, por lo que no será exactamente lo mismo. Pero esto es más solo una guía, y entonces esta será una especie de la versión más pulida. Entonces, como dije, todo ya está precodificado. Entonces solo vamos a buscar todos estos pequeños elementos para hacer y que estén etiquetados con el diseño y básicamente aplicarlos a los elementos y para la capa, todo va a estar en cada uno, ya
sabes, así que solo podrías encoge tu CSS y JavaScript. Entonces toma Es una propina. De nuevo, tenemos nuestro primero en hacer artículo aquí, que es aplicar clase clara a Topper. Entonces tenemos nuestra parte superior, um, elemento justo aquí. Entonces sólo vamos a aplicarlo claro. Y como hacemos eso se podría ver al instante que el diseño ha cambiado. Entonces solo vamos a seguir desplazándonos hacia abajo y encontrarla la próxima también. ¿ Se sientan pancarta. Un farol diseñado para estandarte básico. Por lo que no blob diseño. Y ahora se puede ver que son primera página está empezando a lucir bastante diferente y
diseñar de nuevo Sug poco común. Y al hacer esto, vamos a tener a nuestro héroe luciendo muy similar a lo que hemos diseñado. Entonces tenemos nuestra blob por aquí, el texto grande, y luego vamos a tener un blob. El texto grande, um, son pero en el medio, y va a estar muy en alguna parte. Entonces solo para reiterar, esto es todo diseño ahora mismo, por lo que los colores y la tipografía seguirán siendo ásperos, pero lo exploraremos en partes posteriores de su clase. Por lo que solo seguiremos pasando por este abrigo y encontrando disposición para hacer artículos. Por lo que el diseño en comentario SPG tan poco común que son. Tendría clase media maceta y fondo suave a la sección eliminada Clase. Ah, pequeña planeación. Perdón. Ese es el error ahí mismo. Entonces aplique eso. Y aquí hay otra capa que cruzaría diseño desplazado dos iconos básicos. Sigan adelante. Simplemente vamos a ir básicamente a través de todo el html y encontrar todos los demasiado dos elementos y actualizarlos así que clase chip que da a nuestra sección y quitar palmaditas clásicas de nuestra sección Tan poco común su S P G's Seremos esa rapera pequeña de clase alta y patting Teoh contenido Trapper mover clase cuerpo pequeño Así que sólo pasaremos por encima de eso y lo reemplazaremos con pequeño rapero medio polvo Estás bajando Bueno, yo costaría olla grande en sección te mueves clase Pequeño planeta una sección que no tengo eso Entonces el signo y luego nos va a bajar dos o una p terapia direcciones y luego nuestro último diseño es simplemente y comentar Esto no es un código aquí el SPD Así que al hacer eso, básicamente
hemos pasado por nuestra página e hicimos todos los cambios necesarios para transformar Are inicio de diseño en permitir que se vea así. Entonces si te desplazas hacia abajo por la página, podías ver que son layout ahora está actualizado y definitivamente un gran y probar se apagó que ya hemos tenido O qué de la gran mejora inductiva del diseño original. En realidad me he dado cuenta de algo Ah que me olvidé de poner así que oh, tráelo a través para que pudiéramos actualizar eso juntos para la sección sobre mí y el contenido. El rapero. Vamos a añadir pequeño rapero. Ah, y sí veo que lo tenía aquí. Simplemente me olvidé de hacerlo. Entonces ese es mi error. Entonces ahora cuando nos desplazemos hacia abajo, será simplemente más apretado. Texto y un look mejor con el espacio en blanco han pasado por una actualización nuestro layout y ahora
estamos listos para el siguiente paso.
6. Elegir la fuente correcta: por lo que otro elemento realmente importante del diseño gráfico o del diseño Web o cualquier diseño, realmente es la tipografía. Eso. Últimamente ha habido una especie de los barcos de tener tipografía ser muy aserrados, servidos sobre baya. Simplemente puntos limpios, simples, lo cual es bueno porque se renderiza fácilmente y está claro en todas las pantallas. Pero con teléfonos más grandes saliendo y resoluciones más nítidas en los dispositivos y para la mayoría
de las pantallas de la gente usa, podríamos volver a empezar un plátano de fuentes Sarah. Entonces un buen ejemplo que es chimpancé masculino. Entonces mira a Nelson. Realmente lo trajeron de vuelta. Y tienen lindas grandes serpientes para todos sus títulos. Y es algo de Sando sólo porque no lo ves tanto en este momento. Y se desvía de tus estanques típicos, muy limpios, muy limpios,de corte
limpio. Entonces de nuevo, como hemos estado cubriendo una y otra vez, no
hay nada de malo en los estanques limpios. Simplemente tiene que servir a su propósito. Entonces el propósito de Milton, sí destaca ese poquito, que tipo de cuando llegas al sitio que se mezcló con el amarillo y todo, realmente llama tu atención, por lo que elegir tus fuentes es realmente importante, y también quiero esperar. Entonces si nos fijamos en Wikipedia, pesar de que el sitio es muy completamente llano en cuanto al estilo de diseño, el peso forint es el valor. Entonces como todos los encabezados son bonitos y dorados, así que eso impulsa tu atención directamente a ahí. Por lo que como que quieres mantener esa idea para cualquier diseño Web es como si tuvieras
información importante haciendo una petanca, haciendo un destaque mejor que todo lo demás, Así que un buen funciona así usa tipo de Esto hace que el frente de residuos con nueva tipografía moderna, incluso usando algunos pares de canciones, está encendida. Sarah es una agencia enorme, Así que esta es su página web aquí. Utilizan fuentes realmente grandes y
audaces para todos sus encabezados. Pero luego bonitos, sencillos y limpios Sarah estanques para debajo. Entonces, como pudiste ver, realmente tiene una fuerte impresión en ti, sobre todo la portada, que es simplemente grande, audaz Hola. Captura tu atención de inmediato y te hace enfocar en el sitio web. Entonces una cosa a tener en cuenta con tus diseños y tipografía es asegurarte de que sea legible para que puedas tener la mejor tipografía de diseño. Pero si el texto realmente se puede leer, y realmente no sirve para un propósito, sobre todo si está tratando de proporcionar alguna información valiosa. Por lo que tamaño de fuente, más fácil quieren arreglar. Si es demasiado pequeño, simplemente sube el tamaño del teléfono hasta que la gente pudiera leerlo. Algo a lo que debes prestar un poco más de atención es tu contraste. Entonces este el fondo suave, el oscuro grande, realmente contrasta entre sí muy bien. Podrías leerlo,
um, um, con
bastante facilidad. Eso puso un mal contraste. Digamos que si empiezas a ponerlo en un gris más suave, eso podría verse bien y algunos escenarios de diseño. Pero, um, podría ser muy difícil de leer, sobre todo si tu pantalla no tiene la mejor definición de color o tus usuarios tienen mala vista que podría volverse muy difícil, si no imposible, para leer. Entonces sólo dos cosas sencillas que arreglar. Pero para mantener um, atención porque pueden hacer bastante difícil para tus usuarios leer tu contenido. Ahora que hemos explorado algunos principios básicos de tipografía, vamos a aplicarlos a nuestra página web. Tan similar a nuestro diseño, solo
vamos a buscar nuestra tipografía para hacer artículos y aplicarlos a nuestro h él fuera. Entonces Esto también va a tener algunos elementos que hacer en nuestro CSS, Pero vamos a hacer primero el html. Por lo que toppy Gran título Tranquilo es título de sección. Entonces todo lo que hay en el asiático fui un par de títulos más de sección, así que me desplazaré rápidamente y solo aplicaré los de mí y luego para ponerme en contacto en lugar de un título pequeño en lugar de, um, título
grande. Perdón. Vamos a poner en cola pequeña tan rápido. Simplemente se podía ver que los tamaños de fuente son títulos grandes o títulos de sección han cambiado. Parece que me perdí un eso justo aquí arriba, así que empezaremos de nuevo ahora. Se podía ver un segundo título ahora es bonito y grande. Entonces aquí abajo, vamos a ver nuestro CSS donde tenemos todas las importaciones adecuadas para nuestros formularios de Google. Vamos a comentar esto para poder importar nuestros nuevos teléfonos, y entonces sólo vamos a cambiar. Tus variables son ah, CSS Muy barcos desde canciones de fuentes en Sarah hasta nuestros nuevos embrujos. Nosotros lo sentimos. Vamos a cambiar nuestras, uh, variables aquí por nuestras nuevas fuentes. Entonces nuestro monstruo en el que acabamos de cargar con Google quiere vamos a poner como nuestras canciones persiguen o son quieren canciones variables Y entonces vamos a tomar nuestra muy si Sarah Font y aplicarle eso a nuestra Sara soportable. Por lo que ya puedes ver que está pasando por el sitio que son nuevas formas se han aplicado Nuestros títulos de
sección son bonitos Ah, Sarah fuentes ahora que, como exportamos barcos de correo destacan un poco más bonitos y todos estos fondos son bastante más bonitos también. Y parece que absolutamente un hice algo con el diseño. No, sólo ayúdame rápidamente. Ya sabes, te escucho. Entonces rapero. Entonces ya acatamos esto en nuestro diseño, pero acabo de estropear y ah, necesito responderlo. De acuerdo, entonces ahí vamos. Todo se ve bien y estamos listos para la tipografía.
7. Selecciones hermosas paletas de colores: tener una buena paleta de colores o piel de color podría ir mucho en ayudar a que tu sitio web
destaque . Por lo tanto, es importante uno del esfuerzo para tratar de encontrar los colores que se ajusten
mejor a tu página web si no tienes sentido de la teoría del color o el diseño del color que eso está bien porque hay herramientas que podrían ayudarte a generar bonitas palets. Se trata de enfriadores, que es un generador de paleta de colores. Por lo que tenemos que hacer es hacer click en este botón generar. No, genera una bonita paleta de colores para ti. Entonces, como puedes ver, acabamos de generar uno y es bastante agradable. Si no te gusta, solo
podrías hacer clic en generar una y otra vez y otra vez hasta que encuentres algo que te guste. O, si lo deseas, podrías explorar las paletas de colores de otras personas que aparean y ver si podrías ver algo ahí que pienses que funcionaría bien con tu sitio. Así que justo en la parte superior de mi cabeza, pasando por estos aquí mismo, um, algo así sería como una bonita paleta de colores para una especie de sitio minimalista más minimalista. Estamos justo en el azul oscuro, el gris. No creo que vayamos juntos. Um, seguimos desplazándonos por esto aquí mismo sería algo que yo pudiera ver Uh, aquí mismo. Entonces sería algo que yo podría ver siendo bueno para sitio web amigable con medio ambiente
o algún tipo de caridad ambiental donde tengas tus brillantes warrants para destacar
del verde. Pero aún tienes el verde para actuar como tu, um, referencia al medio ambiente y todo. Acabo de ver esta paleta de colores por aquí me hace pensar en helado. Entonces por alguna razón que puse eso en una heladería, sitios web, mismos cables o algo así que otra vez sólo esas elección de colores me hace pensar helado. Entonces eso es lo que usaría. Por lo que solo reiterar el punto es realmente tratar de encontrar una paleta de colores que mejor coincida con tu contenido y tratar de fusionarlo de manera efectiva de esa manera. Entonces ahora que tienes tu paleta de colores elegida, también es importante saber cómo usarla de manera efectiva en un sitio web, así que eso va a tener los bonitos colores que van bien juntos. No quiere decir que si los recortas por todas partes, necesariamente
harán un sitio web de buen aspecto así que de una manera que creo que este sitio web hizo un buen trabajo, pero es que su paladar es bastante vibrante, por lo que tienen verde, morado, naranja, lee sólo un montón de colores realmente fuertes. Entonces en lugar de hacer un montón de elementos, esos colores, los usan como más para los elementos de fondo o de repente ponen como colores de fondo. De esa manera se obtiene la sensación de público en todo el sitio como no sólo
blanco y negro aburrido , sino que no es abrumador al mismo tiempo, Otra forma efectiva, creo que el color debe ser usos para ayudar con la usabilidad. Por lo que la página web de Rogers hace un buen trabajo con esto en el sentido de que si ves el color rojo , sabes que es una acción. Entonces tienes tu barra arriba donde están todas tus acciones ahí o un trozo de pan, pero y sabes que se puede hacer clic. Thes cajas rojas son todos clicables, el botón blanco y rojo y se puede hacer clic. Entonces si te desplazas por el sitio web y ves rojo, es como, Oh, eso es una acción. Sé que hacer click ahí para hacer algo. Por lo que es una forma de ayudar a la usabilidad con el color. Ahora que hemos encontrado algunos grandes recursos en la creación de nuestras propias paletas de colores. Sigamos adelante y hagamos una paleta de colores para aplicarnos a nuestro proyecto de clase. Por lo que en realidad he ido adelante y generado esta paleta de colores aquí que coincide con el
esquema de color . Pero ya has visto a lo largo de nuestro proyecto de clase para el, um, sección o nuestros títulos de sección de clase. Entonces vamos a entrar en nuestra clase, proyectemos la sartén de nuevo y editemos nuestros colores. Entonces todo lo que necesitamos va a estar en el CSS y similar dicho antes todo va a estar en nuestro color para hacer artículos. Entonces nuestro primer elemento es eliminar la paleta de colores existente, que está justo aquí y entonces todo lo que vamos a hacer es poco común. Nuestra nueva paleta de colores, que coincide con el esquema que acabo de mostrarte por aquí y ahora instantáneamente son piel de color se va a actualizar a la que te acabo de mostrar. Entonces, como pueden ver, sólo hacer eso, um, hace un mundo de diferencia, y nuestro sitio ahora está empezando a verse cada vez más pulido
8. Cómo hacer interaciones de usuarios interesantes: una forma realmente efectiva de crear una impresión duradera para los usuarios es mediante la creación interesantes interacciones de usuarios. Con esto, me refiero a la forma en que los usuarios interactúan con los elementos del sitio web. Por lo que esta página la ha puesto en mucho esfuerzo para hacer interacciones interesantes. Apenas cada elemento de este sitio interactúa en alguna espera única. Entonces desde los grandes títulos que fueron, pasas por encima de ellos y tienen su animate una línea de letrero o el ícono de la hamburguesa que lentamente anima adentro y afuera mientras la ayudas. Dado que los iconos de las redes sociales tienen una atracción interesante donde el cursor que
te sigue alrededor se encoge para que puedas leer. Es para que pudieras leer mejor los enlaces cuando la tengas abajo, todo el contenido se anima en como para mantener la atención del usuario. Si bien animar todo esto es realmente genial y realmente hecho impresionantemente. No obstante, algunos podrían argumentar que es casi demasiado en el sentido de que las interacciones y las animaciones casi podrían quitarle el contenido en el sitio. No obstante, esto hará todo esto. El principio de esto aún podría tomarse y aplicarlo de una manera más sutil. Entonces si miras aquí este sitio web, déjame simplemente actualizarlo. Entonces todo carga igual,
um, um, todo todavía Andresen, pero no se hace demasiado agresivamente ni para audazmente, por lo que no le quita el contenido. El conciencia sigue siendo el foco principal de este sitio, ya que se podía escuchar todo tan animado, e incluso tiene pocas animaciones que se quedan ahí. Pero no hay nada realmente distraer de este contenido tan similar para tener todo lo demás . Hemos estado trabajando en su búsqueda del equilibrio adecuado y conociendo lo que es adecuado para su sitio . Entonces si tienes una pieza de portafolio de put, realmente
quiero demostrar atractivos interesantes. Realmente muestro tu habilidad. Entonces es mejor ir más hacia esta ruta y realmente tratar de pensar en cada cosa y cómo puedes hacerlo fresco e interesante en realmente interactuar con los usuarios. No obstante, si te hacen enfoca el contenido, entonces tal vez quieras ser más así en el sentido de que aún tienes ese sentimiento un poco extra y ese profesional, Uh, sí, solo un poco de cereza en la parte superior con todas las animaciones y transiciones. No obstante, no está quitando el contenido. Entonces una cosa a escuchar en mente es que no quieres ir por encima de la cima con las interacciones de los usuarios hasta el punto en que lo que estás interactuando sin o hasta el punto en que las interacciones
ya no sirven a un propósito. Entonces incluso en este sitio, donde parece que todo tiene una interacción, sí todo sirve a un propósito. Todo con lo que estás interactuando es un enlace clicable que sí te lleva a otra página o proporciona más contenido o abre algo. Entonces si vas a este contenido aquí, esto es solo contenido puro, por lo que no necesita ninguna interacción, y no lo sucede. Entonces tiene sentido en lo mismo con todas las animaciones aquí abajo, pesar de que todo se anima una vez que está en fotograma, se detuvo, por lo que es fácil de leer, y se podría entender lo que está pasando. Entonces lo que quieres uno de evitar es solo tener todo moviéndose todo el tiempo, todo proporcionando interacciones sobre elementos que no tienen acción después Así que estabas dedo del pie flotando sobre esto y otra vez para animar de alguna manera. Entonces pensarías que es un enlace o algo que se puede hacer clic, pero seguirías haciendo clic en él una y otra vez, pero no estaría pasando nada, por lo que solo crea un montón de confusión para el usuario. Entonces ese es realmente tipo de punto que estoy tratando de conducir a casa aquí es que cada interacción necesita un propósito, o necesita haber una interacción solo para elementos accionables en esta página. Uh, una cosa que creo que es agradable. Es sólo estos pequeños personajes sutiles, moviéndose alrededor de los que sí le dan a este evento más vida al sitio Web. Pero debido a que se desvanecieron, sí
sabes que no son aplicables. Incluso sólo tener, um, el cursor no cambiado cuando se pasa por encima de ellos también proporciona justo ese poco extra de retroalimentación que ya sabes, solo ahí para la decoración. Y no es un artículo real. Ah, son artículo procesable
9. Añade las transiciones y las animaciones: Entonces ahora que hemos explorado algunas interacciones únicas del usuario, vamos a nuestra página Web y aplicamos nuestras propias interacciones. Entonces como antes, todo va a ser solo agregando algunas clases a la página web. Pero te explicaremos con un poco más de detalle sobre lo que está pasando. Entonces como se podía ver por muchos de los presagios cuando se pasa por encima de ellos, es muy abrupto en cambiar estados del non Howard para pasar por alto y es especialmente evidente para el menú móvil. Para cuando haces clic en él, el menú aparece muy abruptamente. Por lo que queremos deshacernos de esos cambios repentinos y proporcionar un poco más suave de una transición. Entonces vamos a pasar por un código y encontrar nuestras interacciones para hacer artículos. Vamos a aplicar esos dos nuestra página. Entonces, por ahora, solo
suministremos los de transición suave. Entonces tenemos un menú de término de transición suave, alternar por la transición larga a nuestro menú, y luego aquellos todos aquí, que es nuestra cuya transición a nuestro botón básico. Tengo que ir todo el camino hasta el final de la página, o supongo que no todo el camino, Um, pero a nuestras redes sociales se aplicará la transición suave. Deja la punta de la herramienta por ahora a nuestro titular de redes sociales. Por lo que al aplicar las clases de transición suave ahora puedes ver cuando pasas el cursor sobre los elementos de la página, tiene una transición agradable, suave, por lo que no es tan abrupta lo es antes. Esto es especialmente evidente en nuestro menú móvil, donde cuando haces clic en él, el menú ahora se desliza muy bien como en donde antes solo tipo de saltó hacia ti para el
menú móvil toggle cuando haces clic e incluso podrías ver el ícono de la hamburguesa transformándose únicamente de las hamburguesas en una X. Así que de nuevo, no
hay nada súper loco por encima de la cima. Pero son sólo esos pequeños detalles que fuera un poco más profesionalismo o simplemente una especie de dar esa cereza encima de una página web. Eso. Vamos a volver a nuestra sección de redes sociales, y vamos a aplicar esa punta de herramienta. Entonces esta es una interesante interacción de usuario que me gusta hacer, un especial con iconos donde los usuarios tal vez no siempre sepan lo que significa el ícono, sobre todo para redes sociales, donde parece que cada vez salen más plataformas de redes sociales cada día, así que todo lo que hace no es. Cuando se pasa el cursor sobre un pequeño cuadro de poppet aparece y se anima en explicar en qué una plataforma de redes
sociales se encuentran su, um, a
punto de dar clic en se puede ver Aquí está instagram en spa. Sh Podría 10 pensar Dan y Twitter. Por lo que una de las características más grandes es que queríamos aplicar a nuestro sitio desde el principio de un punto. El nuevo diseño era esta gran blob aquí, y se podía ver en este momento es un poco aburrido. Es sólo que es interesante porque no es esa misma forma de caja, pero simplemente están sentados ahí. Entonces lo que vamos a hacer es entrar en nuestro JavaScript. Vamos a bajar aquí a esta interacción para hacer ítem, que es el único para hacer ítem y javascript que tenemos. Y sólo vamos a poco común este código aquí mismo. Al hacerlo, vamos a hacer que nuestra blob, uh, anime entre dos estados. Por lo que tiene. Es de una forma, y luego se transformó lentamente en el otro estado y se remonta. Para que pudieras ver al hacer eso, ahora
tenemos nuestras blobs de morfina. Por lo que cuando alguien acuda al sitio, atraparán su atención de inmediato. y esperemos dejar una impresión muy duradera. Entonces eso es todo para nuestras interacciones de usuario para nuestra página web. Entonces ojalá puedas ver ahora que por las interacciones de usuario de Andy que son lo que Page está empezando a verse mucho mejor que con lo que empezamos.
10. Uso de imágenes significativas: el último tema que vamos a cubrir son las imágenes, y por imágenes. No me refiero sólo a imágenes estáticas, sino que también podrían ser regalos de video o y ellos tipo de ilustración. Ninguna imagen tiene el poder de hacer o romper un sitio web, por lo que es crucial poner el tiempo y el esfuerzo para obtener las imágenes correctas. En mi opinión, cada web imagery debe ser original y de alta calidad, pero eso no siempre es posible por limitaciones de equipamiento o presupuesto. Entonces lo siguiente mejor, si no puedes tomar tus propias imágenes de alta calidad, es conseguir algunas fotos de stock realmente buenas. Entonces soy salpicaduras. Un sitio que tiene mucho software fue tomado por fotógrafos profesionales eran
fotógrafos aficionados de todo el mundo en su completamente libre para usar cada una de las imágenes
tanto para uso comercial como personal. Por lo que es un gran lugar para obtener imágenes si no tienes la capacidad de conseguir las tuyas propias. Dicho esto, la imagen ideal como mencioné antes, es salir y sacar tu propia imagen de tu empresa, o de ti o de tu producto, y hacerla personal de Europa a tu sitio web para concluir el original Así ahora que sabemos la importancia de las imágenes y qué tipo de imágenes usar en nuestra página web, sigamos adelante y aplicamos este conocimiento a nuestro proyecto de clase. Entonces puedes ver aquí que las imágenes que tengo en este momento son tierras bonitas. Son solo fotos de acciones al azar que tomé de Google, pero en realidad no se atan tanto a nuestra página Web. O sea, supongo que lo hago un poco en el sentido de que son una especie de computadora. Este es,
ah, ah, sitio web, Um y éste es igual que es una especie de laptop en tecnología, pero no es eso relacionado con nuestro proyecto de clase ni con nuestra página web. Por lo que no tenía un presupuesto enorme para salir y conseguir que un fotógrafo profesional viniera a tomar fotos en nuestro boleto, Um, fotos
profesionales tomadas. Pero pude salir y conseguir unos lo suficientemente buenos con mi teléfono. Entonces y a veces eso es todo lo que necesitas es solo una buena imagen telefónica de su aún alta calidad y es significativa y se vincula a tu página. Entonces eso es perfecto. Entonces si vas a nuestro get hub Repo, que de nuevo el link está en nuestra descripción de clase. Ir a imágenes. Se puede ver mucho color de imagen. Entonces esta es la que quiero usar para nuestra blob. Simplemente vamos a copiar la dirección de la imagen, abrir un nuevo tiempo y pegarla aquí y luego podremos ver la imagen completa. Entonces solo soy yo sosteniendo mi laptop con la imagen o con la pantalla que muestra nuestro
proyecto de trabajo están funcionando código Pet Project. Entonces así como he sido más relevancia que la imagen tiene que ver con qué? El Web de las páginas que muestran. Entonces eso es solo copiar dirección de imagen aquí, luego volver. Teoh están trabajando. Proyectar y desplácese hacia abajo. Teoh son tan, uh, SPG Y aquí tenemos la imagen. Entonces solo vamos a reemplazar esta imagen justo aquí antes de que acabemos de copiar. Tan solo dale una segunda actualización y ahí Así que no es la mejor imagen del mundo. Como dije, fue tomada con mi ah,
celular, celular, no un fotógrafo profesional, pero se pone el punto a través, y tiene mucho más significado para este sitio que solo una imagen aleatoria de cualquier laptop. Entonces, para una foto aquí abajo. Um, esta foto no está tan mal, pero pensé que podríamos hacerlo un poco mejor. Entonces para esta ruta, en lugar de tomarme la mía, acabo de salir por el Stockport. Pero es una imagen de mayor calidad, y en realidad es una foto de stock que pongo en dos, um, squash. Entonces supongo que podríamos decir que se tomó originalmente, aunque originalmente no estaba destinado para este proyecto. Por lo que volveremos a copiar muy rápido, dirección de
imagen y luego pegarla en la nueva parte superior para que pudiéramos ver la imagen completa. Entonces sólo un poco más de código. Y es mi actual estación de trabajo. Entonces sí empata a nuestro proyecto en el sentido de que es un poco más o se vincula a nuestra
página en el sentido de que ha sido personal para mí en lugar de solo la estación de
trabajo aleatoria de otra persona . Entonces para actualizar esta imagen, solo
vamos a desplazarnos hasta aquí hasta que encontremos nuestra sección de descripciones. Y luego tenemos nuestra imagen de fondo de sección, y sólo vamos a cambiar ese promedio de fondo. Estás bien, lo que acabamos de copiar y solo deja que se actualice. Uh, lo siento, y justo aquí, sólo
me refrescaría. Nadie conocía la presión. ¿ De acuerdo? Y ahí está nuestro nuevo panorama. Por lo que de nuevo, también es de mucha más calidad que la imagen que estaba ahí dentro. Y tiene que ver conmigo y mi proyecto porque a menos que esa sea mi estación de trabajo, Así que de nuevo, lo principal que estoy tratando de conducir a casa aquí es unas imágenes puras tienen que ver con tu contenido y el mensaje que estás tratando de cruzar. Y ojalá pudieras ver eso con estas dos imágenes. Um, definitivamente tiene más sentido tener estos y lo que había en el sitio antes.
11. Conclusión: Entonces eso es todo por nuestras técnicas. Hemos discutido las imágenes de layup, tipografía, los esquemas de
color y las interacciones de los usuarios. Entonces te voy a dejar con el reto de tomar el estado final sobre proyecto de clase e ir más allá con él. Entonces tomando las técnicas con las que hemos estado trabajando y aplicándolas o al
estado final . Entonces esto podría ser cualquier cosa, desde cambiar el esquema de color a algo que te guste un poco mejor están agregando tus propias imágenes que has tomado a donde vas todo el camino y reorganizar
por completo el diseño en, uh, hacerla suya. Entonces si quieres que me devuelvan los pies estaré mirando este proyecto de cultura para pero en abrigo cuando lo guardes. Simplemente también poner la etiqueta Matthew Fornier escultura que podría buscar todo el producto de clase donde todos los proyectos en los que has estado trabajando y podría dejar los comentarios directamente sobre. Espero que aprendas algo nuevo y algo útil, y ahora eres un mejor con diseñador y desarrollador por eso en uh, gracias por ver