Blog personal de Sergio Madrigal donde encontrar textos sobre ciencia y tecnología, psicología, cine y literatura y quizá alguna cosita más.

Etiqueta: diseño (página 1 de 2)

Encontrando el tema adecuado

Cuando iniciamos un nuevo proyecto y una vez hemos decidido emplear una plataforma de gestión de contenidos (CMS), el siguiente paso tras la instalación de la plataforma va a ser el de seleccionar qué tema vamos a usar para nuestro front-end.

Aunque parezca a primera vista una tarea trivial (a priori se trata de buscar un diseño que nos guste y su proceso de instalación resulta más que sencillo), en realidad se trata de un paso clave que va a influir de manera determinante en el éxito de nuestro proyecto por varios motivos.

La importancia del diseño. 

Imagen

Está claro que para los seres humanos, en su inmensa mayoría, la primera toma de contacto con cualquier producto se realiza a través del sentido de la vista. En el mundo de Internet esta situación se produce de forma más notable puesto que hasta que no se desarrollen tecnologías del futuro, nuestra interacción con las páginas web se reduce a la vista y el oído.

Por ello es fundamental decidir qué queremos que transmita nuestro diseño en relación al producto que vamos a tratar de vender. ¿Buscamos sencillez para transmitir que lo importante ese el servicio que proporcionamos? ¿Nuestro producto debe mostrar creatividad y resultar atractivo para el usuario?

Interactividad

Muchos de los productos o servicios que desarrollamos requieren una interactividad por parte del usuario: ya sea una tienda online o una página de juegos al final el usuario va a tener que interactuar con ella. Por muy genial que sea nuestro entorno, por muy cuidado que sea el diseño gráfico, si olvidamos por un sólo instante que el usuario tiene que estar cómodo, tiene que entender lo que está sucediendo y sobretodo, tenemos que responder ante lo que él espera, estaremos completamente perdidos. Un usuario descontento raramente suele volver a visitarte.

En una mundo tan salvaje como el de Internet en el que cada día surgen nuevas ideas muy similares, cometer este tipo de errores es, sencillamente, letal.

Rapidez

Que sí, que jQuery es una maravilla, que cuando se empezó a pensar en que el navegador hiciera el trabajo sucio alguien llegó a la conclusión de que había cuadrado el círculo. Pero parece que nadie se paró por un momento a imaginar que no todos tendrán un Core i7 con 16 GB de memoria RAM.

Una página lenta es una muy mala página. Los efectos javascript están geniales para un nicho de negocio específico, no para todos. Si eres un gabinete psicológico lo que interesa es que tus futuros clientes vean qué servicios ofreces, tus tarifas, la forma de ponerse en contacto contigo y no que se pierdan entre movimientos alucinantes de fondos e imágenes de resoluciones imposibles.

La rapidez es una virtud indispensable para una página web. Hay estudios que han valorado el tiempo de atención medio de un usuario en una página y, creedme, es más bien escaso.

Tras algunos años de experiencia jugueteando con este tipo de problemas, mis consejos se reducen a tres:

Se simple, se directo. Busca ante todo que lo que sea relevante sea lo que vendes. Está claro que hay temas preciosos y llenos de extensiones maravillosas que hacen cabriolas en el aire. Pero al final tu objetivo, y eso no se te debe escapar, es vender tu servicio/producto. Enfoca todos tus esfuerzos en esa dirección.

Domina el terreno de juego.  Hay temas geniales, muy profesionales, con un panel de configuración más propio de un Boeing que de una plataforma web. Hay que tener mucho cuidado con esto y ser sinceros con uno mismo: ¿Hasta dónde llegan mis conocimientos? ¿Voy a pasar más tiempo customizando y adaptando mi tema para que funcione que desarrollando mi idea de negocio? Los errores más comunes que he visto cuando se elige un tema profesional son precisamente los relacionados con la incapacidad de los administradores del CMS de gestionarlos correctamente.

No pierdas el tiempo. Es una decisión importante ya que se trata de la imagen que va a tener tu producto o servicio para el resto del mundo pero mucho ojo con eternizar el proceso. Al final tu objetivo es vender un producto, un buen producto, un producto genial. Dedícale el tiempo justo al envoltorio y lánzate a lo que de verdad importa: tu idea de negocio.

Estructura básica de un documento web.

El primer paso a la hora de comenzar a diseñar una página web es centrarnos en su estructura.

Todos los documentos  HTML (HyperText Markup Language) están compuestos por 3 etiquetas fundamentales:

  • html
  • head
  • body

La primera etiqueta, html, define lo que comprende el documento web, es el inicio del mismo. Éste, a su vez, se divide en dos partes diferenciadas: head y body.

En la sección head es donde colocaremos aquellos elementos que no están relacionados directamente con el contenido del documento. Es decir, hojas de estilo, scripts, códigos especiales, etc. Dentro de ella colocaremos la etiqueta title que definirá el título de nuestro documento web.

En la sección body es donde propiamente desarrollaremos el contenido de nuestra web y es lo único que se va a mostrar en el navegador.

Aquí os muestro un pequeño ejemplo de cómo debería ser la estructura básica

[cce lang=’html4strict’ ]

<!DOCTYPE html>

<html>
<head>
<title>Title of the document</title>
</head>

<body>

Body of the document.

</body>

</html>

[/cce]

Crea tu firma para cualquier foro en Photoshop.

Os traigo hoy un mini-tutorial de cómo realizar rápidamente una firma para cualquier foro de discusión online usando Adobe Photoshop.

En este caso he utilizado Adobe Photoshop CS5.

1. En primer lugar lo que tenéis que cercioraros es de la normativa de cada foro puesto que dependiendo de ésta las dimensiones de vuestra firma pueden variar. Creamos un nuevo documento con esas dimensiones:

IF

2. Creamos una selección sobre el lienzo y con ella creamos una nueva capa a la que llamaremos fondo. La rellenamos con la herramienta «bote de pintura» de blanco.

IF

3. Elegimos dos colores con cierto contraste: rojo – blanco por ejemplo.

IF

4. Aquí empezamos con la magia. Vamos a Filtro > Interpretar > Nubes de diferencia. Con esto generamos un fondo bastante mono que nos servirá de soporte para nuestra firma.

IF

5. Buscamos una foto interesante que tenga relación con la temática del foro.

IF

6. La añadimos a nuestra firma. Si al pegarla lo hacemos con «Pegar especial > pegar dentro» estando seleccionado el fondo conseguiremos tener enmarcada la fotografía en el espacio de la firma.

IF

7. Ahora toca ya la parte creativa: buscad pinceles, que hay muchos, poned vuestro nombre, alguna frase que os haga parecer interesantes y… voilá!

IF

Enlaces interesantes (I)

En los próximos días, y en la medida de que el tiempo que tengo me lo permita, os iré recomendando algunas lecturas que desde mi punto de vista son interesantes:

  • Un algoritmo español triunfa en USA [ciencia]: Por lo visto los españoles no somos tan tontos y quizás si en vez de recortar el presupuesto en I+D se potenciase, podríamos tener algo que decir. Vía|Menéame.net
  • Diálogos para besugos. [política]. Se ve que no sólo ha venido de suecia Ibrahimovic. Nuestro «president» también sabe muy bien lo que significa «hacerse el sueco».  Vía|Escolar.net
  • Las mejores fuentes gratuitas. [diseño]. Cualquier diseñador que se precie necesitará de una buena gama de fuentes (tipos de letra) para adornar sus diseños. Vía|Intenta
  • Llega HSPA+ a Telefónica Movistar y a Vodafone. [teleco]. Al parecer ambas operadoras, en un movimiento estratégico curiosamente simultáneo han actualizado su oferta de acceso a internet ) móvil a la tecnología HSPA+. Vía|BandaAncha&Xakata

Las contraseñas en los móviles

Muy interesante el artículo de 21projects.com (proyecto del que cuando tenga algo de tiempo hablaré) relacionado con la usabilidad de las interfaces web y los formularios a través de las pantallas de los terminales de telefonía móvil.

Es interesante ver como las preguntas respecto a temas relacionados con el diseño y la accesibilidad de contenidos van dirigidas cada vez en mayor medida hacia terminales de pequeñas dimensiones como PDA’s, Netbooks o teléfonos móviles.

El futuro, con la llegada de la cuarta generación (4G) en la telefonía móvil, viene cargado de sorpresas.

18 diseños basados en pinceles de Photoshop

Desde esa página web podréis acceder a una lista de 18 diseños que han hecho uso de los pinceles de Adobe Photoshop.

Además de poder ver el diseño realizado, tendréis acceso a tutoriales y descargas para poder llevar a término diseños similares de forma muy intuitva y guiada.

Sin lugar a dudas, Photoshop es una herramienta tremendamente útil para el diseñador web gráfico, puesto que con su potencia y con los complementos que ofrece en forma de plugins, pinceles, acciones, etc. permite realizar trabajos profesionales muy cuidados.

Impresionantes fotografías de ciudades

Muchos conocéis mi creciente interés por el mundo de la fotografía que me está llevando a plantearme seriamente la adquisición de un nuevo capricho en forma de cámara Reflex semiprofesional.

Mientras me decido por cuál de todas las que muchos de vosotros me habéis recomendado, últimamente me ha dado por centrarme en las formas de realizar las fotos. Qué tipo de retoque se suele utilizar, etc.

Navegando he llegado a está increible página web donde se muestras fotografías de grandes ciudades con una calidad digna de mención.

Inmejorables para realizar fondos de pantalla, diseños para webs o incluso pósters motivacionales. Eso ya os lo dejo a vosotros.

Enlace | http://designm.ag/inspiration/cityscape-photos/

Vía | PuntoGeek.com

Fuentes de calidad gratuitas

Uno de los requisitos indispensables a la hora de realizar un diseño correcto y adaptado a las necesidades del usuario final es la selección de los tipos de de letra para los títulos, cabeceras e imágenes que vayan a aparecer en la web.

Desde fontex [fontex.org] tendrás al alcance del ratón una gran cantidad de fuentes gratuitas que podrás previsualizar directamente desde la web para decidir si se corresponden con lo que andas buscando.

free-fonts-to-download-premium-typefaces_1242336522816

Visto en:  wwwhatsnew.com

Crea tu avatar manga

Siempre está bien que de vez en cuando cambiemos nuestro avatar en las distintas redes sociales. Para los no-iniciados avatar es la foto que nos identifica en aplicaciones como MSN Messenger, AOL Messenger, Yahoo! Messenger, Twitter, gTalk…

El otro día, gracias a una compi de Twitter encontré esta simpática web desde la que puedes crear tu carácter en 3 sencillos pasos.

Aquí tenéis el que me he hecho yo 🙂

Enlace | www.faceyourmanga.com