Una plantilla de maqueta de sitio web puede ser un salvavidas de diseño. Facilita mostrar el concepto de diseño de un sitio web en una configuración que representa el uso real (en muchos dispositivos diferentes). Pero, ¿cómo puede personalizar una plantilla de maqueta de un sitio web y colocar su propio diseño? Así es cómo.
Hay dos formas de empezar. Puede crear su propia plantilla de maqueta de sitio web para usar en proyectos o descargar una para comenzar rápidamente. Lo bueno es que hay tantas opciones de plantillas para ayudar a los clientes a visualizar un nuevo diseño en tiempo real.
Aquí encontrará todo lo que necesita saber sobre la personalización de una plantilla (para empezar, y la búsqueda de una plantilla estupenda).
¿Qué es una plantilla de maqueta de sitio web?
A los clientes les encanta ver un diseño terminado en una plantilla de maqueta, porque les da una mejor idea de lo que está pensando el equipo de diseño. La mayoría de las plantillas de maquetas de sitios web vienen en forma de un archivo editable de Adobe Photoshop. El diseño está diseñado para que pueda pegar una captura de pantalla de su sitio web en un marco de aspecto realista, como mostrar la página de inicio de un sitio web en una computadora, tableta o dispositivo móvil real.
Las plantillas de maquetas de sitios web pueden incluir una sola imagen, varias imágenes y representaciones en diferentes orientaciones. Una buena maqueta puede proporcionar una gran visualización de cómo se verá un producto terminado en el uso real.
Si bien puedes hacer tus propias maquetas, hay muchas opciones disponibles para descargar. La mayoría de estas plantillas se crean como archivos PSD utilizando capas y objetos inteligentes para crear el diseño final, mientras se mantienen las propiedades visuales del archivo. Esto resulta útil cuando se utiliza una maqueta que utiliza una orientación interesante, como 3D o vista en perspectiva.
La mayoría de las plantillas de maquetas de sitios web incluyen una combinación de imágenes vectoriales y de mapa de bits, así que exporta con cuidado. Desea asegurarse de que la imagen de su sitio web se vea tan bien como sea posible antes de mostrarla.
Cómo personalizar una plantilla de maqueta
Si bien un archivo de Photoshop con varias capas de aspecto extraño puede ser un poco intimidante, personalizar un modelo de maqueta no es un proceso complicado. Solo necesitas:
- Encuentra la plantilla de maqueta de un sitio web que te guste. (Puede crear las suyas propias, pero con tantas opciones disponibles, recomendamos la opción de descarga). Busque una plantilla que resalte las características de su diseño, como las múltiples vistas de sitios web receptivos (computadora de escritorio, tableta y teléfono), con una Fondo que se adapta al estilo del proyecto (blanco o negro frente a un fondo colorido o estilo fotorrealista).
- Descomprima la descarga y confirme que tiene todas las partes necesarias: un archivo PSD con la maqueta editable, un archivo JPG que le muestra el aspecto del diseño (opcional) y un archivo readme o de información con cualquier información e instrucciones de licencia.
- Abra el archivo PSD en Photoshop y eche un vistazo a las capas. Busque la capa que dice 'Drop Your Design Here' o similar (¡siempre hay una que se destaque con esta instrucción!)
- Haga doble clic en esa capa para abrirla.
- Tome las capturas de pantalla adecuadas de su diseño, dimensionadas para una resolución óptima y para mostrar exactamente lo que desea que la gente vea en el diseño de la maqueta final.)
- Copie y pegue, o arrastre y suelte sus imágenes o contenido en la capa apropiada, redimensionando según sea necesario para llenar el espacio.
- Presione Ctrl-S, o Cmd-S, para guardar la capa inteligente, luego regrese a la imagen original. Voila! Deberías ver tu nueva captura de pantalla en la maqueta.
- Exporte el archivo, utilizando el tamaño y el formato que necesita, para mostrar.
Cómo utilizar una plantilla de maqueta de sitio web
Una vez que haya personalizado una plantilla de maqueta de sitio web, ¿qué hace con ella? Estos diseños aparentemente simples tienen muchas aplicaciones prácticas. Puede utilizar una plantilla de maqueta de sitio web para:
- Vista previa de diseños para clientes
- Preparar marketing y promociones post-lanzamiento.
- Incluir en carteras impresas
- Sumbita las entradas de un concurso, cuando planeas presumir el diseño final
Todo lo que tiene que hacer para usar una plantilla de maqueta de un sitio web es exportar su diseño personalizado a un formato utilizable. La mayoría de las veces, esto incluye dos opciones: un archivo de imagen de alta resolución para aplicaciones de impresión y un archivo de resolución web para usar en línea o para compartir correos electrónicos.
Dónde encontrar una plantilla de maqueta de sitio web
Entonces, todo esto probablemente plantea la pregunta: ¿Dónde encuentra una de estas plantillas prácticas de maquetas para sitios web? Hay muchas opciones gratuitas y de pago disponibles de una variedad de fuentes.
También tenemos un par de excelentes recopilaciones que incluyen un montón de maquetas con las que puedes comenzar de inmediato.
- Más de 20 plantillas de maquetas de aplicaciones y sitios web con mejores respuestas
- 20+ Mejor sitio web PSD Perspective Mockups
10 maquetas gratuitas de sitio web para empezar
Para asegurarnos de que todos estén listos para comenzar a utilizar una maqueta de un sitio web, hemos encontrado 10 opciones excelentes y gratuitas para ayudarlo a comenzar. Algunas de estas maquetas también se pueden encontrar en otros redondos de Design Shack.)
2 MacBook Pro Desk Mockups
Showcase responsivo PSD maquetas
Vector Apple Outline Device PSD
Escaparate plano sensible
IPad blanco y iPhone piso maqueta
MacBook y iPhone en Table Mockup
Maquetas de dispositivos alámbricos de dispositivos de Apple
Diseño Web Responsive Showcase Mockup
Maqueta de MacBook Air
MacBook Pro Retina Display PSD
Conclusión
Personalizar una plantilla de maqueta de sitio web para mostrar un proyecto es una gran herramienta para tener en tu arsenal. Incluso si solo tiene un par de minutos para prepararse para una presentación, puede incluir el diseño de su sitio web en un escenario de la vida real para una apariencia elegante.
Si bien es posible que no le importe la presentación general de un diseño o una idea, los clientes definitivamente lo notarán. Este es uno de esos atajos rápidos y fáciles que los diseñadores (y los profesionales independientes) pueden tomar para causar una gran impresión. ¡Diviértete personalizando una plantilla para tus proyectos!
Maquetas de sitios web
Encuentre la maqueta de sitio web que mejor se adapte a sus necesidades, para mostrar su diseño web en todo tipo de dispositivos, pantallas y formatos. Además, ¡aprende a usarlos con gran efecto!