Cómo crear un diseño de sitio web médico o de salud en Figma

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

En el siguiente tutorial aprenderás a crear un diseño de sitio web médico en Figma.

Lo que aprenderás en este tutorial de Figma

Cómo diseñar web con Figma
Cómo configurar un marco y una cuadrícula simple en Figma
Cómo guardar un estilo de color en Figma
Cómo importar fotos en Figma
Cómo agregar diseños automáticos en Figma
Cómo crear componentes en Figma
Cómo crear elementos de desplazamiento en Figma
Cómo crear elementos fijos en Figma
Cómo crear efectos de desplazamiento en Figma
Cómo agregar capas en Figma
Cómo hacer prototipos en Figma

Para más inspiración sobre cómo ajustar o mejorar el diseño final de tu sitio web de práctica médica, puedes encontrar muchos recursos en GraphicRiver.

Lo que necesitarás

Necesitarás el siguiente recurso para completar el diseño de este sitio web médico:

Ilustración del vector de ambulancia
Foto del fisioterapeuta
Foto del doctor
Foto de médico masculino
Foto de médico posando en uniforme
40 iconos de teléfono

1. Cómo configurar un marco y una cuadrícula simple

Paso 1

Crea un nuevo archivo y selecciona la Herramienta Marco (F) en la barra de herramientas.

Céntrate en la barra lateral derecha y selecciona la plantilla Escritorio para crear el marco inicial.

Paso 2

Antes de empezar a trabajar en el diseño, vamos a configurar una cuadrícula simple que facilitará la alineación de elementos.

Céntrate en el panel Diseño de la barra lateral derecha y haz clic en la sección Cuadrícula de diseño para agregar una cuadrícula al diseño.

Haz clic en el icono azul para acceder a la configuración de la cuadrícula. Selecciona Columnas en el menú desplegable y, después, escribe la configuración que se muestra en la siguiente imagen.

2. Cómo crear la barra de menús del diseño del sitio web médico

Paso 1

Selecciona la Herramienta Rectángulo (R) de la barra de herramientas y crea una forma de 1360 x 90 px. Céntrate en la barra lateral derecha, establece el Radio de esquina en 10 y, después, haz clic en la rueda Color de relleno y cámbialo a #4593FF.

Cambia a la herramienta Mover (V) y mueve el rectángulo redondeado como se muestra en la segunda imagen. Como alternativa, puedes introducir 40 en el cuadro X y 40 en el cuadro Y para mover numéricamente la forma en la ubicación deseada.

Como estás a punto de usar este color azul muchas veces a lo largo de este tutorial vamos a guardarlo como un estilo de color para que puedas acceder o editarlo fácilmente más tarde.

Céntrate en la sección Color de relleno y haz clic en el icono de punto cuádruple para abrir el panel desplegable Estilos de color. Haz clic en el botón Crear estilo (+), asigna un nombre a este nuevo estilo de color Azul y, después, haz clic en el botón Crear estilo.

Paso 2

A veces, es posible que quieras deshabilitar la cuadrícula. Puedes hacerlo fácilmente desde la barra lateral derecha o utilizando el método abreviado de teclado Shift-Control-4.

Escoge la herramienta Texto (T) de la barra de herramientas, simplemente haz clic dentro del marco y céntrate en la sección Texto del panel Diseño.

Selecciona la fuente Montserrat, establece el estilo en Medio y el tamaño en 13. Cambia el color del texto a #F8FBFF y, después, escribe "INICIO".

Guarda el color utilizado para el texto como un nuevo estilo de color y ponle el nombre Azul bajito.

Paso 3

Mantén presionada la tecla Alt y arrastra una copia del texto a la derecha, como se muestra en la siguiente imagen. También manteniendo presionada la tecla Mayús mientras arrastras restringirá el movimiento de la copia a una sola dirección. Haz doble clic en el nuevo texto para editarlo y reemplaza "INICIO" por "NOSOTROS".

Repita la misma técnica para agregar las piezas de texto "SERVICIOS", "MÉDICOS" y "CONTACTO". Asegúrate de que siempre estés dejando un espacio de 70 px entre cada pieza de texto.

Paso 4

Selecciona tus cinco piezas de texto, haz clic con el botón derecho en la selección y ve a Agregar diseño automático o usa el método abreviado de teclado Mayús-A. Esto agregará un marco alrededor de tu selección y te dará varias opciones para editar rápidamente el contenido.

Checa dentro de la barra lateral derecha y observa que el Espaciado entre elementos se esté en 70. La edición de este valor ajustará inmediatamente el espaciado entre los elementos de texto. Puedes arrastrar fácilmente elementos de texto para cambiar su ubicación dentro de la pila o puedes eliminar un elemento de texto y gracias a Diseño automático los elementos restantes ajustarán automáticamente su ubicación.

Asegúrate de que los elementos de texto todavía estén seleccionados y céntralos en el rectángulo redondeado azul, como se muestra en la segunda imagen.

Paso 5

Elige la herramienta Elipse (O) y mantén presionada la tecla Mayús para crear fácilmente un círculo de 13 px. Rellena esta nueva forma con Azul bajito y ponla como se muestra en la primera imagen.

Cambia a la herramienta Mover (V), mantén presionada la tecla Alt y la tecla Mayús y arrastra una copia de tu círculo hacia la derecha como se muestra en la segunda imagen.

Selecciona ambos círculos y agrega copias encima de ellos (Control-C > Control-Shift-V). Selecciona las copias y gíralas 90 grados, como se muestra en la imagen final.

Paso 6

Elige la herramienta Texto (T) de la barra de herramientas, agrega el texto "Especialista en salud" y pon tu color en Azul bajito. Usa la misma fuente Montserrat que usaremos para todo el diseño, pon el estilo en Negrita y el tamaño en 19. Selecciona solo la parte "Especialista" de tu texto y cambia el estilo a Regular.

Selecciona el texto junto con los cuatro círculos y agrúpalos (Control-G). Muévete a la barra lateral izquierda, en el panel Capas, haz doble clic en tu grupo y cámbiale el nombre a "Logo". Siempre es una buena idea nombrar y organizar los elementos de tu diseño para acceder fácilmente a ellos cuando puedas necesitarlos de nuevo.

Paso 7

Céntrate en el lado derecho de tu forma azul. Elige la herramienta Texto (T), agrega el texto "REGISTRARSE" y pon su color en negro, por ahora. Pon el estilo de fuente en Negrita y el tamaño en 15.

Usa el método abreviado de teclado Mayús-A para agregar diseño automático para este nuevo texto y ve al panel Diseño. Primero, céntrate en la sección Relleno de color para colorear el marco de este texto. Usa el botón + para agregar un nuevo relleno y pon su color en Azul bajito. Ve a la sección Diseño automático y establece el relleno horizontal y vertical en 10. Por último, pon el Radio de esquina en 5 y cambia el color del texto a Azul.

Paso 8

Asegúrate de que el botón sigue seleccionado y haz clic en el botón Crear componente en la barra de herramientas. Cambia el nombre del nuevo componente "Botón".

Elige la herramienta Texto (T), agrega el texto "INICIAR SESIÓN" y pon su color en Azul bajito. Establece el estilo de fuente en Negrita y el tamaño en 15. Coloca este nuevo texto como se muestra en la segunda imagen.

3. Cómo crear el menú desplegable del diseño del sitio web médico

Paso 1

Elige la herramienta Texto (T), agrega un texto "Phillis K Vance MD" y pon su color en negro, por ahora. Establece el estilo de fuente en Medio y el tamaño en 10.

Agrega Diseño automático (Mayús+A) para este texto y céntrate en la sección Diseño automático del panel Diseño. Cambia la orientación a Vertical, establece el Relleno Horizontal en 10 y el Relleno Vertical en 15. Agrega un nuevo relleno y pon su color en Azul, establece el Radio de esquina en 5 y, después, cambia el color del texto a blanco (#FFFFFF). Guarda este color como un nuevo estilo y ponle el nombre Blanco.

Por último, usa uno de esos deslizadores laterales para aumentar el ancho de este marco de diseño automático a 180 px.

Paso 2

Cambia a la herramienta Mover (V), mantén presionada la tecla Alt y la tecla Mayús y arrastra una copia del marco de diseño automático, como se muestra en la primera imagen. Reemplaza el nombre existente por el que se muestra en la imagen.

Repite la misma técnica para agregar otros dos marcos de diseño automático, como se muestra a continuación.

Paso 3

Selecciona los cuatro marcos de diseño automático, haz clic con el botón derecho en uno de ellos y ve a Selección de marcos (Control-Alt-G) para ponerlos todos dentro de un marco.

Cambia el nombre de este nuevo marco "Despegable.Doctores" y muévelo a algún lugar fuera de tu marco principal.

4. Cómo crear el encabezado del diseño del sitio web médico

Paso 1

Descarga esta ilustración vectorial de ambulancia y ajusta los colores de fondo masomenos como se muestra a continuación.

Usa la herramienta Colocar imagen (Mayús-Control-K) de la barra de herramientas para insertar esta imagen dentro del diseño del sitio web de práctica médica. Redimensiona y colócalo como se muestra en la siguiente imagen. Usa el método abreviado de teclado Shift-Control-[ para enviarlo hacia atrás, detrás de los elementos existentes.

Paso 2

Elige la herramienta Texto (T), agrega el texto "Especialistas dedicados a la atención médica" y colócalo como se muestra en la siguiente imagen. Pon el estilo de fuente en Negrita y el tamaño en 40. Cambia el color del texto a #3B4053 y, después, guarda este color como estilo y ponle el nombre Gris.

Paso 3

Elige la herramienta Texto (T) y agrega algunos párrafos, como se muestra a continuación. Establece el estilo de fuente en Light y el tamaño en 40, aumenta la Altura de línea a 24 y, después, cambia el color a Gris.

Paso 4

Céntrate en la barra lateral izquierda y cambia del panel Capas al panel Activos. Selecciona tu componente "Botón", simplemente arrástralo dentro de tu marco y colócalo como se muestra en la primera imagen.

Ahora, puedes ajustar fácilmente la configuración de esta instancia de componente. Haz doble clic en el texto y reemplaza "REGISTRARSE" por "APRENDER MÁS" y, luego, céntrate en la sección Colores de selección del panel Diseño. Simplemente reemplaza el estilo Azul por el Blanco y luego el estilo Azul bajito por el Azul.

5. Cómo crear los cuadros de texto del diseño del sitio web médico

Paso 1

Usando la herramienta Rectángulo (R), crea una forma de 400 x 350 px. Establece el Radio de esquina en 10 y cambia el color de relleno a Azul bajito.

Con la herramienta Texto (T), agrega un encabezado y un párrafo simple. Pon el estilo de fuente en Negrita y el tamaño en 20 para el encabezado. Para el párrafo, pon el estilo de fuente en Light, reduce el tamaño a 12 y aumenta la altura de línea a 22. Usa Gris para colorear ambos elementos de texto.

Vuelve al panel Activos y arrastra una nueva instancia del componente Botón dentro del marco, como se muestra en la segunda imagen.

Paso 2

Selecciona esa nueva instancia de Botón, reemplaza el texto existente por "MÁS INFORMACIÓN" y ajusta los colores como se muestra en la primera imagen.

Selecciona este componente junto con las dos piezas de texto y ese rectángulo redondeado y crea un marco de diseño automático (Mayús+A). Asegúrate de que la orientación está establecida en Vertical y, después, pon el Relleno Horizontal y Vertical en 50 y el Espaciado entre elementos en 30.

Una vez que hayas terminado, mueve el marco de diseño automático como se muestra en la cuarta imagen. Puedes habilitar la Cuadrícula de diseño (Shift-Control-4) para alinear la selección mucho más fácil.

Paso 3

Asegúrate de que el marco de diseño automático todavía está seleccionado y conviértelo en un nuevo componente.

Paso 4

Arrastra una copia del nuevo componente a la derecha, como se muestra en la primera imagen.

Céntrate en esta nueva instancia de componente y reemplaza el texto utilizado para el encabezado y el botón. Ve al párrafo, reemplaza el texto con los horarios y usa la configuración de fuente que se muestra en la tercera imagen.

Paso 5

Agrega otra instancia del componente más reciente y colócala como se muestra en la primera imagen. Reemplaza el texto utilizado para el encabezado y el botón, como se muestra en la segunda imagen.

6. Cómo crear la caja de desplazamiento horizontal del diseño del sitio web médico

Paso 1

Haz clic en el nombre del marco principal para seleccionarlo. Pasa la flechita sobre el borde inferior y haz clic y arrastra para aumentar la altura de tu marco a 1640 px.

Paso 2

Elige la herramienta Texto (T), agrega la pieza de texto "Médicos" y colócala como se muestra en la siguiente imagen. Establece el estilo de fuente en Negrita y el tamaño en 40 y cambia el color a Gris.

Paso 3

Usando la herramienta Rectángulo (R), crea una forma de 427 x 190 px y colócala como se muestra en la siguiente imagen. Pon el Radio de esquina en 10 y cambia el color de relleno a Azul bajito.

Paso 4

Usando la herramienta Elipse (O), crea un círculo de 110 px y colócalo como se muestra en la primera imagen.

Asegúrate de que el círculo permanezca seleccionado y cambia a la herramienta Colocar imagen (Mayús-Control-K). Selecciona la foto del fisioterapeuta y haz clic dentro de la forma seleccionada para colocar la imagen dentro de esa forma.

Ve a la barra lateral derecha y haz clic en el relleno de imagen para abrir el panel desplegable. Selecciona Recortar en el menú desplegable y céntrate en la imagen. Pasa la flechita sobre el borde de la imagen para redimensionarla, mantén presionada la tecla Mayús para restringir las proporciones de la imagen y haz clic y arrastra para mover la imagen como quieras. Una vez que hayas terminado, pulsa la tecla Esc.

Paso 5

Elige la herramienta Texto (T), agrega el texto "Phillis K Vance MD" y colócala como se muestra en la primera imagen. Establece el estilo de fuente en Medio y el tamaño en 18 y cambia el color a Gris.

Con la misma herramienta, agrega el texto "Medicina familiar". Reduce el tamaño de fuente a 14 y, después, agrega diseño automático (Mayús+A). Asegúrate de que la orientación está establecida en Horizontal y, luego, pon el Relleno y el Espaciado en 10. Agrega un nuevo relleno y establece su color en Gris, selecciona el texto y cambia su color a Blanco y, después, coloca este marco de diseño automático como se muestra en la tercera imagen.

Paso 6

Selecciona el círculo de imagen relleno junto con el texto, el marco de diseño automático y el rectángulo redondeado que se encuentra en la parte posterior y conviértelos en un nuevo componente.

Paso 7

Arrastra una copia del nuevo componente a la derecha, como se muestra en la primera imagen.

Céntrate en esta nueva instancia de componente y selecciona el círculo de imagen relleno. Usa la herramienta Colocar imagen (Shift-Control-K) para reemplazar la imagen existente por esta: fisioterapeuta. Haz clic en el botón Recortar en la barra de herramientas para activar la configuración de recorte y ajustar la imagen como quieras.

Una vez que hayas terminado, ve al texto y cámbialo como se muestra en la tercera imagen.

Paso 8

Agrega otras dos instancias del componente más reciente como se muestra a continuación. Reemplaza las imágenes y cambia el texto como se muestra en las siguientes imágenes.

Paso 9

Selecciona los cuatro componentes resaltados en la siguiente imagen, haz clic con el botón derecho en uno de estos elementos y ve a Selección de marcos (Control-Alt-G). Nombra este nuevo marco "Doctores".

7. Cómo crear el pie de página del diseño del sitio web médico

Paso 1

Usando la herramienta Rectángulo (R), crea una forma de 1440 x 214 px, llénalo con Azul bajito y colócalo como se muestra en la primera imagen.

Selecciona tu grupo "Logo" y duplícalo (Control-C > Control-V). Coloca este nuevo grupo como se muestra en la segunda imagen y cambia el color de todos los elementos a Azul.

Paso 2

Elige la herramienta Texto (T), agrega el texto "SERVICIOS" y colócala como se muestra en la primera imagen. Establece el estilo de fuente en Negrita y el tamaño en 13 y cambia el color a Gris.

Agrega otras cuatro piezas de texto debajo de esta, como se muestra en la segunda imagen. Cambia el estilo de fuente de estos nuevos textos a Medio y reduce el tamaño a 10.

Paso 3

Duplica la columna de texto realizada en el paso anterior y coloca las copias como se muestra en la primera imagen. Reemplaza el texto existente por el que se muestra a continuación.

Elige la herramienta Texto (T), agrega la pieza de texto "CONTACTO" y colócala como se muestra en la segunda imagen. Establece el estilo de fuente en Negrita y el tamaño en 13 y cambia el color a Gris.

Paso 4

Con la herramienta Texto (T), agrega el texto "(404)123 - 4567". Pon el estilo de fuente en Negrita y el tamaño en 15 y, después, Agregar diseño automático (Mayús+A).

Establece el Relleno horizontal en 40 y el Relleno vertical en 20. Agrega un relleno y cambia su color a Azul, pon el Radio de esquina en 5 y no olvides cambiar el color del texto a Blanco.

Paso 5

Copia el icono del teléfono de este paquete 40 iconos de teléfono, y pégalo dentro de tu archivo Figma.

Selecciona este objeto y simplemente arrástralo dentro de tu marco de diseño automático para incorporarlo. Selecciona todo el marco y aumenta el Espaciado entre elementos a 20 para aumentar fácilmente el espacio entre este icono de teléfono y el texto. Antes de seguir adelante, recuerda cambiar el color del icono del teléfono a Blanco.

8. Cómo crear prototipos del diseño de tu sitio web de práctica médica

Paso 1

Primero, vamos a crear los estados de desplazamiento para los elementos del menú desplegable.

Selecciona la herramienta Mover (V) y céntrate en tu marco "Despegable.Doctores". Selecciona el primer marco de diseño automático, mantén presionada la tecla Alt y arrastra una copia a la derecha como se muestra en la primera imagen.

Selecciona esta copia y céntrate en el panel Diseño. Cambia el color de relleno a Blanco y el color del texto a Azul. Usa el botón + para agregar un trazo, alinéalo en Interior y pon el color en Azul.

Muévete a los otros tres marcos de diseño automático desde tu marco "Despegable.Doctores" y repite la misma técnica.

Paso 2

Selecciona todas las formas que componen la barra de menús y agrúpalas (Control-G). Con este nuevo grupo seleccionado, céntrate en la barra lateral derecha y marca la casilla Fijar posición al desplazarse. Esto bloqueará la posición de tu grupo y te asegura de que permanezca en la misma ubicación en un prototipo de desplazamiento.

Paso 3

Céntrate en la barra lateral derecha y cámbiate del panel Diseño al panel Prototipo. Con el modo Prototipo activado puedes establecer conexiones entre marcos y elementos en tu diseño.

Selecciona el texto "DOCTORS" en la barra de menús, haz clic en el botón más y simplemente arrastra el cable al marco "Despegable.Doctores". Una vez creada la conexión, se abrirá el panel desplegable Interacción.

Establece En Hacer clic como activador y Abrir superposición como interacción. Selecciona Manual en el menú desplegable para colocar manualmente el menú desplegable donde quieres que aparezca cuando los usuarios hagan clic en el botón "MÉDICOS". Marca la casilla Cerrar al hacer clic fuera y mantén la Animación establecida en Instantáneo.

Una vez que hayas terminado, puedes hacer clic en ese botón de reproducción desde la esquina superior derecha de la pantalla para probar la animación.

Paso 4

Selecciona el primer marco de diseño automático de tu marco "Despegable.Doctores" y conéctalo con "Marco 1".

Establece Desplazamiento blanco como activador y Abrir superposición como interacción. Selecciona Manual en el menú desplegable para colocar manualmente "Marco 1" en la parte superior de tu selección. Mantén la Animación establecida en Instantáneo.

Muévete a los otros tres marcos de diseño automático y usa las mismas técnicas para conectarlos con tus marcos correspondientes.

Paso 5

Selecciona el marco "Doctores", selecciona Desplazamiento horizontal en el menú desplegable Comportamiento de exceso y debes tener en cuenta ese icono de signo de exclamación que te informa que el contenido debe ser mayor que el marco para que el desplazamiento funcione. Para solucionar este problema, desplázate sobre el borde derecho del marco seleccionado y arrástralo al borde derecho del marco principal. Este rectángulo será el área de desplazamiento designada.

Paso 6

Selecciona tu marco principal, desplázate sobre el borde inferior y arrástralo hacia arriba para disminuir la altura del marco seleccionado a 1024 px. Pon un Desplazamiento vertical y luego puedes hacer clic en ese botón Reproducir para probar tu diseño final.

¡Felicitaciones! ¡Tu diseño de sitio web médico está completo!

Así es como debería verse. Espero que hayas disfrutado de este tutorial y puedas aplicar estas técnicas en tus futuros proyectos. No dudes en compartir tu resultado final en la sección de comentarios.

Siéntete libre de ajustar el diseño del sitio web de práctica médica y hacerlo tuyo. Puedes encontrar algunas grandes fuentes de inspiración en GraphicRiver, con soluciones interesantes para el diseño web con Figma.

¿Quieres aprender más?

Tenemos muchos tutoriales en Tuts +, de principiante a nivel intermedio, ¡checálos!