Diseño de una maqueta de sitio web en Illustrator

Soy bastante nuevo aquí, así que no sé cuánto "en detalle" puedo llegar, pero aquí hay 2 consejos para diseñar para la web (ya sea una aplicación o un sitio web).

Diseño en píxeles

• Como señaló @Darth_Vader, no use pulgadas ni ninguna otra medida además de píxeles para diseñar en Illustrator para diseño web.

Configuración del proyecto Illustrator para diseño web (fuente: seeparkbox)

Crear un kit de interfaz de usuario

• Si tiene que usar elementos más de una vez, le sugiero que cree un kit de interfaz de usuario, ya sea en el Panel de símbolos

Kit de interfaz de usuario guardado en la biblioteca de símbolos (fuente: smashingmagazine)

Conclusión

Si desea diseñar un marcado rápido, iría con Illustrator. Pero Photoshop es mucho más avanzado y mejor para organizar los elementos.

Debe configurar Illustrator en píxeles, no en pulgadas, y esto solo depende de lo que esté admitiendo/desarrollando. Hay tantas variaciones para apuntar en el desarrollo de sitios web. Además, este enfoque llevará mucho tiempo en función de cómo suena su pregunta. Illustrator se utiliza mejor solo para la estructura alámbrica y la maqueta, no para el diseño completo. Si tiene elementos como un logotipo o íconos, continuaría y los produciría con Illustrator y los exportaría como PNG o SVG. Si yo fuera usted, crearía un mosaico de estilo y averiguaría a qué pantallas desea apuntar, luego crearía una plantilla para que pueda producir rápidamente una maqueta y pasarla al desarrollador web en formato PDF. Por lo tanto, si va a crear un sitio que sea compatible principalmente con iPhones móviles, podría tener algo como esto:

Referencia:

• ¿Cuáles son los pasos para diseñar un sitio web?

Un consejo, no uses Illustrator, usa Photoshop. Photoshop tiene todo lo necesario para que usted y su desarrollador (herramientas, unidades, etc.) puedan crear un sitio. Illustrator no, necesita configurarlo (herramienta, unidades, modo de color, etc.). ¿Por qué configurarías una aplicación para que funcione como otra que probablemente ya tienes? Podría seguir con las razones, pero volvamos a la pregunta ^^

Con respecto al tamaño, primero debe hablar con su desarrollador, si está planeando un sitio web receptivo, fluido o estático, hay muchas partes que podrían ayudarlo a usted y a él a acelerar todo el proceso de diseño, construcción y reproducción. (Es por eso que siempre se recomienda a) hacer un boceto y b) una estructura alámbrica antes de comenzar cualquier prototipo de diseño, lo suficientemente divertido, Illustrator se usa mucho para crear estructuras alámbricas, pero solo eso cuando se trata de "diseño web").

Si no es un sitio web receptivo y solo estático (por cierto, muy de los 90), puede decidir en qué dimensión desea enfocarse, aquí hay una lista de estadísticas de tamaño de pantalla:

Tomaría 1024 px como mínimo y 1366 px como máximo para la seguridad de su contenido (ancho), pero nuevamente... si necesita un sitio fluido, receptivo o adaptable, esto no importará mucho ya que el contenido y la interfaz se reorganizarán. o escale automáticamente para adaptarse a cualquier resolución de tamaño de pantalla específica.

Segundo consejo, si está diseñando un sitio receptivo (principalmente porque desea que se adapte a los dispositivos móviles), siempre es una buena idea comenzar el diseño en función de las proporciones móviles y no de una pantalla de escritorio, hace que el proceso de diseño sea MUCHO. más fácil al pasar a la versión de escritorio después. "Si se ve y funciona correctamente en dispositivos móviles, en su mayoría se verá y funcionará bien en computadoras de escritorio", dicen.

Aquí también hay un enlace que muestra de manera muy básica la diferencia entre adaptativo, fluido, receptivo y estático.