Webydo (webydo.com) proyecto que cuenta ya con 50.000 diseñadores en su plataforma, es un tipo de software orientado al diseño web en la nube, un sistema que está cambiando la manera en la que los diseñadores profesionales crean sitios web para sus clientes en varias partes del mundo.
Uno de los objetivos es reducir el tiempo perdido en la codificación manual repetitiva, evitando infinitos ajustes hechos a mano para adaptar el sitio web a las diferentes plataformas y dispositivos. Las únicas alternativas que ofrecía el mercado eran simples: creadores de sitios web para principiantes que no necesitasen de código.
El problema es que esas soluciones no son las que un diseñador profesional necesita. Sitios que permiten hacer diseños sin saber programar son prácticos, pero extremadamente limitados, casi siempre basados en un conjunto básico de plantillas prediseñadas.
Lo que el mercado necesitaba es una herramienta que ofrezca la posibilidad de crear diseños web avanzados y personalizados al milímetro. Es ese el motivo por el que los clientes contratan diseñadores y por el que los diseños de este tipo dominan la web (los diseños de principiantes utilizando herramientas como las mencionadas anteriormente suman únicamente un 3% de los sitios web del mundo).
Así nació Webydo, herramienta que nos permite crear sitios web profesionales sin necesidad de escribir código, pero presentada como una solución B2B para creativos profesionales, un sistema que ya ha sido definido por varios medios como una de las tendencias en diseño web de 2014.
Desde Mobsyte (mobsyte.com) nos presentan este nuevo proyecto creado para permitir diseñar webs para móviles de forma sencilla y rápida.
Esta plataforma de creación de páginas web móviles ofrece una opción gratuita que incluye el logo de Mobsyte y el alojamiento en un dominio de Mobsyte, siendo necesario pagar mensualidades que van de 9 a 19 euros al mes para obtener tanto dominio propio como otras funcionalidades como estadísticas, dominio personalizado, opción de incluir publicidad en los sitios, etc.
Mobsyte se enfoca en el diseño mobile first: empiezas diseñando tu página web para el móvil y consigues una perfecta visualización en PC. Generalmente se hace al revés (se diseña para PC y se hace una versión móvil) motivo por el cual pueden presumir de ser una de las pocas herramientas pensadas para hacer una web completa desde cero, sin depender de ninguna versión web ya existente.
Las plantillas están creadas para facilitar el diseño de sitios de promociones, campañas, landing pages, microsites, eventos, flyers, negocios, etc, con posibilidad de elegir los colores que se adapten a nuestra idea. Una vez seleccionada la plantilla podemos usar el editor para personalizarla y adaptarla a nuestra categoría. El editor permite modificar los contenidos, incluyendo diferentes bloques en cada plantilla.
La parte de promoción también está contemplada, ofreciendo tanto un enlace como un código QR para que los clientes puedan acceder a nuestro nuevo sitio web móvil.
Sencillo y práctico, para crear minisites en pocos minutos.
En www.google.com/webdesigner tenemos disponible la nueva herramienta de Google, una aplicación que nace para ayudarnos a construir sitios web y anuncios en HTML5, compatibles con cualquier dispositivo, ya sea PC o móvil.
Lo anuncian en doubleclickadvertisers como un programa en versión beta para Windows y Mac, disponible de forma gratuita para que sea sencillo crear páginas web y banners arrastrando y soltando elementos.
La idea es que podamos crear animaciones HTML5 de forma intuitiva, que sea posible ver y editar el código detrás de los diseños, que podamos construir mensajes publicitarios sin problemas, que podamos recibir las actualizaciones del producto de forma automática y que no tengamos que pagar nada por nada de eso.
El objetivo es mejorar la calidad de los anuncios usados en la plataforma de publicidad de Google, claro, pero podemos usar los resultados en cualquier lugar, y eso lo dejan bastante claro en la nota de presentación.
Y vamos ahora a por un nuevo recurso para la categoría de Utilidades para diseñadores y programadores con extractcss.com, una aplicación que nos permite extraer la hoja de estilos de cualquier documento HTML que le indiquemos.
Solo tenemos que pegar el HTML deseado en el primer panel y seleccionar lo que queremos obtener del mismo. Permite extraer ids, clases y estilos, generando un .css que podemos utilizar posteriormente para adaptar el diseño a lo que tengamos en mente.
El proyecto es de código abierto, disponible en github para que sea posible navegar por sus entrañas. Lo divulgan en webresourcesdepot.com como la solución ideal para separar el css de un html en aquellos casos en los que no se separó inicialmente, algo extremadamente recomendable antes de comenzar cualquier diseño web moderno.
En febrero os listamos una serie de recursos útiles para trabajar con CSS, ideales para los que están aprendiendo a programar hojas de estilo. La mayoría de ellos están relacionados con la programación de páginas web viendo en tiempo real el efecto de las alteraciones realizadas, extractCSS puede ser una buena forma de «jugar» con pa´ginas web conocidas para alterar su diseño sin alterar su contenido.
Una buena idea para practicar y conocer mejor el mundillo del diseño web.
Crear un sitio web que se adapte a las pantallas de nuestros dispositivos móviles ha dejado de ser un lujo para ser una necesidad. Aunque la mayoría de las webs consigue verse de forma decente en un tablet, no ocurre lo mismo con los móviles, por lo que se hace necesario incluir algunas funcionalidades (extensiones o características na hoja de estilos) que permitan adaptar de forma dinámica el contenido que presentamos.
Si preferís tener algo de libertad en lo que a diseño se refiere, la mejor forma es programar la web pensando, desde su inicio, en el aspecto móvil, y para eso tenemos responsivewebcss.com, para que nos ayude en ese punto.
Se trata de una aplicación, presentada hoy en webresourcesdepot.com, que genera el código CSS necesario para poder comenzar a trabajar. Solicita los tamaños y la estructura base de nuestra web y permite bajar archivos html y css para que sean incluidos o adaptados dentro de nuestro diseño, ahorrando mucho tiempo en programación y diseño.
Ya que el resultado es html, tendremos que abrir el código e incluir los elementos dinámicos adecuados para transformarlo en php o cualquier otro lenguaje con el que estemos trabajando, aunque el tener el css ya creado es un paso que muchos agradecerán, tanto para trabajos profesionales definitivos como para los que estén practicando y estudiando diseño web.
Crear el diseño de un sitio web y transformarlo en plantillas con hojas de estilo CSS son dos trabajos que en muchas ocasiones requieren dos tipos de profesionales diferentes, siendo necesario invertir una gran cantidad de tiempo en la transformación de la idea en archivos que un navegador reconozca como «página web».
Si trabajáis con photoshop y queréis agilizar el trabajo, podéis usar varias opciones que ayudan a crear la hoja de estilo, total o parcialmente, opciones que pueden ayudar a ahorrar varios días en la creación del proyecto. Aunque en muchos casos el código generado es bastante «sucio», es una buena forma de no comenzar desde cero.
Una de las últimas opciones que han aparecido en esta categoría es css3ps.com, herramienta que se integra en forma de plugin y trabaja con CSS3.
Es un plugin gratuito para Photoshop que realiza el trabajo en la nube para convertir las capas en CSS3. Tarda bastante en realizar la transformación, pero hay algunas demostraciones en su web que muestran como el resultado puede ser bastante completo.
Existen muchas herramientas creadas para el diseño de prototipos de aplicaciones, pero pocas tan sencillas y prácticas como wireframe.cc.
Se trata de un nuevo proyecto que nos presentaron hace unas horas, orientado para la comunidad de diseñadores, programadores y jefes de proyecto que desean dejar el lápiz y realizar bocetos más realistas directamente en la web.
Podemos seleccionar plantillas para diseño web o diseño de aplicaciones móviles, con la opción de incluir diferentes elementos, cambiar de tamaño lo que hemos seleccionado y alterar la estructura de la información para ayudar a entender mejor el resultado de lo que se va a programar.
Podéis ver una demostración en su página web y empezar a dibujar sin necesidad de registro dentro de wireframe.cc
Artículo escrito por Chaz, diseñador gráfico que trabaja en Breezi, el creador de sitios. Con él los diseñadores pueden crear, administrar y diseñar cada pixel de sus sitios fácilmente.
Chaz también es un “geek” que disfruta del diseño impreso y web, el cine, el freelance y seguir aprendiendo.
Si estás diseñando un sitio web (ya sea con Breezi, Yola, Basekit o cualquier otra herramienta de diseño web), lo más probable es que quieras que genere tráfico para que tu contenido sea visto por su público meta. El diseño web debe ayudar a este objetivo y resaltar el propósito de tu sitio. Es por ello que debes tener usar los elementos adecuados para crear tu sitio, en especial la página de aterrizaje, porque es a través de ellas que tu público meta “aterrizará” en tu sitio. En el ejemplo que vemos aquí es evidente que se usa una frase importante para atraer la atención y dos botones muy claros para que el visitante tome acción de manera inmediata.
Si usas bien una pagina de aterrizaje, es más fácil que tu usuario tome las acciones esperadas en tu sitio: que se registre para una cuenta, que descargue contenido o compre un producto. Con una página de aterrizaje apropiada puedes obtener una alza en tus conversiones (de visitantes a clientes) y cumplir el propósito de tu página o 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.
Axiatel, empresa conocida por la venta de servicios de telecomunicaciones para empresas (fax por email, telefonía de empresa o conference call), anuncia ahora un sistema de creación de páginas web que permite obtener presencia en la web sin necesidad de tener conocimientos de programación.
El objetivo es dar la posibilidad al cliente de la creación de una página en internet de una manera sencilla, por precios bajos y sin necesidad de tener conocimientos de informática o diseño web, además de otras interesantes opciones como la adquisición de dominios de manera gratuita.
El sistema es sencillo e intuitivo, permitiendo obtener resultados con solo 10 minutos de tiempo. Nos permite configurar nuestra propia web en pocos pasos existiendo hasta 50 distintos modelos de presentación, siendo posible añadir fotos, vídeos y crear una larga cantidad de secciones para nuestra página, tales como localización en Google Maps, un Formulario de Contacto para los clientes y seguidores o un apartado para Pago por Paypal para que podamos desarrollar una Tienda Online.
Con esta nueva opción podremos tener nuestro propio dominio de forma gratuita usando una larga lista de extensiones (.com, .es, .biz, .org, etc…).
El servicio no es gratuito, pero podemos probarlo durante 30 días sin compromiso. En caso de adaptarse a nuestras necesidades, tendremos que pagar desde 7,9€ al mes, existiendo en su página de creación de páginas web una comparación de los dos planos existentes.
Artículo escrito por Chaz, diseñador gráfico que trabaja en 
