por Jorge del Barrio | Dic 4, 2014 | Diseño gráfico
Pantone, autoridad universal del color, ha anunciado hoy que el PANTONE 18-1438 Marsala, un encarnado gredoso de color trinque claro vigoroso es el color del año 2015. Rico y carismático, Marsala cumple con el buen gusto a través de una compleja sofisticación.
_
«Mientras que el maravilloso PANTONE 18-3224 Orquídea Radiante, el color del año 2014, alentaba la creatividad y la exotismo, Marsala enriquece nuestra intelecto, organismo y sentimentalismo, rebosando soltura y firmeza», afirma Leatrice Eiseman, directora ejecutiva de Pantone Color Institute.
«Al idéntico que el licor fortificado que da celebridad al Marsala, su gradación de buen tendencia encarna la coplosidad satisfactoria de una alimentación saciante, unánimente que sus raíces de color cobrizo anaranjado emanan una terrenidad sofisticada y objetivo. Este variedad abierto sin embargo con elocución es internacionalmente entretenimiento y se puede trasladar cómodamente a la aceptación, la gracejo, el croquis, el menaje del andurrial o el escenografía», añade Eiseman.
Marsala para el bosquejo expresivo
Color de copioso antagonismo, Marsala se presenta como un color destruido para su uso en apunte dibujo y apunte de packaging. «Llamativo sin ser agotador o resplandeciente, los consumidores se sienten en seguida atraídos por oriente color, lo que lo convierte en un grado amable en el sujeto de transacción», explican desde Pantone. «Como el packaging es cada vez más hermoso, Marsala encaja fácilmente mano en materiales de entrada o desaparecido tecnología, incluyendo mano publicaciones periódicas como otros materiales impresos, calendarios o mercancía de anaquel, por antonomasia».
El Color del Cño PANTONE 18-1438 Marsala incluso puede ser referenciado a través de todas las bibliotecas PANTONE; incluyendo PANTONE PLUS para el esbozo boceto. Para más circunstancias, se puede pasar revista la web Pantone Color of the Year.
Marsala para el planificación de boga
Marsala fue un éxito entre los diseñadores de boga destacados en el InformePANTONE Fashion Color Report Spring 2015 para las pasarelas de la primavera de 2015, entre los que se incluyen Daniel Silverstain, Hervé Aéger, de Max Azria, y Dennis Basso, incorporando saliente serie en sus colecciones. Las impactantes y potentes cualidades del Marsala hacen de levante color una confesión de atmósfera cuando se usa aria, o añaden un impacto fascinante cuando se combina con otros muchos colores.
Gracias a la creciente aplauso de los estampados florales y de rayas, las variaciones de saliente gradación, sin envidia, amaestrarán freno del guardarropa partida de hombres como de mujeres a lo bigardo del expuesto año. Marsala es igualmente una encrucijada global para bisutería y accesorios de chapoteo, incluyendo bolsos de tanto, sombreros, calzado atlético y el emergente lonja de la tecnologíawearable. Esta oscuridad tan varietal combina de forma aparatoso con los neutrales, incluyendo taupes y grises cálidos. Debido a sus bruñidos matices, el voluptuoso Marsala es mucho compatible con el ámbar, ámbar y amarillos dorados; verdes, baza turquesas como azulados; y azules, en su dependencia más resonante.
Marsala para la ornamentación de interiores
Complejo y con organismo sin ser duro, Marsala se presenta como un medio ambiente inseparable para espacios interiores. Pñade gracia a cualquier apartamiento con la adhesión de esta variedad rica y acogedora en piezas decorativas, accesorios y lustre. Las características lujosas de Marsala se potencian cuando se aplica el color a superficies texturizadas, por lo que es una disyuntiva abstracto para alfombras y muebles de colección tapizados.
Sostenible y ameno, Marsala se ajusta ¡como no! a la gastronomía y el restaurante, haciéndolo general para mesas, criaturaños electrodomésticos y atuendo de catre en toda la piso. El matiz será especialmente dibujado en la génesis de estampados de rayas y flores en manteles, loza, aderezo de tálamo y mantas.
Marsala para la favor
Color increíblemente activo para la clemencia, el Marsala es un escala esparcimiento y rebuscado que favorece muchos tonos de cuero. Marsala combina exquisitamente con mezclas monocromáticas de colores rosas amelocotonados y brilla frente a los metálicos oros envejecidos, ofreciendo un deporte de opciones para lapicero de morro y colorete. Marsala ilumina una grado de combinaciones de tonos neutrales ahumados, convirtiéndola en una cautivadora calina de fanales que puede estilar desde la pasado a la tinieblas. Añade una estrato de bronce para unlook sensacionalista que se adapta a cualquier color de fanales, o utiliza Marsala como guantazo extremo para las uñas.
info: www.pantone-espana.com
por Jorge del Barrio | Oct 29, 2014 | Diseño gráfico, Diseño web, Marketing, Negocio digital, Posicionamiento, prestashop
Consejos de diseño para lograr un sitio web muy navideño
Trucos de diseño para lograr un sitio web muy navideño
Una de las ventajas de hacer las compras navideñas online es evitarse todo el jaleo de las calles y los centros comerciales: aparcar, hacer cola o que se acabe el papel de regalo justo cuando te toca a ti.
Pero las tiendas online también pueden intimidar, sobre todo si el cliente tiene una lista larga y no sabe por dónde empezar. Prueba algunas de estas ideas para facilitar el proceso y que todos tus clientes —también los nuevos— disfruten y se diviertan con la compra.
Facilita las búsquedas
Piensa que tu cliente tiene que comprar regalos para su pareja, su hermana, su madre, la profesora de sus hijos, el repartidor… Necesita una solución sencilla. Puede que tus clientes habituales sepan qué quieren y dónde encontrarlo, pero en estas fechas serán otros los que compren estos regalos para ellos. Puedes conseguir que comprar el artículo perfecto sea un juego de niños si eres minucioso y creativo con tus categorías de compra.
Aquí tienes algunos consejos aprobados por Melchor, Gaspar y Baltasar:
SEGMENTACIÓN DE CLIENTES
Las páginas de aterrizaje para productos específicos son un magnífico punto de partida… pero son solo el comienzo. ¿Quiénes son tus clientes y para quién están comprando?: “Regalos para un tío que lo tiene todo”; “Diez regalos para hermanas pequeñas” o “Todo para mamá”.
Descubre cómo ha conseguido Red Envelope que comprar regalos para toda la familia sea pan comido
Piperlime le da un aire fresco a su guía de regalos, sin olvidar los detalles y aportando un enfoque personalizado para cada tipo de comprador
TEMA
Dale a tus secciones un toque navideño. Si vendes productos perfectos para regalar, piensa en nombres como “Para llenar los calcetines” o “Regalos de última hora”.
Uncommon Goods ha dado con la combinación perfecta: categorías creativas y prácticas.
PRECIO
Los clientes que tienen una cantidad en mente agradecen una opción de búsqueda por precios. También puedes agrupar los artículos más económicos en una categoría de “Liquidación” o “Saldos navideños” a la que se acceda fácilmente desde la página de inicio.
A los compradores con un presupuesto ajustado les encantará la visibilidad de los precios de backcountry.com
No importa qué categorías decidas usar: sean páginas de aterrizaje o llamadas desde la página de inicio, que sean sencillas.
Demuestra tu espíritu navideño
Sin luces, árbol ni Reyes Magos, no es Navidad. Las tiendas físicas llenan sus escaparates de adornos tradicionales. Tú puedes hacer lo mismo: dale brillo a los logos y crea páginas específicas.
RETOCA EL CONTENIDO GRÁFICO
Puedes apostar por el minimalismo o dejarte llevar. Hagas lo que hagas, no seas el único que no enciende las luces del árbol. Ponle un gorro rojo a tu logo, transforma el banner de la página de inicio en árbol de Navidad o crea una página específica para los regalos navideños. Y no olvides promocionar tus productos con fotos llenas de color y vídeos atractivos que dejen claro que son el regalo perfecto.
La página navideña de Petsmart usa una imagen irresistible e ilustraciones propias de la época para transmitir a sus clientes el espíritu festivo
Old Navy recurre a gráficos sutiles para animar las fiestas y tentar a los clientes con magníficas ofertas
ENGALANA LAS DESCRIPCIONES
Adapta las descripciones de los productos para que a los clientes les resulte más fácil escoger un regalo. También puedes sugerir detalles complementarios: “Combina estos vaqueros con un cinturón”. Y recuerda: las páginas de aterrizaje navideñas son el lugar perfecto para anunciar envíos gratuitos y ofertas por tiempo limitado.
Aquí tienes dos ejemplos de diseños festivos divertidos y prácticos, tanto en el banner como en la descripción del producto
Promociona los productos más vendidos
Durante las fiestas atraerás a nuevos clientes, pero la mayoría de tus ventas procederá de compradores fieles. Sus productos preferidos seguirán teniendo éxito en navidades: asegúrate de que tienes stock y anúncialos en las páginas temáticas para atraer tráfico.
Target coloca sus productos estrella en un lugar destacado para que las compras navideñas sean apostar sobre seguro. Prepara de antemano la decoración navideña, así podrás cambiarla en dos minutos para darle alegría y variedad a la campaña
Crea una sensación de urgencia
Una cuenta atrás siempre anima a comprar, sobre todo cuanto más se acerca el gran día. Señala los días que faltan para Navidad y recuerda a tus clientes que no es tarde para comprar online.
Sam’s Club se asegura de que nadie se quede sin comprar su regalo, ni siquiera en el último momento. Fíjate en la cuenta atrás y en los recordatorios de los plazos de envío
¡Hazlo ahora!
Sí, tus clientes pueden esperar al último minuto para encontrar el regalo perfecto… pero tú debes empezar a prepararte ahora mismo. Planea el diseño del sitio con tiempo, no cuando estés desbordado por los pedidos y los paquetes navideños.
Las vacaciones se acaban: no dejes las luces del árbol encendidas hasta febrero. Fíjate una fecha y ten preparado el tema de Año Nuevo para aprovechar la época de rebajas.
por Jorge del Barrio | Jun 2, 2014 | Diseño gráfico, Diseño web, Internet
Herramientas de diseño web: Webflow, Edge reflow y Macaw
Para prepararse para una charla sobre los papeles cambiantes de los diseñadores y desarrolladores, dadas en CÓMO interactivo hace unos meses, me entrevisté con más de 20 tiendas web . Validado por mi propia experiencia, he encontrado que muchos de ellos enfrentan desafíos encajan diseño de respuesta en su flujo de trabajo y el papel de la mayoría de los diseñadores web había cambiado para incluir la programación de una forma u otra. Al menos la mitad de los diseñadores sabían HTML y CSS bien pero quería una forma más visual para llegar a ella. Bueno, una nueva generación de herramientas de diseño visuales sensibles ha llegado. Estas herramientas de diseño que responden son para cualquier persona que entiende de HTML y CSS (o está dispuesto a aprender ) y quiere diseñar visualmente una página web de respuesta – y tienen código para mostrar. Algunas de las más nuevas y visuales constructores de sitio web de respuesta son Webflow, Adobe Edge Reflujo CC y Macaw. Sí , un millón de personas están ahí fuera, incluyendo Squarespace , FROONT y caballete, pero nos centraremos en unos pocos en este artículo. Mi intención no es campeón de estas herramientas, sino más bien para que se familiarice con ellos y discutir sus puntos fuertes y débiles . Para que conste , soy un desarrollador de front-end que -creo sitios web que responden utilizando varios marcos y mi propio código como punto de partida (junto con WordPress). Siempre he sido recelosos de código generado, por una buena razón (recuerde GoLive ? ), Pero también entiendo que herramientas como éstas tienen un tiempo, un lugar y, sí, un público. Usted podría utilizar una de estas herramientas en el proceso de diseño para crear composiciones que responden , sin importar si usted tiene la intención de usar el código generado. Incluso me he tomado a través de algunos de prototipado rápido. ¡Blasfemia! Por lo tanto, vamos a echar un vistazo, a partir de Webflow.
Webflow
Al igual que todas las herramientas que discutiremos, Webflow es un recién llegado a la escena. Es un editor de arrastrar y soltar en el navegador para crear sitios web que responden sin tener que mirar el código . Se requiere una suscripción mensual y tiene múltiples niveles de precios para los individuos y equipos . Incluido en todas las suscripciones está organizando en una red de distribución de contenidos mediante un subdominio ( yoursite.webflow.com ), a menos que quieras pagar unos dólares más para el hospedaje de dominio personalizado . Pero es posible también exportar simplemente el código generado y llevarlo donde quiera. ¿Cómo va el código que genera Webflow , usted pide? Se basa en Bootstrap 3.0, y, sí , algunos de nosotros podría escribir más limpio, más claro , más código semántico, pero dijo todo , el código de Webflow es relativamente limpio. Después de registrarse y el registro, es llegar al salpicadero del Webflow . Esto es donde el control de su cuenta , administrar la configuración del sitio web y comenzar su sitio web. Por defecto, no hay mucho excepto un gran botón azul que mira a la cara , que le insta a crear un sitio web . Puede utilizar una plantilla o empezar de cero. Incluso hay un mercado para las plantillas, de pago y gratuitos , donde se puede vender sus propias plantillas WebFlow .
Primeros pasos con Webflow
Bloques de construcción
Una vez que haya comenzado un sitio web, te llevan en el diseñador de Webflow, donde sucede la magia. En el diseñador, que actualmente es reconocida sólo en Chrome y Google Canary (que es básicamente Chrome para desarrolladores, con nuevas características que se agregan casi todos los días), se le está mirando fijamente a su primera página en el explorador , con una barra de herramientas a la izquierda y varios los paneles de la derecha. Operaciones genéricos (por ejemplo, agregar páginas , la edición y vista previa) están a la izquierda, y los contenidos y opciones de formato meollo de la cuestión están a la derecha. Desde el panel de «+ » a la derecha, puede arrastrar elementos de diseño (divs o elementos HTML5 fijados a un max-width o un ancho de 100 %) y una cuadrícula personalizable en el diseño de escritorio por defecto. Con su estructura básica en su lugar, usted puede comenzar a insertar contenido de la página. Webflow viene con un conjunto de componentes web estándar (incluyendo listas , enlaces y bloques de texto ) y una serie de widgets personalizables (como iconos de redes sociales y deslizadores sensibles ) que puede arrastrar en la estructura de la página. Para las imágenes , puede utilizar GIF , JPG , PNG o SVG , así como imágenes optimizadas para la retina y Hi- DPI pantallas. También puedes arrastrar el widget »
Diseñador de Webflow
Insertar » en el diseño para añadir su propio código.
DISEÑO
Mientras Webflow es arrastrar y soltar, la experiencia no es como el diseño en Photoshop o Illustrator. El contenido se genera encaja más como un rompecabezas y se posiciona utilizando propiedades CSS típicos como el padding, margen y posición. Como un codificador , agradezco la eficacia con Webflow muestra visualmente la estructura HTML y CSS propiedades. Como resultado , el conocimiento de HTML y CSS de trabajo es necesaria, y constructores de sitio web por primera vez puede ser un poco perplejo por algunas de las opciones, pero eso es lo que la ayuda video es para , junto con los iconos en línea de ayuda («?» ) por todas partes. Para ser honesto , el panel de estilo a la derecha, donde se ajusta la mayoría de las propiedades de CSS , es relativamente intuitivo, y la forma en que maneja las propiedades CSS , como relleno y el margen es muy inteligente . Codificadores de CSS podrían sentir que carece y quiere ver el código . Contenido compartido entre páginas es bastante simple , y algunos contenidos relacionados con SEO- , como los títulos y descripciones , se puede establecer por página .
Editar estilo
DEFINIR SU DISEÑO DE RESPUESTA
Cuando se trata de cómo el contenido responde realmente a la medida del navegador, sigue Webflow cómo la industria inicialmente se acercó el diseño de respuesta : durante tres dispositivos o puntos de interrupción. A medida que agrega y diseñar su contenido y áreas, se puede determinar los tamaños de los dispositivos ( de tres) que van a aparecer en . También puede previsualizar fácilmente el diseño en los tres tamaños desde dentro de la interfaz . En la actualidad, los puntos de corte no se pueden editar en el diseñador, a menos que agregue su propio código en el tablero de instrumentos o exportar el código y editar el CSS a otra parte.
El cambio entre los puntos de interrupción
Las fuentes, los medios de comunicación, FORMAS Y VINCULACIÓN
En estos días , las fuentes alojadas son una necesidad para cualquier diseñador que se precie . La integración de Google Fuentes o un kit de una cuenta Typekit se pueden hacer en el tablero de instrumentos , y esas fuentes serán entonces accesibles en el menú «Fuente» en el área de diseño .
Adición de medios (incluyendo vídeo de Vimeo y YouTube ) es bastante fácil, también. Webflow utiliza Embedly incrustar el contenido de una larga lista de proveedores.
Formularios de contacto simples también están disponibles y se pueden instalar y diseñados con bastante facilidad. Usted puede tener los datos que se envían por correo electrónico: Sólo tienes que arrastrar los datos capturados del formulario de la configuración en el panel de control , o el gancho de la forma a otra secuencia de comandos (o simplemente insertar su propio código de formulario).
Aparte de las opciones de vínculos típicos (como entre las páginas de sitios web , correo electrónico y teléfono ) , Webflow permite vincular a las secciones de las páginas, con desplazamiento suave entre anclajes insertados automáticamente. También puede insertar un bloque de enlace, que es un área de contenido con un solo vínculo que se le aplica . También puede ajustar fácilmente la apariencia de sus vínculos por el estilo de ellos.
TRABAJANDO CON EL CÓDIGO
Al igual que con la mayoría de otras herramientas, algunas de las características de HTML y CSS más avanzadas están ocultos de manera predeterminada en el espacio de trabajo , pero se puede activar . Si te sientes aventurero , también puede asignar sus propias clases de contenido y cambiar el nombre y eliminar en el Administrador de estilos . Si usted es hábil con el código, puede insertar su propio en las etiquetas de la cabeza y el cuerpo en el salpicadero. Esto abre la puerta a la adición de los componentes personalizados , como plugins jQuery y mucho más . código de Inserción
Insertar código
Webflow es actualmente un constructor de sitio web estático y no está vinculado a un sistema de gestión de contenidos ( CMS) o el sistema de blogs. Usted puede exportar el código de su diseño Webflow utilizar como punto de partida para un WordPress (u otro) de proyecto o incluso como un archivo plano CMS. Pero una vez que se exporta el código, que pierde su conexión con el diseño original en Webflow . Una característica útil de Webflow es la posibilidad de guardar versiones de sitios web. En estos días, la mayoría de nosotros que desarrollan sitios web para ganarse la vida utilizan algún tipo de control de versiones , por lo que, en su forma más simple , podemos volver a versiones anteriores si se produce un problema. En el diseño de Webflow , puede crear manualmente una versión o dejar que WebFlow crear uno de forma automática cada 20 de salvar. Un punto de restauración se creará en la configuración de la página Web del tablero de instrumentos, y se puede añadir una nota en cada punto de restauración. Entonces , si pasa algo, puede restaurar el archivo completo (es decir, sitio web) a una versión guardada anteriormente. Por lo tanto, escribir una nota recordatoria en cada punto de restauración para explicar que la página web es una buena idea.
Restaurando versiones en CMS
Publicando y exportando
La publicación en la red de entrega de contenido de Webflow (incluido en el presupuesto) es bastante simple , ya que está exportando , si usted prefiere tomar otra parte del código . Puedo imaginar varios usos para esto: las personas que lo usan para crear su propio sitio web de respuesta estática ; diseñadores lo utilizan de demostración de un diseño de respuesta o para pasar el archivo de código exportado a un desarrollador ; y desarrolladores usando piezas del código generado en sus proyectos. Webflow también permite a los usuarios trabajar en colaboración (que cuesta más), incluso mediante el intercambio de plantillas, la transferencia de sitios web para clientes y mucho más.
Exportando el código
Adobe Edge Reflug CC
Edge reflug es parte de la familia de herramientas de borde y servicios que Adobe ha introducido en los últimos años . La familia incluye Edge Reflow , Edge Animate y Edge Inspeccione , y es una parte de la Creative Cloud , que está basado en suscripciones . A diferencia Webflow , que está basado en el navegador , Borde de reflujo es actualmente una aplicación que se descarga e instala en el disco duro . Debido a reflujo es todavía técnicamente en modo de vista previa pública (como una beta que está disponible para el mundo ) , no está todavía plenamente al horno , y las cosas cambiarán muy probablemente en versiones futuras sobre la base de sugerencias de los usuarios . Edge reflujo es una herramienta de diseño que captura las «de intermediarios» de un diseño de respuesta , que a menudo son difíciles de transmitir al dar el relevo un proyecto a un desarrollador o en la presentación de los conceptos de diseño a un cliente. En otras palabras, Edge reflujo hace que los archivos de Photoshop más sensible amigable.
Bloques de construcción
Al comenzar un proyecto en el reflujo , puede seguir uno de varios métodos . Usted puede crear un proyecto de reflujo que contiene las páginas de su sitio web y empezar a partir de un lienzo en blanco, por así decirlo. Puede importar imágenes de la web y el contenido de Photoshop y luego construir su diseño; hacer esto , incluso se podría importar el contenido en su proyecto de reflujo directamente desde un archivo CC Photoshop (ersión 14.1 + only – CS6 y anteriores no funciona) si el archivo de Photoshop (PSD) se ha establecido correctamente.
Un tercer método es exportar un proyecto de reflujo desde Photoshop CC ( 14.1 + ) como punto de partida para un diseño de respuesta en reflujo . Esto le permite importar las formas , el texto y los activos que ha definido en el documento de Photoshop. Utilizando la tecnología de generador integrado en Photoshop CC (14.1 +), las imágenes optimizadas en la web se generan automáticamente a partir de los nombres de capa en Photoshop. Esta conexión es uno de los grandes puntos de venta de reflujo para aquellos de nosotros que confían en Photoshop para el diseño web .
Copiando CSS de Reflow
Cuando se trata de diseño , reflujo es bastante similar a Photoshop e InDesign . Cambia la posición de los elementos visuales , en lugar de editar el CSS y HTML para moverlos. Reflujo también requiere que se dibuje contienen elementos en el espacio de diseño , en lugar de arrastrarlos en (como en Webflow) . El flotador : izquierda declaración se aplica a todos los elementos en reflujo por defecto, así que arrastrar el contenido que se encuentra en la página puede ser doloroso al principio. Una vez más , sin embargo, la aplicación que obliga a entender los conceptos de HTML y CSS , porque la mayoría de las funcionalidades relacionadas con el diseño se basa en ellos. Para ayudar a su diseño, Reflujo viene con una rejilla editable que le permite editar las columnas, canalones y opacidad. Cada punto de interrupción de respuesta puede tener un ajuste de rejilla diferente. Puede crear múltiples páginas, y lo más parecido a la adición de CSS es copiar y pegar los estilos visuales de un elemento a otro . Reflujo también le permite acceder a las opciones de base de CSS para el estilo del cuerpo (llamada la » página» ) y el div que contiene (que todas las páginas tienen reflujo ).
Debido a que el diseño de respuesta es el propósito de reflujo en la vida, la única cosa que realmente llama la atención es cómo se defina visualmente los puntos de interrupción . En Reflow , está representado todo el espectro de respuesta ( no sólo los tres tamaños de los dispositivos , como en Webflow ) . Si partes de su rotura de diseño entre el móvil y la tableta , por ejemplo , puede agregar fácilmente un punto de interrupción haciendo clic en un botón y hacer los cambios necesarios . Reflujo incluso le permite establecer puntos de interrupción máxima y mínima , lo que significa que usted puede diseñar móvil primero , si quieres. Definición de los puntos de interrupción en Reflow Definición de los puntos de interrupción en reflujo (Grande vista previa) Las fuentes, los medios de comunicación.
Fuentes de una cuenta Typekit se puede utilizar fácilmente en la interfaz al conectar el kit. Reflujo también viene con acceso a Edge Web Fonts (una colección de fuentes web hospedados de Adobe, Google y otros) . medios de comunicación Porque no se puede inyectar su propio código a menos que modifique el código generado , la adición de medios en el borde de reflujo no es posible. Se puede establecer un marcador de posición para los medios de comunicación (como imágenes ) , usándolo como una señal visual para el sitio web de producción. Formas En Reflow , puede añadir una serie de elementos típicos de formulario , como botones , campos de texto y botones de radio (entre otros) . Inserción de estos elementos de formulario en la página no añadir una etiqueta de formulario con el código generado ; así, los elementos de formulario no están hechas para ser funcional fuera de la caja . Esto nos recuerda una vez más que de reflujo es actualmente una herramienta maqueta , más adecuado para la creación de un diseño a prueba de concepto de que para generar código listo para la producción . enlace En la última versión de Edge Reflujo CC , se puede enlazar a páginas dentro del proyecto y a direcciones URL externas , así como los estados de control como la libración y activa en cualquier objeto en el diseño.
INTEGRACIÓN CON UN CMS
Reflug actualmente no tiene manera de integrar con un CMS a menos que tome el código que se genera y lo hace usted mismo fuera de la aplicación .
TRABAJO CON EL CÓDIGO
Edición de código no es el propósito de reflujo , ya que está destinado a ser utilizado como una herramienta de diseño visual . Sin embargo , utilizando el panel Elementos , puede nombrar a los elementos y organizar el código (es decir, para el DOM) en una jerarquía que tenga sentido para usted ( y tal vez a su desarrollador) .
Si usted está mirando para agregar cosas como una presentación de diapositivas jQuery, desplazamiento suave o un video o insertar su propio código HTML , entonces tendrá que modificar el código generado en otra aplicación. El panel Elementos El panel Elementos (Grande vista previa) Publicación y exportación Tenga en cuenta que el borde de reflujo tiene actualmente ningún exportador o funcionalidad de publicación . Al previsualizar la página web en un navegador compatible , reflujo genera el código HTML y CSS, pero los comentarios en línea que advierten contra el uso del código en un entorno de producción.
Editar tags en el outline
A juzgar por la respuesta en los foros de Edge de reflug, esto no ha impedido que la gente lo intente. Reflug te permite mostrar, copie y pegue el código CSS generado utilizar más aguas abajo en su página web real. Copiado CSS del reflujo Copiado CSS del reflujo (Grande vista previa) Para una mirada al interior de cómo Reflujo produjo, echa un vistazo en cuenta el proceso de Aaron Shekey.
Macaw
La última aplicación de la escena es Macaw, que acaba de ser lanzado al público como la versión 1.0 el 31 de marzo. Macaw se posiciona como una herramienta de diseño web que también escribe HTML semántico y CSS. Creo que el lema lo dice todo : «Deja de escribir código, empezar a dibujar ella. » Como Edge Reflow, Macaw también es una aplicación que se descarga e instala en el disco duro y está vinculada a una cuenta registrada. Pero a diferencia de Webflow y Edge Reflujo CC , no hay ninguna cuota mensual. Usted sólo paga un precio por una sola vez.
Después de pasar unos días con Macaw , te puedo decir que tiene un gran potencial como herramienta de diseño de páginas web sensibles . Esa es una buena manera de decir que es un bastante impresionante versión 1.0 , con algunos errores . Viniendo de un fondo de la web , puedo decir que la interfaz es bastante intuitiva , aunque me encuentro que faltan características básicas como los menús de contexto del botón derecho y zoom. Pero teniendo en cuenta que un puñado de personas inició esta cosa , no una corporación grande , estoy impresionado.
La interfaz del Macaw Interfaz (vista previa Large) del Macaw Bloques de construcción Cuando se inicia un proyecto Macaw, que se enfrentan a una página en blanco , que es el lienzo de diseño. Usted puede empezar a añadir elementos de diseño a la página mediante la importación de imágenes y añadir marcos de texto y el formato a ir con ellos, o usted puede ir directamente a la adición de puntos de interrupción que se podría esperar de su uso. La interfaz del Macaw es bastante simple, y el diseñador promedio realmente no se necesita mucho tiempo para descifrar dónde están las cosas – es decir, el tiempo que tienen un conocimiento de HTML y CSS de trabajo . Como Reflow , Macaw es bastante similar a Photoshop e InDesign en su acercamiento al diseño. Usted dibuja y recolocar los elementos visuales , en lugar de tener que editar el CSS y HTML. Stream es el nombre del motor que calcula todas las propiedades que colocan los elementos de diseño en el flujo del documento estático.
Al igual que con Webflow y reflujo , usted tiene que entender HTML y CSS conceptualmente , porque la mayoría de la funcionalidad de diseño se basa en ellos. Elementos de diseño en Macaw Elementos de diseño en Macaw (Large vista previa) DISEÑO Macaw tiene lo que parece ser una característica muy útil, llamado modo de visualización , que muestra los elementos de diseño en la página como » normal» o » contorno » o » alambre «. Debido a que muchos de nosotros va a utilizar Macaw como wireframing y maqueta herramienta , al ver el contenido como contornos negros ( «perfil «) o cajas de color gris ( » alambre «) será útil. El modo de vista del Macaw El modo de vista del Macaw (Large vista previa)
DEFINIR SU DISEÑO
Después de haber trabajado en el borde de reflujo durante un tiempo , me sorprendió la forma en que el espacio de trabajo Macaw similar . Como Reflow , Macaw permite definir puntos de interrupción visual , aunque su interfaz no es tan elegante como reflujo de en mi opinión. Todo el espectro de respuesta se representa ( no sólo los tres tamaños de los dispositivos , como en Webflow ) . Si partes de su rotura de diseño entre los puntos de interrupción , puede agregar fácilmente un punto de interrupción y hacer los cambios necesarios . Tristemente, Macaw actualmente no permite el diseño móvil primero porque no se puede establecer puntos de interrupción máximo y mínimo . El DOM también se bloquea en los puntos de corte más pequeñas , lo que impide la adición de contenido ( las herramientas están aún en gris ) . Pero la gente está charlando en foros del Macaw que los puntos de corte min- width (por diseño -mobile primero ) están llegando. Establecer puntos de interrupción en Macaw Establecer puntos de interrupción en Macaw (Large vista previa) Las fuentes, los medios de comunicación,
FORMAS Y VINCULACIÓN
Fuentes Fuentes web de Google se integran en el espacio de trabajo, y también se puede acceder a las fuentes Typekit conectando su cuenta en el menú «Fuente» del área de diseño . medios de comunicación Actualmente, Macaw ofrece una manera fácil de insertar los medios de comunicación , tales como videos de YouTube. Puede, sin embargo , introducir un elemento de marcador de posición y ate algo de JavaScript a la misma, a través del » scripts » del panel. Formas Macaw tiene una variedad de elementos de forma típica , incluyendo botones, campos de texto y botones de radio, que se pueden agregar a un diseño . Al igual que en reflujo , se trata de representar visualmente un formulario, no para crear una forma de trabajo real . Si te sientes aventurero , puedes elementos de forma de agrupar y cambiar la etiqueta a formarse en el editor de esquema. Esto por lo menos le dará las bases para una forma funcional si tiene la intención de usar el código generado en su sitio de producción. enlace Puedes enlazar a páginas creadas en un proyecto, así como el tipo de enlaces en el menú » Vínculos».
TRABAJO CON EL CÓDIGO
Lo más parecido a trabajar con código en Macaw (aparte de editar el código publicado) es editar elementos en el panel de esquema, que es una representación del DOM. En el panel de esquema , puede cambiar las etiquetas HTML , jerarquía y el contenido de pedido, solicitar nombres de CSS y más. También se pueden crear estilos globales (CSS) que se pueden aplicar a su contenido. Edición de etiquetas en el panel Contorno Edición de etiquetas en el panel Contorno (Grande vista previa)
INTEGRACIÓN CON UN CMS
Como Reflow , Macaw no se integra con un CMS. Algunas personas en la comunidad Macaw están tratando de averiguar un flujo de trabajo de Macaw para WordPress (y otros plataformas ) , pero no hay una conexión directa todavía. Publicación y exportación Macaw tiene una opción de publicación que lleva a una ventana de vista previa . A diferencia de reflujo, Macaw ofrece opciones para la exportación , en «Configuración de publicación.» En el cuadro de diálogo de ahí, puede elegir las páginas para exportar , inyectar código (como Google Analytics) en la cabeza o el cuerpo , adaptar el CSS a sus necesidades (escribiendo abreviaturas , la adición de prefijos de proveedores , la consolidación de estilos , etc), genera imágenes optimizadas para pantallas de alta definición y más. Los ajustes que dicen que el código generado no es sólo para mostrar. Una vez publicada , se le llevará a una ventana de vista previa , donde se puede ver todo el código (HTML , CSS , JavaScript ) e incluso ir a la vista previa de la página en el navegador predeterminado . De las tres aplicaciones , el código del Macaw es el más conciso y lo más cercano a lo que un desarrollador de front-end en realidad podría escribir.
Opciones para publicar código
CONCLUSIÓN
Estas herramientas de diseño están aquí para quedarse de una forma u otra. Desde dispositivos móviles llegaron a la escena, que hemos estado tratando de configurar nuestros flujos de trabajo para dar cabida a los diseños sensibles. Estas herramientas podrían potencialmente salvar esa brecha cuando es usado como punto de partida para el diseño de aplicaciones para usuario o simplemente para wireframes y prototipos.
Como era de esperar, ya he visto la gente trata de construir un gran sitio web basado en CMS con reflug y luego se quejan cuando no pueden inyectar su slideshow de respuesta preferida o lamentarse de que el código no es lo que iban a escribir. Tenga en cuenta que el guacamayo y reflujo tienen el propósito de ser parte de un flujo de trabajo, no al principio y al final. Mediante el uso de estas herramientas, ya que tienen por objeto (y no obligarlas a nuestro flujo de trabajo), podemos cruzar el umbral de la capacidad de respuesta, que puede salvar a nosotros mismos ya nuestro tiempo y dolores de cabeza clientes.
