[ad_1]
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.
¿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:
- ¿Qué es Adobe XD?
- ¿Qué es una estructura alámbrica?
- ¿Qué secciones debe incluir un buen diseño web?
- Cómo comenzar a hacer wireframing desde cero
- Cómo crear estructuras alámbricas en Adobe XD
- 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.
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.
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:
- página de inicio
- portafolio
- página del tesina
- 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
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
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.
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.
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.
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.
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.
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.
¡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.
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:
