background-image: ese gran aliado

Un factor importante a la hora de diseñar nuestra web es el background. Yo siempre opto por un color sólido, pero es cierto que a veces queda mejor un pequeño pattern con una imagen simple. El efecto queda perfecto: imagen de poco tamaño, totalmente personalizable, acorde con el css de nuestro layout, y totalmente compatible con cualquier navegador.

¿Cómo puedo conseguir un pattern atractivo sin necesidad de volverme loco con Photoshop?, fácil, visitando AVA7 Patterns, una magnífica web que pone a nuestra disposición cientos y cientos de formas de crear nuestro patrón.

Espero que también os guste :)

Anuncios

¿Necesitas inspiración?

Es cierto que a la hora de diseñar un formulario, un layout, un header, y un larguísimo etc. para cualquiera de nuestros proyectos necesitamos inspirarnos en algo para poder encontrar ese diseño sólido que andamos buscando.

Durante muchos años, páginas como cssmania o csszendgarden han sido motivo de visita obligada para conseguir ese toque final que andamos buscando, pero existe algo más concreto en la red? es decir, y si necesito diseñar una página 404 para mi web?

Os presento PatternTap.com

Pattern Tap is here to satisfy and encourage the inspiration needs of my interface design peers and peeps. We aspire to be the one stop pattern shop for your next inspiration need.

Sin duda una de mis web favoritas y de asistencia obligada en mis marcadores. Desde aquí se puede conseguir muchísima inspiración en múltiples de sets de diseños. Formularios, navegaciones, cabeceras, layouts, comentarios, listas, subnavegación, y un maravilloso etc. que nos ayudarán a conseguir ese diseño que tanto vamos buscando.

Espero que os guste :)

User experience

Es difícil medir la experiencia de un usuario en nuestra web. Gracias a Google Analytics y a otras aplicaciones, podemos hacernos una idea de qué está pasando desde que un cliente entra en nuestra página hasta que se va. Pero, realmente es fiable?.

Otra buena práctica es la de buscar a una persona totalmente ajena al proyecto y al campo, sentarla delante de un ordenador y observar cómo navega por nuestro site. Tomar apuntes, fijarse bien donde clica y donde no, ver si se ha dado cuenta de ese magnífico banner que tanto te ha costado diseñar, etc.

Acabo de encontrar una herramienta magnífica que nos ayuda en esta tarea. Se trata de CrazyEgg, una empresa especializada en User Experience que ofrece sus servicios para poder medir este hecho.

El sistema se basa en 4 factores principales: Heatmap, Scrollmap, Confetti y Overlay.

Heatmap nos permite ver los clicks de nuestros usuarios mediante un mapa de calor. Cuanto más azul es el color, menos clics ha habido, y cuanto más rojo, más clics ha tenido dicho enlace. Es genial como se ve el montaje en directo.

 

Scrollmap nos permite medir el factor de rebote. Si tenemos una página muy “larga”, podemos observar qué factor de scroll ha hecho el cliente, de manera que podamos cazar al cliente que entra, echa un ojo, y se va sin hacer nada.

 

Confetti puede que sea de las más interesantes, ya que no solo nos permite ver los clics como Heatmap, sino que también nos lo fragmenta en enlaces referidos, sources, términos de búsqueda o keywords y un largo etc.

 

Overlay nos muestra un resumen del número de clics que ha tenido un enlace.

Vale, pero cuánto cuesta todo esto?, pues no es caro, en serio, por 9 euros al mes podemos tener derecho a tener 10 páginas monotorizadas.

 

Más información CrazyEgg

Lipsum o quijotipsum?

Para todas aquellas personas que usamos el famosísimo lipsum a la hora de generar texto aleatorío y “rellenar” nuestros diseños, os presento otra magnífica herramienta llamada Quijotipsum. El servicio es básicamente igual que lipsum, pero esta vez, en lugar de generar texto en latín, nos muestra textos sacados directamente de la obra El Quijote.

Muchos no sabréis de qué estoy hablando, pero para los que lo sepan tanto como yo, seguro que les hace gracia la idea.

Enlace Quijotipsum

Postear código en wordpress

Tras varias entradas posteando códigos me he dado cuenta de que nunca quedan como yo quiero. Utilizo los tags code y quote para intentar dejarlos lo más claro posible, pero ni se ven las tabulaciones ni los colores correctos.

Indagando en la red he encontrado la solución, así que vamos a probarlo:

if ($a == 25)
   echo "Hola mundo";
else
   echo "Otra cosa";

Parece que funciona, no?

Fuente: Moisés Varela

Briefing – Estrategias de diseño

Navegando por los blogs de wordpress, aparte de ver cosas muy raras, gente muy fea y blogs que parecen absurdos… uno se deleita con buenos posts como este…

Al momento de comenzar un proyecto hay ciertos pasos claves a realizar que si bien no nos aseguran un buen término, son de gran ayuda y sumamente objetivos. Como estudiantes siempre los hacemos pero por defecto, no porque sepamos que hay un manual que lo dice sino porque estos pasos son efectivos y algunos incluso cotidianos. La idea es poder nombrar esto que “hacemos por que si” y hacermos cargo por que en definitiva el manejo de esta metodología de trabajo es la que nos va a diferenciar de otros diseñadores cuando estemos en el mundo laboral. Me refiero a la Estrategia de Diseño cuyos principales pasos son el Briefing, Conversaciones Guiadas, Benchmark, Entrevistas a Usuarios y el Coaching

El Brief es básicamente un formulario que se le entrega al cliente para poder hacer un levantamiento de necesidades y saber específicamente qué es lo que busca con el proyecto. En el fondo le preguntamos de todo; quién es, qué quiere, cuáles son sus objetivos, con qué material cuenta, cuáles son sus necesidades, cuáles son sus ventajas y desventajas, quién es su competencia, en fin toda la información que nos pueda dar.

El Brief va acompañado de la Tabla Gant que como su nombre dice es una tabla con la asignación de las faenas en el tiempo. Son cuatro los factores dentro de la Tabla Gant: Las faenas, los tiempos, la cotización a partir de la hora hombre, y los recursos o personas. Hay programas especiales para realizarla como Project para PC y Merlin para Mac OS, sino también sirve el clásico Exel.

Algo muy importante acerca del Briefing es que en este momento el cliente se compromete y por escrito dice lo que quiere, es una especie de contrato, por lo tanto si algo no está declarado en el Brief no se hace, o se hace una cotización aparte.

Otra manera de saber más acerca del proyecto son las Conversaciones Guiadas con el cliente donde a través de preguntas capciosas podemos informarnos de cosas más específicas. Usualmente es un sicólogo quién tiene esta conversación con el cliente.

El Benchmark es un análisis comparativo. Se toma toda la información que el cliente nos da en el Brief, especialemente lo que tiene que ver con su competencia y nosotros comenzamos a investigar, medir, contrastar, comparar y hacemos el análisis FODA, se trata de las fortalezas, oportunidades, debilidades o vulnerabilidades internas y amenazas o riezgos externos. Entonces se hace un screenshot que básicamente es un informe donde le explicamos al cliente todo lo visto en el Benchmark.

A través del Coaching podemos enseñar y entrenar al cliente para poder cumplir el objetivo del proyecto de la manera más eficaz usando sus propias habilidades y recursos.

Fuente: http://manudelpino.wordpress.com/

Futura series 2

Paul Ensene ha lanzado una nueva versión de su pack de fondos de pantalla (wallpapers) al que llama Futura Series 2, en él descubriréis un set de 18 fondos a cada cual mejor para vuestros escritorios, todos ellos bajo licencia Creative Commons 3.0

A mí personalmente me encantan estos fondos para mi macbook, pero quedan perfectos en cualquier escritorio

Podeis descargar el pack pinchando aquí

Ayamontecenter.com

Ayamontecenter.com

Este es el nombre de mi último proyecto. Lo he cerrado esta mañana en Ayamonte (Huelva) y el cliente ha quedado la mar de contento.

 Se trata de la página oficial del hotel Don Diego, que pasará a llamarse Ayamonte Center. Entre las características de la web cabe destacar la autogestión de todo el contenido, pero lo más importante es el sistema de reservas que les he desarrollado.

Mediante una serie de módulos autogestionables, el administrador del hotel puede alimentar el cupo de habitaciones que va a vender durante un periodo de tiempo estipulado. Se pueden vender con la tarifa oficial o con las ofertas que se vayan insertando.

De todas formas voy a modificar el sistema para que tenga un par de opciones más que he visto en Booking.com y así hacerlo perfecto para revenderlo jeje

URL: http://www.ayamontecenter.com

Saludos!

CSS – Rodear una imagen con texto

La verdad es que es un efecto bastante sencillito y que da muy buenos resultados. El ejemplo claro sería un periódico, donde podemos observar como el texto rodea a la imagen.

 Si ponemos una imagen y después el texto, nos quedaría algo como esto:

Dejandomarcas.com

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sapien ante, cursus ut, luctus vel, viverra ut, diam. Curabitur turpis pede, consectetuer a, dictum eu, rutrum sed, diam. Cras ac leo quis pede eleifend laoreet. Integer sollicitudin turpis. Morbi quis risus. Vestibulum sed nulla quis quam rhoncus volutpat. Curabitur orci quam, luctus imperdiet, dapibus vel, aliquet et, turpis. Aliquam dapibus nisi. Nullam arcu quam, dapibus a, porttitor vel, ornare vitae, ligula. Aliquam vulputate. Nunc faucibus. Proin at arcu vitae augue porta volutpat.

 El truco para que la imagen se quede rodeada por el texto es añadirle el estilo float y después la posición (left en este caso):

Dejandomarcas.comLorem ipsum  sit amet, consectetuer adipiscing elit. Fusce sapien ante, cursus ut, luctus vel, viverra ut, diam. Curabitur turpis pede, consectetuer a, dictum eu, rutrum sed, diam. Cras ac leo quis pede eleifend laoreet. Integer sollicitudin turpis. Morbi quis risus. Vestibulum sed nulla quis quam rhoncus volutpat. Curabitur orci quam, luctus imperdiet, dapibus vel, aliquet et, turpis. Aliquam dapibus nisi. Nullam arcu quam, dapibus a, porttitor vel, ornare vitae, ligula. Aliquam vulputate. Nunc faucibus. Proin at arcu vitae augue porta volutpat.

 De esta manera, ya tenemos la posición correcta. Tan solo habría que retocar los márgenes o el padding para dejarlo totalmente justificado.

El código final de la imagen es:

<img src=http://www.dejandomarcas.com/imagenes/logo_gif.gifborder=”0″ alt=”Dejandomarcas.com” style=”float:left” />

Un saludo!

A %d blogueros les gusta esto: