¿Cómo mejorar la Experiencia de Usuario (UX) en tu página web?

¿Por qué mi página web no funciona? ¿Porque tengo poco tráfico en mi página web?
Son unas de las muchas preguntas que se hacen las personas a ver que se página web no genera el resultados que ellos deseaban. Uno de los problemas principales es que este website no está construido para llegar a tu cliente. ¿Porque?
Es posible que la website sea aburrida, poco funcional y los artículos o datos que le interesan al usuario sea difíciles de encontrar.
¿Cómo contrarrestar esto?
Creando una web basada en la Experiencia de Usuario – UX, esto significa hacer un diseño personalizado hecho a la medida para cada tipo de usuario.
¿Qué es lo que se necesita para hacer una web basándose en la Experiencia de Usuario – UX?
Que sea agradable, efectivo y memorable. Detallemos cada uno de ellos.
a1

Un diseño Agradable:

¿Cómo?, Se dice e que la primera impresión es lo que cuenta, lo mismo sucede con tu web. A primera impresión tiene que tener un buen aspecto y sea agradable a vista del usuario. Si no causas esa impresión al usuario simplemente cerrara tu web y se ira en busca de otras web.
Si haces una web con un diseño enfocado a tu usuario, este se sentirá muy a gusto y con más confianza, por ello tu web tendrá más tráfico y por consecuente más éxito.

Un diseño Efectivo:

Tu web tiene que tener funciones relevantes que la diferencien de muchas. Todos los datos que existan en tu web tienen que estar al alcance del usuario, ya que así sentirá que el gusto de tener todo fácil (que es lo que todos como usuario esperamos). Teniendo esto en cuenta el usuario no solo volverá si no también recomendara tu web, ya que ya sabe dónde está lo que busca.

Un diseño Memorable:

Es importante crear una relación con tu usuario, ¿Cómo?
Puedes crear un Avatar, que genere empatía con el usuario. Tus clientes te recordaran siempre, así sea por ese mínimo detalle del muñequito. Con esto el usuario te diferenciara de muchas otras web y te relacionaran siempre con ese detalle y no te olvidarán.
a2

¿Qué es un Mockup o Wireframe?

Como diseñadores o desarrolladores web, cuando nos enfrentamos a un nuevo proyecto con un cliente es de vital importancia lograr una buena comunicación con el cliente y detectar realmente sus necesidades pero esto es un problema cuando en algunos casos el cliente no sabe lo que necesita realmente o no puede explicarlo de manera adecuada.

Para evitar el tener que volver atrás en nuestros proyectos y para mostrarle al cliente una mejor visualización del proyecto, nace la idea de los mockups, maquetas o wireframes.

Wireframes en desarrollo y diseño web.


Un wireframe básicamente es un boceto básico y de baja calidad del desarrollo de una página web o el diseño de una interfaz, la finalidad de este es el mostrar al cliente un diseño o boceto rápido y facilitar la comunicación entre cliente y desarrollador.

El wireframe tiene como objetivo proporcionar la visualización del diseño o las funcionalidades de un site o incluso una App de manera netamente referencial y poder definir objetivos en una etapa temprana del proyecto, incluso hacer modificaciones de manera rápida, para evitar hacer estos cambios sobre un site o diseño real, nadie quiere que un cliente le cambie el diseño web cuando este ya está maquetado o sí? XD
Existen una variedad de software que nos permite crear estos tipos de wireframes, a continuación enunciamos algunos:
Balsamig (Demo Online)

Sitio web: http://www.balsamiq.com/products/mockups
Mockingbird

Sitio web: https://gomockingbird.com/
Lovely Charts (Online)

Sitio web: http://lovelycharts.com/
Mockflow

Sitio web: http://www.mockflow.com/
Gliffy

Sitio web: http://www.gliffy.com/uses/wireframe-software/

Wireframe para el diseño de interfaces (Apps)

En el caso de wireframes para el diseño de interfaces de dispositivos móviles o aplicaciones móviles (APPS). También contamos con algunas herramientas que nos permiten crear estos bocetos y usarlos como referencia en un proyecto para nuestro cliente, son:
Iphonemockup (Online)

Sitio web: http://iphonemockup.lkmc.ch/
Balsamig (Si también permite realizar bocetos para apps móviles)

Sitio web: http://www.balsamiq.com/products/mockups
Wireframe CC (Online, este nos permite realizar wireframes dispositivos móviles como tabletas, celulares, y también el monitor de un ordenador)

Sitio web: http://wireframe.cc/

Mockup o maqueta en diseño grafico


Las maquetas o mockups últimamente se han puesto de moda para representar un diseño gráfico o especialmente editorial.

El objetivo en el caso de este tipo de maqueta es el de mostrar al cliente una visualización de cómo quedaría su producto editorial, identidad de marca, logo, tarjetas de presentación, pagina web, papelería, etc. En un ambiente foto-realista sin necesidad de imprimir realmente y tomar una fotografía real.
Estas maquetas o mockups se pueden realizar por medio de 3 métodos:
Photoshop
Por medio de técnicas de edición avanzadas en photoshop para crear el efecto realista y de 3d.
Software de 3D
Por medio la creación de modelos realistas y detallados en software de 3d y producir imágenes realistas con estos software, comúnmente llamadas renders.
Por medio de una fotografía real.
Es posible por medio de una fotografía real y con buena calidad de iluminación crear una buena maqueta.

zp8497586rq

Convertir PSD en HTML y CSS Online

Convertir archivos PSD (Photoshop) en plantillas HTML y CSS es una de las tareas más comunes para el diseñador, para los desarrolladores tal vez sea un poco complicado en caso lo necesitemos, para esto podemos recurrir a una herramienta online que hace el trabajo por nosotros.

PSD2CSS es una herramienta Online, solo tienes que subir tu archivo PSD y automáticamente generara código HTML y CSS para que lo puedas descargar gratis.

Paso 1: Diseñar la página web

Lo primero que tenemos que hacer es nuestro diseño de página web utilizando capas en Photoshop (también podemos utilizar Gimp).
Luego que terminemos nuestro diseño debemos guardarlo como .psd.
Este es un archivo .psd de ejemplo.
Descargar PSD

Paso 2: Subir y Descarga

Ahora solo debemos subir nuestro archivo para que nos genere un Zip con el código HTML y CSS.
Nota: recientemente se ha restringido la generación de código solo para usuarios registrados, pero el registro es gratuito, así que no habría ningún problema.
Luego de procesar el PSD nos mostrara 2 links, uno para ver el sitio web online y el otro para descargar el Zip.
Sin dudad una herramienta para sacar de apuros a cualquiera, tienen criticas sobre esta herramienta?, saben de alguna otra?, mejores características?, pueden comentarla y con todo gusto aportaremos más ideas!

Soporte de CSS3 en IE6, 7 y 8

Como sabemos, ni Internet Explorer 6, 7 ni 8 soportan CSS3, aunque IE8 tiene algunas propiedades todavía no está totalmente listo. Este script es consta de una serie de hacks para IE6, 7 y 8 que activaran el soporte de CSS3, entre estos se encuentran las propiedades más conocidas como: border-radius, box-shadow y text-shadow.

.png

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* IE6+ using IE-CSS3 */
  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* IE6+ using IE-CSS3 */
  behavior: url(ie-css3.htc); /* para incluir las funciones en la clase 'box' */
}

Esto es todo lo que tienen que hacer para que funcionen muchas propiedades de CSS3 en IE6, 7 y 8.
descargar
vía: fetchak.com

Top 10 Add-ons Firefox para Diseñadores

Firefox es unos de los navegadores más populares del mundo, y no precisamente por ser el más rápido, sino por tener una infinidad de add-ons que facilitan tareas e incorporan funcionalidades que hacen indispensables con el uso.
Esta es una lista de add-ons para diseñadores Web, con estos complementos podrán trabajar más cómodamente reduciendo algunas tareas complejas a fáciles de hacer mediante estos.

ColorZilla es un cuentagotas como los utilizados en Photoshop y otros editores graficos para capturar el cualquier color, este complemento se puede integrar a Firefox, dándonos la capacidad de capturar cualquier color de las páginas web.
Descargar

Firebug es el mejor amigo de un diseñador y desarrollador web, este complemento ayuda en la depuración, monitoreo, y editor de código HTML, CSS y JavaScript. Las millones de características que brinda este add-on sin duda alguna nos ahorraran bastante tiempo.
Descargar

Tineye es un motor de búsqueda de imagenes, las cual utiliza una tecnología para identificar imagenes en lugar de relacionarlas por palabras clave, metadatos. Este complemento buscara mediante la imagen seleccionada otra en la base de datos de Tineye, estas imagenes se mostraran por coincidencias exactas incluyendo aquellas que han sido recortadas o editadas.
Descargar

SenSEO es una extensión que esta basada en YSlow y necesita a Firebug para su funcionamiento, esta nos brindara un análisis sobre el SEO de una página wen, dándonos como resultado un calificativo en los diferentes criterios.
Descargar

Wev Developer Toolbar nos brinda muchas herramientas útiles separadas por secciones según las funcionalidades, entre ellas pueden destacar el manejo de cookies, validaciones de CSS y HTML, desactivación de CSS y JavaScript, limpiar información privada, entre otros.
Descargar

FireShot sirve para realizar capturas de pantalla de páginas web, estas capturas a diferencia del botón Print Screen del Teclado, nos permiten hacer una toma completa de la página, con opciones claro si queremos solo el área visible, estas también pueden ser editadas desde el mismo FireShot ya que provee de un editor de imagenes integrado.
Descargar

Dummy Lipsum es un generador de textos “Lorem Ipsum”, un simple plugin para generar textos de prueba a la mano.
Descargar

GridFox es un complemento el cual dibuja una grilla sobre una página web, esta nos sirve para un control en nuestro diseño, podemos introducir el ancho de la web, el número de columnas y grosor de línea.
Descargar

Html Validator añade la validación de código HTML dentro de Firefox. esta extensión muestra el numero de errores de una página HTML que se muestra como icono en la barra de estado al estar navegando.
Descargar

IETab es un complemento para testear las páginas web en internet explorer, este se abre desde el mismo firefox, teniendo la posibilidad de volver a cambiarlo a Firefox. Muy útil para probar nuestra aplicación web en IE.
Descargar
via : The Roxor

zp8497586rq

Template en PSD gratis: BlueMasters

Wendell Fernandes ha diseñado un plantilla Web y nos brinda el PSD de esta para descarga gratuita, este template es libre de utilizar en proyectos comerciales.
Dentro del PSD podemos acceder a todas las paginas mediante capas bien organizadas, de tal manera que sera fácil de recortar y maquetar con CSS nuestro sitio Web.

Páginas incluidas en el PSD

  • Home
  • About Us
  • Portfolio
  • Blog Posts
  • Blog Post Selection
  • Contact

Más info: SmashingMagazine

jfdghjhthit45

Crear Curriculum Vitae con CSS3

SpeckyBoy.com ha creado una plantilla para poder tomarla de ejemplo y crear el nuestro facilmente, esta plantilla esta desarrollada con jQuery para algunas animaciones, también utiliza el nuevo API de Google para fuentes.
Programas para crear páginas Web.

Mejores Características.

  • Utilización de CSS3 y jQuery.
  • CSS y HTML validados.
  • Compatibilidad con Firefox, Safari, Chrome, IE.
  • Utilización de Font API de Google.

Sección de Experiencia

Seccion de Habilidades

20 plantillas HTML y CSS gratuitas

sta vez con 20 plantillas XHTML y CSS nuevas y de alta calidad para nuestro próximo proyecto web, algunos de estos templates cuentan con el PSD y otras traen un tutorial de como crearlo paso a paso.
Programas para crear páginas Web.

 

 

1. MCUBE

 

 

2. CoolBlue

 

 

3. JungleLand

 

 

4. LawyerAttorney

 

 

5. Surf Company

 

 

6. Film Blog

 

 

7. Enthusiastica

 

 

8. Distinctive

 

 

9. DesignHQ

 

 

10. PortFolio

 

 

11. Classic Luxury

 

 

12. Login Page Template

 

 

13. Site Under Construction Template

 

 

14. Marketing Company Template

 

 

15. Photoshop VCard HTML Template

 

 

16. Minimal Design Template

 

 

17. XHTML & CSS3 One Page Template

 

 

18. SimpleFolio

 

 

19. Yiw Minimal

 

 

20. iPhone App

 

Multiples columnas utilizando listas y CSS

http://Bestbettafish.com/

rear listas con multiples columnas en nuestra Web es una manera muy utíl de reducir espacio innecesario y aprovecharlo con otros modulos, por ejemplo en mi blog tengo una lista de categorías en el sidebar, estan en 2 columnas y para mi encajan a la perfección.
Para lograr este objetivo solo es necesario crear una lista (ul) y convertir las filas(li) en elementos flotantes, dandole como ancho una medida en porcentaje, si queremos utilizar 2 columnas debemos colocar como ancho un 50% (width:50%;).

HTML: Armaremos la lista HTML.

  • CSS
  • XHTML
  • Semantics
  • Accessibility
  • Usability
  • Web Standards
  • PHP
  • Typography
  • Grids
  • CSS3
  • HTML5
  • UI

CSS: Crearemos clases para tipos de columnas.

ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
.dos_columnas li { width:50%;}
.tres_columnas li { width:33.333%; }
.cuatro_columnas li { width:25%; }
.cinco_columnas li { width:16.666%; }

Ejemplo HTML

jfdghjhthit45