¿Qué herramienta y directriz es buena para hacer un diseño de interfaz de usuario para una aplicación o sitio web?

Hay muchas herramientas en línea disponibles para el enmarcado de cables y el diseño de UI / UX como Axure, Balsamiq, Invision, FluidUI y muchos más. Sin embargo, cuando se trata de ser profesional y flexible, uno debe optar por programas de nivel industrial como Sketch, Adobe Photoshop, Adobe Illustrator.

Soy usuario de Adobe y tengo mucha experiencia en casi todos sus productos. Para la aplicación y el sitio web UI / UX, utilizo ilustrador y photoshop.

Así es como hago mi mierda:

Diseño de aplicaciones móviles:

  1. Comienzo con un documento de Photoshop con un tamaño (720 x 1280) px o (750 x 1334) px para Android y diseño de aplicaciones ios respectivamente.
    Nota: 720p y 750p son versiones 2x para las plataformas Android e iOS respectivamente. Ofrecen buenos detalles y un tamaño de archivo óptimo y, por lo tanto, se recomiendan como resolución base.
  2. A continuación, empiezo a crear los elementos básicos de la interfaz de usuario como alambre enmarcado antes en papel, por ejemplo. barra de acción / barra de navegación (112 px para android y 128 px para ios.
    Nota: 112 px = 56 dp en android y 88 px = 44pts en ios.
  3. Comienzo con la iconografía ahora y aquí es donde Illustrator se une a nosotros. Comienzo con un tamaño de documento de (48 × 48) px con una línea de cuadrícula base de 16 px con 4 subdivisiones. Para que los íconos sean perfectos o nítidos, asegúrese de haber verificado la configuración de ajuste para ajustar a> cuadrícula en el ilustrador. Soy fanático del minimalismo y, por lo tanto, mis iconos usan formas básicas como círculos, rectángulos, arcos y cuadrados. Siga este enfoque, termine de crear su icono y luego simplemente copie y pegue este icono como capa de forma en Photoshop.
    Nota: constantemente alterno entre “vista previa de píxeles” para tener una idea de cualquier desalineación o error de la cuadrícula. Está en el menú Ver en ilustrador.
  4. Ahora termino con el uso de imágenes asombrosas donde sea necesario. El usuario se siente atraído instantáneamente hacia buenas imágenes.

Tipografía:

  • Android: use Roboto, open sans, gotham, aviner, metro nova o cualquier otra familia de fuentes que tenga al menos cinco variantes de estilo, siendo el principal; regular, audaz y delgado.
  • IOS: usando fuckin helvetica (preferiblemente ligero)

Configuración de cuadrícula en Photoshop:
Utilizo un diseño de cuadrícula de 96 px con 6 subdivisiones. Lo elegí después de años de ensayos e investigación y créanme, “es lo mejor”. Lo sabrás cuando lo uses, solo asegúrate de que esté “ENCENDIDO”. Duh!

Pautas y diseños
La parte más importante en el diseño de UI / UX es
“Las pautas y el diseño”
Ya que lo pediste, aquí están:

No oficial pero mejor que el oficial
Las pautas de diseño de iOS – Ivo Mynttinen / Diseñador de interfaz de usuario

El oficial y el mejor en Android:
Introducción – Diseño de materiales – Pautas de diseño de Google

Herramientas adicionales necesarias:
Tendrá que usar un complemento como “PNG express” o “cortar y cortar” para exportar sus activos para múltiples tamaños de pantalla. Hay seis variantes en Android, siendo LDPI, MDPI, HDPI, XHDPI, XXHDPI, XXXHDPI. iOS tiene tres variantes, siendo 1x, 2x y 3x. Es por eso que necesita un complemento de Photoshop que automatice su tarea de exportar los activos en diferentes tamaños.

Diseño web:
Siga el diseño de cuadrícula de 960 px y haga que responda. ¡Eso es!