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:
- ¿Qué materiales deben incluirse en una cartera de diseño / tecnología de instrucción de nivel básico?
- ¿Qué importancia tienen los servicios de diseño de impresión para el crecimiento de su negocio?
- ¿Por qué los rellenos de inyección están diseñados como están?
- ¿Cómo debo mejorar mis habilidades de diseño y desarrollo web?
- Diseñando en el navegador. ¿Estás a favor o en contra de esta práctica?
- 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. - 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. - 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. - 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!