El secreto para crear un gran diseño web está en la estructura. Wireframing es el primer paso del proceso de diseño para delimitar la estructura principal y la ubicación del contenido de su sitio web.

Página de inicio de estructura metálica comercial Página de inicio de estructura metálica comercial Página de inicio de estructura metálica comercial
Una buena plantilla de estructura alámbrica de Adobe XD es un buen circunstancia para comenzar.

¿Estás trabajando en tu próximo tesina de diseño web? Este tutorial lo guiará a través de los pasos principales para crear una A utilitarioEstructura alámbrica dobe XD.

En este tutorial de Wireframes para diseño web en Adobe XD, cubriremos:

  1. ¿Qué es Adobe XD?
  2. ¿Qué es una estructura alámbrica?
  3. ¿Qué secciones debe incluir un buen diseño web?
  4. Cómo comenzar a hacer wireframing desde cero
  5. Cómo crear estructuras alámbricas en Adobe XD
  6. Cómo nominar la mejor plantilla de estructura metálica de Adobe XD para mi sitio web

1. ¿Qué es Adobe XD?

Lo primero es lo primero. Si eres nuevo en el mundo del diseño web y las herramientas, es importante que comprendas qué es Adobe XD, así como sus principales funciones. Adobe XD es una utensilio de diseño de UI / UX basada en vectores. Puede usar XD para diseñar aplicaciones hasta sitios web.

Mire este video rápido de Adi Purdila y obtenga una descripción común de Adobe XD:


2. ¿Qué es una estructura alámbrica?

La definición más simple dada por Google describe una estructura alámbrica como un “esbozo o proyecto de un producto de una pantalla”. En otras palabras, los wireframes son el apunte de un diseño web. A través de líneas, cuadros y formas, los wireframes indican la posición de diferentes tipos de contenido en el diseño de su diseño.

Servicios de lavandería Landing Page Wireframe Responsivo Servicios de lavandería Landing Page Wireframe Responsivo Servicios de lavandería Landing Page Wireframe Responsivo
Esta plantilla es una gran Akit de estructura alámbrica dobe XD para trabajar en su próximo diseño web.

  • Wireframing es un paso importante en cualquier proceso de diseño de pantalla. Principalmente le permite delimitar la dependencia de información de su diseño, haciéndolo más tratable…

3. ¿Qué secciones debe incluir un buen diseño web?

Antiguamente del wireframing, es una buena idea crear una serie de las secciones y el contenido que presentará su sitio web. Las secciones de una estructura de alambre de Adobe varían según el tipo de sitio web, pero estas son las principales a tener en cuenta:

  • Encabezamiento: esta radio generalmente incluye el logotipo, los enlaces de navegación y, a veces, una imagen destacada.
  • Encima de la tapa: Esto es lo primero que ve tu afortunado al entrar en tu web. Esta debe ser la sección más impactante de su sitio web.
  • Debajo del pliegue: este es donde se coloca más información para que el afortunado siga explorando.
  • Pie de página: esta es la parte inferior de un sitio web. Por lo común, incluye créditos, enlaces a redes sociales, términos y condiciones, etc.
estructura de diseño web estructura de diseño web estructura de diseño web
Estas son las secciones principales a considerar antaño de hacer una estructura alámbrica de Adobe.

Tenga en cuenta a sus principales usuarios y lo que están buscando.

Para este tutorial, crearé estructuras alámbricas para un sitio web de cartera creativa. Este tipo de sitio web suele estar dirigido a clientes potenciales y compañeros creativos. Crearé estructuras alámbricas para cuatro secciones:

  1. página de inicio
  2. portafolio
  3. página del tesina
  4. sobre

4. Cómo comenzar a hacer wireframing desde cero

Incluso antaño de rajar Adobe XD, le sugiero que esboce la estructura común del sitio web que desea crear. Soy una persona del tipo lapicero y papel, pero todavía podrías trabajar con Procreate o Photoshop.

Dibuje sus wireframes a mano o digitalmente para obtener ideas sobre la estructura y el contenido.

El sitio web de mi portafolio creativo contará con cuatro secciones, por lo que esbocé ideas de diseño y contenido para cada una. Su proyecto debe incluir utensilios tales como:

  • imágenes y vídeo
  • navegación
  • citación a la actividad (ordenanza)
  • galerías de imágenes
  • titulares
  • cuerpo de texto
Dibuje estructuras alámbricas para sacar ideas de su cabeza. Dibuje estructuras alámbricas para sacar ideas de su cabeza. Dibuje estructuras alámbricas para sacar ideas de su cabeza.
El wireframing a mano es una excelente modo de esbozar sus primeras ideas de diseño.

Notarás que estoy usando códigos visuales básicos para diferentes tipos de contenido, como cuadros, líneas y círculos. Ahora tiene una idea común de los utensilios que necesitará antaño de entrar en detalles con el esparcido, el peso y otras cuestiones técnicas.

5. Cómo crear estructuras alámbricas en Adobe XD

Es hora de variar nuestros bocetos en estructuras alámbricas. Avancemos y creemos algunos wireframes de pérdida fidelidad en Adobe XD. Broa Adobe XD y crear un nuevo Web 1920 x 1080 píxeles mesa de trabajo

Abra Adobe XD y cree una nueva mesa de trabajo web de 1920 x 1080 px. Abra Adobe XD y cree una nueva mesa de trabajo web de 1920 x 1080 px. Abra Adobe XD y cree una nueva mesa de trabajo web de 1920 x 1080 px.
Cree un nuevo archivo seleccionando el tamaño de mesa de trabajo normalizado de 1920 x 1080 px para web.

Paso 1: inserte un sistema de cuadrícula

Trabajar con una cuadrícula es esencia para crear un diseño receptivo.

Seguir el sistema de cuadrícula normalizado que utiliza Adobe XD es un buen punto de partida.

Sistema de cuadrícula en Adobe XD Sistema de cuadrícula en Adobe XD Sistema de cuadrícula en Adobe XD
Vaya al menú en el costado derecho de su pantalla y marque la casilla de demostración Cuadrícula.

Para activar la cuadrícula en sus mesas de trabajo, seleccione una mesa de trabajo, vaya al menú en el costado derecho de su pantalla y marque la casilla Cuadrícula caja. Selecciona el Diseño opción en el menú desplegable. El único ajuste que voy a hacer es configurar el Orondo del canalón a 20 px para tener un poco más de espacio entre los utensilios.

Ajuste el canalón a 20 px en Adobe XD Ajuste el canalón a 20 px en Adobe XD Ajuste el canalón a 20 px en Adobe XD
Ajusta el Orondo del canalón a 20 px para tener un poco más de espacio entre los utensilios.

Paso 2: crear mesas de trabajo

Cree una mesa de trabajo para cada sección de su diseño web.

Para el sitio web del portafolio creativo en el que estoy trabajando, crearé cuatro mesas de trabajo para cada una de mis secciones: Página de inicio, Portafolio, Página del tesina y Acerca de.

Crear una mesa de trabajo para cada sección Crear una mesa de trabajo para cada sección Crear una mesa de trabajo para cada sección
Creé cuatro mesas de trabajo para cada sección que diseñaré.

Paso 3: Traduce Sketch en Formas

Es hora de sacar ideas de tu vanguardia y ponerlas en la pantalla. Comience a traducir sus bocetos aproximados en formas básicas como rectángulos, círculos y cuadrados. Utilice la cuadrícula para colocar y espaciar su contenido.

Wireframes códigos visuales Wireframes códigos visuales Wireframes códigos visuales
Los códigos visuales ayudan a identificar los utensilios de diseño en sus wireframes.

Use diferentes códigos visuales para diferentes tipos de contenido.

Por ejemplo, utilice un rectángulo triste en la parte superior como señalador de posición del logotipo, rectángulos angostos para el menú principal, rectángulos más anchos para los titulares, grandes cuadros grises cruzados con una “x” para indicar imágenes y rectángulos negros con esquinas redondeadas para los ordenanza. Use grisáceo umbrío para indicar fondos de color y grisáceo claro para imágenes.

Wireframes en Adobe XD Wireframes en Adobe XD Wireframes en Adobe XD
Usa el sistema de cuadrícula en tu Aestructura alámbrica dobe XD como callejero para colocar sus cajas.

Se prórroga que algunas áreas y secciones funcionen de modo diferente en forma digital, por lo que está correctamente ajustar algunos de sus dibujos.

Paso 4: especificar el contenido

Ahora que tiene la estructura común, vale la pena entrar en más detalles sobre su contenido. Agregue texto a algunos de sus cuadros para indicar qué tipo de contenido habrá allí, como logotipo, enlaces de navegación, texto del cuerpo, resaltados, etc. Esto todavía es útil para identificar los utensilios que deberá tener en cuenta en su diseño. sistema.

Especifique contenido para cada área y sección en Adobe XD Especifique contenido para cada área y sección en Adobe XD Especifique contenido para cada área y sección en Adobe XD
Agregue texto para especificar el contenido que aparecerá en cada cuadro.

¡Y ahí tienes! Sabes cómo crear una estructura básica para Aestructura alámbrica dobe XD.

6. Cómo nominar la mejor plantilla de estructura metálica de Adobe XD para mi sitio web

Trabajar con una plantilla puede acelerar el proceso de diseño. Sin incautación, siempre es útil memorizar cómo se crean los wireframes para tener más trucos de personalización bajo la manga. La mejor parte de trabajar con plantillas de estructura alámbrica de Adobe XD es que ya vienen con estilos de imagen y texto para que los reemplace con su contenido.

Curso en línea Wireframe Sitio web Curso en línea Wireframe Sitio web Curso en línea Wireframe Sitio web
Esta es una excelente plantilla de Adobe XD para un sitio web educativo en cuerda.

Recuerda, el diseño siempre debe seguir al contenido.

Al nominar la plantilla de wireframes adecuada, debe pensar en el propósito de su sitio web. ¿Estás creando un ecommerce, una tienda de muebles o un sitio web de cursos online? Busque plantillas específicas o un kit de estructura alámbrica de Adobe XD que incluya los utensilios principales que le gustaría incluir en su sitio web.

Más inspiración y fortuna de Adobe XD

El wireframing es una etapa esencia del proceso de diseño. Se necesita un poco de praxis y un montón de proyectos de diseño web para sufrir tus habilidades de wireframing a un nivel profesional. Igualmente es muy útil mirar muchas referencias y comenzar a notar los utensilios y la estructura que hacen que cada diseño sea único.

Hemos seleccionado algunos artículos y tutoriales para ayudarlo con su inspiración y fortuna de diseño web de Adobe XD:

Deja una respuesta