Los expertos en diseño web ponen sobre la mesa sus trucos y secretos que agilizan su trabajo y hacen que fluya por sí sólo.
Todos los diseñadores webs tienen un par de secretos. Fluidez, hacks escondidos y conocimiento propio de la disciplina es lo que les posiciona como expertos con experiencia y lo que marca la diferencia entre un diseño web excelente y uno mediocre.
Descubriremos las prácticas con las herramientas más conocidas, las posibilidades de estas, los servicios beta que entrelazan el diseño y los trucos CSS que hacen la plataforma más optimizada. Seas un principiante o un experto, te interesará para ir un poco más allá en tu día a día.
Código rápido
Codekit para actualizar el explorador.
Nos permite guardar los cambios hechos en programación de la web al momento sin tener que refrescar la página. Este software nos permite programar más dinámicamente y nos ahorramos tiempo. Sólo existe para Mac pero ya es considerado un must.
Aplicar cambios globales
Este truco nos permitirá dinamizar la programación al inicio de la creación de un sitio web. Usaremos un asterisco para aplicar estos cambios globales de la página, por ejemplo cambiar la tipografía utilizada: *{font-family:arial, helvetica,sans-serif;}
Guías llamativas
Marcarte en color las consultas de programación que puedas tener te ayudará a organizarte mucho más, además te ayudará a ver las reglas que ya se han aplicado y las que no.
Revisa el contador de palabras
Lo aceptado y los textos más leíbles son los textos con unas 45 a 75 caracteres. Hay un truco para ver si nuestra web puede soportar este peso para continuar siendo responsive y para tener un diseño fluído. Para comprobarlo coloca lorem ipsum en asteriscos con los caracteres que os hemos dicho y examina si la web cambia o continua optimizada.
Utiliza Fitvids para la incrustación de vídeo
El HTML5 ha simplificado mucho la incrustación de vídeo pero aún existen un par de problemas. El primero, hacer que el vídeo cambie de tamaño ante un diseño responsive, consultando la página desde otro dispositivo que no sea web. El otro es hacerlo responsive des de una animación flash si no podemos trabajar con HTML5. El plugin de Fitvids nos lo solucionará instantáneamente.
Trabajar con imágenes
Reducir el tamaño de las imágenes
Smushit es un programa que elimina los bytes innecesarios de las imágenes. Las imágenes optimizadas ayudan a que la página cargue más rápido y el diseño web pueda ser responsive.
Exportar las imágenes a 8bits en PNG
Aconsejamos guardar las imágenes en PNG, si no las queremos en transparente, para optimizarla sin perder calidad. Si queremos la transparencia hay un programa que nos lo hace, PNGQuant nos pasará las imágenes con transparencia de 24/32 bits a 8.
Disposición
GuideGuide para el diseño web
Las mejores páginas web están diseñadas con una retícula. Tener que crear retículas cada vez que planteamos un diseño web puede ser aburrido y nos robará tiempo, con GuideGuide las retículas se crean al momento. Si no quieres descargarte el programa recomendamos las retículas de 12 columnas porque nunca nos fallan para crear una buena página web bien diseñada.
Colores e ideas
Los expertos recomiendan Adobe Kuler para escoger las mejores paletas y entrar en foros de diseño e inspiración para darnos una idea de las últimas tendencias. Colour Lovers es una página donde los expertos comparten lo que hacen, sus diseños y los esquemas de colores más utilizados.
Tipografía web
Typecast te crea paletas de tipografías.
Escoger la tipografía perfecta para la imagen corporativa de una página web es difícil, hay una variedad infinita y no sabemos por dónde escoger. Con este programa podremos comparar el mismo texto varias veces con distintas tipografías para que sea mucho más fácil seleccionar la adecuada.
Google Fonts y Font Squirrel
Aquí tenemos los catálogos tipográficos gratis y extensos que más nos pueden ayudar.
Planificar la página web ideal
Utiliza Dropbox Pro para el control de versiones
Cuando se están gestionando cambios en una página web, Dropbox puede ayudar a que no se pierdan archivos y que está gestión este actualizada al momento.
Focalizar energías en un sólo concepto
Buscar un concepto base para la web hará que todo fluya fácilmente y que esta página se encarrile más fácilmente.
Trabajando con Photoshop
Un buen diseño web tiene mucha organización detrás, para ello, cuando estemos trabajando con Photoshop recomendamos ponerle nombres identificativos a las carpetas, borrar todas aquellas que no nos sean útiles, tener una carpeta con todos los filtros, fuentes e imágenes externas que puedan ser susceptibles de perderse si cambiamos de ordenador, guardarlo TODO en la nube por si nos falla el ordenador y ordenar las carpetas de nuestro ordenador para encontrarlo todo de manera dinámica.
Pueden parecer consejos demasiado obvios pero los buenos resultados vienen de los buenos métodos.
Mantén tus clientes contentos
Los clientes quieren resultados rápidos y consumir contenido. Para cumplir con su impaciencia podemos presentar demos o prototipos del diseño web que le presentaremos con tal que vea que el proyecto está en marcha y tenga una idea de cual será el resultado. También es importante que ellos sientan que forman parte del proceso, consultar su opinión es básico para que estén satisfechos con tu trabajo.
Por otra parte recomendamos crear contenido, para ello Pinterest es la herramienta estrella dónde podemos crear tableros de inspiración y moodboards para que vean cual es nuestro estilo y referencias.
Finalmente, para acabar, os motivamos a aceptar todos los reptos que se os propongan, documentar vuestros trabajos de diseño web en un portfolio para que el mundo sepa que existís y actualizarse real-time para saber cuales son las tendencias del sector.
