Cuando se trata de Diseñar una Página Web, es de mucha ayuda tener una guía, la cual nos ayudará en el proceso de su desarrollo, especialmente si estás dando tus primeros pasos como Diseñador Web.
Antes de empezar, es necesario mencionar que en cada paso del proceso es necesario parar para hacer un análisis retrospectivo, de esta manera ahorrarás mucho tiempo el cual puedes invertir en mejorar tu desarrollo.
1. Recopilar la Información.
Es el paso en el cual nos dedicamos a recopilar toda la información necesaria del proyecto que estamos empezando.
- Objetivo de la Página Web
- Determinar el Target o Público Objetivo
- Secciones y Arquitectura Web
- Contenido de Páginas y Artículos
- Branding, Logo, Colores
2. Crear Wireframes
Una vez hayas determinado lo que buscas con el sitio web, continuamos con el desarrollo el bosquejo estratégico del sitio, es decir un bosquejo tratando de dar respuesta a las necesidades planteadas en la primera parte. A esta etapa también se le denomina «Prototipado del Sitio Web» o «Prototipo de la Página Web»
Los Wireframes son el «esqueleto» visual de nuestro sitio. Es decir una estructura a base de lineas simples en las cuales posicionaremos todos los elementos de texto, imágenes, botones, videos, formularios de manera que tengamos una idea clara del layout de la Página Web.
Herramientas para hacer Wireframes:
Aunque yo prefiero usar Illustrator o Photoshop (e inclusive papel y lápiz) aquí hay algunas herramientas Web que nos podrían ayudar en este paso.
3. Diseño de la Página Web
«Diseñar» es donde suelen ir directamente todos los que empiezan el el mundo del diseño Web, y es uno de los errores más comunes, no haber pasado por los dos pasos anteriores y no tener wireframes como base.
Diseñar una página Web es más que un proceso meramente creativo, ya que no sólo es crear algo atractivo a la vista, sino que hemos de tomar en cuenta dos aspectos fundamentales de actual de Páginas Web:
- El uso de frameworks (Por ejemplo: Bootstrap o Foundation)
- El uso de CMS como WordPress
Diseñar en base a Frameworks
Si decidimos usar Frameworks, hemos de adaptar nuestro diseño a una rejilla predeterminada, reutilizar módulos y elementos que vienen por defecto en el framework que decidamos usar, además de explorar todas las posibilidades de interacción como: popovers, formularios, botones, tooltips, sliders, etc.
Diseñar en base a WordPress
Si decidimos usar WordPress, nos vemos obligados a ser más estrictos aún. Hemos de estudiar muy bien el tema que decidamos usar, explorar todas sus capacidades, familiarizarnos con los elementos que vienen por defecto y las posibilidades de personalización que nos brinda.
4. Programar usando HTML y CSS, Frameworks o WordPress
Una vez tengas un diseño atractivo, haz de convertirlo en un ‘lugar real’ en internet. Para eso necesitamos código.
En este paso es recomendable tener conocimientos previos de HTML y CSS, lenguajes que te permitirán crear interfaces versátiles, interactivas y amigables con los motores de búsqueda. Luego de ‘codificar’ nuestro diseño es necesario probarlo en diferentes navegadores, inclusive desde dispositivos móviles, si es necesario.
Programar usando Frameworks
En este paso hemos de familiarizarnos con las clases y la semántica del framework. Son similares entre sí, además de que nos permitirán una programación rápida y flexible, además de ser responsive por defecto.
Programar usando WordPress
Puede tomarnos un tiempo familiarizarnos con el maquetador visual que usemos (Ejemplo: Visual Composer). Lo más importante es familiarizarnos con él y explorar todas sus capacidades, elementos y módulos que vienen por defecto.
5. Publicar la Página Web
Este aspecto es bastante técnico y tiene que ver con temas como los siguiente:
- Accesos al Servidor via FTP
- Apuntar los DNS del dominio hacia el servidor
- Crear Base de datos (si usamos WordPress)
- Configurar archivos .htaccess o robots.txt para una optimización adecuada.
Es recomendable hacer un pre-lanzamiento de nuestro sitio antes de hacerlo conocido del todo. Podemos echar mano de nuestros contactos o colegas para que echen un vistazo y den sus apreciaciones, este feedback servirá para perfeccionar o dar últimos toques a nuestro desarrollo, antes del lanzamiento definitivo del sitio.
6. Promocionar
¿Dónde debemos promocionar nuestra Página Web?
Es muy recomendable hacer un estudio de los medios por los cuales nuestro sitio se hará conocido, ejemplo: Redes sociales, Marketing Viral, Emailing, contratación de publicidad Online, etc. Este paso está directamente relacionado con el primer paso ya que está directamente relacionado con nuestro target objetivo.
- Facebook: Normalmente para páginas B2C (Business to Consumer) o venta de productos finales.
- Twitter: Para página de tipo informativo ó magazines online.
- Linkedin: Para página orientadas a brindar servicios para empresas o consultorías profesionales.
- Pinterest: Para páginas con publico objetivo femenino (temas: decoración, moda, turismo, hogar, ocio).
- Instagram: Para página con temas de contenido visual rico, por ejemplo: restauración, moda, turismo, decoración, diseño, arquitectura, audiovisual, ocio.
7. Mantener la Página Web
Este paso es muy importante, y muchas veces sub-estimado. Preguntas a responder:
- ¿Quién o quiénes administrarán el contenido Web?
- ¿Con qué frecuencia?
- ¿De donde se obtendrá el contenido audio visual?
- Si usamos WordPress: ¿Quién actualizará los plugin o el WordPress y corregirá posibles errores?
- ¿Tenemos acceso directo al soporte técnico del servidor para resolver posibles errores?
- ¿Tenemos control sobre nuestro dominio y cuentas de correo?
Espero que estos pasos os sean de ayuda y si os han gustado, por favor no olvidar compartirlos usando los botones de redes sociales, Gracias!
Si tienes preguntas no olvides echarle un ojo al Soporte Remoto via Skype.
Tema relacionado: ¿Cuanto cuesta una Página Web en WordPress?
