Archive for the ‘Diseño’ Category

La nueva década del Diseño Web

Thursday, May 6th, 2010

Hoy en día la Web comienza el 2010, (Clack casí es mitad de año, el tiempo vuela) con estilos frescos y con la aparición de nuevas técnologías o bien lenguajes de programación como la aparición de CSS3 y HTML5 (Que este último viene tan fuerte a punto de desplazar a flash, dicen….) los diseñadores y desarrolladores tienen un conjunto nuevo de efectos y herramientas a disposición.

1.- Grandes Cabeceras (Headers) presentando imágenes enormes.

La tendencia de Headers (Cabeceras) grandes y con enormes imágenes, la idea de hacer llegar el mensaje de productos o servicios que se ofrecen.

Imágenes enormes en headers
Imágenes enormes en headers

2.-Texturas en el fondo de la página (Backgrounds)

El uso de estas texturas como fondos crea cierto panorama de profundidad ofreciendo un estilo único a la apariencia del sitio web.

backgrounds tendencia web 2010 - texturas de fondo
backgrounds tendencia web 2010 - texturas de fondo

3.- El uso de iconos llamativos !

Hoy en día la incorporación de iconos llamativos en la navegación de un sitio web es fomentada para fortalecer la experiencia del usuario dentro del sitio web.

Esto puede fomentar a la usabilidad web, ofreciendo al usuario una excelente manera de explorar el sitio web y entender lo qué el sitio trata de transmitir, con el uso correcto de los iconos el mensaje puede llegar más rapido conjugandolo con poco texto.

tendencia 2010 diseño web
tendencia 2010 diseño web

4.-Imágenes de pantalla completa en el fondo y vídeos.

Wow las tendencias en el diseño web cada día son más grandes y mejores.

Qué tal el uso de imágenes y video en pantalla completa ? Ofrecen al usuario otra perspectiva y una experiencia de inmersión, así la participación del usuario es en forma única.

Imágenes pantalla completa en sitios web.
Imágenes pantalla completa en sitios web.

Excelente ejemplo es de Futuretainment por Mike Walsh.

Experiencia de usuario único.

Tendencias Diseño Web 2010

Tendencias Diseño Web 2010

5.-Tipografía

¿ Qué tal el método HTML 5, brindando la oportunidad de subir una fuenta al servidor web  ?

Si el usuario carece de la fuente a continuación, HTML 5 automáticamente hace que la descargue.

Bien por mi parte todavía no lo he implementado, pero suena bastante interesante, alguien puede dar su opinión con base a la tipografía en HTML 5 ?

Con el uso de fuentes grandes y su método de sustitución crean nuevas formas de inspiración para los usuarios en la web, fomentando una nueva perspectiva, un diseño fresco y un nuevo lienzo experimental para explorar la web y crear experiencias de usuario únicas.

Diseño Web tendencias 2010
Diseño Web tendencias 2010
Tendencias Diseño Web 2010
Tendencias Diseño Web 2010

6.-Cajas de luz o bien modal boxes

Oportunidad de mantener al usuario en la misma página, esto esta sustituyendo a las ventanas emergentes, pero esto es mejor por que aparece la información adicional que sirve para realzar la experiencia del usuario.

Diseño web
Diseño web

7.- ¿ Qué tal el Grid como tendencia en el diseo Web ?

Aportan una limpieza y una facíl navegación o bien una excelente forma de ver los diseños.

Grid tendencia diseño web 2010
Grid tendencia diseño web 2010

8.- Carruseles

Me gusta mucho el uso de los carruseles, originalmente utilizados para imágenes, hoy en día son usados para integrar información, vídeos e imágenes de una manera más creativa.

Carruseles tendencias 2010 diseño web
Carruseles tendencias 2010 diseño web

9.- Lo Retro, escritura a mano y uso de acuarela

¿Cuantos sitios no hemos visto usando lo retro con base a  elementos de escritura, ilustraciones integradas en la interfaz donde dan un toque personal y agradable ?

diseño web tendencias 2010
diseño web tendencias 2010
Diseño web 2010 tendencias
Diseño web 2010 tendencias

10.- Footer o Píe de Pagina

Hoy en día los footer aparte de ser importantes para los site maps y posicionamiento en buscadores, su tendencia es similar a los headers, donde se maneja mucho  elementos de gran tamaño y en ocasiones hasta formularios de contacto, que en mi opinión son bastante buenos, basados en un diseño inspirador y bien puede ser de gran ayuda para los lectores.

Footer tendencias diseño web

Footer tendencias diseño web

El diseño Web viene con constantes cambios, al igual qué el internet su crecimiento sera extraordinario.

¿Cual es tu opinión o qué es lo que consideras imporante o bien como tendencia para el diseño de Sitios Web ?

The New Decade of Web Design

Reproductor FLV gratis para utilizar en tus sitios web

Thursday, April 15th, 2010

Bien antes que nada les envío un cordial saludo !

Hace mucho tiempo  no escribo el motivo creo se debe a que no más no me pongo las pilas.

Aunque bien gracias a Dios he tenido trabajo y mantenido mi mente activa pero debo esforzarme para encontrar un tiempo para escribir y aprender de wordpress como el cambio de look and fell por poner un ejemplo.

Hoy en día quiero compartirles el siguiente url:http://f4player.org/ donde encontraran un reproductor FLV gratis basado en Action Script 3 listo para descargar e incorporarlo en un sitio web.

Capture your life

Saturday, October 24th, 2009

Hi everybody

Today I want to share a url http://www.mov.io.

Where you can find a test application for your Iphone ( I don’t have the new version :( where you can record video ) for record a video and make easy movie uploading and sharing with your friends on twitter.

What ever if you don´t have the new iPhone don’t worry because you can upload a file for share video on twitter.

1.- You have the option to upload videos

2.- Send videos to email that the web create for you where work with *.MOV, *.WMV, *.AVI, *.MP4 files and most codecs, The file size limit is 50 MB.

3.-Record a movie from the web stay in coming soon….

4.-Betatest for iPhone 3GS Application

Enjoy it !

¿ Como reducir el peso de los PSD ?

Thursday, August 20th, 2009

Encontré un Tip bastante bueno, para reducir el peso de los archivos en photoshop, al guardar mi archivo para enviarlo a imprenta peso mas de 90MB, con el Tip bajo a 30MB y comprimido se fue en 25MB.

YEAH !

¿Comó se consigue esto ?

Sencillo Solo oculta las capas antes de guardar el archivo y después al comprimirlo ahorrarás mucho más.

Reduce el peso de archivos PSD

Reduce el peso de archivos PSD

¿ Tienes algo que compartir con nosotros ?

Animate y Registrate !

Etiqueta Div

Tuesday, August 18th, 2009

La etiqueta <div> o división de bloque es un elemento de (x) html utilizado para definir secciones de un (x) html.

La etiqueta <div> puede contener todos los elementos que componen un sitio Web tal como un nuevo <div>, <span>, imágenes, Texto, e.t.c.

Se define un <div> dentro de un (x) html, colocándolo entre la etiqueta <body>
</body>

En la etiqueta <div> se pueden usar tanto clases como ids y crean un salto de línea por default.

Ejemplo de lo que puede contener <div>

<div style=”color:#00FF00″>
<h3>Header</h3>
<p>Paragraph.</p>
</div>

You´ve been update to the latest version of Firefox.

Friday, August 14th, 2009

Hoy en día al abrir el explorador (Firefox) para ver como se visualisaba un sitio Web, el navegador me abrió una alerta para actualizarlo.

Estas son las características.

Firefox 3.5 es el primer navegador que soporta formatos de vídeo, permitiendo que las películas sean hoy en día parte de la Web dinámica, sin necesidad de un plug-in.

Su sitio de asistencia tiene un montón de respuestas, además de una función de chat en vivo para guiarte a través de cualquier situación difícil.

Existen miles de formas gratuitas para personalizar Firefox con base a lo que te gusta hacer en Internet.

Sinceramente yo uso safari pero me me baje unos add-ons para probar el firefox por lo menos una semana bastante interesantes como son:

ColorZilla

FireBug

Web Developer

¿ Ustedes que explorador usan ?

¿ Que mejoras ven en firefox ?

Css Position

Thursday, August 13th, 2009

Css Position

El posicionamiento con CSS permite, un máximo control sobre el lugar que cada elemento ocupara dentro de la página web.

position:absolute;

Absolute Genera un elemento absolutamente posicionado, en relación a su contenido. Las especificaciones de este elemento son left, top, right, y bottom.

Fixed Genera un elemento absolutamente posicionado, en relación con la ventana del navegador. Las especificaciones de este elemento son left, top, right, bottom

Relative Genera un elemento en posición relativa, con base a su posición normal por ejemplo left:20px; añade 20 pixeles al elemento  en posición izquierda.

Statics No hay posicion el elemento se produce en el flujo normal (hace caso omiso de cualquier left, top, right, bottom o declaraciones con z index)

Inherit Especifica el valor de la posición debe ser heredado del elemento padre.

¿ Algo que nos quieran compartir con base a position en CSS ?

¿Estas buscando la manera de ver tus creaciones de sitios web en un iphone ?

Tuesday, August 11th, 2009

¿Buscando la manera de ver tus creaciones de sitios web en un iphone ?

Iphoney es un simulador gratis para diseñadores web que quieren crear 320 por 480 (o 480 por 320) sitios web para su uso con el iphone.

Es de código abierto permitiendo que los desarrolladores de talento en todo el mundo pueda hacer lo que sea para mejorar la herramienta compatible con creaciones web.

Iphoney requiere MAc Os X 10.4.7 o posterior.

Algunas características de lo que puedes hacer con Iphoney.

  • Pon a prueba tu iPhone habilitado para aplicaciones Web 2.0 y sitios Web compatibles.
  • Abra cualquier sitio web que funciona con Safari(el uso de safari 3 beta para la experiencia más exacta).
  • Girar para ver los sitios web, ya sea en orientación vertical u horizontal.
  • Mostrar u ocultar la barra de localización para una pantalla completa experiencia iPhone.
  • Simular el iPhone agente de usuario, el navegador para probar los scripts de redirección.
  • Alejar el zoom para ver la forma actual de sus páginas, mientras que podría ser ampliada a cabo en el iPhone.
  • Desactivar los plug-ins (incluido el flash, pero tenga en cuenta que apagar todos (incluidos los de QuickTime).
  • Sparkle con actualizaciones automáticas, de modo que siempre se sabe si hay una nueva versión.
  • Y, por supuesto, el código de fuente abierta para que pueda contribuir a la rápida evolución iPhoney.

http://www.marketcircle.com/iphoney/

Making a Simplistic Multi-Tags Icon

Tuesday, August 4th, 2009

Agrego el Multi-tag Icon terminado.

Multi Tag Icon

Multi Tag Icon

La idea es aprender a usar PS y encontre un excelente tutorial en la siguiente liga.

http://hv-designs.co.uk/2008/11/17/simplistic-multi-tags/

¿ Mockup or Wireframe ?

Thursday, July 30th, 2009

Mockup es un dibujo hecho con lápiz y papel en donde se representa la interfaz de un producto final.

También es usado como prototipo, modelo de diseño o bien representación gráfica de un proyecto o idea.

Existe una herramienta para hacerlos electrónicamente se ve interesante aunque no es gratuita puedes descargar una versión de prueba en la siguiente liga.

#mce_temp_url#

Los Wireframes son un conjunto de dibujos que representan cómo estarán organizados los elementos de las páginas web, estos se realizan antes de empezar a programar y diseñar los elementos visuales de un sitio web.

Ejemplo de ¿ Mockup o Wireframe ?
Example of mockup or Wireframe

Example of mockup or Wireframe