Web Designers Checklist : A Visual Designers Checklist for the Web

Antes de Iniciar

Esta es solo una sugerencia del flujo a seguir en el proceso de Diseño Web Estratégico. Este checklist esta orientado para servir de guía a los diseñadores visuales, líderes de proyecto y agencias de publicidad asociadas con nuestro equipo de desarrolladores IT para dar funcionalidad a sus proyectos web y apps.

Checkboxes son persistentes (no se borran al intentar actualizar la página) cuando su navegador soporta almacenamiento local.

Organización de archivos externos
Consolidar Archivos evitando duplicidades
Nombre los Archivos de forma clara y lógica
Que los archivos a enviar sean relativos a la composición o sección
Diseñe los elementos para garantizar una UI Interfaz de Usuario amigable.

Organización Interna de los Archivos a Enviar
Asigne nombre apropiado a los Layers en sus composiciones.
Organize los elementos de cada modulo o seccion dentro de carpetas con semántica clara.
Elimine los layers que no se usen
Defina los Elementos comunes en el sitio, como logos, headers etc.
Use Smart Objects AI, PSD, In, An etc. (Si usa Adobe CC)
Incluya elementos en los diferentes estados en layers independientes y etiquetados apropiadamente
(Link Hovered, Window Scrolled)

Consideraciones en el Diseño
Paleta de color RGB
Las Composiciones deben ser en Medidas de Pixel Absolutas.
Cree Lineas Guia en sus diseños
(estas las definirá en conjunto con los desarrolladores en base a los formatos planeados en el UX para el público deseado)
Provea explicación o ejemplo visual del efecto deseado en elementos Interactivos como botones y animaciones
Use Sombras con moderación
Use Iconos/Imágenes con Licencia o libres de regalías.
Cree sus Favicons Adecuadamente
(Favicons en el browser tab a 40 x 40 PNG, transparente. Preferentemente monocromatico y 144x144 para Apple icons

Filtros
Las superposiciones son apropiadas y se usan con moderación
El soporte de CSS ha sido investigado y considerado su aplicación

Tipografía
Web Font Kit es menor a 250kb
Fuentes menores a 14-16px pueden no ser legibles en todos los dispositivos
(Muestras de Web Font)
Se buscaron fuentes deseadas con proveedores de Licensed Fonts
Elimine los guiones de los parrafos de texto.
Se incluye guía visual de como debe verse la Tipografía Tamaño/Styles/Aspecto etc.
Enlistar Fuentes Web Alternativas
(En caso que la fuente seleccionada en la composición no esté disponible en el servicio de Web Fonts elegido.)

Imágenes
La proporcion se mantiene y no se ven estirados
Mascaras Globales para develar efectos
Vectores Procesados como Smart Objects
Versiones para las diferentes resoluciones planeadas en los breakpoints
(Lea el articulo acerca de en Picturefill)

Vectores de imagen
Cree los elementos por separado
Combine Paths y agrupe con Pathfinder
Combine Strokes, no deje vectores abiertos
Evite efectos 3D, Blurs, Blend Modes y sombras. Esos se pueden aplicar con CSS o en formato de imagen.
Proporciones pequeñas son entendibles
Los Elementos son Exportados y guardados en formato SVG
(Siga estos Pasos)

Antes de Exportar
Correcciones
Compare su composición con el boceto y haga las correcciones
Contabilizar las imagenes que esten completas al diseño en sus respectivas versiones
Compatibilidad de formatos y dispositivos verificada
Checar apariencia y compresion de imagenes
Fuentes externas empacadas en archivo.zip Incluir Screenshot de la apariencia de la fuente en un parrafo
Elimine los layers innecesarios o de ajuste de efectos o mascaras
Coloque todos los elementos gráficos y textos de la composicion en un archivo .zip
Incluya Favicons

Al Exportar
Use la funcion de Exportar-Save for Web & Devices
JPEG Quality high a 6-8, Progressive.
PNG transparente, NO matte, Paleta 24 bits
SVG para vectores
Para Smart Objets formatos editables en capas PSD o AI en formato para WEB, Res=72-96px y en caso de objetivo primario Retina Display a 300DPI (no apto para sitios con audiencia principal en México)
Conserve el tamaño y aparienca del archivo y sus componentes
Export como RGB Color Profile.

Fork on GitHub

Information Icon An SVG icon indicating additional information before users begin. Antes de Iniciar

Organización de archivos externos

Organización Interna de los Archivos a Enviar

Consideraciones en el Diseño

Filtros

Tipografía

Imágenes

Vectores de imagen

Antes de Exportar

Al Exportar

Antes de Iniciar