Category Archive: Webdesign

2017-joerak-goiburua

8 Tendencias de diseño que cobrarán fuerza en 2017


El DISEÑO es un factor de clave y de gran importancia en proyectos de Software, de App o de Web.  En toda fase de este tipo de proyectos que se desarrolle actualmente se suele poner la mira en la experiencia del usuario, la facilidad de uso, la rapidez, capacidad de transmitir un mensaje, despertar la llamada a la acción del usuario, la seguridad, la accesibilidad… Para lograr conseguir estos objetivos las opciones que ofrece el diseños son invalorables.

Como cualquier otro campo relacionado con la tecnología, el diseño también esta en constante cambio y renovación. En este post os daremos a conocer las tendencias de diseño que comenzarán a tomar fuerza durante el ya inminente 2017.

Los 8 puntos más destacados son:

  1. Las microinteracciones aumentarán la conexión con los usuarios: Gracias a la cantidad de dispositivos digitales que existen, la web ha dejado de ser una experiencia de sólo lectura. Las interfaces -y el diseño de ellas- son partes esenciales en nuestra vida cotidiana..
  2. Vuelven los degradados, duotonos y texturas: Continuando con la transición desde un diseño completamente plano (flat design), en el próximo año los protagonistas serán las texturas y los degradados..
  3. Contenido interactivo y ‘scrolling’ en los emails: Los esfuerzos por mantener a los emails como herramientas de marketing verán sus frutos en 2017. Veremos más y más experimentos con interacción y scrolling en los contenidos de los emails.
  4. Foco puesto en el ‘simple-first’ design que no es lo mismo que minimalista: Estamos en la era de mobile-first y content-first, pero si miramos el éxito de los sitios y apps que han simplificado su UI este año, es probable que empecemos a pensar en simplicity-first en los próximos años.
  5. Por fin la Accesibilidad en Web y Apps será un ‘must’: En 2017 esperamos que la accesibilidad por fin sea un requisito indispensable en todos los aspectos de un sitio web , una app o software.
  6. Los Chatbots llegaron para quedarse: Los Chatbots son una tendencia que creemos continuará como un servicio más de los sitios que intentan añadir un nivel mayor de personalización a sus webs.
  7. Aumento en la Seguridad y técnicas de encriptación: La implementación de técnicas de seguridad seguirá creciendo a medida que crece el conocimiento de los usuarios sobre problemas de seguridad y el impacto sobre sus webs, apps o software..
  8. Adiós a los molestos popup de suscripción: gracias a los ajustes que Google realiza a su algoritmo de ranking, esperamos muy felizmente decir adiós a los molestos diálogos o popups de suscripción a emails o newsletters.

2017-8-tendencias

girlsdocode

Zerk aldentzen ditu neskak teknologia berrietatik?

Disculpa, pero esta entrada está disponible sólo en Euskera.

.eus

Nos encontraréis en la dirección www.kabitik.eus!

Somos la empresa 5060 en sacar el dominio .eus! A partir de hoy www.kabitik.eus será nuestra dirección. Aprovechando el cambio hemos añadido un apartado donde mostramos de manera simple los últimos trabajos que hemos ido realizando en cuanto a diseño, web y aplicaciones: http://www.kabitik.eus/es/trabajos

.eus

Visítanos!

Logo Garfios Biak

Garfios Biak estrena nueva web e imagen corporativa

Logo Garfios Biak

Garfios Biak es una empresa de Arrasate que se especializa en la fabricación y comercialización de productos derivados de alambre como hembrillas, garfios, aldabillas, ganchos y anillas.
Os presentamos la nueva imagen corporativa y la nueva web www.garfiosbiak.com desarrollados por Kabitik. ¡Esperamos que os guste!

Captura de pantalla 2015-07-07 a las 22.25.16

IE-dead

Que en paz descases, Internet Explorer

IE-dead

Esta es una gran noticia para muchos usuarios y para muchos desarrolladores que sufrimos con este navegador durante muchos años.

La política de Microsoft de ir por su lado, alejándose de los estándares de desarrollo no ha funcionado.  Todo lo contrario, Internet Explorer que nació a mediados de la década de los 90 y fue claro dominador del mercado de los navegadores hasta principios de la década del 2000, tiene sus días contados. La misma Microsoft decidió sacarlo del mercado. Sus constantes agujeros de seguridad, su poca compatibilidad con otros navegadores y el claro desprecio hacia los estándares de desarrollo web le pasaron factura. Y es que en febrero de éste año Chrome poseía el 43,2% del mercado mundial de navegadores (incluyendo plataformas de escritorio, móviles y otras), mientras que Internet Explorer tenía un 13,1% y Firefox un 11,6%.

Microsoft comunicó de éste cambio en enero pasado, dando a conocer el Proyecto Spartan (que es como se llama de manera provisional al nuevo Internet Explorer) con la esperanza de que un código fresco y un nuevo nombre puedan ayudarle a recuperar a los usuarios perdidos. El lanzamiento oficial está previsto para finales de este año junto con Windows 10.

Esperemos que Microsoft haya tomado nota de sus errores y traiga al mercado un navegador seguro, rápido y alineado a los estándares web.

Bcbl-12

Euskaraz zenbat hitz dakizkizula uste duzu?

Disculpa, pero esta entrada está disponible sólo en Euskera.

responsive_design

Diseño Web Responsive

2 Pasos para conseguir un diseño web responsive

Actualmente nos encontramos ante una inmensa variedad de resoluciones de pantallas para una igualmente extensa cantidad de dispositivos (monitores, televisores, tablets, smarthphones). Según las últimas estadísticas cada vez más gente accede a Internet a través de éstos dispositivos móviles. Sin embargo, la mayoría define la experiencia como “no muy satisfactoria” ya que las páginas están poco o nada adaptadas para su uso, empeorando la experiencia de usuario.

El w3c consortium recomienda y enfatiza utilizar lo que denominan One Web, es decir, diseñar una sola web que sea capaz de adaptarse a las diferentes resoluciones de pantallas de los diferentes dispositivos existentes.

Aquí es donde aparece el nuevo término “Responsive web design“. Personalmente prefiero utilizar el término reactivo como traducción de “responsive” ya que precisamene se refiere a que la web reacciona activamente a un cambio de resolución o tamaño. Adaptativo o adaptable tiene una connotación más pasiva, sin embrago reactivo se aproxima más a la definición de responsive.

Llamémosle como le llamemos: responsive, adaptativo, adaptable, flexible o reactivo, para que nuestra web tenga en cuenta las diferentes resoluciones de los dispositivos debemos seguir una serie técnicas agrupadas en dos simples pasos:

PASO 1: UNIDADES PORCENTUALES

Los tiempos de los diseños fijos, basados en pixeles, han terminado. La web es un medio fluido con infinidad de posibilidades, no deberíamos ceñirnos al esquema del medio impreso que si que requiere ciertos limites y acotaciones. Realmente el pasar de anchos fijos a anchos variables es muy sencillo, basta con aplicar una regla de tres y ya tenemos el resultado.

PX VERSUS %

Veamos un ejemplo: Nuestro ancho de página es de 920px un valor fijo, que será el 100% de todo el ancho que queremos. Si a su vez lo dividimos en dos columnas, una izquierda de 600px y la derecha de 320px, deberemos hacer una regla de tres para obtener el valor porcentual (600/920*100 y 320/920*100)

De esta manera si redimensionamos la ventana o cambiamos de dispositivos se guardaran las proporciones readaptándose a la nueva resolución.

LAS FUENTES: EM

Las fuentes reciben el mismo tratamiento, por ejemplo si definimos que el tamaño de la fuente será de 14px, éste será el 100%. Si necesitamos un encabezado de 18px entonces el tamaño porcentual (en unidad em) será 18/14 = 1.28em. Si necesitamos un texto más pequeño, por ejemplo de 12px, entonces  12/14 = 0.86em.

IMAGENES: MAX-WIDTH

Para las imagenes tenemos que definir la propiedad max-width (o max-height segun el caso) al 100%

img {max-width:100%;}

PASO 2: MEDIAQUERIES

Al aplicar el PASO 1 ya tenemos bastante del trabajo hecho. Pero no es suficiente. Cuando las dimensiones cambian demasiado para adaptarse a tamaños muy pequeños (como las pantallas de los dispositivos móviles) es posible que el contenido se redistribuya en columnas tan estrechas que sólo entraría una palabra. Nunca será lo mismo diseñar para un monitor como para un móvil. El diseño de éste último debería ser más simplificado y mejor adaptado a acciones táctiles. A lo mejor necesitamos que algún contenido desaparezca cuando las dimensiones sean muy pequeñas o que cambie su posición y orden visual. Aquí es donde cobran importancia las Media Quieries,  que no son otra cosa que CSS condicionales.

Vamos a ver como funcionan. En el siguiente ejemplo vamos a definir 3 Media Queries para diferentes situaciones de pantallas.

Primero podríamos definir una media query para un ancho específico, por ejemplo 240px (Samsung Galaxy mini). Entonces nuestra media query sería

@media screen and (max-width: 240px) 
{ 
/* Aquí van las reglas CSS necesarias */ 
} 

Dentro de las llaves tenemos que poner todas las reglas CSS que actuarán cuando la pantalla del dispositivo sean como máximo de 240px.

Ahora veremos otra media query para aplicarla a las pantalla de 1200px o mayores

@media screen and (min-width: 1200px) 
{ 
/* Aquí van las reglas CSS necesarias */ 
}

Y más aún, podemos especificar un rango en el que las CSS actuarán, por ejemplo:

@media screen and (max-width: 600px) and (min-width: 900px) 
{ 
/* Aquí van las reglas CSS necesarias */ 
}

De esta manera podemos tener definidas tantas CSS condicionales para aplicarles diferentes reglas dependiendo de sus tamaños. Se recomienda crear estas reglas para las resoluciones: 240, 320, 480, 600, 768, 900 y 1200. Pero dependerá del proyecto en sí

Las media queries pueden estar todas en una misma páginas de estilo o podemos incluso separar las hojas de estilo. Por ejemplo, si queremos cargar una hoja de estilo independiente para anchos de pantalla inferiores a 480 píxeles:

O también:
@import url("style.css") screen and (max-device-width: 480px);