Artículo escrito por, Lozbo un entusiasta de la tecnología con experiencia en desarrollo y diseño web.
Actualmente está escribiendo artículos para Breezi, el creador de sitios que ofrece herramientas para que los diseñadores puedan crear sitios asombrosos.
Antes de iniciar a diseñar un sitio web ya sea con herramientas en línea como Breezi, Moonfruit, Yola o bien con Dreamweaver y o Notepad++, puedes planear la estructura de tu sitio en un documento que muestre cómo estará organizado el contenido. Divídela en segmentos o categorías para que tus visitantes entiendan la navegación de tu sitio y la forma en que está ordenado el contenido.
Durante la etapa de análisis del proyecto es donde tendrás una idea más clara de tus objetivos, de quién es tu público meta, los requisitos del sitio y solicitudes en específico. El siguiente paso es enfocarse en la estructura del sitio. En el ejemplo que vemos aquí de Breezi.com nos enseña que no debemos de estar atados a un estilo de navegación tradicional en la parte superior. Que también es posible implementar la navegación en la parte inferior para poder llamar atención a otros atributos del diseño.
El documento que generes puede incluir diagramas complejos que muestren la relación entre estos segmentos o una jerarquía de los elementos principales y secundarios (en caso de ser necesario). Continúa leyendo «Cómo planear la estructura de tu sitio web»
Artículo escrito por Joe, parte del departamento de digital marketing en Breezi, un creador de sitios web que te permite crear y diseñar sitios web con control total de diseño. Él cuenta con más de 5 años de experiencia en SEO, SEM, PPC y sus paciones incluyen diseño web y nuevas tendencias de la web.
Aunque saber usar código y software de escritorio todavía son habilidades muy valoradas, ya no son un requisito para diseñar sitios destacados.
Debido al rápido crecimiento de las apps en línea, los diseñadores pueden crear sitios enteros desde su navegador. Aquí están algunas de las apps que recomendamos a diseñadores para expandir su repertorio (muchas de las cuales son gratuitas).
Breezi es un creador de sitios en línea. Sirve como una base para crear, diseñar y administrar todo el contenido para un sitio. Es diferente a la mayoría de las herramientas para crear sitios porque está dirigido a diseñadores, dándoles una flexibilidad y control incomparables.
Primero escoges un wireframe o un tema prediseñado como punto de inicio y después, comienza a diseñar el sitio que habías imaginado. Tienes control sobre cada pixel de cada página. Todo el contenido es administrado a través de “apps” y con ellas puedes agregar otros servicios en línea (algunos de los cuales los mencionaremos más adelante) a tu sitio Breezi.
Una vez que termines tu sitio, podrás publicarlo e incluso tienes la opción de sincronizar los archivos de tu sitio a una cuenta de FTP si necesitas un respaldo o si quieres hospedar tu sitio en otra cuenta.
Photoshop, o cualquiera que sea la aplicación de escritorio que uses, es una muy buena opción para editar imágenes con un nivel avanzado. Sin embargo, para una manipulación fácil y rápida (con muchas opciones de personalización), debes probar PicMonkey.
Ni siquiera tienes que registrarte y obtener una cuenta: solamente sube tu imagen y utiliza las herramientas de edición. Usa los controles laterales para recortar, cambiar de tamaño o rotar una imagen. También puedes cambiar la exposición, los colores y la acentuación. Modifica la imagen al aplicar filtros, texturas, retoques, textos, gráficos, bordes y más. Cuando termines, guarda y exporta tus imágenes a cualquier formato que desees.
¿Necesitas crear una paleta personalizada de colores o patrones para tu sitio? Entonces, debes utilizar COLOURlovers.com. Es un sitio comunitario con una serie de herramientas que te permiten buscar colores, paletas, patrones y tendencias para inspiración. Puedes usar una herramienta (o más) para crear una propia.
El color es un componente importante en un diseño web sólido, así que esta herramienta es muy útil para crear una paleta de colores para el sitio que estés diseñando. Te ofrecen recomendaciones en relación a los colores que estés usando y existen varias selecciones de colores que puedes usar hasta encontrar los colores exactos que estás buscando.
Una vez que la paleta esté lista, tienes la opción de guardarla, exportarla y compartirla con la comunidad para obtener retroalimentación.
¿Necesitas usar un color en específico que viste en un sitio? Si es así, la extensión de Google Chrome, Eye Dropper, es una herramienta fácil y rápida de usar. Si no usas Chrome, hay extensiones similares para Firefox y otros navegadores.
Solamente tienes que instalar la extensión del navegador y usar el gotero para seleccionar cualquier color que veas en una página. La extensión guarda tus colores y puedes copiar su código hexadecimal para usarlo en letras, fondos y otras áreas de tu sitio.
El color juega un papel muy importante en el diseño web pero la tipografía no se queda atrás. Typecast es una herramienta que sirve para experimentar con diferentes tipos de tipografías. Podrás probar diferentes combinaciones para tus encabezados, subtítulos, el cuerpo de tu sitio, vínculos y más.
También te permiten experimentar con el espaciado entre caracteres, entre líneas de texto, con el tratamiento del color de la fuente, entre otras opciones de estilo. Una vez que hayas establecido la letra que quieras usar, regresa a tu sitio y aplica el formato y estilo al texto de ahí.
Carga y exhibe contenido en tu sitio
Dependiendo del sitio que estés creando, será necesario exhibir diferentes tipos de contenido. Aquí hay algunas de las mejores apps en línea para subir, almacenar e insertar distintos medios y contenido a un sitio:
Dropbox ”“ Una gran opción para guardar y compartir archivos
SoundCloud ”“ Puedes insertar reproductores de audio y de listas de reproducción
Vimeo or YouTube ”“ Para almacenar e insertar videos
Wazala ”“ Una opción de comercio electrónico que puedes insertar en tu sitio
Scribd ”“ Sube e inserta documentos de PDF o diapositivas
Y ahí están. Ahora tienes la opción crear, diseñar y publicar un sitio nuevo al usar estas herramientas en línea. Esta lista solamente es la punta del iceberg de lo que hay en Internet para diseñar sitios. Si tienes una app en línea preferida, haznos el favor de compartirla en la sección de comentarios.
Se trata de una aplicación que nos permite guardar los archivos HTML de nuestro sitio web en nuestra cuenta de Dropbox, permitiendo así editar su contenido desde el ordenador y dejar que se sincronice automáticamente con lo que se guarda en la nube.
Al hacer la cuenta podemos crear un subdominio de site44.com y empezar a trabajar con el directorio creado en nuestro dropbox, comprobando como todo lo que allí guardamos queda automáticamente publicado en nuestro subdominio reservado.
Según comentan, también aceptan dominios propios, teniendo que configurar el CNAME correspondientes.
La versión gratuita de Site44 permite un número limitado de páginas en nuestra cuenta, existiendo opciones que pueden llegar hasta los 9,95 dólares al mes para obtener 50 gigas de tráfico y hata 50 sitios web configurados.
Alimentando la sabrosa categoría de aplicaciones que ayudan a crear páginas web sin tener conocimientos técnicos relacionados con programación, os presentamos ahora striking.ly.
Se trata de una web en la que podemos elegir varias plantillas para crear nuestro sitio en pocos minutos, arrastrando el material gráfico que consideremos necesario junto a los textos de presentación que queramos publicar.
La cuenta gratuita incluye un espacio y ancho de banda limitado, teniendo siempre la opción de asociar nuestro dominio propio a la página web creada, teniendo instrucciones detalladas para realizar este paso.
striking.ly trabaja con html5 y css3, siendo compatible con dispositivos móviles y garantizando preocupación en asuntos SEO, integración con redes sociales y estadísticas de acceso.
Moonfruit es un servicio que nos permite crear páginas web atractivas en pocos minutos.
Con más de dos millones de sitios creados, y la no inserción de publicidad en las cuentas gratuitas, tenemos la posibilidad de elegir entre varios diseños para uso personal o profesional, pudiendo personalizar los resultados posteriormente.
Con posibilidad de añadir vídeos, músicas e integrado con las redes sociales para permitir compartir su contenido es, sin duda, una excelente opción a tener en cuenta, aunque la versión gratuita sólo permita 20 megas de espacio (suficiente para hacer una página personal sin mucho contenido).
A lo largo de los últimos años os he comentado algunas herramientas útiles para trabajar con colores, encontrando paletas que se adapten a vuestros diseños, por ejemplo.
Voy a hacer ahora una pequeña recopilación de las que más me gustan, para que las tengáis presentes en momentos de necesidad.
Check My colors es reciente y muy profesional. analiza los colores de cualquier sitio web calculando brillos y contrastes para dar consejos sobre elementos que deberían cambiarse para ofrecer una mejor experiencia al lector. Graybit permite transformar cualquier página web en una imagen en escala de grises. Ideal para detectar contrastes que puedan ser mejorados, por ejemplo. Por desgracia no siempre detecta el css del site indicado. Aunque la estética de Vischeck asuste un poco, contiene funcionalidades muy interesantes para poder simular la forma en que los daltónicos y otros usuarios con diferentes problemas de percepción cromática ven el mundo. Contiene también enlaces interesantes para sitios web relacionados con este tema. Pictaculous nos solicita una imagen y nos ofrece algunas paletas de colores que se adaptan a los tonos de la enviada. Muy útil para buscar tendencias y encontrar ayuda para definir tonos de una logomarca, por ejemplo. El resultado podéis bajarlo en formato Adobe Swatch. ColorRotate es una interesante iniciativa para trabajar tridimensionalmente con el mundo de los colores. El proyecto aprovecha la característica tridimensional de los colores para permitir la gestión de paletas con posibilidad de compartirlas. Con posibilidad de importar colores de imágenes, verificar relación entre varios tonos, navegar entre librerías populares, transformar paletas, realizar filtros y muchas otras operaciones comunes entre profesionales del área ColorExplorer es, sin duda, uno de los proyectos más completos.
En fin, estas son las que más me gustan en su categoría, ideal para que, junto a las 12 herramientas para diseñadores que ya recopilamos por aquí, hagan el trabajo de los diseñadores más sencillo.
Lo que estáis viendo en la imagen es el resultado de probar el nuevo producto de Adobe Labs: Adobe BrowserLab, una aplicación que nos permite ver el aspecto de cualquier página web en diferentes navegadores al mismo tiempo.
Podemos elegir la forma de visualizar el resultado: un solo navegador, dos o un resultado encima de otro (Onion View). Esta última opción es excelente para ver con detalle las diferencias de nuestra web en los dos navegadores probados, pudiendo hacer varios zooms en el resultado mostrado.
En la captura inferior podéis ver los diferentes navegadores soportados con el aspecto, de fondo, de wwwhatsnew.com en Firefox e Internet Explorer.
Para que os funcione este «preview» de lo que será la versión definitiva de BrowserLab tendréis que tener Adobe Flash 10 instalado en PC o Mac, según informan en cnet.com.
Una herramienta parecida a SuperPreview, presentada por Microsoft en el Mix09 de Las Vegas para facilitar la comparación de las versiones de su Internet Explorer.
Hace casi un año os hablé de CushyCMS, una aplicación que permitía crear herramientas para gestionar el contenido de cualquier sitio web con sólo añadir unos códigos en las áreas de textos que queráis poder editar.
SurrealCMS ofrece una opción parecida, permitiendo identificar los textos que podrán ser alterados usando CSS (class=»editable»).
Podéis ver varios vídeos en la página principal de SurrealCMS en los que se muestra la interfaz generada detectando los textos en los que aplicamos la clase de edición.
Muy práctico para permitir a nuestros clientes actualizar partes de sus sitios web, sin necesidad de que tengan que usar complejos sistemas ni peligro de que puedan alterar partes importantes con un gestor de contenido poco parametrizable.
Una vez alguien preguntó a alguien lo que era twitter, respondiendo el segundo alguien al primero: «Twitter es lo que tú quieras que sea«.
Esta frase que tiene más verdad de la que aparenta se aplica bien a la hora de describir DivVoted, un sitio web que permite mostrar una lista de los mejores sitios web votados usando Twitter.
Para usarlo hay que seguir al usuario @divvoted (poco más de 500 seguidores) enviando un mensaje con el site y el comentario sobre el mismo. Los sites con más votos aparecerán en los rankings diarios, semanales y mensuales.
Lo comento porque la idea me parece original, no porque tengan algún valor los datos incluidos de momento. La mayoría de los sites informados tienen solamente un voto y algo me dice que el usuario que lo envió es el propietario de la web informada.
Artículo escrito por, Lozbo un entusiasta de la tecnología con experiencia en desarrollo y diseño web.
Aunque la estética de 
Con posibilidad de importar colores de imágenes, verificar relación entre varios tonos, navegar entre librerías populares, transformar paletas, realizar filtros y muchas otras operaciones comunes entre profesionales del área 
Hace casi un año os hablé de 
Una vez alguien preguntó a alguien lo que era twitter, respondiendo el segundo alguien al primero: «Twitter es lo que tú quieras que sea«.