Diseño de un sitio web de portafolio personal sencillo

1. Introducción: todo el mundo. La olia de Minería. Soy diseñadora. Eres diseñador de UX que llevo diseñando desde hace más de 10 años. He tenido el privilegio de trabajar con diversas empresas diferentes que van desde pequeñas empresas locales , empresas multimillonarias. En esta clase, estaré empezando con una pizarra en blanco y mostrándote cómo diseñar un sitio web personal y poner un montón de diseñadores sí hacen que se vea fácil porque lo llevan haciendo desde hace tiempo. Pero quiero mostrarles lo fácil que es también, y quiero mostrarles paso a paso, cómo lo hago. Esta clase es ideal para principiantes y cualquier persona que esté interesada en el diseño, así que espero que disfruten chicos. Vamos a meternos en ello. 2. Comienzo: derecho. Por lo que antes de empezar con anti uno para descargar fig, MMA, fig MMA es gratis. Funciona en Mac en Windows. He elegido figura Mark porque funciona en Mac y Windows eso que no estoy limitando a la gente a un sistema operativo. En realidad soy nuevo para imaginarme, así que estoy aprendiendo a medida que voy, pero es muy fácil recoger su fácil de usar. Ya sabes, si estás atascado en algo o quieres aprender una herramienta específica, están ordenados como recurso es centro de ayuda, eso es todo. Cosas es muy útil. Normalmente descargo ahí. ¿ Dónde está? Normalmente descargo su escritorio hacia arriba, pesar de que transmitas es ein en el navegador. Normalmente me gusta usar la app de escritorio de todos modos, así que , ya sabes, una vez que hayamos hecho cargado fig MMA, podemos abrirla. Entonces aquí estamos con figura mi abierto. Tengo un nuevo documento abierto aquí está bien encendido. Simplemente quieres familiarizarte con lo que tienes delante. Entonces, ya sabes, solo tenemos una especie de como tus opciones y cosas. Aquí tenemos la escala móvil. Tenemos marcos, yace solo tus herramientas blandas regulares que necesitas Teoh para conseguir el diseño. Básicamente. Entonces para empezar, vamos a hacer un marco. Un marco es básicamente un espacio donde vas a estar haciendo tu diseño, haciendo tu diseño una vez que realmente hayas seleccionado un marco. Por lo que al hacer clic en este botón aquí arriba, puedes elegir diferentes tamaños a la derecha. Está a la derecha, ya sabes, podemos elegir encontrar tablet desktop. Vamos a ir. Paro 14 40 por 10. 24. Y esto es lo que nos ponemos frente cuando elegimos a uno de esos amigos. Ahora, primero lo primero. Quiero hacer una cuadrícula para que básicamente pudiera alinear mi contenido. Alarma mi diseño a un genial para hacer eso, simplemente vamos por aquí donde se ve la cuadrícula de diseño en el lado derecho. Presiona sobre ello y vamos a conseguir un nuevo abandono. No obstante en realidad no queremos. Eso está fuera de la red. Queremos columnas. Entonces aquí tenemos un montón de columnas. Ahora, ahora voy a dar a mis columnas 12. Diga el número 12 que voy a decir, va a tenerlo centrado, y voy a dar a cada columna una semana libre en 65 en una canaleta con apagado 30. Esto es con lo que me gusta trabajar. Ya sabes, puedes elegir el grado que quieras, pero esto es lo que me gusta. Esto es lo que me funciona. Y esto básicamente sólo me da un área de contenido de sal para trabajar. Y tengo 30 píxeles entre cada columna, que me gusta también, debo presionar entrar al tipo. Por lo que pixeles entre cada columna y sin embargo me da un buen espaciado para mi contenido. No obstante, antes de que realmente empecemos en lo que estamos diseñando hoy es una buena idea tener un marco de alambre , una especie de idea de lo que te gustaría diseñar una idea fuera de cómo debería ser la página. Por lo que rápidamente hice un marco de alambre aquí que se puede ver porque estamos haciendo un sitio web personal muy sencillo . Ya sabes, tengo una especie de barra de siesta en la parte superior con los enlaces de navegación del logo. Tengo imagen de perfil descripción de encabezamiento. Entonces tengo, como, como, una sección de portafolio de servicios y luego un instalador donde voy a tener más arriba me corta descripción botones de contacto, Así que sí, muy rápido. Poner esto juntos normalmente en realidad tengo una buena idea sobre. Voy a empezar en mi cabeza. En realidad no suelo hacer marcos de alambre, pero si los marcos de alambre te ayudan, por favor hazlo. Tener un marco de alambre para básicamente solo ilustrar Vamos a estar diseñando antes de que realmente empieces a diseñar. La versión de alta fidelidad vienen realmente de ayuda. Simplemente puede ordenar tus pensamientos suaves y asegurarte de que tienes algo abajo en el papel. Entonces eso es todo para este. Y el próximo lo hará. En realidad, comenzó con un diseño y llevando a una esposa para él a un diseño de alta fidelidad. 3. Nav y héroe: así que bienvenido de nuevo. Ahora que realmente vamos a empezar en el diseño, volvamos a nuestro marco de alambre y echemos un vistazo a lo que estamos trabajando. Entonces empecemos con el encabezado en dis off sección de encabezamiento la sección de héroes aquí. Entonces lo que usualmente me gustó es yo porque esto obviamente está en mi protesta. Mi diseño, ya sabes, es lo que me gusta hacer. No tienes que seguirlo exactamente. Pero lo que me gusta hacer es tener un diseño basado en tarjetas que me gusta usar bastante, Así que en realidad vamos a darle un color al fondo. Entonces cuando se trata del color, en realidad voy a usar uno de los colores por defecto que encuentras en la Fig MMA. Ya sabes, yo sí tienes un sistema de color, pero solo quiero hacerlo realmente simple, realmente fácil para ustedes chicos. Por lo que no íbamos a colorear sistema o ir Teoh la sección de colores aquí, elegir colores personales en solo usaría este color como nuestro color de fondo, y luego crearemos un rectángulo. Por lo que presiono están en el teclado. También puedes presionar aquí arriba, en realidad puedas ver los accesos directos aquí para las formas, rectángulo, línea, flecha Ya sabes, lo que necesites. Básicamente. Por lo que crearía un rectángulo que se estira todo el camino. Y lo que me gusta hacer es que me gusta sacar el color del rectángulo del blanco. ¿ Tienes chico Andi también le diste una sombra de gota? Entonces démosle una gota muy sutil. Sombra le dará un golpe de dos. Dale una distancia Y de uno y luego dale una capacidad. Bueno, sí, lo paso, er cinco, cada tipo. También en realidad ocultaremos la cuadrícula de diseño. Verlo Hay sección de encabezado de Powersoft. Por lo que a continuación vamos a añadir nuestro logo. En realidad sólo voy a añadir un texto. Lego Teoh, foodie de texto secreto acaba de presionar el botón de texto en la parte superior y en realidad no nos aseguraremos que esto esté dentro de nuestra cuadrícula. Por lo que si rápidamente sólo ponemos en nuestro como me swoop adentro, usaremos fig, mi sitio web. Tan solo hazlo fácil. Tan solo una simple pierna de texto. Volvamos a ver nuestra grilla. Espero conseguir capa equivocada en su chico encendido. Sí, ahí vamos. Podemos ver que ahora está alineado con la cuadrícula por lo que la mayor parte del contenido se va a alinear dentro de esta cuadrícula. Esta cuadrícula de diseño que ven. Pero no veo la cuadrícula de diseño como regla. Es solo un chico, sin regla, así que puedes salir de ella como yo tengo con el encabezado con el encabezado de fondo con un encabezado. Antecedentes incluso. Y podrías salir de ella cuando se trata de cosas delátigo completo, látigo completo, imágenes y cosas así. Pero es solo una buena manera de asegurarse de que, ya sabes, tengan márgenes y espaciado y esas cosas. Por eso me gusta usar una cuadrícula de diseño. Entonces ocultemos nuevamente la cancha inferior, seleccionemos nuestro marco y luego solo presionamos eso para ocultarlo. Cuando se trata de fuentes. Uno de mis fondos favoritos que me gusta usar su Inter se en remolque, creo que sólo se ve fantástico. También es un teléfono gratuito, y está específicamente diseñado para el diseño Web. Tú diseño APs como diseño de interfaz o que ordenar cosas, y creo que simplemente se ve genial. Entonces vamos a cambiar el tamaño de la misma para que sea un poco más grande. Tengo que volver a obtener mi cuadrícula de diseño, en realidad, para que pueda asegurarme de que esté dentro del diseño. Ahí vamos. A lo mejor le dará algo de peso. Semi barco hará que tenga un chico que se ve bastante bien ya. ¿ Cuándo otra vez? Cuando se trata del color de la misma, creo que es un poco demasiado oscuro. A lo mejor darle un poco más de un gran color. Sí, me gusta este color de aquí. Creo que ese tipo de miradas se rompen. En realidad podría hacerlo más oscuro. Dale un código hexadecimal de uno. Lo siguiente que vamos a hacer es agregar nuestra navegación por lo que vamos a crear un texto de nuevo, y luego vamos a añadir home es uno de ellos. Bueno, uh, portafolio como el otro, um, Y luego también contactar. Entonces simplemente estoy copiando y pegando estos, ya sabes, control, control, Copiar, copia comando. Y luego mando V control V. Sólo Teoh. Crear texto múltiple o textos o cajas. Um, cambiaría el tamaño frontal. Por lo que estoy seleccionando todas las capas. Santo turno. Y me estoy poniendo en las capas porque creo que el frente es un poco demasiado ligero. Hará que sea 14. Sí, 40. Nada se ve bastante bien. También cambiaremos el color de la misma. Teoh Un gris más claro. Sí, creo que eso se ve bastante bien. Entonces una de las herramientas útiles con una figura diseñada para gustar es que en realidad puedes alinear automáticamente todos tus artículos. Nunca eres artículos para tener la misma distancia para estar alineados verticalmente o que ordenan cosas. Entonces vamos a seleccionar todas esas capas, y vamos a utilizar esta herramienta aquí para alinear los centros verticales. Ahora están alineados. También vamos a utilizar esta herramienta aquí. Dedo del pie ordenado en esto dará a cada uno de estos elementos y el espaciado de montaje igual la cantidad igual . El espaciado es en realidad aquí el número 54 píxeles entre cada uno de ellos. Pero creo que eso es un poco demasiado. Bajémoslo a 30. Y ahora dará 30 píxeles entre todos ellos y podemos alinearlo a nuestro diseño. Genial. Y ahí estamos. Ese es el encabezado de navegación. Bastante hecho. Entonces obviamente, es una buena idea. Teoh organizó todas tus capas. Eso es lo que vamos hoy. Vamos a agrupar esta selección. Ya lo voy a llamar. Bar. Ahí vamos. Y sí, creo que hemos hecho un buen comienzo hasta ahora. ve bastante bien. Lo siguiente es que vamos Teoh drag en una imagen. Entonces una imagen de perfil o lo que sea. Por lo que aquí compré a imagen de mí misma. Muy poca idea. Medios yo mismo cambiará el ancho de la misma. Entonces algo así como 500 rápidamente, justo ese fin de semana. Así que mide el tamaño con y el resto de la página en lugar de que se haga cargo. Toda la página volverá a obtener la cuadrícula de diseño sobre lo que haremos es volver a dimensionar esto para que ocupe un número específico de columnas. Entonces voy a sostener turno que voy a poner la esquina de la imagen y arrastrarla, Teoh, creo que 5 40 años lo que debería ser. Sí, perfecto. Ahora está ocupando seis columnas. Yo estoy de este lado. Tendrás nuestro texto. Entonces si bien mi también do en realidad es hacer las esquinas a su alrededor, lo cual puedes hacer de manera muy sencilla usando el sort circular Icahn en cualquier cuadrado, cualquier imagen, sea lo que sea, también podemos escondernos rápidamente y mostrar un grado mediante el uso de control. G. Eso es el control G en el Mac. En realidad no estoy completa. Seguramente está en ventanas, pero estoy seguro que es muy, muy similar. Entonces ahora saquemos nuestra imagen y saquemos a las tapas que la alinemos. Y asegurémonos de que el espaciado sea igual. Por ejemplo, voy a bajarlo en 100 píxeles. ¿ Qué? Normalmente me gusta conseguir un turno de espera, y luego presiono hacia abajo sobre el iraquí 10 veces. Por lo que 123456789 10. Por lo que ahora tenemos 100 píxeles fuera del espacio entre la imagen en la barra de navegación. A continuación, agreguemos algo de texto. Entonces volvamos a conseguir cuadrícula de diseño que podamos ver nuestro texto a donde va a ir el texto. Entonces creo que el texto podría en realidad estar un poco demasiado cerca. Si lo digo, cualquier cosa se escoge a su manera, en realidad lo voy a poner un poco más lejos. Entonces voy a agregar texto aquí va a hacer cuadro de texto, y luego voy a poner algo como, um, hey, hey, en realidad, vamos a ver, ¿sí? ¿ Un diseñador sobre creativo de Inglaterra? Hagamos algo así. Muy sencillo, muy fácil. Cambiemos el lado de eso porque se dirige. Quería ser grande y prominente para mi gente a Big 36. Se ve bastante bien. Dulce. Ocultemos nuevamente la cuadrícula. Creo que eso ya se ve bastante bien. Uh, también agreguemos algún texto ficticio. En realidad solo voy a controlar copiar y pegar. Esto le va a dar tres píxeles de distancia del espaciado desde arriba. Entonces voy a poner algún texto ficticio aquí Ahora. Un enchufe en el que voy a usar para agregar el texto ficticio es un público llamado alarma. Es, um Ahora te mostraré rápidamente ahí enchufando que tengo instalado para fig MMA. Entonces si vas Teoh allá, puedo aparecer en ir a enchufes y puedes ver cualquier enchufe en su que figura la humanidad tiene disponible. Se podían ver los que se han almacenado. Tengo iconos de diseño de materiales, iconos de plumas en mapas de Laura en los de los únicos enchufes que han instalado. Entonces volvamos a nuestro diseño de documentos en. Usemos la alarma. Es diseñar a su chico, seleccionar algunas capas de texto. Aquí vamos. Um, empieza aún cerrar bolsillo. Sí. Uh, generar a cada tipo. Enfriar. Asegurémonos de que nuestro impuesto obviamente no sea demasiado grande porque es a más grande. Cambiemos el tamaño frontal Teoh. Vamos a cambiarlo a 16. Creo que 16 sería mejor ahí también. Ya sabes, simplemente no se ve bien. El texto, generalmente el texto corporal simplemente no se ve bien cuando no es elegante. Entonces cambiemos este regular de Teoh. Y luego cambiemos el color porque no quiero que lo haga. Entonces sé tan oscuro como el título de título. Entonces vamos a darle un tono más claro de gris, pero todavía se ve un poco apagado en lo principal que vive es la altura de la línea. Entonces para cambiar la línea, yo vamos a elegir un texto, y luego vamos a elegir a quién tenemos altura de línea. Entonces cambiemos eso. Por lo que actualmente la línea alta es de 19. Vamos a cambiarlo a algo así como 22. Ya podemos ver. Se ve tranquilo. Mejor quizá 24. Sí, ahí tienes. Creo que eso sólo se ve de inmediato mucho más fácil de leer. Obviamente, no es en inglés, pero es mucho más fácil. Teoh leer mucho más legible se ve más limpio también, así que en realidad podríamos liderar esto aquí arriba y liderar que pueda haber. Pongamos algunos iconos de redes sociales. Entonces aquí acabo de arrastrar y soltar algunas cuentas de redes sociales que he pospuesto fuera de la Web . Muy sencillo. Cambiemos el tamaño de ellos. Voy a cambiar este 1 a 30 Jane que 1 a 30 también, muy bien y luego lo cambié al 32 de Tricon. Ahí vas. Entonces cambiemos el distanciamiento entre ellos. Pero creo que es un poco demasiado un afeitado a 20. En realidad. No pienses que eso sigue siendo demasiado. A lo mejor 15. Sí, creo que eso se ve un poco mejor ahora. Arrástrelo sobre mí solo. No son lo mismo porque el relleno entre ellos, cambiemos el color porque creo que es un poco demasiado brillante. Digamos que podemos cambiarlo por algo así como hecho. Ahí estamos. Entonces esa es la navegación suave por sección de héroe. Eso es todo para este, y el siguiente empezará con la sección de servicios 4. Servicios: Así que bienvenidos de nuevo ahora que tenemos nuestro bar sobre héroes Fuera de sección terminar, hagamos la sección de servicios. Pero también queremos asegurarnos de que nuestros artículos estén realmente plegados y agrupados juntos. Entonces hagámoslo rápidamente. Llamemos a esto la sección. En realidad, sólo podemos quitar sección. No necesitamos sección que pudiéramos simplemente llamarla aquí. Sé que nos pusimos bien. Por lo que en realidad queremos hacer nuestro marco más grande para que podamos seleccionar nuestro marco ya sea haciendo clic aquí o dando una patada aquí arriba. Y entonces simplemente lo bajamos y lo hacemos más grande. Haremos que sea un poco más grande que podamos sentirnos fuera de nuestro contenido. Ahí vamos. Agradable. Por lo que ahora vamos a hacer nuestra sección de servicios. Entonces cuando volvemos con la esposa y pudimos ver tenemos servicios breve descripción. Estos círculos están destinados a ser iconos y luego el servicio siempre que esté en una breve descripción fuera de ese servicio. Entonces pongamos en los servicios de rubro. Llevémoslo al medio y bajémoslo 100 píxeles. 123456789 10 ¿Tienes justo para que sea una cantidad pareja en comparación con el héroe en la barra de tuerca . Además, creo que esta diversión es quizá un poco demasiado grande, también. Entonces cambiemos el tamaño de esto. Cámbialo, Teoh 24 en realidad, 24 creo que podría ser un poco demasiado pequeño. Vamos a cambiarlo, Teoh. 30. Sí, eso me gusta. Creo que ya se ve mejor. Corte lo centró. Y luego a continuación se agregará una descripción de servicios. Por lo que cambiaremos el tamaño frontal de esto también. A 16? Sí, el tipo. Cámbialo a regular cambiar el color a un encendedor. Gris. Algo así. todos los tipos. Ahora, podría simplemente poner una breve descripción, algo así. Ahora vamos a estar poniendo un icono, así que voy a estar usando uno de figments plug ins. Voy a estar usando la herramienta de iconos de plumas. Entonces aquí estamos, con el tapón en mi estanque pondré tal vez algo así así no voy a ser muy como resolver. Quisquilloso sobre asegurarme de que no pueda coincidir con el servicio porque, honestamente, solo estoy haciendo esto. Eso es demostración por, como, este ícono. Entonces vamos a traer eso Aquí estamos. Lo tenemos aquí. Asegúrate de que ese icono esté en nuestro marco. Tienen un tipo. Hagámoslo un poco más grande. Creo que es un poco demasiado pequeño. Vamos a plantearlo. Teoh, 48 y con manera, quieren mantener el tamaño de la misma esperanza. Sí, queremos constreñir las propiedades de la misma, dice aquí noche proporciones constreñidas incluso no propiedades y cambiar el tamaño del icono esperanza lo hizo a pequeño 48. Sigo pensando que ese icono es un poco demasiado pequeño en por lo general con iconos como este, porque no es muy detallado. En realidad no deberías hacerlos demasiado grandes. Por lo que la mejor manera de resolver hacerlos tomar un poco más de espacio es agregar un círculo o una forma o lo que sea. Puede estar detrás de ella. Entonces voy a agregar un círculo detrás de él como esta capas de Muda para que esté en el medio arriba parejo y luego alinearlo y ya podemos decir que está haciendo una diferencia masiva. Ahora saquemos a ese círculo un tono muy claro, Genial, algo así. Y entonces vamos a darle un color. A lo mejor deberíamos elegir uno de los colores que tienen aquí. En realidad, lo que solía empezar voló desde lo que vamos a hacer es dar el fondo del círculo. Ah, color azul claro es, bueno, algo así. Creo que eso se ve bastante bien. Agradable, rápido eso, um, llámalo solo ícono, algo así. Y luego vamos a sumar en un servicio. Por lo que simplemente ponemos algo así como Diseño Web. Ten un chico. Yo quiero darle 20 fotos de descuento, prohibiendo desde arriba. Hazlo un poco más grande. A lo mejor que sea 24 no 24. Demasiado grande. Mantengámoslo a los 18. También queremos volver a subir nuestra grilla porque queremos asegurarnos de que tenemos todo aliándose adecuadamente. Entonces porque hemos platicado 12 columnas y estamos haciendo tres servicios diferentes, así que dormir cada columna va a matar. Cada sección de servicios va a ocupar cuatro columnas. Yo digo. Cambiemos el ancho de esto para que ocupe cuatro columnas, cada chico y luego eso es centro. El ícono a eso hará que el icono hará que el rubro del servicio sea semi negrita, y luego le daremos una descripción a nuestro servicio. Así que cambia el tamaño frontal, también. 14. Rami es el peso y luego darle un encendedor. Genial. Um y entonces podemos d en cualquier tipo de descripción con más de 10 años de descuento cuando experiencia en diseño , puedo diseñar un sitio web antes que tu empresa. Mis habilidades de copyright no son las mayores, pero oye, estoy tratando de hacer esto lo más rápido posible. ¿ En serio? No gastes demasiado tiempo en asegurarte de que sea perfecto. Entonces queremos asegurarnos de que sea, bueno, bueno, que la altura de línea vuelva a verse bien, porque en este momento el texto simplemente se ve un poco demasiado compacto. Entonces vamos a subir la línea. Yo es un default off 17 lo hará 20. Nunca vayas ni lo que luce mucho, mucho mejor. Entonces esa es nuestra primera sección de servicios. Agrupará Will. Se lo llamará servicio, y luego lo copiaremos y lo pegaremos y luego llevaremos el siguiente al medio así , uh, muy bueno. Asegúrate de que esté alineado dulce. A continuación, podríamos hacer algo como desarrollo Web, y luego comparamos algo como yo uso hace email CSS Java librerías de script para hacer más que y sitios web funcionales. Lo que haría años cambiará este ícono así de nuevo. Haremos que los iconos de plumas se conecten, y luego encontraremos tal vez un ícono relevante, algo que debería parecer genial. Uh, ¿qué podría quedar bien? Ah, me gusta este. Eso es perfecto, en realidad. Sitio, vamos a traerlo. Aparecen muy bien. Agradable. Uh, vamos a mover las capas alrededor. Entonces nuestra vida anterior, casi 48 cuando me aseguro de que ésta sea también 48 proporciones de restricción cambian el tamaño a 48 como, digamos, y luego enviadas a ella. Bueno, en realidad usa un color diferente para este ícono. mejor usará verde que es verde y luego también lo vamos a dar a diferencia de sombra como tan cool Cu cu cu cu cu cu siguiente sección de servicios debe hacer esa linda copia y pegar por ahí nos envían y luego lo llamaremos algo así como medios tan seguros. Um Y luego ponemos algo así como usar las redes sociales como en toma tu marca pushy. Te puedo ayudar marca a llegar a millones en todo el mundo. De verdad estoy inventando cosas por aquí. Suena ridículo, pero oye, funciona Así que de nuevo agregaremos otro ícono. Utilizado los iconos de plumas plug in on. Entonces encontraremos relevante. Yo puedo saber lo que está bien? Nosotros sólo usamos este. todo tipo que pondremos en el ícono del mundo que ven aquí o globo. Ni siquiera puedo Onda. Tomaremos este ícono de Globo. Envía al mismo. Recuerda el diseño uno constreñir proporciones redimensionar 48. Cualquier tipo cambiará el color de la misma. Por supuesto, le daremos este naranja, rojo, naranja Vamos a darle naranja y luego darle un fondo muy claro como así en realidad podría tener que hacerlo un poco más oscuro porque es un poco demasiado brillante ahí lo tenemos. Sí, creo que eso se ve bastante bien. Ahora traigamos nuestra sección de servicios a mi servicio fuera de las ollas, subirlas y luego les daremos 50 pixeles. One Teoh 345 50 Fotos de relleno entre la sección de descripción del título y ahí estamos . Es decir, nuestra sección de servicios es buena. Todos juntos rápidamente. Sanders es dulce. Entonces eso es todo para nuestra sección de servicios. Eso es todo para este. En nuestra siguiente, vamos a estar manejando la sección de portafolio 5. Portafolio: Digo, Vamos a crear nuestro primer artículo de cartera. Entonces una cosa que noté con qué con mi marco de alambre es que tengo el ítem de cartera, pero no hay ningún tipo de título descripción de lo que es, así que en realidad lo voy a diseñar en una tarjeta sort former como lo hice con el Navajo. El top. Tan bien, primero una copia. Ya sea el texto, el título y la descripción de los servicios, y lo traeremos aquí abajo. Ahí vas. Asegúrate de que tenga 100 píxeles. Acolchado de aire desde la parte superior. 123456789 10. Enfriar. Y entonces ya veremos. Lo nombramos puesto para el yo otro va a seleccionar descripción. Siento piezas selectas fuera de la espalda. Enfriar. ¿ Quién? Mi ortografía es correcta. Siempre me equivocan piezas a veces solo una de esas palabras donde no sabes si eso voy primero con ustedes chicos primero. Entonces hagamos nuestra primera carta. Por lo que va a golpear nuestro para hacer un rectángulo la mayoría van a mostrar ocurrió de nuevo para asegurarnos que estamos dentro del crear en él se ve como en los Andes. Toma seis columnas así que van a ser 5 40 con la altura, Um, empecemos realmente con nuestra imagen. Entonces si hacemos que la altura de la misma 300 muy chico, creo que eso se ve bastante bien. Y luego le damos un fondo blanco. En realidad, ten sólo los antecedentes. No importa porque vamos a estar poniendo una imagen aquí. Por lo que sólo voy a sacar algunas imágenes de mi propio portafolio de dribble. Vamos a tirar de éste, por ejemplo. Eso es sólo copiar esta imagen en pegarla en así automáticamente Fig Maher guerra. Básicamente siente que el rectángulo con tu imagen, que puede ser muy, muy útil. Entonces básicamente solo enmascara fácil ir enseguida. Fácil para ti de inmediato. Entonces esa es nuestra imagen de cartera, pero queremos agregar una descripción de título en la parte inferior. Entonces, um, debería ir a añadir otro rectángulo. Asegúrate de que esté alineado con la imagen de un chico, y la voy a poner debajo de la imagen, darle un fondo blanco, y de nuevo, en realidad voy a darle una sombra. Por lo que una sombra de gota se rinde, deja a un Y hachas uno y luego dale un yo pase ity 5%. Ahí vamos. A mí me gusta bastante el look cuadrado, pero no coincide con mi imagen de perfil. Por lo que en realidad voy a volver a mi imagen de perfil y quitar el radio. Sólo para que coincida mejor, creo que se ve más nítido. Y yo voy por un tipo más. Mirada seria. Esquinas redondeadas definitivamente te dan más de nosotros somos juguetones. Mira, lo encontré. Por lo que ahora vamos a añadir nuestro título de artículo de cartera. Hagamos un tipo de texto de cuadro de texto en capa de texto y lo llamaremos. ¿ Cómo lo llamé en realidad? Mi trabajo por teléfono. Simplemente lo llamo revista Block Template lo llamará sitio web Venice Silver. Ya sabes, sólo porque me estoy quitando lo que veo aquí. Entonces también vamos Teoh, asegúrate de que esté alineado correctamente. Entonces démosle un poco de relleno, así que le daremos 30 píxeles de la izquierda. 123 y luego se imagina desde el top 23. En realidad creo que podría hacer con más relleno a la izquierda, así que le daremos uno más. Bueno, 10 píxeles más de la izquierda. Muy bien. Lo haremos más grande porque sí creo que es un poco demasiado pequeño. Hará que sea 18 o el Texas realmente aliándose. Teoh estar en el centro de la línea de textura de la línea de la textura de la lección izquierda. Ahí vamos. Y entonces eso es tratar de hacer frente a la vista porque cualquiera se pegará a donde está. Dale un poco de peso y luego vamos a copiar pegar esta capa de texto. Doy a una categoría algo como diseño Web, y luego cambiamos la diversión de eso. 12. Se quitó el peso. Cambia el color a algo bastante parecido a cada chico. Y luego lo bajaremos. 10 picos Fuente. Cambia esto para que lo tengas alineado. Y ahí vamos. Contamos con nuestro primer portafolio más blanco. Ahora pongámoslo todo en un Greep porque queremos asegurarnos de que nuestras capas estén todas ordenadas bien. Eso es genial y artículo de cartera, y luego podemos copiar y pegar esto. Tráelo y asegúrate de que eso esté en línea. Toe estuvo de acuerdo que es, y tenemos nuestro artículo de presentación de puerto. Ahora queremos cambiar esta imagen para que podamos elegir imagen probable que tenga aquí, o simplemente podríamos conseguir otra imagen y copiar y pegar. Entonces hagamos eso Tomemos este podría estar basado en imagen. Ah, eso no es ¿Qué copia? Pegar imagen. Ahí vamos. Ahora hemos pegado nuestra imagen en En realidad cambiar el camino, incluso recorta la imagen dentro del cuadrado en el rectángulo. Apuesto que lo dejaré. ¿ Cómo es cómo es? Ahí vamos, y luego vamos a renombrar este también. Lo llamaremos algo así como revista Pion e. Dejaremos la sección Diseño Web y luego terminémoslo creando femenino qué poner más 40 artículos. 123 Asegúrese de que no esté alineado y tenga una cantidad igual de relleno para esta cartera. Los artículos en realidad pondrán en una foto, así que pongamos esa. Ahí vamos. Entonces pondremos algo así como iPad 30 una funda renombrar esto a fotografía Sweet y luego hagamos una más. Entonces para mostrarte rápidamente lo poderoso que cambia la imagen aquí, en realidad estoy seleccionando este rectángulo aquí. Se puede ver seleccionado el. Entonces he comando copiado mi imagen desde mi escritorio, y literalmente me acaban de poner en el comando V encendido o control V, y simplemente reemplaza la imagen. muy simple, Figuramuy simple, muy fácil hace que sea súper fácil a tus estúpidas imágenes de lugar siempre que necesites trabajos. Conjunto de base. Tengo un chico. Entonces eso es todo. Tenemos nuestra resección de cartera hecha esta manera importante alineada probablemente desde arriba. Así 12345 Fresco. Hagamos elección dentro de nuestra red. Lo es. Y terminamos con nuestra sección de portafolio. Asegurémonos de que esto también esté en el centro de distancia. Eso no estaba realmente en el centro. Ahí vamos. Por lo que para asegurarte de que tu artículo está en este centro estatal de una página, solo puedes seleccionarlo y luego usar una de estas herramientas aquí arriba, alinearlo, rasgar la página o para alinearlo con otro elemento. Entonces eso es todo para el aeropuerto para en realidad, necesitamos a Teoh. Este grupo nuestros artículos así pusieron cinco y ahí. Sí, tenemos nuestra sección de portafolio hecha. Entonces eso es todo para este. En el siguiente, diseñaremos el instalador 6. Pieles de pies: De acuerdo, así que bienvenido de nuevo. Ahora que tenemos una buena porción de nuestro sitio web abajo. Lo último que hay que hacer es ese pie una sección. Por lo que el fitter tiene el fondo grande. Tiene Jaime Sección ejércitos son título breve descripción y luego en botón de contacto. Entonces hagamos que nuestro marco sea mucho más grande. Vamos a darle un rectángulo. Ahora tenemos a nuestro fitter. Y entonces vamos a asegurarnos de que no tenga el mismo espacio fuera de entre las otras secciones. En realidad me acabo de dar cuenta de que la excepción de cartera no tiene 100 tipos de fotos. Ahí vas. Eso es mejor. Entonces, sí, vamos a asegurarnos de que tiene 100 fotos con Phoenix Sección 123456789 10. Bájala 100 píxeles y luego vamos a darle un color de fondo oscuro. Se pone aún más oscuro que eso. Debe bajar a algún lugar como nunca van. Eso también es copiar nuestros encabezados de sección hexagonales de las otras secciones dicen que también necesitamos asegurarnos de que eso sea legible, así que vamos a cambiar el color del texto como digamos que tenemos y luego vamos a bajarlo por lo que ha hecho. Ni siquiera lo sé. En realidad, vamos a bajarlo. Creo que deberías bajarlo por 50 dinero para bajarlo por más. A lo mejor 81 2345678 Sí, creo que eso se ve mejor. Entonces cambiemos esto. Miami Muy bien. Yo por ti. Siguiente proyecto ahí. Nos enfriamos. Ahora queremos volver a agregar un sitio de botones. Poner en un rectángulo como, digamos, No necesita No necesita ser demasiado quisquilloso en el tamaño y cualquier otra cosa que pueda ser para Button . Pero pongamos en un color para la mantequilla. Sí, me gusta me gusta ese color. A lo mejor. Dios, una noche pongamos en contacto conmigo. Entonces todo esto parece en muy legible, así que lo vamos a hacer blanco. Andi, hazlo un semi audaz como, digamos, eso también hace que el botón sea un poco más ancho. Y luego el texto central dentro de cualquier tipo. Genial, creo. Sí, bueno, quédate con el diseño cuadrado. Creo que el diseño cuadrado se ve bastante bien. Lo que también podríamos hacer es a pesar de que tengamos un botón de contacto conmigo, pero también podríamos poner un silencio. 123 Sí, también podríamos poner tal vez algo así como descargar mi régimen debajo. Suspiro. Ahí estamos cambiando el tamaño de fuente Teoh 12. Sí, tal vez haciendo regular en. Cambiemos el color también de él algo así. Ellos somos Así que ahí estamos. Tenemos el pie de hecho y eso es más o menos por esta página web personal muy básica . Ojalá te dé una buena idea fuera de mi sal trabajado proceso tardío y lo fácil que es hacer algo que te veas, ya sabes, bastante simple. Minimalista, También bueno al mismo tiempo. Ya sabes, no necesitas hacer de tu portafolio anuncios súper lujosos, todo tipo de animaciones. Principalmente debes hacer que tu trabajo haga la plática con seguridad. Así que sería chicos disfrutaron este rápido sough sitio web personal Guía de diseño ojalá te dé una buena visión y excesivamente, ya sabes, si estás interesado en conseguir un diseño, esa es una buena manera de empezar porque creo la mejor manera de aprender que hace algo Gracias por ver esto serían chicos lo disfrutaron