Diseño y Maquetación de themes WordPres – Parte 1

Inicio » Tecnología » Diseño Web » Diseño y Maquetación de themes WordPres – Parte 1

diseño-theme-wordpress

Hace ya algún tiempo les había ofrecido brindar un pequeño curso o guía de como diseñar un theme para wordpress, sin embargo por falta de tiempo que no he podido cumplir con la promesa realizada; y se me ha presentado la oportunidad de realizar un diseño para la empresa de un amigo y se me ha ocurrido ir publicando de a pocos el proceso que conlleva la creación del mismo.

Al aceptar este trabajo, se me han venido a la mente temas como “101 dolores de cabeza para un diseñador” y esas cosas que los que nos dedicamos a este rubro encontramos por internet, y no es para menos ya que este trabajo es prueba de ello debido a que el cliente, no brindó información de la empresa, no brindó imágenes, ni siquiera brindó el logo y seguro que piensa que soy adivino, jajajaja… ha brindado una información a medias de lo que necesita y al menos me ha indicado el rubro de la empresa.

En este primer apartado de lo que será el curso o guía para el desarrollo de un theme wordpress, voy a detallar únicamente los requerimientos del cliente y lo que se piensa realizar; si alguien tiene algún comentario o sugerencia será bienvenido, ya que no soy experto enseñando y mucho menos haciendo tutoriales, por lo que espero me disculpen si a veces no me doy a entender bien, pero lo que se quiere lograr es que con los que estén pendientes del desarrollo de este trabajo vayamos aprendiendo y descubriendo diversas posibilidades, ya que el theme “aún” no está desarrollado, si no que lo iremos desarrollando poco a poco.

Requerimientos para el theme:

El cliente a breves rasgos ha dado a entender que su empresa se dedica a la comercialización de equipos y material médico, y que los colores que su empresa son el rojo y el azul; por lo que para el diseño he optado por utilizar tonos azules, no se ustedes pero para una web de salud el rojo me parece muy chillón; teniendo esto en cuenta la web que vamos a desarrollar tendrá las siguientes especificaciones:

 

Rubro: Comercio médico

Tipo: Catálogo (pedidos a través de teléfono o correo electrónico).

Nombre o razón social de la empresa: No tengo ni la menor idea, jajajaja, hasta el momento le vengo pidiendo los datos y bueno nunca envía la información.

Del diseño:

Menú Superior con enlaces las diversos apartados del sitio: información de la empresa, productos, soporte, contacto, etc… El menú deberá permitir agregar más enlaces.

Home – Inicio:

Slider principal donde se muestren las categorías principales del negocio: equipos médicos, equipos de odontología, equipos de laboratorio, material médico – quirúrgico, material de odontología, material de laboratorio y accesorios y otros.

Barra lateral donde se muestre un listado de las categorías principales con sus respectivas sub categorías: Equipos, Materiales e insumos y Accesorios

Contenido principal listado de todos los productos.

 

Entrada Simple (single):

Tendrá información detallada del producto para el cliente, un enlace o botón que el cliente podrá pulsar para solicitar un cotización al área de ventas (posible venta), cada solicitud de cotización debe permitir al administrador hacer el seguimiento de la referencia utilizada para llegar hasta la página en cuestión y acceder a los mensajes a través de la administración, enlace de la información completa del producto (acceso sólo administrador), enlace a la ficha técnica del producto (acceso sólo administrador).

 

Página de productos:

Se tendrá acceso a través del menú superior, y a las diferentes categorías de los productos que vende la empresa, la disposición de los productos será parecida a la del home: un slider superior con los productos destacados, y un listado de productos de la categoría.

 

Página de Contacto:

Es un formulario de contacto desde el que el cliente podrá ponerse en contacto con la administración de la web, el formulario deberá permitir hacer un seguimiento de la referencia del visitante.

Se mostrará un mapa con la ubicación de la empresa e información complementaria para mayor información del usuario.

 

Otras páginas:

Las páginas como la información de la empresa, será una página de contenido sencillo, para la página de soporte se utilizará un formulario adicional para contacto con el área técnica de la empresa.

 

Catálogo Virtual:

Es una solicitud adicional del cliente, al que sólo podrá tener acceso el administrador, el cual podrá subir, editar y/o eliminar desde la administración los archivos PDF de cada catálogo de productos que se manejarán en tienda.

 

Área de administración:

El área de administración deberá ser intuitiva, de tal manera que el administrador del sitio no tenga problemas en identificar los diversos apartados para administrar sus productos, catálogos, formularios, sliders, etc.

Teniendo en cuenta lo anterior se prevee el uso de un custom post type para el catálogo con un metabox para la carga de archivos, un custom post type para el slider del home u utilizar un plugin para tal efecto; un sistema de administración del theme desde donde el administrador del sitio podrá cambiar el logo del sitio respetando ciertos parámetros de tamaño que le serán indicados, mostrar u ocultar el código de seguimiento de google analitycs, mostrar u ocultar el mapa de la página de contacto.

 

Por el momento esos son los requerimientos solicitados por el cliente, y como ven es algo sencillo de realizar, adjunto a la publicación he subido el archivo de diseño PSD del home, el cual es el mismo que se muestra como imagen al inicio de la entrada.

La demás partes del curso las iré publicando de acuerdo a mi disponibilidad de tiempo.

 

Cualquier comentario o sugerencia es bienvenido.

 

Diseño y Maquetación de themes WordPres – Parte 1:

Descargar el archivo
Probando si se muestra seleccin de Google Adsense

2 respuestas a “Diseño y Maquetación de themes WordPres – Parte 1”

  1. Información Bitacoras.com

    Valora en Bitacoras.com: Hace ya algún tiempo les había ofrecido brindar un pequeño curso o guía de como diseñar un theme para wordpress, sin embargo por falta de tiempo que no he podido cumplir con la promesa realizada; y se me ha presentado la…

  2. […] una entrada anterior brindé la propuesta de iniciar el desarrollo de themes para WordPress, desde el diseño hasta la maquetación del mismo. Hay mucho que aprender sobre el […]

Deja un comentario