Elementos de diseño para un sitio web

¿Le interesa aprender los trucos para diseñar composiciones de sitios web y elementos que resulten claros? ¡Está en el lugar adecuado!

Adobe Illustrator proporciona un entorno de diseño de píxeles perfectos para crear elementos para web flexibles y fluidos. Le ofrece todo lo que necesita para crear un diseño web claro y nítido: gráficos vectoriales, iconos de medios interactivos, componentes escalables, generación de CSS, exportación de SVG, estructuras y símbolos reutilizables.

Diseño de sitios web

Debe probar

Adobe XD: la última solución integral de Adobe para UX/IU basada en vectores para diseñar sitios web, aplicaciones móviles y mucho más.

Cinco principios básicos para diseños web eficaces

Para crear una experiencia web de calidad, asegúrese de prestar especial atención a los siguientes elementos de diseño web:

  • Navegación sencilla con menos clics
  • Uso óptimo y equilibrado del espacio de la pantalla, visualización independiente del dispositivo
  • Estructura mínima y limpia: uso de cuadrículas, mosaicos, tarjetas
  • Gráficos visuales atractivos e interesantes
  • Tipografía clara pero artística

Antes de comenzar

Las ilustraciones que diseñe en Illustrator suelen girar alrededor de los siguientes temas de diseño:

  • Formas y trazados
  • Colores y patrones
  • Texto y fuentes
  • Imágenes y efectos especiales

¿Quiere más información? Consulte Componentes esenciales de un sitio web.

Configuración de un documento web

Para configurar un documento web:

  • Elija Archivo – Abrir. En el cuadro de diálogo Nuevo documento, haga clic en la pestaña Web. En la lista de ajustes preestablecidos, elija un tipo de documento web que se ajuste a sus necesidades.
  • Previsualice y descargue una plantilla de muestra. 
Elegir un documento web
Elegir un documento web

Diseño de páginas webs interactivas

Con la tecnología en continua expansión, es importante diseñar un sitio web que responda de forma fluida en cualquier plataforma de sistema operativo, tamaño de pantalla y orientación del dispositivo.

Para crear un diseño web interactivo, tenga en cuenta los siguientes elementos:

  • Cuadrículas y diseños flexibles para crear un diseño de sitio web que pueda redimensionarse a cualquier ancho de pantalla, como escritorio, tableta, dispositivo móvil.
  • Medio escalable, que incluye imágenes, vídeos y formatos similares.
  • Consultas de medios dinámicos para añadir estilos específicos para navegadores web y dispositivos.

Creación de una estructura de sitio web

Un sitio web limpio y estructurado atrae a más visitantes. Al diseñar un sitio web:

  • Empiece por diseñar la estructura del sitio web para visualizar distintos elementos de la pantalla y colocarlos de forma organizada en la página web.
    Sugerencia: Puede añadir mosaicos o tarjetas para facilitar la navegación y dar un aspecto moderno.
  • Al crear la interfaz de usuario de primer nivel, continúe incorporando contenido y otros elementos artísticos.
Estructura del sitio web
Algunas plantillas de sitio web para diferentes pantallas

Sugerencias y trucos para un diseño web organizado

  • Para un aspecto y una sensación más suaves, divida el sitio web en secciones relevantes. Seleccione Objeto Sector.
  • Utilice reglas, cuadrículas y guías para comprobar y probar áreas de referencia y ajustar elementos de la pantalla.
    • Elija Ver – Guías.
    • Elija Ver – Mostrar cuadrícula.
    • Elija Ver – Reglas.
  • Para crear un esquema visual preciso, coloque objetos rectangulares o componentes de texto en la página web para dividir la pantalla en secciones relevantes.
  • Al centrar la atención en el contenido principal de la página web, no olvide añadir un logotipo creativo, una imagen inspiradora, un eslogan, una declaración de la misión, según sea aplicable.
  • Para guardar la estructura del sitio web, elija Exportar – Guardar para Web (Herencia). También puede elegir los sectores que desea mostrar en el archivo guardado.

Véase también:

Sectores y mapas de imágenes

Diseño de un banner web

¿Está realizando una campaña de marketing para promocionar y anunciar los productos o servicios de su sitio web? ¡Cree un banner llamativo en cuestión de minutos!

Para crear un banner web, haga lo siguiente:

  • Elija el tamaño de documento adecuado, normalmente el documento A4 funciona bien para los banners.
  • Cree un contorno de banner con la ayuda de la herramienta Rectángulo y especifique las dimensiones adecuadas.
  • Añada gráficos, texto, degradados y sea tan creativo como desee.
Banner web

Recursos relacionados

Logotipo de Adobe

Inicia sesión en tu cuenta