Tesokdesign

Fanático de la interfaz de usuario, un apasionado de las nuevas tecnologías.

[tesokdesign]

Textos en curvas o siguiendo figuras en Sketch 3

Cuando queremos poner un texto un poco curvado en Sketch, a primera vista, no vemos una herramienta que pueda hacerlo, en los paneles laterales que estamos acostumbrados a usar para editar los valores del objeto seleccionado no aparece.

Me he imaginado que tendría que tenerlo si o si, no entraba en mi cabeza que no tuviesen esa opción. Como la mayoría de los casos, con unas búsquedas en nuestro buscador favorito podemos encontrar las soluciones.

Tan solo tenemos que dibujar la curva con la herramienta, en una capa superior posicionar nuestro texto, seleccionar las dos capas, dirigirnos al menú de Type y seleccionar la opción de Text on Path y nuestro texto automáticamente seguirá la curvatura de la línea.

Podemos encontrar más información (Ingles) en la documentación oficial de Sketch 3.

[tesokdesign]

Mis primeras prácticas de Micro interacciones. Por ahora me centré en un efecto sencillo para la acción de me gusta con el corazón, las transiciones entre pantallas y la transformación del menú hamburguesa en flecha de back.

Para diseñarlo, he usado Sketch y la animación con Principle.

Tengo pendiente muchas entradas, espero que a lo largo de estos días publique más cosas. Hablar sobre elWorkshop de diseño de APPs en Madrid, Zeplin o Principle. El proyecto lo podéis ver en Behance y para estar más al día de las novedades que puedo ir haciendo podéis seguirme en Twitter.

[tesokdesign]

Billboard IOS APP

Ya podéis pasaros por mi Behance y apreciar mi último trabajo y Domestika. Diseño de User Interface o Interfaz de Usuario para una aplicación de películas de estreno con la que poder buscar las últimas películas además de encontrar los cines donde verlas.

Esta vez he centrado el diseño de la APP en IOS ya que hasta ahora no tenía ninguna diseño serio en este sistema operativo. He aprovechado además para meterme de lleno en el diseño UI con Sketch el cuál compré ya que merece mucho la pena.

Para aprender más sobre IOS y el diseño de aplicaciones he seguido el curso de “Diseña una App deliciosa” impartido por José Vittone y Javier Cuello a través de Domestica. Me ha servido para aprender como se trabaja más profesional y conocer aplicaciones, apps, trucos, consejos... para el diseño de Apps.

Junto con el curso, tienen también un libro el cual estoy inmerso en proceso de lectura junto con la inmensidad de enlaces que facilitan sobre UI, UX, guías de diseño...

No olvidéis pasaros por Behance - Domestika y apreciar mi trabajo, será de gran ayuda.

[tesokdesign]

Coolors.co

El otro día comente Sip, la aplicación para poder seleccionar los colores estando en cualquier lado, además de hacerte tus paletas de colores en la versión PRO, hoy, hablaré de Coolors.co.

Coolors.co es una herramienta de las miles de herramientas que podemos encontrar para generar colores o encontrar paletas de colores. Me llamó la atención su funcionamiento.

Va sacando paletas de colores las cuales pueden gustarte o no, lo que me llamó la atención es que puedes bloquear los colores que te gustan de esa paleta y pulsar el botón para que genere una nueva, pero mantendrá los bloqueados, así, solo tienes que ir cambiando la paleta hasta que tienes los colores deseados.

Un funcionamiento nada del otro mundo, pero me llamó la atención y me resulta práctico.

Cuenta con una versión para Android e IOS (Las dos de pago) y además podemos combinarlo con Illustrator o Photoshop con su plugin.

Yo me quedo con la versión web, sobretodo por que soy más de Sketch.

Visitar Coolors.co

[tesokdesign]

DevRocket plugin - Photoshop

Aunque diseño UI con Sketch 3, viendo unas charlas de Diseño de apps por Youtube he descubierto el plugin de DevRocket para Photoshop.

La verdad es que este Plugins hace que Photoshop tenga otra vez sentido para diseñar para UI. Te ayuda en muchas cosas además de hacerte perder menos tiempo al realizar las exportaciones.

[tesokdesign]

Sip

El otro día mientras estaba aprendiendo algunos trucos de Sketch con videos en Youtube viendo como trabajan los buenos jeje me fijé en la forma en la que capturaba los colores de alguna imagen por ejemplo.

De esa forma, descubrí Sip, además de poder capturarlos, en la versión PRO puedes hacerte tus paletas de colores. Por ahora voy con la versión Free. Imagino que encontraremos más aplicaciones que hacen este tipo de cosas, pero me pareció muy simple y sencilla. Dejo el enlace por aquí para que podáis echarle un ojo y me comentáis.

[tesokdesign]

Compartir pantalla Sketch3 con Android

La primera vez que tuve que hacer el diseño de una App estaba usando un OSX y tenía un Iphone 4 al alcance de la mano. Solo tuve que buscar un poco por internet para ver como poder ver en el Iphone el diseño y de esta forma hacerte a la idea de como van quedando las proporciones..., Aquella vez lo hice desde Photoshop y una app Liveview, dejo el enlace del artículo que escribí en su día.

Esta vez, vamos a compartir desde Sketch 3 solo disponible para OSX y creo que IOS, a un Nexus 4, es decir, Android (en este momento con CyanogenMod 12.1.....11, Android 5.1.1). Para ello necesitaremos instalar en el Mac Skala Preview y en nuestro Android disponible en Google Play.

Además, tenemos que instalar el Plugins de Sketch 3 para hacer funcionar la magia. Nos descargamos el Plugin y seguimos los sencillos pasos de instalación. De esta forma podemos ver directamente en nuestro dispositivo el diseño que estamos creando. Creo que ayuda a hacerse una mejor idea de como va quedar la app cuando la pasemos a Desarrollo.

[tesokdesign]

Priority

He seguido diseñando al App de Priority que tenía sin acabar y aunque aún queda trabajo, me va gustando como va quedando. He subido a Google+ tres capturas de pantalla para tener un poco de feedback, ver que opina la gente y poder mejorar el diseño.

Dejo el enlace a Google+ donde podéis verlo más grande donde apreciar mejor los detalles.

[tesokdesign]

Nuevo Curso de JS con Codigofacilito

El 3 de Agosto los chicos de Códigofacilito comenzaron un nuevo tutorial de JavaScript muy interesante. Esta vez sin Jquery, un gran acierto.

La verdad es que cuando busco tutoriales, al final, siempre acaban metiendo Jquery y esta muy bien, pero al estar intentado tener un poco de base en JS me parece demasiado rápido el paso que dan a Jquery, dejo JQ para más adelante.

Dejo incrustado el primer vídeo de 10 que tienen hasta la fecha de la publicación de este post, aun, no tienen una lista de reproducción como tienen con los otros cursos.

[tesokdesign]

Retomando las Ilustraciones

Hacía tiempo que no realizaba una ilustración y me decidí que ya era hora de hacer una mientras sigo desarrollando los otros diseños de apps, logos etc que tengo entre manos.

Dejo una imagen de como va quedando la Ilustración que estoy realizando para NiNaizHipHop. Está realizada con Affinity designer.

Se puede ver con más detalle en mi G+

[tesokdesign]

Como migrar Wordpress del servidor local al servidor Web

Lo he tenido que hacer varias veces y siempre tengo que acudir a la misma web ya que no era yo el que normalmente se ocupada de subir, pero no esta de más saber como funcionan estas cosas. Usaré el post para tenerlo siempre como recordatorio, intentar memorizarlo y ayudar a todo el que pueda.

Normalmente siempre entro al tutorial que escribió Gian Oliveira, así que por no repetir el trabajo de él es mejor haceros referencia a su blog, lo único, cuando él llega al punto 8 lo deja terminado, yo suelo hacer dos pasos más que serán mi aporte.

1. Buscar y remplazar

Normalmente solo realizando los 8 pasos mencionados en la entrada de Gian no suele funcionarme todo bien, los widgets y algunos enlaces por destacar algunos, suelen quedarse con URLs que enlazan a nuestro localhost. Para solucionar esto, solo tenemos que subir unos archivos a una carpeta que que le llamaremos como nos guste pero si o si la crearemos en la raíz de nuestro servidor. Los archivos con el script los descargaremos de interconnectit.

Para ejecutar el script solo tenemos que accedes vía navegador a la ruta mipaginaweb.com/searchreplace por ejemplo y ejecutarlo.

2. Descargar DB (Base de datos), reemplazar y subir DB

Aun habiendo usado el script algunas imágenes aun se resisten, solo tenemos que descargarnos la base de datos una vez pasado el Script del paso uno, abrirlo con nuestro editor favorito, en mi caso Sublime y hacer un buscar y remplazar de todas las rutas localhost que encontremos.

Puede parecer costoso, pero según lo vamos haciendo más veces, al final no tardaremos nada y tendremos en nuestro servidor nuestra web funcionando a la perfección.

[tesokdesign]

Scroll to Top Jommla 2.5 y Joomla 3

Hoy voy a compartir un Plugins para Joomla con el que añadiremos un Scroll to top, es decir, la hacer scroll en nuestro Joomla para no tener que volver a subir haciendo scroll.

Con el plugin haremos aparecer un botón en el que podemos escribir un texto o añadir una imagen para hacer saber al usuario que pulsando en él irá al top de nuestra página.

Si no quieres complicarte o no tienes tiempo para poder hacerlo solo tienes que instalarlo y activar y completar la pequeña configuración. Lo tenemos disponible para Joomla 2,5 y Joomla 3, además a día de hoy podemos disfrutar de él gratis.

Ir a Scroll to Top

[tesokdesign]

Lightline

Lightline es un juego para Android/IOS que estamos desarrollando en html5  uesteibar y yo. El juego es un simple tres en linea al cual le hemos dado una vuelta estéticamente para no ser uno más del monto.

Aun estamos en el proceso de desarrollo pero con muchas ganas de poder terminarlo para lanzarlo.

Por ahora yo me estoy encargando de todo el apartado de la imagen del juego y usteibar del backend. Voy publicando en mi perfil de Google+ poco a poco capturas de como va quedando para ir mejorándolo con las opiniones de la comunidad, podéis participar en ello comentando las entradas publicadas o que se irán publicando.

Para ver una captura de como va quedando en pixeles reales solo tenéis que pasaros por este post de mi perfil.

[tesokdesign]

Nuevo pack de iconos

He vuelto a retomar el pack de iconos, vuelvo con ganas y estoy rediseñando alguno que otro, por ahora estos son los que tengo.

Creo que me gustan más que los de la otra vez. Espero poder seguir haciendo más, ya que también estoy liado con el diseño de LightLine, una app que estoy sacando adelante junto con usteibar, pronto pondré capturas.

Tanto los iconos como LigthLine los estoy diseñando con Affinity, un progrma de diseño vectorial del estilo de Illustrator por no decir como que me esta gustando mucho. Si teneis  OSX tenéis que probarlo.

Para ver los iconos a mayor resolución podéis verlo en Google+.

[tesokdesign]

Menú para versión movil

Mi web, aun siendo responsiva, el menú no estaba de la mejor forma y Google va ha empezar a penalizar las webs no responsivas, me he puesto a actualizar esta parte de mi web ya que estaba pendiente, así que me puse manos a la obra para a crear la versión del menú para dispositivos móviles.

Todavía le queda más trabajo, esta es la primera versión. Podéis descargaros el código de mi cuenta de GitHub o ver la versión funcionando en mi cuenta de Codepen.

Al contrario que el otro menú que mostré en mi otra entrada, esta vez, esta creado solamente con HTML y CSS3 sin usar Javascript aunque creo que para los navegadores que no soporten las técnicas de CSS3 implementaré el uso JS para así poder usar este menú en más navegadores (antiguos) y dejar solo CSS3 para los más modernos puesto que CSS3  parece menos “pesado”.

Con el tiempo y uso iré mejorando el código, podréis descargaros siempre la última versión en Github.

[tesokdesign]

Página estática para inicio de Wordpress

Como comenté en el anterior post, entre otras cosas, estoy desarrollando mi primera plantilla de Wordpress. He estado siguiendo algunos tutoriales en los que explican poco a poco que pasos seguir.

Configurando la opción en Ajustes -> Lectura ->  Página frontal muestra -> La página deseada.

Una vez configurado, no se que pasaba, pero siguiendo el tutorial de eSandra no conseguía poner una página como página de inicio en vez de el blog tal y como hacen en ese tutorial, así que, me tocó pegarme un poco con internet para encontrar la solución ya que con el código que se indica en el tutorial de eSandra conseguía sacarla pero sin ninguna etiqueta html y eso no me valía.

Al final, di con el blog de goliatenterrado y con el Loop que indica en su post he conseguido que cuando pones la página predefinida salga con sus correspondientes etiquetas.

He usado el siguiente código:

if (have_posts()) : while (have_posts()) : the_post(); the_content(); endwhile; endif; ?>

[tesokdesign]

Mi primera theme de Wordpress

Al final me he decidido a hacer una plantilla para Wordpress, aun esta en construcción pero estoy muy animado. Estoy intentando usar todos los conocimientos de las últimas tecnologías y formas de desarrollar una web.

Por ahora estoy implementando Mobil Firts, Responsive Design, Bootstrap, LESS, OOCSS, CSS3, Javascript, JQuery...

Podéis seguir el desarrollo en GitHub.