Mostrando entradas con la etiqueta Interfaces. Mostrar todas las entradas
Mostrando entradas con la etiqueta Interfaces. Mostrar todas las entradas
16 mayo, 2018

Adobe XD CC está disponible… ¡gratis!

Sí, nos referimos al oficial. Al software desarrollado por Adobe específicamente para diseño UX/UI. A partir de ahora y hasta fecha desconocida, está siendo ofrecido libremente como aplicación gratuita. Descargable por tanto desde el sitio oficial de Adobe. ¡Gran noticia!

Conviene explicar antes de nada qué es exactamente este programa y para qué sirve. Las siglas XD corresponden a “eXperience Design”. Así pues, remiten directamente al campo antes citado de las UX/UI: el diseño centrado en la experiencia de usuario (UX o “User eXperiencie”) y la construcción de consolas gráficas e interfaces de todo tipo (UI o “User Interface”, interfaces de usuario).

En pocas palabras y para que todo el mundo lo entienda: Adobe XD sirve para diseñar apps móviles y sitios web multipantalla, que además sean usables de forma sencilla e intuitiva por cualquier persona. Y con diseño atractivo, naturalmente.

Adobe XD logo

Así pues, se trata de un programa -desarrollado nada menos que por Adobe y muy utilizado a nivel global- específico para crear plataformas web y aplicaciones móviles al completo. Tanto los iconos, botones y demás elementos gráficos interactivos, como la propia estructura de páginas o pantallas por las que navegará el usuario/a dentro del sitio.

Como XD está pensado justo para esto, permite a su vez crear los sitios de una forma muy sencilla, mediante simples clics y arrastrando elementos. Por tanto, nada tiene que ver con programas como Dreamweaver, etc, que requiren conocimientos de lenguaje HTML, estilos CSS, etc.

Una herramienta poderosa a nuestro alcance, que además tiene en cuenta la gran diversidad de dispositivos (smartphones, tablets, smartTV, equipos de sobremesa o portátiles…) que existen actualmente. Con especial atención a los numerosos dispositivos móviles que hay. ¡Y totalmente gratis!

Más detalles.

Por supuesto existe versión de pago del programa, pero que solo hará falta a empresas y grandes estudios de diseño. Decimos esto pues la versión gratuita es más que suficiente para el diseñador/a medio.

Concretamente, la versión gratuita permite un único “prototipo” activo (si pagamos disfrutaremos de prototipos ilimitados). Pero téngase en cuenta que podremos seguir trabajando en diversos proyectos, pues “prototipo” se refiere a la versión activa –o mejor dicho interactiva- del proyecto. En definitiva a una previsualización completa del sitio que estamos diseñando, en formato real y visible en cualquier dispositivo, que podremos además compartir con colegas de trabajo y otras prestaciones. La versión gratuita solo permite un único prototipo completo de este tipo a la vez.

En cualquier caso, si hacemos los sitios de uno en uno no parece un gran inconviente.

Requerimientos técnicos en nuestro equipo.

Hay otra limitación, y ya me parece más importante. Es la referida a la potencia necesaria en nuestro equipo. Hay que decir que Adobe XD CC requiere una máquina bastante potente para funcionar. Concretamente 4 GB de RAM y procesador rápido, así como software avanzado (Windows 10 64 bit / macOS 10.11 o superior, Direct 3D DDI Feature Set 10… y más cosas, ver ficha completa de requerimientos).

Para ver diversos equipos actualmente en el mercado comparando sus características técnicas y potencia, dirigirse al siguiente artículo: "Equipos para diseñar: comparativas".

Conclusión.

Sea como sea, nos parece una excelente iniciativa por parte de Adobe, el liberar este programa con versión gratuita, que además es plenamente funcional y utilizable. E integrado plenamente con el resto de software de la compañía (Photoshop, etc), por supuesto.

Muestra de uso de Adobe XD: soltando y arrastrando elementos

Sin duda es una herramienta muy útil para hacer sitios e interfaces centradas en la usabilidad, e incluso cabría decir que para hacer sitios en general. Al completo, incluyendo formularios, comentarios, mapas… Cualquier tipo de contenido.

El programa en sí presenta al diseñador/a las páginas en forma de esquema rápido, para que las podamos conectar entre sí con un simple clic, estableciendo incluso el dispositivo que mostrará cada una y demás.

Muestra de uso de Adobe XD: vinculando páginas y tipos de dispositivo que las mostrarán

En definitiva, MUY recomendable echarle un vistazo. Y, si se tiene un equipo lo suficientemente avanzado, incluso descargarlo, instalarlo y probarlo.

Para todo ello, dirigirse al sitio oficial que Adobe ha creado para el programa. Allí no solo podremos descargarlo, sino que también puede encontrarse mucha información, vídeos sobre el mismo, tutoriales… Ponemos de nuevo el enlace:

Obtener Adobe XD CC gratis – Sitio oficial | Adobe.com

Enlaces extra.

Leer más...

07 octubre, 2015

Interfaz UI dibujada a mano en vectores, gratuita

Este kit de elementos para crear una interfaz de usuario (o UI), enteramente vectorial y 100% gratuito, es sin duda extraordinario. De una calidad que me ha sorprendido verdaderamente.

Como se aprecia al primer golpe de vista, destaca en él sobre todo su muy bien conseguido aspecto de “dibujado a mano”, es decir, su estilo handwritten (o hand-drawn más propiamente). Todos los elementos del kit, compuesto por los habituales campos, formularios, botones e iconos multimedia, presentan este mismo estilo “dibujado a mano”. Parecen hechos sobre un papel con un rotulador de punta fina, estilógrafo de tinta o incluso un simple bolígrafo.

Botones, manejadores, interruptores, campos de formulario y demás elementos de estilo dibujado a mano que conforman el kit. Archivo comprobado por La Grafiteca.

Como puede verse en la imagen superior no exagero en cuanto a la calidad de este kit, denominado por su autor Jolly UI Free Kit. Al ser enteramente vectorial (se ofrecen archivos de vectores .AI de Illustrator y .EPS), podremos modificar muy fácilmente todo, incluyendo los textos, el color del trazo, grosor del mismo, etc…

Puede verse en la imagen que yo mismo lo he hecho (ver campos de usuario y contraseña), sin mayor dificultad con Illustrator CS3. Con algo de imaginación podremos usar estos “dibujos” para infografías y todo tipo de trabajos más allá del mero diseño web, pues su edición es sencillísima.

Además de los archivos vectoriales AI y EPS antes citados, el kit se ofrece también en formato PSD de Photoshop. Todo ello en versiones tanto para PC como para Mac.

Eso sí, la fuente o tipografía que vemos no está incluida, pero es igualmente gratuita. Se trata de la fuente GoodDog, que podremos descargar desde el enlace anterior, o sustituir por otras tipografías de estilo handwritten que queramos (en el enlace anterior puede encontrarse un amplio listado de las mismas). Recomiendo descargar e instalar primero la fuente y luego abrir el archivo del kit UI.

Autor, licencia y enlace de descarga

Como ya hemos comentado esta obra es totalmente gratis, pues se trata de un fragmento o muestra gratuita de un kit mucho mayor ya de pago, compuesto por más de 200 elementos. Es por tanto una forma de dar a conocer su trabajo por parte del autor, Olly Holovchenko, un diseñador e ilustrador ucraniano bastante viajero según él mismo cuenta. Toda su obra es excelente y recomiendo sin dudar que se visite el enlace anterior.

Volviendo al Jolly UI Free Kit, podremos usarlo libremente en cualquier proyecto, personal o comercial, con la única –y lógica- restricción de que no podremos revenderlo u ofrecerlo por nuestra cuenta, pues la propiedad del mismo seguirá siendo del autor aunque nos ceda el uso. La descarga por tanto ha de efectuarse desde la web del recurso de forma exclusiva (algo muy habitual al ofrecer recursos gratuitos). Por lo demás es royalty free, libre de derechos. Al descargarlo se nos pedirá que pongamos un precio, pero podemos poner cero y por tanto obtenerlo gratis.

Jolly UI Free Hand-Drawn vector UI elements

De esta forma, para descargar este excelente set, dirigirse a la web del mismo, en:

Jolly UI Free Hand Drawn UI KIT | handdrawngoods.com

Si lo veis en cualquier otra parte y se puede descargar desconfiad de ese sitio, no estará respetando al autor y los problemas no tardarán en llegar.

Leer más...

24 abril, 2014

Plantilla PSD e interfaz para web de tienda o ventas

Justo hoy acaba de publicarse un recurso bastante bueno para diseño web enfocado al eCommerce o comercio electrónico, especialmente para aquellos sitios destinados a vender cosas por internet (tiendas virtuales y similares).

El kit es un freebie, totalmente gratuito y disponible para usos tanto personales como comerciales, y se llama Lucky Store. Ha sido diseñado por Sergey Azovskiy para el sitio pixelbuddha.net, que lo pone a disposición de cualquier diseñador que lo quiera utilizar.

Existe una versión premium de este mismo set, aunque lo cierto es que la versión gratuita es ya bastante completa. Incluye una interfaz UI con todos los elementos, apartados, botones e iconos necesarios para la tienda, que además se disponen en el PSD como si ya formaran parte de una página web. De esta forma es muy sencillo aplicar la plantilla, sólo habrá que reproducir el diseño original.

El diseño incluye también iconos sociales redondos de estilo flat, así como etiquetas y banderolas para precios, descuentos y ofertas. Iconos de búsqueda, cesto de compra, botones de paginación/navegación, campos para formularios, etc... Muy completo.

Parte superior de la plantilla web + set interfaz UI para ecommerce.

  • Como puede verse el set incluye una cabecera con logotipo, una barra-menú de navegación y un slide-show (galería de imágenes) con un juego tipográfico de diseño actual para incluir texto sobre las fotografías.
  • El diseño es muy limpio, sencillo y funcional, en la línea del flat design actual. A mí me gusta bastante, funcionará muy bien.
  • El PSD está muy bien ordenado, con los elementos perfectamente agrupados por capas, en el mismo orden en que aparecen (de arriba a abajo).
  • Las tipografías no están incluidas, aunque no son tipos de letra raros. Si de todas formas hubiera problemas de falta de fuentes podremos sustituirla por cualquier letra de palo seco, como Arial o Helvética.

En definitiva, un buen diseño para cualquier sitio de ventas, con todos los elementos, imágenes e iconos listos para ser aplicados en el HTML por cualquier diseñador web.

Para descargar este freebie, dirigirse a la web del recurso, publicado en:

Lucky Store UI

Leer más...