Frontend

también es diseño

Raúl Yeguas

neokore

Lead Engineer en Geographica Datos, Smart cities, posicionamiento indoor,... Vodafone, MasterCard, Telefónica, Fiware, Real Madrid, El Corte Inglés

We are hiring!

http://tiny.cc/GeoJobs

Organizador de SevillaJS Llevamos casi 2 años desde el reboot

Apúntate y participa!

http://tiny.cc/SevillaJS

Enriquecer la comunidad

Frontend

también es diseño

A lo que vamos de qué os vengo a hablar?

¿Diseño?
Mi aplicación ya es bonita

Material, bootstrap, Todo igual, aburrido Nada está orientado a lo que la aplicación aporta Significa eso que no los uses? NO Aprovecha las buenas convenciones e ideas

¿Se diferencia del resto?

Tu aplicación es única, ¿por qué se ve como todas las demás? Esto no quiere decir dejar de lado las convenciones
Formato de la lista Barra superior Colores Botón acción ppal
Barra lateral Botones Acciones barra superior Colores!!
Barra lateral Botones Acciones barra superior Colores!!
Barra lateral Botones Acciones barra superior Colores!!

1€ cada vez que veo ese botón

No sería rico, pero una buena paga extra si tendría

¿Se ajusta a su función?

Que sirva para otro y le quede bien, no quiere decir que a ti también te sirva La forma de manejar un widget, un elemento de la interfaz, de poder crear lo elementos necesarios con las herramientas que te ofrece pueden no ser las mejores opciones.
De Windows Mobile, Palm, Symbian al iPhone Problemas graves de usabilidad Imagináis seguir usando esas mismas interfaces hoy?

Tienden a los antipatrones

Tienden a antipatrones 


<form class="form-horizontal">
    <div class="form-group has-success has-feedback">
      <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" id="inputSuccess3">
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        <span id="inputSuccess3Status" class="sr-only">(success)</span>
      </div>
    </div>
    <div class="form-group has-success has-feedback">
      <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
      <div class="col-sm-9">
        <div class="input-group">
          <span class="input-group-addon">@</span>
          <input type="text" class="form-control" id="inputGroupSuccess2">
        </div>
        <span class="glyphicon glyphicon-ok form-control-feedback" ></span>
        <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
      </div>
    </div>
  </form>
Bootstrap está lleno de antipatrones 4 saltos en responsive demasiadas clases clases no semánticas muchos !important no puede estar orientado al contenido + facil encontrar alguien que sepa BOOTSTRAP Mucho + dificil de escalar

Pueden matar la creatividad

Ya te dan todo hecho, con componentes en ocasiones cerrados y pautas; pero qué hay de la creatividad? Sí, somo ingenieros, pero sin creatividad, imaginación no avanzamos.
Componentes prediseñados típicos Se suele caer en SIMPLIFICAR el diseño EMPEORANDO la experiencia

CSS is good for you

Conócelo, modifícalo, créalo No importa si lo metes desde JS o lo escribes a mano, primero úsalo y úsalo bien El código CSS también se optimiza

Transformación

Vamos a transformar el típico menú de una web para sus 2 secciones principales Daremos un aspecto más dinámico, además de ayudar a centrar la atención del usuario a los puntos que nos interesan.
La imagen distrae y el aspecto sin ella es muy vacío Demasiado código HTML, anidaciones innecesarias Poco CSS custom, pero necesario todavía Necesita descargar todo el código CSS de Bootstrap para una sola barra y 2 botones
Válido sin CSS, ACCESIBILIDAD Responsive con 2 toques
También podríamos hacerlo así Un poco MATERIAL, como hemos dicho, aprovecha las buenas ideas Centramos la atención del menu en un elemento muy visible pero quitamos las distracciones al abrirlo, de una forma agradable

Animación

Las animaciones son una herramienta muy poderosa para CAPTAR la atención del usuario y HACERLE ENTENDER el funcionamiento de los componentes
Es un formulario normal, ACCESIBILIDAD Al cambiar el valor del formulario este responde

Diversión

Y claro, también podemos hacer componentes distintos por Diversión o porque la situación lo requiera
Es sólo un checkbox en 5 líneas de HTML
También podemos hacer checkbox que sean juguetes como este Al final el valor sigue estando en un input checkbox
O sliders tan VISTOSOS como este. En este caso se usa SVG ---> Puedes usar CSS con él y crear lo que quieras Y JS para las físicas con TweenJS

¿Preguntas?

Gracias

Raúl Yeguas

@neokore