Archivo

Posts Tagged ‘diseño web’

65 Términos de Diseño Web que Debe Saber

15 de septiembre de 2019 Deja un comentario

El lenguaje del diseño web incluye muchos términos de diseño web que debe conocer. Ya sea que cree su propio blog o sitio web, trabaje con un diseñador web o desarrollador web, o quiera aprender más sobre el diseño web en general, este artículo cubrirá los términos en inglés más importantes utilizados en el diseño web. También nos sumergiremos en los detalles de lo que constituye el proceso de diseño web, incluidos los métodos de resolución de problemas y el flujo de trabajo.

 

Términos de el diseño web: vocabulario para el diseño web

 

El diseño web a menudo implica una superposición entre disciplinas, y es por eso que estamos incluyendo vocabulario de marca, composición, color y tipografía. Saber cómo hablar el lenguaje del diseño web le ayudará a hacer mejores preguntas, comunicarse de manera más efectiva y producir un mejor producto final. También puede observar cómo se implementan estos términos en una amplia variedad de sitios web (para bien o para mal). Debido a que el diseño web es un proceso holístico, los diseñadores web están capacitados para ver la imagen más grande y también los detalles.

 

Términos de marca

 

La marca es la comunicación del mensaje, los valores y la experiencia de una organización. Todo, desde el logotipo de la empresa y los elementos de diseño identificables hasta las ‘sensaciones instintivas’ que las personas obtienen sobre el motor de una organización del por qué detrás de un sitio web. Cuando se trata de diseño web, tiene la oportunidad de crear experiencias que refuercen la marca de la empresa.

1. Identity (Identidad): toda la representación visual de su marca puede incluir logotipo, color, tipografía, imágenes, voz, etc. No solo un logotipo.
2. Lettermark / Wordmark / Logotype: un tipo de logotipo hecho con letras estilizadas (IBM) o palabras (Coca-Cola)
3. Brandmark (Marca): un tipo de logotipo hecho con una representación gráfica (Apple, Target)
4. Icon (Icono): una representación simplificada de un objeto o concepto. Un logotipo y un icono no son lo mismo.
5. Design System (Sistema de diseño): un repositorio de componentes digitales reutilizables que se combinan para formar un sitio web.
6. Brand Guide (Guía de la marca): una referencia visual y filosófica para el color, la personalidad y la voz de una marca.

 

Términos de experiencia del usuario

 

La experiencia del usuario abarca cómo las personas interactúan e interactúan con un sitio web. La experiencia del usuario influye en cómo dirigimos a los usuarios a través del sitio y los llevamos a objetivos finales específicos. Abarca muchos elementos de diseño y desarrollo, incluido cómo se ve y funciona algo. Tome decisiones de funcionalidad teniendo en cuenta al usuario final, no su propia preferencia o las herramientas que está utilizando.

7. Persona: personaje ficticio que representa un usuario principal de su sitio / producto. Por lo general, las personas están muy bien desarrolladas porque deberían representar a personas reales con motivaciones reales.

8. Wireframe (Esquema de página): diseño de baja fidelidad de un sitio, representación de contenido general a nivel de bloque y elementos interactivos.

9. Mockup (Maqueta): diseño de alta fidelidad de un sitio, representación del color final, tipografía, imágenes, etc.

10. Prototype (Prototipo): versión interactiva de un sitio, no se puede construir con el código final.

11. CTA: Llamada a la acción, generalmente emparejado con un botón.

12. Conversion (Conversión): cuando un usuario realiza una acción específica deseada.

13. Landing Page (Página de destino): página única optimizada para una audiencia específica o resultado de motor de búsqueda.

14. Usability (Usabilidad): cómo los usuarios reales realmente interactúan con su sitio, generalmente probado al observar una serie de tareas guiadas.

 

Términos de la interfaz de usuario

 

La interfaz de usuario (también conocida como UX & UI) incluye elementos en la página con la que interactúa el usuario. Su interfaz de usuario impacta su experiencia de usuario, aunque no son lo mismo. No haga pensar a sus usuarios; Diseñe una interfaz intuitiva que aproveche los patrones modernos.

15. Breadcrumb (La miga de pan o el hilo de Ariadna es una técnica de navegación usada en muchas interfaces gráficas de usuario, además de páginas web): enlaces de contenido jerárquico.

16. Menu (Menú): Área de navegación principal, a veces con un menú desplegable o flotante de elementos de submenú.

17. Filter (Filtro): elementos predefinidos que permiten reducir el contenido visible por varias taxonomías (las taxonomías son una forma elegante de decir categorías).

18. Search (Búsqueda): entrada abierta que consulta el contenido y devuelve una lista de resultados.

19. Slider (Control deslizante): una forma moderna y animada de mostrar información que probablemente no debería usar.

 

Términos de composición

 

La composición se refiere a cómo el contenido y la estética de un sitio web trabajan juntos. Cada elemento en la página web debe sentirse como si perteneciera al diseño del sitio web, no agregado como una ocurrencia tardía.

20. Balance (Equilibrio): uso de elementos de diseño similares o complementarios para que la composición se sienta igual.

21. Repetition (Repetición): uso de elementos recurrentes para reforzar patrones o servir como señales visuales familiares.

22. Whitespace (Espacio en blanco): ¿Cuánto ‘espacio para respirar’ tiene cada elemento?

23. Grid (Rejilla): Estructura subyacente a un diseño que determina mostrar todo lo que se presenta.

24. Rule of Thirds (Regla de los tercios): Un concepto visual que establece que los puntos focales más agradables están en la intersección de tres filas y columnas. En las artes visuales y el área cinematográfica como la pintura, fotografía y diseño, la regla de los tercios es una forma de composición para ordenar objetos dentro de la imagen. Esta regla divide una imagen en nueve partes diferentes , utilizando dos líneas imaginarias paralelas y equiespaciadas de forma horizontal y dos más de las mismas características de forma vertical, y recomienda utilizar los puntos de intersección de estas líneas para distribuir los objetos de la escena. La regla de los tercios se usa con frecuencia en todo tipo de escenas como retratos, paisajes o bodegones.

 

Términos de jerarquía

 

La jerarquía implica la importancia relativa de la visibilidad de las piezas de información. La jerarquía visual suele ser una colección de pequeños detalles como tipografía, color, proximidad y equilibrio. Tener una buena jerarquía ayuda a escanear la información y ayuda a los usuarios a priorizar la información en la página por importancia. La jerarquía también ayuda a dirigir a los usuarios a través de un sitio web. Las decisiones tomadas sobre el estilo y la posición de los elementos tienen un gran impacto en la experiencia del sitio web.

25. Scale (Escala): ¿Qué tan grandes o pequeños son los elementos en la página entre sí?

26. Proximity/Alignment (Proximidad / Alineación): ¿Qué elementos de la página están asociados entre sí?

27. Focal Point (Punto focal): El lugar en la página al que estamos dirigiendo la atención del usuario.

28. Semantic Markup (Marcado semántico): Usar elementos HTML correctamente para implicar jerarquía y uso dentro del contenido.

 

Términos de tipografía

 

La tipografía son las decisiones estéticas sobre la disposición del tipo. El tamaño, el espaciado, la alineación, el tamaño de la columna y el tamaño relativo del tipo tienen un gran impacto en la experiencia del usuario, así como solo en la estética.

29. font (typeface) (fuente) (tipo de letra): Colección de letras y glifos / símbolos

30. font-family: ¿Qué tipo de letra está usando?

31. font-size (tamaño de fuente): ¿Qué tan grande / pequeña es?

32. font-weight: ¿Qué tan pesada / ligera es?

33. font-style, text-decoration (estilo de fuente, decoración de texto): cursiva, subrayado, tachado

34. line-height (leading) (altura de línea) (inicial): ¿Cuánto espacio entre líneas?

35. letter-spacing (tracking) (espaciado entre letras) (seguimiento): ajuste del espaciado entre grupos de letras / bloques de texto.

36. kerning: el espacio entre letras individuales.

37. serif / sans serif: las fuentes Serif tienen un trazo o línea decorativa adicional al final de las letras, mientras que una fuente Sans Serif no tiene.

 

Términos de color

 

El color abarca decisiones estéticas sobre el uso del color en una composición. El color se puede utilizar para evocar emoción, énfasis, división o elementos grupales; El color puede crear unidad visual y equilibrio. El color generalmente está relacionado con la marca. Las opciones de color deben liberarse y usarse de manera consistente en todo el sitio web.

39. HEX: en sitios web, el color hexadecimal, un número de seis dígitos utilizado para representar el color en HTML / CSS.

40. RGB: modelo de color aditivo utilizado para pantallas, valores de luz roja / verde / azul combinados para formar colores.

41. CMYK: Para la impresión, el modelo de color sustractivo utilizado para tinta, cian / magenta / amarillo / negro se combinan para formar colores.

42. Pantone / color plano: tintas personalizadas específicas de un determinado color. Las grandes marcas suelen tener su propio color Pantone personalizado.

43. Hue: ¿Dónde está en el espectro de color?

44. Saturation (Saturación): ¿Qué tan vívido o aburrido es el color?

45. Contrast (Contraste): ¿Cuánto se destaca?

46. Opacity (Opacidad): ¿Sólida o transparente?

 

Términos de imágenes

 

Los términos de imágenes incluyen los elementos visuales y gráficos de un sitio web. Las imágenes son importantes para comunicar su mensaje y conectarse con su audiencia. Sin embargo, cuando las imágenes se usan de manera inadecuada, puede agregar un volumen adicional al tiempo de carga de un sitio web sin hacer mucho por la experiencia del usuario. Use imágenes para respaldar sus mensajes; use el formato de imagen correcto para el contenido.

47. Vector (Vector): imágenes hechas de las matemáticas (SVG, EPS).

48. Raster (Ráster): imágenes que están hechas de píxeles (JPG, TIFF, PNG, GIF).

49. Resolution (Resolución): cuántos píxeles tiene una imagen de trama (por ejemplo, 800 × 600 o 2400 × 1200). Una resolución más alta generalmente será de mayor tamaño, pero con mayor detalle.

50. Compression (Compresión): optimización (tamaño de archivo grande / pequeño).

51. JPG / JPEG: mejor para fotografía e imágenes detalladas.

52. PNG: ideal para gráficos, colores simples e imágenes con transparencia.

53. GIF: ideal para gráficos o animaciones de bajo detalle.

54. TIFF: mejor para la calidad de impresión, no adecuado para la visualización en pantalla.

55. SVG: un formato de imagen vectorial adecuado para mostrar en la Web, mejor para gráficos y logotipos.

 

Términos de terminología web

 

Los términos de terminología web abarcan un vocabulario general al diseñar para la web. Los diseñadores web no solo conocen el diseño, sino que también entienden la tecnología para la que están diseñando.

56. Heading (Encabezado): títulos y subtítulos, escritos semánticamente con etiquetas h1 – h6. Útil para organizar la información en una jerarquía y es utilizada por los motores de búsqueda y los lectores de pantalla.

57. Body Copy/Body Text (Copia del cuerpo / Texto del cuerpo): El contenido escrito principal, generalmente los párrafos, las listas, las citas, etc.

58. Hero: la imagen / gráfico principal en una página de inicio o de aterrizaje, generalmente con un llamado a la acción principal.

59. Single-Scroll (Desplazamiento único): un sitio web donde la mayoría del contenido está contenido en una sola página.

60. Responsive Design (Diseño adaptativo): un diseño que no es fijo, pero se adapta al tamaño de la pantalla y / o dispositivo del usuario.

61. Breakpoint (Punto de interrupción): un punto específico (por ejemplo, ancho) donde el contenido / diseño de un sitio web cambiará para adaptarse a una interfaz diferente.

62. Accessible (Accesible): capacidad de un sitio web para ser utilizado por todos los públicos, incluida la discapacidad visual, auditiva o motriz, mediante tecnología de asistencia o navegación estándar.

63. Front-End: en general, se trata del código que se ejecuta en un navegador y controla lo que se ve e interactúa.

64. Back-End: en general, se trata de código que se ejecuta en un servidor y controla el contenido y la lógica.

65. CMS: sistema de gestión de contenido (como WordPress).
Elements photos

Cómo crear una tienda OpenCart

10 de abril de 2019 Deja un comentario

¡Oye!, ¿qué está pasando, chicos? Este artículo tiene unos meses y adivina ¿qué? Desde la última vez que lo edité, ¡se han reducido los precios para los temas premium de OpenCart! A partir de hoy, puede comprar cualquier plantilla OpenCart por casi la mitad del precio, ¡a solo $ 45 cada uno! Si cree que esto es increíble, sigue leyendo.

Ahora se puede acceder a una parte más amplia de los temas de PrestaShop disponibles en el mercado de TemplateMonster a través de la suscripción a través de ONE. ¡Después de pagar una tarifa única de $ 229 por año, puede probar todos estos temas uno por uno! ¿No es eso increíble? Pero eso no es todo.

Todos los miembros de ONE pueden ahorrar entre un 30% y un 50% al comprar productos digitales del mercado de TemplateMonster que no están incluidos en ONE.

Únete a ONE

Tengo una confesión para ti. ¡Me encanta la pizza de un euro y no me avergüenza decirlo! Sí, en la mayoría de los casos es una pizza bastante mala y a veces siento que me va a matar, pero por alguna razón, sigo visitando la pizza de un euro de vez en cuando y disfruto de una porción de una pizza descaradamente horrible.

Mi tradición, si puedo llamarlo así, para visitar la pizzería del euro se remonta a mis días universitarios cuando no tenía suficiente dinero, como los mini bocadillos de calamares, pero quería comer algo de comida rápida. Solía ​​quedarme allí por una hora más o menos y hablar con los visitantes habituales. Fue genial discutir los entresijos de la vida mientras se come pizza y se ve en las calles llenas de personas que corren a algún lugar de Madrid tan rápido.

En aquellos días, solía hablar mucho sobre cómo quería comenzar mi propio negocio, pero, francamente, no tenía las habilidades suficientes para comenzar algo lo suficientemente rentable.

Mientras ayudaba a mi amiga con su tienda OpenCart, decidí compilar un manual útil para aquellos que quieren comenzar su propia tienda. OpenCart es una muy buena opción en esta situación, por lo que si cree que no tiene la experiencia suficiente para crear algo así, no hay problema con todas estas herramientas disponibles en Internet en este momento.

Como compañía con un catálogo bastante grande de la plantilla de comercio electrónico, nos esforzamos por mostrar y explicar a nuestros clientes por qué crear su propia tienda es tan fácil como hacer un pastel.

Por ejemplo, eche un vistazo rápido a las mejores plantillas de OpenCart que tienen en la cartera de TemplateMonster.

 

Fooder – Pizza Restaurant con sistema de pedidos en línea en una Plantilla para OpenCart

 

Fooder - Pizza Restaurant con sistema de pedidos en línea en una Plantilla para OpenCart

Vista previa en vivo | Compra

 

Сar Audio plantilla Responsive para OpenCart

 

Сar Audio plantilla Responsive para OpenCart

Vista previa en vivo | Comprar

 

Modern Furniture – Interior & Home Decor Plantilla Responsive para OpenCart

 

Modern Furniture - Interior & Home Decor Plantilla Responsive para OpenCart

Vista Previa en vivo | Comprar

 

Fresh Food – Plantilla OpenCart de tienda de alimentos orgánicos saludables

 

Fresh Food - Plantilla OpenCart de tienda de alimentos orgánicos saludables

Vista Previa en Vivo | Comprar

 

¿Supongo que ahora entiende por qué traje para arriba la pizza, directamente? ¡Esa plantilla de Pizza Place se ve imponente y sabrosa como el infierno! Ya he pedido yo una entrega de pepperoni, así que permítanme guiarles a través de los fundamentos de personalización de una plantilla OpenCart mientras espero mi pizza a entregar.

 

Cómo instalar el CMS OpenCart

 

Abra cualquier navegador y escriba la ruta de directorio de OpenCart en la dirección del navegador de la barra (por ejemplo http://su_dominio_nombre/opencart). Verá la página de instalación de OpenCart:

  1. Licencia de instalación
  2. Preliminar
  3. Configuración
  4. ¡Listo!

 

Licencia de instalación

 

Verifique un acuerdo de licencia de OpenCart y haga clic en el botón Continuar si está de acuerdo.

 

Licencia Opencart

 

Etapa preliminar

 

En el segundo paso, OpenCart comprobará si la configuración de su alojamiento coincide con la requerida y si los permisos de los archivos y carpetas son correctos.

 

Preinstalación Opencart

 

Configuración

 

En el paso de Configuración, debe ingresar los detalles de su base de datos. La base de datos MySQL que se creó en el paso de preparación, ahora debe ingresar los detalles que ha utilizado:

  • Servidor de base de datos;
  • Nombre de la base de datos.
  • Nombre de usuario de la base de datos.

Si hay algún problema con los detalles de la base de datos, póngase en contacto con su proveedor de alojamiento.

Necesita crear el usuario administrador para su tienda. Introduzca el nombre, la contraseña y la dirección de correo electrónico del administrador. Los detalles que ingrese se utilizarán para iniciar sesión en el backend de su tienda.

 

Configuracion Opencart

 

¡Listo!

 

Este es el último paso de instalación de OpenCart. Verá 2 opciones: puede ser redirigido a su sitio web de OpenCart o al panel de administración de OpenCart.

 

Instalacion completa Opencart

 

Importante: Elimine la carpeta ‘instalar’ de su servidor. No podrá ingresar al almacén hasta que la carpeta permanezca en el servidor.

La instalación se ha completado. Para abrir la página de la tienda, ingrese el nombre de dominio en la barra de direcciones del navegador. Para acceder al panel de administración de OpenCart, ingrese nombre_dominio / admin (domain_name/admin).

 

Cómo instalar una plantilla OpenCart

 

En caso de que ya tenga una tienda OpenCart lista y solo necesite cambiar su apariencia con la ayuda del tema, use el siguiente método de instalación.

  1. Para instalar una plantilla OpenCart, debe cargar los archivos en el servidor. Puede encontrar el archivo ‘themeXXX (update) .zip’ en la carpeta OpenCart, que debe descomprimirse en su computadora.
  2. Después de eso, cargue los archivos descomprimidos en el directorio raíz de la instalación de OpenCart. Puede consultar las instrucciones detalladas en vídeo sobre cómo cargar archivos en el servidor.
  3. Abra su sitio web con cualquier navegador y agregue / instale al final de la URL de su sitio en la barra de direcciones del navegador (por ejemplo, http: // nombre_dominio / opencart / instalar).
  4. Haga clic en el botón Continuar. Puede tomar algún tiempo.
  5. Ingrese al panel de administración, navegue a Extensiones> Instalador de extensiones y cargue los archivos de archivo themeXXX (extensiones). Cuando todos los archivos se hayan cargado, navegue a Extensiones> Modificaciones y presione actualizar en la parte superior derecha de la pantalla.
  6. En el siguiente paso, vaya a Sistema> Configuración, vaya a la pestaña Almacenar y seleccione la plantilla themeXXX en el campo Plantilla.

 

Cómo instalar los módulos de OpenCart

 

El proceso de instalación del módulo incluye varios pasos. Vaya a su panel de administración (agregando / admin a la url de su sitio web en la barra de direcciones del navegador: http://www.susitio.com/admin).

Vaya a Extensiones> Extensiones.

 

Extensiones opencart

 

Elija Módulos en el desplegable Tipo de extensión.

 

Modulos Opencart

 

Verá la lista de módulos instalados y listos para instalar. Si ve el botón Desinstalar junto a cualquier módulo, significa que el módulo ya está instalado.

 

Instalar-desinstalar

 

Puede modificar la configuración del módulo haciendo clic en Editar.

 

Editar modulo Opencart

 

Al hacer clic en el botón Instalar, iniciará el proceso de instalación del módulo.

 

Boton instalar

 

Para eliminar el módulo, debe hacer clic en el botón Desinstalar, por lo que el módulo se eliminará.

Cuando la instalación haya finalizado, deberá configurar el módulo. La configuración puede variar según el módulo específico, pero el campo Estado es el mismo para todos: el campo le permite encender / apagar el módulo.

 

Cuenta Opencart

 

Para agregar el módulo a una página determinada, debe ir a la lista de páginas.

Vaya a Design > Layout en el menú lateral.

 

Diseño Opencart

 

En la lista de páginas, seleccione la página donde desea colocar el módulo y haga clic en Editar.

 

Layout

 

Puede ver una lista de los módulos y las posiciones de los módulos que ya se han agregado a la página.

 

Edit Layout

 

Las siguientes posiciones de módulo están disponibles (respectivamente para el orden de visualización):

  • Encabezado superior (después de la sección de encabezado);
  • Columna izquierda (panel lateral izquierdo);
  • Columna derecha (panel lateral derecho);
  • Contenido superior
  • Contenido inferior

El campo Orden de clasificación muestra el orden de visualización de los módulos asignados a la misma posición. Para agregar un módulo a una página, haga clic en Agregar módulo. Seleccione el módulo requerido y la posición del módulo y haga clic en Guardar. Se ha completado la instalación del módulo.

 

Chosse Layout

 

Configuraciones disponibles:

  • Nombre del módulo: el nombre del módulo;
  • Ancho – ancho de la imagen del módulo;
  • Altura – altura de la imagen del módulo;
  • Desenfoque: activa / desactiva el efecto de desenfoque de la imagen cuando su tamaño es demasiado pequeño;
  • Dirección: establece la dirección del movimiento de paralaje. Normal: el
  • desplazamiento de paralaje se mueve en la dirección opuesta, Inverso: paralelo a él;
  • Velocidad: establece la relación de velocidad para el paralaje, en relación con la tasa base. Valor: de 0 a 2;
  • Estado – estado del módulo (habilitado / deshabilitado).

 

Cómo habilitar un megamenu

 

El módulo TM Megamenu le permite crear menús complejos. Ofrece la posibilidad de mostrar un solo elemento (sin submenús), un elemento con un submenú y un elemento con el bloque de submenú de varias filas y varias columnas. Este módulo se puede mostrar en las distintas posiciones, pero con el mismo contenido.

Para habilitar el megamenú, debe navegar a la página Extensiones> Módulos> Megamenú TM, presionar el botón Editar junto al elemento apropiado y elegir la opción Habilitado en la nueva ventana.

 

Cómo configurar el megamenu

 

Artículos de megamenu. Elementos principales en la raíz del menú.

La edición de megamenu comienza aquí. Para editar los parámetros de megamenu, abra el panel de administración de su sitio web y vaya a la página Extensiones> Módulos> TM Megamenu> TM Megamenu, como se muestra en la siguiente captura de pantalla. En la página siguiente, podrá crear, eliminar y editar elementos de menú.

 

Megamenu

 

Haga clic en uno de los elementos del menú para comenzar a editar. Rellene los siguientes campos:

 

TM Megamenu

 

Tipo de elemento del menú: tipo de menú (normal / megamenú);
Para la opción ‘Custom’:

  • Título del menú – etiqueta del elemento del menú;
  • Enlace del menú – enlace del elemento del menú;
  • Show megamenu – megamenu display;

Si la opción ‘Mostrar megamenú’ (3) está configurada en ‘Sí’, aparecen los siguientes campos adicionales. Rellene estos campos:

 

Show Megamenu

 

  • Número de columnas: número de columnas;
  • Columnas por fila – número de columnas por fila;
  • Imagen de fondo – imagen de fondo;
  • Ancho de la imagen de fondo – ancho de la imagen de fondo;
  • Altura de la imagen de fondo – altura de la imagen de fondo;

 

Columnas

 

Después de completar el campo ‘Recuento de columnas’, las siguientes opciones estarán disponibles: ‘Columna N’. Rellena las pestañas:

  • Ancho de columna – ancho de la columna;
  • Contenido de columnas: contenido de la columna;
  • Límite de categorías (productos): número máximo de categorías o productos para mostrar en la columna;
  • Módulo – nombre del módulo a mostrar;
  • Nombre de categoría: nombre de la categoría;
  • Mostrar nombre de categoría: visualización del nombre de categoría;

Para la opción ‘Categoría’:

Tipo de submenú del elemento del menú – tipo de submenú;

Después de seleccionar el tipo ‘Megamenu’ en el campo ‘Tipo de elemento de menú’, estarán disponibles las siguientes configuraciones adicionales de megamenu:

 

Columnas-categorias

 

Después de completar el campo ‘Recuento de columnas’, las siguientes opciones estarán disponibles: ‘Columna N’. Rellena las pestañas:

  • Ancho de columna – ancho de la columna;
  • Contenido de columnas: contenido de la columna;
  • Límite de categorías (productos): número máximo de categorías o productos para mostrar en la columna;
  • Módulo – nombre del módulo a mostrar;
  • Nombre de categoría: nombre de la categoría;
  • Mostrar nombre de categoría: visualización del nombre de categoría;

Para la opción ‘Categoría’:

Tipo de submenú del elemento del menú – tipo de submenú;

Después de seleccionar el tipo ‘Megamenu’ en el campo ‘Tipo de elemento de menú’, estarán disponibles las siguientes configuraciones adicionales de megamenu:

 

Pòr Categoría

 

  • Número de columnas: número de columnas;
  • Columnas por fila – número de columnas por fila;
  • Imagen de fondo – imagen de fondo;
  • Ancho de la imagen de fondo – ancho de la imagen de fondo;
  • Altura de la imagen de fondo – altura de la imagen de fondo;

Después de completar el campo ‘Recuento de columnas’, las siguientes opciones estarán disponibles: ‘Columna N’. Rellena las pestañas:

 

Columna N

 

  • Ancho de columna – ancho de la columna;
  • Contenido de columnas: contenido de la columna;
  • Límite de categorías (productos): número máximo de categorías o productos para mostrar en la columna;
  • Módulo – nombre del módulo a mostrar;

 

Cómo cambiar el logo en la plantilla OpenCart

 

Vaya a Extensiones> Extensiones.

 

Extensiones

 

Elija Módulos en el desplegable Tipo de extensión.

 

Cambio de Logo

 

Encuentre el módulo de Logo. Pulse un botón de edición para configurar el módulo.

 

Encuentra el módulo de Logo-Pulse un botón de edición para configurar el módulo

 

Aparecerá la ventana de configuración:

 

Modulo Logo

 

Configuraciones disponibles:

  • Nombre del módulo: el nombre del módulo;
  • Ancho: establece el ancho de la imagen del logotipo en píxeles;
  • Altura: establezca una altura de la imagen del logotipo en píxeles.
  • Estado – estado del módulo (habilitado / deshabilitado).

 

Cómo gestionar y construir diseños.

 

Cómo gestionar y construir diseños.

 

Vaya a Extensiones> Extensiones.

 

Vaya a Extensiones-Extensiones.

 

Elija Módulos en el desplegable Tipo de extensión.

 

Elija Módulos en el desplegable Tipo de extensión

 

Encuentre la sección TemplateMonster Layout Builder. Pulse el botón editar para configurar el módulo existente.

 

Find the TemplateMonster Layout Builder section-Press the edit button to configure the existing module

 

Aparecerá la ventana de configuración:

 

You will be brought to the settings window

 

Ajustes básicos del módulo:

  • Estado: estado del módulo (habilitado / deshabilitado);
  • Nombre del módulo: el nombre del módulo;
  • Clase de módulo: la clase del módulo;
  • ID del módulo – ID del módulo.

Para crear un nuevo diseño, presione el botón Nueva vista de diseño.

El módulo tiene varios botones disponibles que facilitan mucho el proceso de edición. Echemos un vistazo más de cerca a ellos:

  • Presione Añadir columna. Después de hacer clic en este botón podrá agregar filas. Esta opción tiene varias secciones disponibles:
  1. Después de agregar una columna, inserte una fila. Para agregar filas, presione el botón Agregar fila. El número de columnas en la fila es ilimitado, y puede agregar tantas columnas como sea necesario. El ancho de las columnas se puede configurar inmediatamente después de agregarlas con la ayuda de la función Arrastrar y soltar arrastrando el borde derecho de la columna.
    El botón Eliminar le permite eliminar columnas innecesarias.
    Después de hacer clic en el botón Editar, verá una ventana emergente con una excelente herramienta de personalización que le permite cambiar el estilo de columna / fila. Puede ayudarle a establecer el fondo y cambiar los valores de margen para sus bloques.
    Después de agregar las columnas, debe completarlas con algún contenido (módulos). Para agregar un módulo, presione el botón Agregar widget y seleccione el necesario entre el menú desplegable. Puede obtener la interfaz de configuración del módulo a través de Layout Builder presionando el botón ‘editar’ en el bloque del módulo.
  2. Use el botón Eliminar para eliminar la columna que no necesita.
  3. El botón Editar le permite ajustar el estilo de columna. Lo hemos mencionado anteriormente.
  4. Duplicar es una gran herramienta que le permite duplicar columnas sin tener que copiarlas manualmente.
  5. La opción de orden le permite cambiar el orden de las columnas.

Después de configurar todas las filas, columnas y módulos, guarde el módulo Builder y visualícelo en una de las posiciones en la página principal de la tienda.

 

Cómo configurar un carrito de compras

 

El módulo de carrito es la extensión que le permite mostrar el carrito de compras en su sitio web.

Vaya a Extensiones> Extensiones.

 

Navigate to Extensions-Extensions.

 

Elija Módulos en el desplegable Tipo de extensión.

 

Choose Modules in the Extension type dropdown

 

Encuentra el módulo TemplateMonster Cart. Pulse el botón editar para configurar el módulo.

 

Find the TemplateMonster Cart module-Press the edit button to configure the module.

 

Aparecerá la ventana de configuración:

 

Aparecerá la ventana de configuración

 

Seleccione Desactivar en el menú desplegable de la opción Estado para apagar el módulo.

 

Select Disable at the Status option dropdown to turn off the module.

 

Cómo gestionar los enlaces en el pie de página.

 

  1. Vaya a Extensiones> Extensiones.
  2. Elija Módulos en el desplegable Tipo de extensión.
  3. Encuentre la sección TM Footer Link. Pulse el botón editar para configurar el módulo existente.

Aparecerá la ventana de configuración:

  • Nombre del módulo: el nombre del módulo;
  • Grupo de enlaces: elija un grupo de enlaces que desee mostrar en el pie de página;
  • Estado: defina el estado del módulo (habilitado / deshabilitado).

 

Frontend:

 

Frontend

 

  • Nombre del módulo – Información de enlaces de pie de página TM;
  • Grupo de enlaces – Información;
  • Estado – habilitado.

 

Envolviendo las cosas

 

Todo el mundo quiere empezar a ganar dinero en línea. ¿A qué está esperando entonces? OpenCart es una de esas grandes plataformas que le brindan la oportunidad de crear su propia tienda y crear un negocio exitoso sin tener que escribir una sola línea de código.

Si tiene el éxito suficiente para vivir sin su propia tienda, asegúrese de revisar nuestro catálogo de plantillas premium y definitivamente encontrará algo que se ajuste a su negocio.

 

336x280

6 Herramientas Para Ayudar a los No Diseñadores a Crear Grandes Imágenes

29 de mayo de 2014 Deja un comentario

La creación de grandes imágenes para su SMB es más importante que nunca. Los medios sociales sigue poniendo énfasis en las imágenes, al permitir a las empresas crear grandes fotos de portada y banners para sus páginas de Facebook, páginas de Google+, canales de YouTube, páginas de empresa en LinkedIn y ahora los nuevos perfiles en Twitter. La mayoría de las redes, incluso han hecho que las imágenes compartidas sean más prominentes en sus alimentos.

¿No es un diseñador? No es un problema. Hay algunas herramientas fáciles de usar por ahí que pueden hacer que se vea como un diseñador sin serlo. Aquí están algunas de mis favoritas que le puede ayudar con una variedad de necesidades de diseño.

 

Canva

 

Canvas

 

¿Necesita una imagen para usar como un post social media, foto de portada en Facebook, presentación fondo de diapositiva, el blog gráfico, tarjetas de visita, u otros soportes de impresión? Si es así, entonces Canva es una gran herramienta para probar. Tienen cientos de plantillas que se pueden personalizar para una variedad de usos, tanto en línea como fuera de ella. Puede incluso agregar sus propias fotos, o usar la fotografía que ofrecen dentro de su plataforma. Lo mejor de todo es que si no necesita una fotografía, puede utilizar esta herramienta para crear todas las imágenes que desee de forma gratuita.

Un consejo: si no encuentra una plantilla que le gusta en un área de la herramienta (como la cobertura perfecta en Facebook), mire en otra área. Puede ser capaz de crear una gran cubierta de Facebook utilizando una plantilla a partir de las diapositivas de la presentación y simplemente recortarla hasta el tamaño adecuado para Facebook.

 

Piktochart

 

PIKTOCHART

 

Las Infografías tienden a propagarse como un reguero que cuando tienen una perfecta combinación de datos interesantes y útiles junto con un hermoso diseño. Piktochart puede ayudarle a crear una gran infografía que se puede utilizar para compartir datos muy ricos con el público y potenciar su visibilidad para su negocio. Tienen más de 100 temas para elegir para su infografía, con precios que comienzan en 29 $ por mes (o menos si paga la suscripción trimestral o anual).
Si no está seguro de cómo empezar con infografía, eche un vistazo a lo que otras empresas están haciendo en busca de inspiración. Puede buscar rápidamente una infografía en Pinterest para ver cuáles obtienen el mayor interés en una amplia gama de temas.
.

Wordle

 

WORDLE

No paguen por palabra de imágenes en sitios de nubes de gran stock de fotografías. Haga la suya propia con Wordle. Simplemente introduzca las palabras que desea mostrar, y obtendrá una palabra nube que se puede personalizar con diferentes tamaños de fuente, color de fuente y color de fondo.

El único inconveniente de esta herramienta gratuita es que no le permiten descargar la imagen que ha creado, por lo que tendrá que utilizar una captura con el programa Jing de captura de pantalla y guardarlo como PNG.  Y recuerde, las capturas de pantalla pueden hacer grandes imágenes cuando sea aplicable a su contenido, y lo mejor de todo es que es gratis.

 

Aviary

 

AVIARY

 

Si desea crear imágenes con su Android o dispositivo móvil iOS, entonces debe usar Aviary. Esta aplicación viene con 20 herramientas que le permite ir más allá de los filtros Instagram. Puede aplicar efectos de mejora rápida, utilice los filtros, marcos, superpuesto con pegatinas, cambiar la orientación, recortar, ajustar brillo, nitidez, color splash, dibujar, añadir texto, corregir ojos rojos, blanquear los dientes, blur, corregir las imperfecciones, e incluso su foto en un meme.

Es el último editor de fotos para dispositivos móviles y lo mejor de todo, es fácil y de uso gratuito. Y si necesita más filtros, marcos, pegatinas, y otras opciones, se pueden comprar cuando los necesite.

 

LogoGarden

 

Crear imagenes

 

Para aquellos que reciéntemente están entrando en un nuevo negocio, es muy difícil imaginar cientos de euros en un logotipo. ¿Qué pasa si puede hacer uno de forma gratuita? LogoGarden es una herramienta gratuita en línea que le ayuda a crear rápidamente un logotipo profesional. Para ello, sólo tiene que elegir entre cientos de símbolos que mejor representan su negocio, elegir las fuentes y, a continuación, añadir el nombre de su empresa y línea de etiquetas.

Si no está seguro de cómo empezar, eche un vistazo a los cientos de muestras que tienen en su galería de todos los sectores de la industria.

 

Imgflip Meme Generator

 

imgflip

 

¿Quiere agregar un poco de humor a su contenido y acciones sociales? Pruebe Imgflip Meme Generator. Esta herramienta gratuita le permitirá agregar un poco de mal humor Cat, Dux y el condescendiente Willy Wonka para alegrar su día a la audiencia. No cabe duda para compartir contenido de imagen. Sólo recuerde que no debe ir demasiado lejos sobre los memes – usarlos de vez en cuando para darle vida a su blog social o posts.

Si desea aprender sobre el uso general de ciertos memes, puede buscar para ellos en base de datos Know Your Meme. Y no olvide que puede crear sus propios memes personalizados utilizando su dispositivo móvil y la aplicación Aviary que hemos mencionado anteriormente.

P.D. La página principal de este sitio muestra las últimas memes enviadas por los usuarios. Tenga en cuenta que algunas son NSFW.

 

Ahora a empezar a crear

 

Gracias a estas impresionantes herramientas basadas en la Web, no tiene que ser un diseñador o disponer de un ordenador potente para crear imágenes profesionales que al público les gusta ver y compartir. Experimentar con estas herramientas para ver como mejorando la calidad de los gráficos puede mejorar su contenido y actualizaciones en los medios sociales. Y si crea una infografía o vídeo, asegúrese de darles un impulso promocional extra para lograr los mejores resultados posibles para su negocio.

¿Quiere leer más posts como este? Los comentarios son importantes para todos. Muchas gracias a todos los lectores

 

Artículos relacionados:

 

17 Herramientas para Presentaciones

+35 Herramientas de Audio

Apoyar a sus Clientes con Vídeos y Tutoriales Impresionantes

 

kindle-fire-hdx

 

Enhanced by Zemanta

+45 Infografías Interesantes y Útiles para Diseñadores Web

6 de marzo de 2014 Deja un comentario

La infografía es una gran manera de presentar la información de una manera que es fácil para la mayoría de la gente entienda. Mucha gente aprende visualmente, y se puede obtener una mejor comprensión de lo que está tratando de decir si lo muestra gráficamente.

Como diseñadores, las infografías pueden presentar información a nosotros que beneficia a nuestros negocios de diseño, y nos da una visión más clara de las tecnologías de los que dependemos para nuestro sustento. A continuación se presentan +45 infografías que son útiles y / o interesantes, y que se relacionan directamente con el mundo del diseño web.

 

Interesantes Infografías

 

Estas infografías pueden no proporcionar la información que directamente está relacionado con el negocio y la práctica de diseño de páginas web, pero aún así se refieren a la Web en general, y pueden ser de interés para los diseñadores y desarrolladores:

Teoría del Color: The ABC’s of RGB es un desglose completo del modelo de color RGB. Una guía útil para todos los que trabajan en la Web.

Teoría del color-The ABC of RGB

The Darwinian Evolution of Photoshop — Esta infografía muestra la evolución del Photoshop, incluyendo los doce versiones principales y las diferencias entre ellas.

The Darwinian Evolution of Photoshop

The Journey of a Tweet — Esta infografía muestra el potencial recorrido de una foto publicada en Twitter a través de los medios sociales y el resto de la Web.

journey-of-a-tweet

The Biggest Shift Since the Industrial Revolution — Esta infografía muestra el cambio en el contenido y las relaciones a medida que avanzan a los medios de comunicación social.

The Biggest shift since the industrial revolution

Are We Addicted to the Internet? — Aquí hay una extensa infografía hablando del nivel de uso de Internet en los EE.UU., los signos potenciales y los niveles de adicción.

Are We Addicted to the Internet _ Flowtown flowtown

Marketing With the Masses: The Science of Word of Mouth — Esta infografía desglosa los efectos del marketing boca a boca, así como su funcionamiento y donde sucede.

Marketing witt the masses

Going Local — Esta infografía, creada por GigaOM por Column Five Media, muestra la participación de mercado y otra información para seis de los más populares servicios web basados ​​en la localización (Gowalla, Foursquare, MyTown, Brightkite y Geodelic).

Going Local

All You Need to Know About Web Designers — Aquí está un gráfico interesante que divide los datos demográficos de los diseñadores de la Web por todo el mundo.

All You Need to Know About Web Designers

Why Brands Cannot Ignore Social Media Mavens — Esta infografía informal muestra qué expertos en medios sociales son vitales para el éxito de marketing en línea de la marca.

Why Brands Cannot Ignore Social Media Mavens

B2B Social Media Marketing — Aquí está una infografía que ilustra las estadísticas sobre el B2B de marketing en los medios sociales, incluyendo las predicciones y la efectividad de los diferentes canales de futuros.

B2B Social Media Marketing

Everbody’s Doing It: How Marketers Are Utilizing Social Media in 2010 — Esta infografía ofrece una visión general de cómo las empresas están utilizando los medios sociales para promocionarse y sus productos, así como sus actitudes hacia los medios de comunicación social.

Everbody’s Doing It, How Marketers Are Utilizing Social Media in 2010

Anatomy of a Search Marketer — Esta infografía de SEOmoz muestra las respuestas a su SEO Industry Survey 2010.

Anatomy of a Search Marketer

DIY Guide to Successful Linkbait Infographic — Las Infografías se pueden utilizar para proporcionar la instrucción, así como los hechos que solo se presentan. En este ejemplo se hace un gran trabajo en proporcionar instrucciones paso a paso para la creación de contenidos de Internet más populares.

DIY Guide to Successful Linkbait Infographic

Why Do We Follow Companies on Twitter? — Esta simple infografía desglosa los resultados de una encuesta realizada a 1.500 consumidores sobre cuáles son sus motivaciones para seguir las marcas en Twitter.

Why Do We Follow Companies on Twitter.

The Business Behind Facebook — Alguna vez se preguntó ¿cómo Facebook hace su dinero y cuál es su modelo de negocio basado en…? Esta infografía explica todo en términos generales y las cifras reales en dólares.

The Business Behind Facebook

Understanding Google PageRank — Esta infografía muestra exactamente cómo funciona el sistema PageRank de Google, incluyendo cómo los diferentes tipos de enlaces entrantes afectan su rango de forma diferente.

Understanding Google PageRank

A Guide to Internet Memes — Aquí está una infografía que muestra una variedad de memes populares, empezando por The Baby Dancing e incluyendo Rickrolling y The Hamster Dance, con la historia de cada meme.

A Guide to Internet Memes

The Most Popular Design Blogs by Twitter Followers and Facebook Fans — He aquí una excelente infografía que muestra los más populares blogs relacionados con el diseño por ahí, que se muestran en función de sus seguidores y fans de Facebook y Twitter.

The Most Popular Design Blogs

History of the Internet — He aquí una interesante infografía que muestra algunos de los principales hitos en la historia de Internet, a partir de 1962.

History of the Internet

Famous Rivalries: Facebook vs. Everyone — Esta infografía muestra la historia de rivalidades de Facebook con otros servicios en línea.

Famous Rivalries Facebook vs Everyone

How Android is Taking Over — Esta infografía de GigaOM muestra como los smartphones Android están ganando cuota de mercado y es probable que continúen haciéndolo mediante la comparación de todos los principales sistemas operativos de smartphone.

How Android is Taking Over

Google vs. Apple — Esta infografía de GigaOm muestra la rivalidad entre Google y Apple, en forma de línea de tiempo.

Google vs Apple

The App Store Economy — Aquí está una infografía de principios de 2010 que muestra la economía en torno a App Store de Apple, por los números.

The Appp Store Economy

2010 Cloud Computing State of the Union — Esta infografía muestra lo que está sucediendo en el mundo de la computación en la nube y la virtualización, basada en una encuesta realizada por Zenoss.

2010 Cloud Computing State of the Union

The Social Buying Universe — Aquí está una infografía que muestra el mundo de compras sociales, incluidos los servicios como Groupon y Living Social, y su influencia.

The Social Buying Universe 2ND Dimension

The Rise of the Cloud — Esta infografía de GigaOM ilustra la demanda de software basado en la Web y el almacenamiento, así como el sentimiento público hacia esos servicios.

The Rise of the Cloud

How to Get Rid of Villains in Social Media — Esta infografía, basada en el post de Todd Heim “8 Villanos de los Medios de Comunicación Social“, muestra como derrotar a los villanos presentes en los medios sociales, incluidos los escépticos, los trolls,“y los enlace desvergonzados.

How to Get Rid of Villains in Social Media

Meet iPad’s Competition — Esta infografía muestra lo que la competencia principal del iPad está en el mundo de la informática, los juegos, y los e-readers.

Meet iPad’s Competition

Social Marketing Compass — Esta infografía muestra los diferentes aspectos del marketing en los medios sociales, y en que zonas diferentes de los tipos de usuarios debería concentrarse.

Soccial Marketing Compass

The Hierarchy of Digital Distractions — Aquí está una infografía similar a Hierarhcy of Needs de Maslow, pero en vez ilustra distracciones comunes digitales (como Twitter, correo electrónico, y diferentes tipos de usuarios).

The Hierarchy of Digital Distractions

Flickr User Model — Aquí está una mirada visual en el modelo de usuario de Flickr, y lo que potencialmente le sucede a una foto una vez que se contabiliza en Flickr.

Flickr User Model

Facebook Factbook — Aquí está una mirada visual en los primeros seis años de Facebook y es un crecimiento fenomenal.

Crecimiento Facebook 6 primeros años

The Social Media Effect — Esta infografía muestra lo que puede suceder, posiblemente, a los contenidos en línea, una vez que empieza a ser aprobado por los distintos canales de los medios sociales.

The-Social-Media-Effect-Small

Internet Censorship — Esta infografía muestra el estado de la censura de Internet en todo el mundo a partir de 2010, incluyendo el que los países más fuertemente censuran a sus usuarios de Internet.

internet-censorship-report-infographic

How Google Works — Esta infografía muestra como Google indexa y clasifica el contenido en Internet, en formato de diagrama de flujo.

How Google Works

The CMO’s Guide to the Social Landscape — Esta infografía muestra lo diferentes servicios de los medios sociales que son buenos para los diferentes tipos de marketing de contenidos (comunicación con el cliente, la exposición de la marca, dirigir el tráfico a su sitio, y el SEO).

The CMO's Guide To The Social Media Landscape

What Are People Really Buying Online — Esta infografía estilo gráfico circular muestra lo que la gente realmente compra en línea, y lo compara con lo que compran en las tiendas.

What Are People Really Buying Online

Who Participates and What People Are Doing Online — Esta tabla muestra los diferentes tipos de usuarios de Internet y lo que realmente hacen en línea.

Who Participates and What People Are Doing Online

Casting a Wider Net with Social Media — Esta simple infografía muestra cómo publicar y compartir contenidos a partir de los sitios de los medios sociales que pueden aumentar el tráfico de su sitio.

Casting a Wider Net with Social Media

Building a Company with Social Media — Esta infografía muestra cómo los medios sociales pueden ser utilizados por cada departamento de una empresa para construir esa sociedad.

Social Media Building

The Blogosphere We Call Home — Esta infografía rompe la blogosfera en términos de quién son los blogs, lo que están en los los blogs, y la cantidad de tiempo que están gastando en hacerlos.

the Blogospherewe call home

U.S. Data Consumption in One Day — Esta es una infografía increíble que muestra la cantidad de datos es consumida por las personas en los EE.UU. en un solo día.

U.S. Data Consumption in One Day

Five Years in History of Online Video — Esta infografía muestra la prevalencia del vídeo en línea y como cambió entre 2004 y 2009.

Five Years In History of Online Video

Profile of a Twitter User — Esta infografía muestra los tipos más comunes de los usuarios de Twitter y qué hacer con ellos.

twitter-users-profile1-600x450

How Much Time is Wasted on Loading Unnecessary Data? —Dado que el acceso a Internet de banda ancha es más o menos la norma en estos días, un montón de diseñadores han dejado de prestar tanta atención a presentar los tamaños y tiempos de carga. Esta infografía muestra cuánto tiempo y el ancho de banda que se desperdicia por todos los datos innecesarios que se cargan en un sitio web.

how-much-time-wasted-infographic-600x592

Infografías Útiles

Estas infografías incluyen información que es directamente útil al diseño web

How Do Colors Affect Purchases? — por KISSmetrics, nos muestra lo que los colores tienen impacto sobre las decisiones de compra de los compradores en línea. Un recurso invaluable para los diseñadores de comercio electrónico.

How Do Colors Affect Purchases.
8 Levels of Information Technology Security — Esta infografía muestra las posibles amenazas a la seguridad informática en un centro de datos, así como los métodos típicos utilizados para combatirlas.

8 levels of it security in the data center

Global Downloads Speed Comparison — Esta infografía compara las diversas velocidades típicas de descarga en todo el mundo.

Global Download Comparison

How Popular is the iPhone Anyway — Esta infografía muestra la popularidad del iPhone en términos de ventas, cuota de mercado, el número de aplicaciones descargadas, y más.

How Popular is the iPhone

Operation E-Commerce: A Game of Dissecting the Best E-Commerce Software — Esta infografía ilustra las características necesarias de un gran software de comercio electrónico, todas construidas alrededor del clásico juego de mesa de operaciones.

Operation E-commerce

Colours in Cultures — He aquí una infografía muy útil que muestra lo que los significados de los diferentes colores se encuentran en diferentes culturas, incluyendo Oeste/ americanos, japoneses, hindúes, nativos americanos, chinos, europeos del este, musulmanes y otros.

1276_colours_in_culture

 

Artículos relacionados:

 

25 Infografias explicando el SEO

3 Infografias: “Entendiendo los dígitos de las tarjetas de Crédito”

35 Infografias sobre Social Media

15 Temas Impresionantes Responsive para WordPress (Theme Junkie)

Seguridad y Protección de un Blog de WordPress (Infografía)

 

Los  Mercados Online de Envato: ebooks, tutoriales, vídeos, plugins, cursos, temas para WordPress y App

Enhanced by Zemanta

Diseño Definitivo de Páginas Web Para las Páginas de Destino [Infografía]

6 de septiembre de 2012 3 comentarios

Esta infografía llamada “The Blueprint For A Perfectly Testable Landing Page” es un gran ejemplo de fuentes que se puedan derivar de la información y el conocimiento a partir de lo que otras personas han encontrado. A veces, estas guías pueden empezar en la dirección correcta y desde allí se puede seguir adelante y refinar hacia su público y visitantes. Es la mejor manera de llegar con el mejor diseño para conseguir a sus visitantes a volver por más y mejores cosas.

Las páginas de destino se componen de un conjunto de elementos definibles. Los bloques de construcción que se presentan a continuación se pueden utilizar como guía para definir y crear una página de destino perfecta para su propio negocio.

Hay una cosa que nos puede ayudar, y esa es la cantidad insana de guías de diseño web que está disponible en el Internet de hoy. He encontrado una muy buena infografía de KISSmetrics que se sumerge en los entresijos del diseño web y la última es la página del aterrizaje perfecta. Es cuando se empieza a observar en este tipo de cosas que puede realmente comenzar a planificar el diseño de la tela final que se va a convertir en su hogar en el Internet desde hace bastante tiempo.

Haga clic en la infografía de abajo para ver una imagen más grande:

 

Diseño definitivo para las landing pages

Artículos relacionados:

Landing Page: la Página Construida para Recibir Cientes potenciales

Convertir el Tráfico del Sitio en Clientes Potenciales

La planificación de una campaña de marketing

 

Beruby

+ 30 Herramientas útiles de Diseño Web Responsive

31 de agosto de 2012 21 comentarios

Con la gran popularidad de las tablets y los teléfonos inteligentes, la demanda de diseño de sitios web Responsive es más demandado que 30 herramientas para el diseño web Responsivenunca. En este momento, los sitios web que más y más personas están adoptando los diseños Responsive y esta tendencia se espera que sea más intensa a medida que el porcentaje aumente de los usuarios de Internet móvil. Este desarrollo ha creado una enorme demanda de los servicios de diseñadores y desarrolladores web con dominio en este sistema altamente adaptable de diseños de página web. Ya podemos ver que responden a temas de WordPress, disponibles en proveedores de las principales temáticas que respondan a los retos de la adopción de diferentes tamaños de pantalla.

Como era de esperar, algunas útiles herramientas que respondan al diseño web han surgido recientemente para apoyar el proceso de diseño y desarrollo de sitios web Responsive. Gracias a la gran comunidad de desarrolladores talentosos que hicieron todos estos recursos disponibles. Usted puede preguntar – ¿qué es exactamente una herramienta de diseño web Responsive para utilizarse? ¿Qué herramientas necesitamos para estar por delante del juego Responsive? Si eres un diseñador web o programador considerando la posibilidad de explorar y posiblemente especializarse en el diseño web Responsive, ha venido al lugar correcto. Estamos compartiendo con ustedes algunas de las herramientas más útiles y recursos para ayudarle a construir una caja de herramientas de diseño Responsive.

 

 

Puede encontrar valiosas herramientas de ayuda, las herramientas de diseño de prototipos, generadores de código, e incluso una colección de inspiración en diseños de sitios web que responden en este artículo. Esperamos que esta colección le pueda ayudar a entrar en el mundo del diseño Responsive y marcar la diferencia. Si te gusta este artículo, por favor ayúdenos a difundir la palabra haciendo clic en los botones de los medios sociales. También estaremos encantados de recibir sus comentarios, sugerencias y adiciones a esta colección de herramientas útiles.

El diseño Web Responsive (RWD) es un enfoque de diseño web en el que se hace a mano un sitio para proporcionar una visualización óptima en la experiencia de navegación con fácil lectura y con un mínimo de cambio en el tamaño, velocidad, desplazamiento y-a través de una amplia variedad de dispositivos (desde el ordenador de sobremesa a los teléfonos móviles).

Un sitio diseñado con RWD utiliza CSS3 con preguntas a los medios, una extensión de la regla @ media, para adaptar el diseño al entorno de visualización, junto con fluidos a base de proporción-redes e imágenes flexibles.

  • Las consultas a los medios de comunicación permiten a la página utilizar diferentes reglas de estilo CSS basadas en las características del dispositivo cuando el sitio está siendo mostrado, más comúnmente en la anchura del navegador.
  • El concepto de red líquida pide al  elemento de la  página el tamaño para estar en las unidades relativas como porcentajes o EMS, no en unidades absolutas como píxeles o puntos.
  • Las imágenes flexibles son también de tamaño en unidades relativas, como para evitar que se muestre fuera de su elemento contenedor.

Diseños Responsive, Responsively Wireframed

 

30 herramientas para el diseño web responsive

Ésta es una demostración de James Mellers, ilustra cómo una serie de páginas que pueden trabajar a través de estos diferentes dispositivos, mediante la simulación de cómo el diseño de cada página cambiaría con Responsive, para adaptarse al contexto. Sólo tienes que utilizar los botones de arriba a la derecha para alternar entre las presentaciones de escritorio y el móvil y ver la diferencia.

 

Responsive Web Design Sketch Sheets

 

30 herramientas para el diseño web responsive

Esta herramienta es una ayuda útil para trazar la ubicación de los elementos a través de diversos dispositivos. Con esta herramienta, puede tener una idea de dónde colocar los elementos de la página web en diferentes tamaños de los navegadores.

 

Less Framework 4

 

30 herramientas para el diseño web responsive

Less Framework es un sistema de red de CSS para diseñar sitios web adaptativos. Contiene 4 diseños y 3 juegos de tipos de tipografía, todo ello basado en una única red.

 

Multi-Device Layout Patterns

 

30 herramientas para el diseño web responsive

Los dispositivos multi-patrones de diseño son conjuntos de patrones populares utilizados por los diseñadores para hacer diseños Resposive. Se muestra cómo los sitios web se adaptan a diferentes resoluciones de pantalla y cómo se muestran los elementos de la página con la variación de tamaños de pantallas.

 

Fluid Grids

 

30 herramientas para el diseño web responsive

Fluid Grid Calculator es una buena herramienta que se puede utilizar para generar CSS para el diseño de una red de fluidos. Todo lo que tienes que hacer es introducir el número de columnas y el tamaño de las columnas y los canales de comunicación.

 

Simple Grid

 

30 herramientas para el diseño web responsive

Crear el código en su parrilla debe ser el menor de sus problemas en la construcción de un sitio. Es por eso Simple Grid mantiene las cosas simples y directas con poco marcado y clases como sea posible. Incluso las ranuras de la rejilla de anidación no requiere clases adicionales.

 

Simple Device Diagram

 

30 herramientas para el diseño web responsive

Este dispositivo es una herramienta muy útil en la planificación de Responsive en el diseño web. Simplifica el proceso de elegir qué amplitudes de dispositivo para diseñar. Describe el ancho ideal para el diseño de los sitios de disposición 3, 4 sitios de diseño, etc.

 

ProtoFluid

 

30 herramientas para el diseño web responsive

Protofluid es una herramienta que permite hacer prototipos rápidos de diseños fluidos, CSS y diseño adaptable Responsive. ProtoFluid simplifica el desarrollo de diseños de fluidos y CSS adaptativo utilizando preguntas en los medios. Funciona dentro de su sitio web, aplicación HTML5 o un juego en forma de un único JavaScript incluido.

 

1140 CSS Grid

 

30 herramientas para el diseño web responsive

1140 CSS Grid encaja perfectamente en un monitor de 1280. En monitores más pequeños, se convierte en “líquido” y se adapta a la anchura del navegador. Más allá de un cierto punto que utiliza preguntas a los medios para servir a una versión móvil, que esencialmente apila todas las columnas en la parte superior de uno al otro por lo que el flujo de información sigue teniendo sentido. Aunque la resolución lo mejor para esta rejilla CSS es una de 1280px, todavía funciona igual de bien con pantalla de 1024px, ya que todo se puede ver al igual que en la pantalla de 1280px y todo el camino hasta las pantallas de los móviles. Es una gran herramienta para los diseñadores, con un diseño, es decir, de 1280px que se adapta a todos los tamaños de pantalla. No hay necesidad de declarar tamaños en línea para las imágenes a medida que se re-dimensiona más pequeño.

 

Tiny Fluid Grid

 

30 herramientas para el diseño web responsive

Tiny Fluid Grid es una aplicación basada en web increíble que le puede ayudar a determinar el sistema de red de su diseño. Al establecer el número de columnas, el porcentaje de los extremos y mínimo y las anchuras máximas de su diseño, la aplicación puede dar una CSS descargable de la red Responsive.

 

Gridless

 

30 herramientas para el diseño web responsive

Gridless es una opción en HTML5 y  CSS3 para hacer Responsive para el móvil, los sitios Web de navegador lo verán con una tipografía hermosa.

 

Responsive Design Sketchbook

 

30 herramientas para el diseño web responsive

Rápidamente puede trazar su sitio Responsive con el cuaderno de bocetos de diseño Responsive. Inspirado por “Responsive Web Design” de Ethan Marcotte, este nuevo cuaderno de dibujo tiene una portada multi-red de bocetos en miniatura de ventanas múltiples. La última página es una página de un solo modelo con indicadores de quiebro.

 

Responsive PX

 

30 herramientas para el diseño web responsive

Esto funciona mediante la carga de su sitio web y la visualización de la parte visible en diferentes tamaños de pantalla. Se puede ajustar la anchura y la altura de la pantalla para simular la resolución de diferentes dispositivos.

 

The responsinator

 

30 herramientas para el diseño web responsive

The Responsinator ayuda a los responsables del sitio web rápidamente a obtener una indicación de como responde su sitio y como se verá en los dispositivos más populares. No precisamente replica el aspecto que tendrá, para la prueba exacta pruebe siempre en los dispositivos reales.

 

Screenfly

 

30 herramientas para el diseño web responsive

Screenfly le permite ver su sitio web en una variedad de pantallas de dispositivos y resoluciones. Escriba una dirección URL y haga clic en GO para empezar.

 

Responsive Web Design Testing Tool

 

30 herramientas para el diseño web responsive

Otra herramienta de prueba que le puede proporcionar una visión de su sitio web en tamaños de pantallas diferentes, es ésta una aplicación web. Se muestra la página web al mismo tiempo, una vez que haya ingresado su dirección URL. Le puede ayudar a ayudar con las pruebas de sus sitios web Responsive mientras diseñas y construyes con ellas.

 

Adobe Shadow

 

30 herramientas para el diseño web Responsive

Adobe Shadow es una nueva herramienta de inspección y de vista previa que permite a los desarrolladores y a los diseñadores web para trabajar más rápido y con mayor eficiencia mediante la racionalización del proceso de vista preliminar, por lo que es más fácil de personalizar los sitios web para dispositivos móviles.

 

Golden Grid System

 

30 herramientas para el diseño web Responsive

Golden Grid Systeme tiene una rejilla plegable que se puede utilizar como punto de partida en el diseño web Responsive. Golden Grid Systeme (GGS) divide la pantalla en 18 columnas, incluso. Las columnas más a la izquierda y más a la derecha se utilizan como los márgenes exteriores de la rejilla, lo que deja 16 columnas para su uso en el diseño. Las 16 columnas se pueden combinar, o doblar, en 8 columnas para el tamaño de las pantallas de las tablets, y en 4 columnas para el tamaño de los  móviles. De esta manera GGS puede cubrir fácilmente cualquier tamaño de pantalla desde 240 hasta 2560 píxeles. El autor, Joni Korpi, tiene un muy buen consejo a sus usuarios. No utilice SGG como es. “Tómalo aparte, tome las piezas que más te gusten, y adaptarlas a su propia manera de trabajar”, eso es lo que dijo.

 

Gridpak

 

30 herramientas para el diseño web Responsive

Gridpak es el momento de punto de partida para sus proyectos Responsive, mejorar su flujo de trabajo y el ahorro. Crear un sistema de red de respuesta una vez utilizando la interfaz simple y dejar a Gridpak que haga todo el trabajo mediante la generación de archivos PNG, CSS y JavaScript.

 

Columnal

 

30 herramientas para el diseño web Responsive

Columnal es un sistema sensible CSS rejilla ayuda a los navegadores de escritorio y a los móviles a que jueguen muy bien juntos. Es 1140px de ancho, pero dado que es fluido, responderá a la anchura de la mayoría de los navegadores. Si el navegador se pone lo suficientemente estrecho-delgado, el sitio se mostrará en un formato móvil de forma fácil.

 

Skeleton

 

30 herramientas para el diseño web Responsive

Skeleton es una pequeña colección de archivos CSS y JS que pueden ayudarle a desarrollar rápidamente los sitios para que se vean hermosos en cualquier tamaño, ya sea una pantalla de 17 ” de un ordenador portátil o un iPhone.

 

Bootstrap

 

30 herramientas para el diseño web Responsive

Bootstrap ofrece HTML simple y flexible, CSS y Javascript para conocidos componentes de interfaz de usuario y las interacciones. En otras palabras, es un conjunto de herramientas de front-end para acelerar el desarrollo. Creado y mantenido por Mark Otto y Jacob Thornton en Twitter.

 

320 and Up

 

30 herramientas para el diseño web Responsive

La práctica común en el diseño web Responsive es empezar con el escritorio de tamaño completo como punto de partida y de allí hacer escalas en pantallas de menor tamaño. Los creadores de 320 and Upq lo tienen en el reverso. Ellos dijeron que debe comenzar a diseñar en los navegadores pequeños y desde entonces será su forma de trabajo. La versión actualizada de las características de 320 and Up versión cinco, CSS3 con incrementos de consulta al medio: 480, 600, 768, 992 y 1382px, “atmósfera” de diseño (color, textura y tipografía) separados del diseño, los estilos de arranque para los botones, los formularios, las tablas y más.

 

FitText

 

30 herramientas para el diseño web Responsive

FitText hace los tamaños de fuente flexibles. Use este plugin en su diseño Responsive para lograr titulares escalables que llenen el ancho del elemento padre. Este plugin jQuery funciona inflando el tipo web para llenar su elemento padre. Es por eso que todavía puede obtener un texto de anchura completa que no importa cuál sea el tamaño de su pantalla. Funciona bien con Lettering.js, o cualquier otra propiedad CSS3 que usted se lanza en ella.

 

inuit.css

 

30 herramientas de diseño web Responsive

inuit.css es un framework CSS equipado con plugins llamados iglúes, que amplían el marco básico para agregar funcionalidad más específica. Tiene un constructor de cuadrícula como sistema personalizado para la creación de iglús de malla fija o fluido del sistema.

 

Mobile Boilerplate

 

30 herramientas de diseño web Responsive

Mobile Boilerplate es una plantilla base creada por los desarrolladores de HTML5 Boilerplate, para ayudar a los desarrolladores a crear aplicaciones móviles para web móvil rápidamente. Cuenta con cross-browser para la vista de optimización para Android, iOS, IE Mobile, Nokia y Blackberry. También soporta el almacenamiento en caché del servidor Apache, la compresión y los demás valores predeterminados de configuración.

 

Respond.js

 

30 herramientas de diseño web Responsive

Respond.js es rápido y ligero para min/max-ancho CSS3 Preguntas de Medios (para Explore 6-8, y más). El objetivo de este script es proporcionar un rápido y ligero (3 kilobyte minified / 1 kilobyte gzipped) script para permitir diseños de web Responsive en los navegadores que no apoyan Media Query CSS3 – en particular, Explorer 8 e inferior. Este script remendará probablemente el soporte a otros navegadores que no apoyan esta propiedad.

 

Adapt.js

 

30 herramientas de diseño web Responsive

Adapt.js es un archivo de peso ligero en JavaScript que determina qué archivo CSS puede cargar antes de que el navegador vea una página. Si el navegador se inclina o se cambia el tamaño, Adapt.js simplemente comprueba su ancho, y sirve sólo el CSS que se necesita, cuando es necesario.

 

mediaQuery Bookmarklet

 

30 herramientas de diseño web Responsive

mediaQuery Bookmarklet proporciona una representación visual de las actuales dimensiones de visualización y consulta a los medios de comunicación.

 

Responsive Data Table Roundup

 

30 herramientas de diseño web Responsive

Ésta colección de mesa comisariada por Chris Coyier, discute cómo las tablas deben aparecer cuando el tamaño de la pantalla se reduce. Se completa con ejemplos y códigos fuente que se puede ver como una ayuda para su propio diseño web Responsive.

 

Adaptive Images

 

30 herramientas de diseño web Responsive

Adaptive Images detecta el tamaño de pantalla de su visitante y automáticamente crea, cachés y entrega a los dispositivos apropiados a escala con reversiones de las imágenes apropiadas en HTML empotradas en su página web. No hay cambios de márgenes necesarios. Se pretende para el uso con los diseños Responsive para ser combinado con las técnicas fluidas de imagen.

 

Seamless Responsive Photo Grid

 

30 herramientas de diseño web Responsive

Seamless Responsive Photo Grid es una cuadrícula que se puede utilizar para hacer que las imágenes muestren borde a borde en la ventana del navegador sin espacios. La idea detrás de este truco de Chris Coyier es tejar las fotos y hacer  el flujo en una serie de columnas de izquierda a derecha a lo largo de toda la página. Al establecer el ancho de imágenes a 100%, se ocupará exactamente de la anchura de una columna. El número de columnas depende del tamaño del navegador. A medida que el tamaño de la pantalla se hace más pequeño, la red funciona por tener preguntas a los medios para probar el ancho del navegador y ajustar el número de columnas en consecuencia. Puede cambiar el tamaño de su navegador a su alrededor y ver las cosas que se mueven muy rápido.

 

Slabtext

 

30 herramientas de diseño web Responsive

Slabtext es un plugin de jQuery para la producción de grandes titulares, negrita y capacidad de respuesta Responsive. En pocas palabras, el guión se divide en filas de titulares antes de cambiar el tamaño de cada fila para llenar el espacio horizontal disponible. El número ideal de caracteres para establecer en cada fila se calcula dividiendo la anchura disponible por el tamaño de fuente CSS – la secuencia de comandos utiliza entonces este recuento del carácter ideal para dividir el título en combinaciones de palabras que se muestran como líneas separadas de texto.

 

Convert a Menu to a Dropdown for Small Screens

 

30 herramientas de diseño web Responsive

Chris Coyier explica cómo hacer un menú de navegación para convertir en una lista desplegable cuando se navega por el sitio web en una pantalla pequeña. Esa es una mejor opción que un vínculo muy pequeño.

 

Media Queries

 

30 herramientas de diseño web Responsive

Media Queries cuenta con una importante colección de diseños web Responsive que se pueden ver como una inspiración para su diseño.

 

Bibliografía:

Artículos relacionados:

 

33 Estupendos Temas de Comercio Electrónico para WordPress

24 Plantillas Responsive Bootstrap por ThemeForest…

10 plantillas excelentes para OpenCart que sus clientes no pueden resistirse

 

BerubyLos  Mercados Online de Envato: ebooks, tutoriales, vídeos, cursos, temas para WordPress y App

do-you-really-need-responsive-design-info

A %d blogueros les gusta esto: