Consejos para diseñadores y maquetadores web

El pasado 19 de Julio di una charla gra­cias a @adwe_es en las insta­la­ciones de @tuca­mon

 

Adjunto les dejo la reseña que hizo @tuca­mon de mi charla y un enlace al  video de la misma:

Jaime Creix­ems resumió en CAMON Madrid diez con­se­jos bási­cos para maque­ta­dores y dis­eñadores web que pueden facil­i­tar su labor tanto por sep­a­rado, como en el pro­ceso de tra­bajo con­junto. Todos los tips que se expli­caron parten de una premisa básica: la comu­ni­cación entre ambos equipos para mejo­rar los resul­ta­dos.

Img_5571_blog

Con­se­jos del dis­eñador al maquetador

1. Haz código semán­tico.
“Hacer las cosas de tal man­era que el usuario pueda encon­trar las fun­cional­i­dades de la apli­cación, aplicar las mejores prác­ti­cas y bus­car la mejora pro­gre­siva aprovechando todas las capaci­dades que los dis­tin­tos nave­g­adores aportan”.

2. Háblame de fun­cional­i­dades. 
”¿Cómo va a ser la aplicación? ¿Qué efec­tos va a tener? El dis­eñador podrá saber cómo crear las difer­entes vis­tas y cor­re­gir antes de empezar, para evi­tar posi­bles errores”.

3. La inter­faz y el dis­eño son el soft­ware.
“La usabil­i­dad es lo ver­dadera­mente impor­tante. No impor­tan las bases de datos, el lenguaje o los divs sino que la página facilite la tarea al usuario”.

4. El buen código es el que favorece la expe­ri­en­cia al usuario.

Uti­lizar todas las her­ramien­tas que faciliten y hagan más agrad­able la expe­ri­en­cia al usuario, tanto por las difer­entes vis­tas y la apari­en­cia como con el con­sumo de recur­sos, la opti­mización de la carga, etc.

5. Los detalles impor­tan.
“Un buen uso de la paleta de col­ores, los már­genes, el pix­e­lado… Los detalles mar­can la difer­en­cia entre una apli­cación nor­mal y una extraordinaria”.

Con­se­jos del maque­ta­dor al diseñador

1. Es una apli­cación, no una revista.
“No exis­ten los pun­tos por pul­gadas, sino los píx­e­les, no se mide en cen­tímet­ros. Se debe tener en cuenta el peso de las imá­genes. Un dis­eñador web se dis­tingue en estos aspec­tos de los dis­eñadores de revista, de papel”.

2. El CRAP es vital.
CRAP como acrón­imo de: Contraste entre col­ores para destacar lo más rel­e­vante, Alin­eación para favore­cer la como­di­dad del usuario y dar sen­sación de orden, Repeti­ción de ele­men­tos que puedan reuti­lizarse para facil­i­tar el tra­bajo del maque­ta­dor y Posi­cionamiento, para fijar el orden de las cosas cuya fun­cional­i­dad es la misma o similar”.

3. No temas a la com­ple­ji­dad, pero no te quedes en ella.
“En muchos pro­ce­sos, primero se pasa por la com­ple­ji­dad para mostrar la sim­pleza después. Elim­ina fun­cional­i­dades que no sean nece­sarias. Hacer que del caos emerja un orden mayor, define qué es impor­tante y qué no lo es”.

4. Sé flex­i­ble y piensa lo impens­able.
“Dis­eña API (A Prueba de Idio­tas). Piensa en qué pan­tallas se puede uti­lizar (orde­nador, iPhone, iPad…), plan­téate todos los req­ui­si­tos y fun­cional­i­dades con los que deberá cumplir”.

5. Dis­eña, no dibu­jes.
“Explica los ele­men­tos, estandariza… comuní­cate con el maque­ta­dor y tra­baja en con­junto al menos, durante algu­nas de las fases del proyecto”.

 

Diagramando un Diseño y Pasándolo a WordPress

Este screen­cast lo grabé durante una de las clases del Curso de Dis­eño Web que dí recien­te­mente. Repasamos el pro­ceso de slic­ing de un dis­eño, su con­ver­sión a HTML y su inte­gración a WordPress.

Dis­frútenlo!

Pro­ceso de Slic­ing e inte­gración de un dis­eño web a Word­Press from Jaime Creix­ems on Vimeo.

Material del Curso de Diseño Web

Recien­te­mente con­cluí el Curso de Dis­eño Web, el cual con­sidero que fue todo un éxito.

Quiero agrade­cer a todos los que se inscri­bieron y me acom­pañaron mien­tras repasamos los con­cep­tos bási­cos del dis­eño web, desar­rollo HTML / CSS y la inte­gración con Word­Press. Fue un honor com­par­tir con uds. mucha­chos, muchísi­mas gra­cias por haber estado allí.

Como lo prometido es deuda aquí les dejo todo el mate­r­ial desar­rol­lado durante el curso junto con otra serie de “good­ies” para que real­i­cen sus dis­eños den­tro de lo cual incluyo más de 5000 iconos en for­mato PNG. El con­tenido incluye:

  • Pre­senta­ciones dic­tadas durante el curso
  • Todo el con­tenido HTML / CSS / Word­Press desarrollado
  • +5000 iconos en PNG
  • Un “starter pack” de HTML5
  • Info­grafías y Cheat­sheets de HTML, CSSHTML5
  • Mod­elo de CV en HTML+CSS para que con­struyan el suyo propio
  • El screen­cast que grabamos en una de nues­tras sesiones estará disponible en el próx­imo post.

Además les dejo los links en deli­cious de muchos de los recur­sos con los que trabajo:

De nuevo muchísi­mas gra­cias por haber par­tic­i­pado en el curso.

Descar­gar Material