A estas alturas de 2018 Sketch es un estándar del del diseño. Y aunque yo lo uso desde hace por lo menos 4 años, hay que decir que en los últimos 2 años a mejorado mucho convirtiéndose en una herramienta muy util para diseño web, aplicaciones, e interfaces en general. El sistema de símbolos es extremadamente útil, y su versatilidad hace que el trabajo sea mucho más rápido y fluido que con otras herramientas. Aun recuerdo cuando Photoshop era el que mandaba (así lo exigían la mayoría de clientes y agencias), y diseñar web complejas y actualizarlas se convertía en una pesadilla, con miles de archivos que había que actualizar uno a uno… Fireworks (DEP) no llegó a tener mucho éxito, pese a que estaba más enfocado a al diseño de interfaces y sistemas complejos. Fue un precursor, pero sus numerosos fallos y «cuelgues» lo hacían en muchas ocasiones insufrible.
La vida continúa, Sketch mejoró sus funcionalidades, y hace un par años realicé un «Starter kit» que tener a mano, para hacer más rápidas ciertas tareas tediosas como definir estilos generales, colores, y algunos elementos básicos que incluyen el 90% de los diseños, como formularios y botones. Con el paso del tiempo Sketch ha ido mejorando, y con ello este template, que pretende ser sólo un punto básico de partida, que proporcione una base organizativa, que sea perfectamente escalable y, en la mayor medida de lo posible, sin capa visual, falto de diseño.
Esto no es un template con componentes prediseñados, no es una solución «out of the box«, y no pretende serlo. Cuando lo abras, verás que la tipografía es Arial (sí, Arial). Porque el objetivo es poder aplicar el diseño que quieras sin estar condicionado por estilos predefinidos. Para diseñar, que para eso pagan, ¡coño! Así que he decidido subirlo a Github, donde procuraré mantenerlo y mejorarlo en la medida de lo posible.
Qué contiene este kit
El sistema está basado en un grid de 8px, pero puede ser cambiado a otro ajustando los símbolos, grid y layout. La página de «UI» contiene los componentes, y puede ser usada a su vez como guía de estilo.
Tipografía
Estilos básicos en blanco y negro. Siempre puedes añadir todos los que necesites, y en diferentes colores. La tipografía por defecto es Arial, para modificarla a gusto del consumidor y evitar la tentación de dejar la que viene por defecto.
Colores
Un listado básico de colores para modificar, agrupados en colores básicos, del tema (priomarios y secundarios) y de notificaciones. Estos colores son estilos de capa dentro de símbolos. Esto nos permitirá aplicarlos posteriormente de forma global a otros componentes o a los iconos.
Formularios y botones
Inputs y botones básicos, en positivo y negativo. Símbolos fáciles de personalizar y aplicar.
Componentes
Algunos componentes básicos comunes:
- Badges
- Notificaciones (Alerts)
- Paginación
- Pestañas
Iconos
Iconos básicos para empezar a funcionar, como son los direccionales, notificaciones o redes sociales. Los iconos están tomados de Material Icon, y han sido convertidos a formas de tal modo que se puede cambiar su color de acuerdo con los definidos previamente. Pero la idea es que los sustituyas por tus propios iconos.
Esta es la base con la que empiezo la parte de diseño de mis proyectos. Un sistema básico, que no me distraiga con diseños predefinidos, fácilmente escalable, y que puede ser aplicado de forma fácil y rápida tanto para hacer desde una landing a diseño de Apps o websites complejos. Por supuesto, en constante evolución, y abierto a sugerencias y mejoras. Y te lo puedes bajar de aquí UI-base-starter-sketch.