Archivo para la categoría ‘Diseño’
Jueves, Mayo 8th, 2008
Acabo de terminar de hacer los últimos ajustes importantes (creo) en el blog y mientras hacia el diseño un poco más accesible y además compatible me daba cuenta de que aveces nos limitamos por ‘culpa’ de los usuarios y me preguntaba si en realidad es necesario aveces limitar el diseño de una página por el bien de unos cuantos muy pocos usuarios.
La cuestión yo la veo así:
Estamos diseñando una página, necesitamos un poco más de espacio de ancho para el contenido pero como quieres que los de la resolución 800×600 puedan ver la página, te resignas a ajustar el diseño.
O queremos hacer un menú con el famoso efecto de dropdown y necesitamos javascript para la compatibilidad con todos los navegadores (por cierto se puede hacer con solo CSS, luego les muestro como) pero si un usuario llega a tener desactivado javascript no va a poder navegar en la página, entonces hacemos un menú simple sin efecto dropdown.
Podemos agregarle unas librerías javascript para usar con AJAX pero pesan mucho y puede dejar lenta la página al usuario; Además tampoco podemos agregarle unas imágenes muy bonitas por lo mismo.
Quiero darle un estilo muy bonito con CSS a mi página pero ya no va a ser compatible con IE 6.
En fin, asi puede haber muchas cosas y es cuando yo me quedo pensando: ¿acaso es necesario que nos limitemos por un bajo porcentaje de usuarios?.
Sé que nosotros debemos ser los que nos debemos adaptar a los usuarios pero hay sus límites ¿no?. Aceptémoslo debe haber su frontera, tampoco podemos ya limitarnos tanto como para romperse la cabeza en hacer una página compatible con un navegador que ya no lo usa practicamente nadie. Hacer una página para una resolución que hace unos cuantos años ya no se usa o crear páginas que se ejecuten rápido en conexiones de muy baja velocidad.
La tecnología se esta actualizando y los usuarios también con ella, ahora todos usan una resolución de 1024 para arriba, tienen conexiones 512 o más y la mayoría ni si quiera sabe que es javascript como para desactivarlo pero claro hay sus usuarios especiales pero creen que por ese tan bajo porcentaje nos debemos limitar ¿o es que acaso ellos mismos se estan limitando?.
Al menos esa es mi postura, pero claro siempre hago un balance, intento hacer diseños accesibles y ajustables a todos los usuario, no muy pesados y que se puedan ejecutar rápido pero sin llevarlo al extremo.
Tags: Críticas, Diseño
Guardado en: Críticas, Diseño | Sin comentarios »
Martes, Mayo 6th, 2008
Estaba viendo unos templates en html y css que tengo en mi computadora y vi uno en el que me gustó su menú y me llamó mucho la atención el hecho de que solo use una imagen para el y yo estoy acostumbrado a usar mínimo 2.
Enseguida abrí el archivo en mi dreamweaver y verifiqué el CSS y la estructura del html; No me tomó más de 5 minutos en darme cuenta de lo sencillo que es.
Esta es la imagen de como se ve en el template mencionado.
¿A poco no se ve bonito? Pues es muy fácil hacerlo. Y solo se usa esta imagen:
Primero vamos a analizarlo con el Dreamweaver.
Como vemos en la imagen de arriba, consta de dos elementos principales, de <li>
y de <a>. <li> esta debajo de <a>.
Su html viene siendo este:
<ul>
<li id="actual"><a href="#">opcion</a></li>
<li><a href="#">opcion 2</a></li>
<li><a href="#">opcion 3</a></li>
<li><a href="#">opcion 4</a></li>
<li><a href="#">opcion 5</a></li>
</ul>
Se trata de una lista desordenada que contiene enlaces. La id es para diferenciar en la sección que te encuentras de la página.
Ahora la magia del CSS
ul {
list-style: none;
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 85%;
}
ul li {
float: left;
margin: 0;
padding: 0 0 0 9px;
background-image: url(nav.gif);
background-position: left top;
background-repeat: no-repeat;
}
a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 7px 20px 4px 10px;
background-image: url(nav.gif);
background-position: right top;
background-repeat: no-repeat;
}
a:hover {
color: #00CCCC;
}
#actual {
background-position: left -41px;
}
#actual a {
background-position: right -41px;
color: #FFFFFF;
}Etiqueta por etiqueta.
- ul: Limpiamos todo su aspecto de la lista desordenada y le dimos configuración a las fuentes.
- ul li: Hicimos un float: left para que se alinie horizontalmente, limpiamos el margen y un padding hacia la izquierda para que quede ese espacio entre el enlace y la lista.
También la asignamos un background-image y lo posicionamos en la esquina superior izquierda.
- a: Lo declaramos un bloque, le damos un padding para que se expanda de tamaño la lista y le dimos un background-image con alineación superior derecha.
Desde aqui ya se debe ver la estructura del menú ahora solo faltan los últimos toques.
- a:hover: No hace falta explicar.
- #actual: Declaramos el id para el menú el cúal identificará en que sección estamos. Solo le movemos el background hacia la izquierda y lo bajamos 41px.
- #actual a: No cambia de color su enlace de este id.
Con esto queda listo nuestro lindo menú y tan solo utilizamos una imagen.
Lo importante es que se entienda la estructura y la construcción, apartir de ahi tu solo podrás crear los tuyos de acuerdo a tus necesidades.
Les dejo el archivo de ejemplo.
Tags: (X)HTML, CSS, Diseño, Tutoriales
Guardado en: (X)HTML, CSS, Diseño | Sin comentarios »
Lunes, Mayo 5th, 2008
En la entrada en que mencionaba cuales son unos de los aspectos que se deben tomar en cuenta para que tus diseños se parezcan más a uno 2.0 decía que dos efectos que recomendaba mucho por la vistosidad que daban y porque además ahora son usados mucho es el efecto glossy (o de cristal) y el de reflejo, pues en este tutorial les voy a mostrar como usarlos.
(more…)
Tags: Diseño, Photoshop, Tutoriales
Guardado en: Diseño, Photoshop | Sin comentarios »
Viernes, Mayo 2nd, 2008
Vamos por este primer tutorial espero de muchos en el que vamos a ver como crear un enlace sin texto ni imagenes y para que nos puede servir.
De ejemplo vamos a usar esta parte del template:
Como vez son 3 enlaces que al pasar el puntero sobre ellos se alza formando un bonito efecto; Vamos a ver como crearlo.
(more…)
Tags: (X)HTML, CSS, Tutoriales
Guardado en: (X)HTML, CSS, Diseño | Sin comentarios »
Jueves, Mayo 1st, 2008
Últimamente a venido una ola muy grande de diseño 2.0 que esta revolucionando a los web designers y casi casi solo eso quieren hacer.
Pues como esta muy de moda vamos a ver que es lo que lo identifica para que nosotros también lo implementemos en nuestros diseños.
Vamos por puntos.
- Simplicidad: Sin duda algo que caracteriza el diseño 2.0 es la simplicidad, como el gigante google dice: “la simplicidad es poderosa”. Pero ¿por qué? Yo creo por la importancia que se le a dado de que los usuarios vean ciertas cosas, se trata de resaltar lo importante.
- Pocas Columnas: Hace unos poco años era normal ver diseños con 4, 3 columnas, hoy por hoy menos es más, normalmente se usa solo una sidebar y esto le da claridad al usuario, de hecho poco a poco se va usando menos la sidebar, en algunos nuevos diseños ya se esta omitiendo.
- Secciones en el header: Poner las secciones de la página en el header es lo de hoy, y si no dense una vuleta por sus blogs prefridos y diganme cuantos usan esta técnica. Esta es una gran idea ya que aprovecha ese espacio entre el header-contenido y al usuario lo informa de las secciones corespondientes.
- Menú simple: Un menú simple pero estético es perfecto y distintivo de una web 2.0, además de que les provee de buenas cosas al usuario como en donde se encuentra y a donde podría ir desde ahi. Intenta usar menús con esquinas redondeadas y diferente efectos de cambio de color y estilo en las opciones.
- Logos: Aqui si hay varias cosas que se están implementando.
Bold Font. Usar logos con tipografía en negritas.
Horizontal. Se opta por un estiramiento horizontal.
Glossy Efect. Usar los famosos efecto glossy en los logos le da una gran vistosidad.
Reflejo. Junto con el glossy el efecto del reflejo es de los más usados y de los que dan mas vistosidad, son muy recomendados.
- Texto Grande: Usar el texto grande adecuadamente es excelente para el reconocimiento, yo recomiendo un texto relativamente grande en los logos y si es un blog en los títulos de los post ya que limita el fin de un post y marca el inicio de otro. Además de dar un aire de simplicidad y orden.
- Combinación de colores y texturas: Efectos 3d, sombras, relieve y superficies son bonitos efectos que se deben usar con moderación y que funcionan muy bien esteticamente.
Efectos realistas de superficie (como sombras, los degradados y reflexiones) ayudar a establecer una interfaz visual más real, sólido y un aspecto de “terminado”.
También algo que si sabes usar le da una gran estética a un trabajo es el saber trabajar con los colores de título, subtítulo, contenido y grado de jerarquía del texto. Por ejemplo usar un tono más fuerte para un título, uno mas claro para un subtítulo (además en negritas) y uno de tono bajo para el texto.
- Degradados: Y es que no puedo recordar ahora un diseño en el que no haya usado el degradado, ahora es casi de a ley usarlos, pero claro debes hacerlo con medida y saber implementarlos en la página porque no hay nada peor que un degradado mal implementado.
- Íconos en enlaces: Como en la entrada anterior dije, aveces se nos pasa por alto agregar los iconos en los diferentes enlaces, pero ahora usar íconos cute es super importante. De hecho aveces hasta son impuestos en vez de texto por el grado de intución que suponen.
- Tipografía: Mientras más redondita sea la tipografía es mejor y no tienes porque usar exactamente el negro, puedes usar un color menos fuerte un gris obscuro por ejemplo.
Conclusión. Para mi el diseño web 2.0 se caracteriza por ciertas cosas, primero, colores vistosos y mucha combinación entre ellos e intentar darle un poco de relieve a los objetos como un efecto gloss o unas sombras.
Usar una simplicidad para resaltar el contenido de la página, por eso el usar pocas columnas, mientras más columnas hay más información y más atención dispersa, en cambio mientras más simple es más fácil que se enfoquen en los elementos de la página y si quieres que se den cuenta de algo es tan fácil como usar colores fuertes.
Y una fácil e intuitiva navegación te hace una interfaz placentera para cualquier usuario. Sin duda tomar en cuenta estos puntos te puede ayudar mucho. Pero siempre trata de inovar y usarlos con moderación; Hay que saber cuales usar.
Recomiendo leer:
Tags: Web 2.0
Guardado en: Diseño | 1 Comentario »
Jueves, Abril 24th, 2008
Algo que normalmente sobre todo cuando empiezas en el diseño web se nos olvida es agregar esos pequeños iconos en diferentes enlaces y que aunque no lo parezca hacen la diferencia.
Pues para eso traigo aqui estos pack de íconos que en cualquier momento nos pueden servir.
Primero:
Pack muy recomendado de más de 1500 íconos en formato PNG de 128×128
Descargar (23 megas)
Segundo:
Pack de 117 íconos circulares en formato PNG de 16×16
Descargar (97kb)
Tercero:
Pack de íconos de 24 diferentes archivos en formato PNG de 192×192
Descargar (916kb)
Cuarto:
Pack de 23 íconos de aplicaciones en formato PNG de 192×192
Descargar (786kb)
Quinto:
Pack de 254 íconos de banderas circulares 2.0 en formato PNG de 256×256
Descargar (13 megas)
Espero les sirva, yo los e usado mucho en mis diseños, de hecho este tiene varios.
Tags: Descargas, Íconos
Guardado en: Diseño | 2 Comentarios »
Loading ...
Usando 