Recomendaciones sobre Diseño web - Diego Borrero Y Manuel F Villegas

Page 1

Recomendaciones Para Ser Un Diseñador Web A continuación presentamos, de manera ordenada y paso a paso los procesos que realizamos al momento de realizar un proyecto web para un cliente en particular; Esto no es una biblia que se deba seguir paso a paso, ni es un método definitivo, es solo una evidencia y metodología que poco a poco hemos realizado y ordenado de manera lógica para su fácil comprensión, esperamos les guste.

Partiremos del precepto que manejaremos tres grupos, a partir de los cuales se desarrollará el proceso de elaboración de la web:

-

GRUPO CLIENTE - DISEÑO GRUPO TÉCNICO - FUNCIONAL ACTUALIZACIÓN Y MANTENIMIENTO


GRUPO CLIENTE - DISEÑO En este grupo y para la elaboración inicial y conceptual de la web se deberán tener en cuenta: Conocer el cliente: . Cuál es su misión y visión? . Producto y/o servicio que prestan . Target al que va dirigido . Competencia directa e indirecta

Que necesita el cliente . Si es web page (full site) o landing page (promotional site) . Número de apartados . Formulario y base de datos . Galerías . Aplicación específica (calendario, contador, temporizador, reviews.. etc) . Edición y/o implementación videos . Edición y/o elaboración fotografías . Video y/o imágenes de stock . Tienda


Cuál es el presupuesto del cliente: Este factor dependerá de manera Directamente proporcional al tiempo y las funcionalidades requeridas y bueno al cliente en sí, pero eso ya varia de diseñador a diseñador y a modo de trabajar con los clientes.

Cuando lo necesita Como diseñadores gráficos profesionales es necesario conocer y administrar el tiempo que tarda un proyecto en realizarse, permitiéndonos de esta manera administrar nuestro tiempo y recursos de manera eficiente y garantizando un trabajo de calidad.


GRUPO TÉCNICO - FUNCIONAL

. CMS ó HTML . Frecuencia en las actualizaciones de contenido . Estándares regulaciones web - w3c - Html 5 - css3 - Otros Los estándares web además de mostrar las “buenas prácticas” en la elaboración de nuestra web y garantizar en un mayor porcentaje la compatibilidad de la misma con diferentes navegadores y dispositivos, son señales de profesionalismo y confianza.


ACTUALIZACIÓN Y MANTENIMIENTO

. Si va a cargo del programador o del cliente . Si el servidor es propio o contratado . Servicios adicionales SEO . Servicios adicionales comunity manager

No es misterio que una web “bonita” sea sinónimo de éxito, el diseño web es solo una parte de un gran engranaje y es por ello que como diseñadores web debemos asesorar a nuestros clientes respecto a esto, ya que no todos los clientes saben estos conceptos y no todos los clientes buscan solo un diseño web.


RECOMENDACIONES AL MOMENTO DE REALIZAR UNA WEB EN HTML Nosotros como diseñadores recomendamos: 1. Antes de empezar a montar una web tener el diseño y outline aprobado. 2. Manejar hojas de estilos por separado - Css - Java script - Query

3. Optimizar siempre las imágenes para la web: - resolución 72 dpi - Menor peso de la imagen mayor su velocidad de carga - perfil de color RGB - Formatos: Jpg, Png, webP

4. Diseñar siempre pensando en dispositivos móviles: - Hacer esto nos permite tener un visionado más realista respecto a que podemos o que debemos hacer, permitiéndonos en ocasiones ahorrarnos tiempo y líneas de código. 5.

Conservar en una carpeta y de manera organizada los archivos editables en caso que sea necesario realizar un cambio.

6. Por cuestiones de posicionamiento y SEO se recomienda siempre y en lo posible que todos los textos sean editables y no una imagen.


7. Colocar siempre los colores de fondo y degradados a través de estilos CSS y no como imagen esto hará que nuestra página cargue de manera más rápida y permitirá editar dichos parámetros desde el código sin la utilización de softwares externos (editores de imágenes) . 8. Tener un orden establecido en la organización de las carpetas que estructuran nuestra web.

9. Que cumplan con los parámetros de la w3c. 10. Por cuestiones de funcionalidad y compatibilidad revisar nuestro proyecto web en todos los navegadores:

-

Google Chrome Internet Explorer Firefox Opera Otros


RECOMENDACIONES WORDPRESS 1. Instalar el Wordpress una vez se haya activado addon domain: Esto nos ahorrará dolores de cabeza, ya que si esto se hace primero enviraremos cambiar luego el Wordpress de carpeta y/o migrarlo a otro servidor. 2. Tener una página Html o Php Index de coming soon. 3. Almacenar el Wordpress dentro de una sub carpeta esto a pesar que nos genera un directorio adicional, nos permitirá por el contrario un mejor orden y funcionalidades ej: www.midominio.com/wp

4. Trabajar en lo posible con temas Premium ya que estos traer mayor estabilidad y soporte. 5. Sacar siempre un backup antes de actualizar alguna nueva versión de Wordpress.

6. Instalar Plugin “populares” pues estos cuentan con un mayor soporte y vida útil en las galerías virtuales de Wordpress. 7. Manejar dos cuentas de usuario una para el administrador/Diseñador y otra para el clientes /cliente final.

8. No saturar el wordpress con plugins innecesarios (además de pesados ) que agotan los recursos de nuestro servidor y harán nuestra página lenta. 9. Hacer buen uso de los links permanentes ya que estos ayudan al posicionamiento de nuestra sitio web.


10. Tratar de personalizarlo en pro de nuestro cliente: -

Página de error Logos y marcas de agua Página login Custom codes Favicon Páginas de carga

11. Tener un archivo de texto con las claves y usuarios de nuestro Wordpress, base de datos, ftp, suscripción plugin Premium, tienda virtual etc. 12. Si nuestro Wordpress posee una tienda o método de pago este debe de contar con un certificado de seguridad.

RECOMENDACIONES EN FORMULARIOS 1. Testear siempre todo 2. Poner email genérico para pruebas 3. Pedir el email que hay que usar para el formulario. 4. Todo en el idioma correspondiente


TENER ENCUENTA AL FINALIZAR UNA WEB -

Primero que todo, una vez que terminamos una web, hay que verificar que todos los links del menú principal funcionen correctamente, igualmente tener en cuenta si estos están dentro de una plantilla o fuera de ella, ya que en caso de que estén fuera de la plantilla es necesario revisarlo uno por uno en cada página.

-

Posteriormente se deben revisar los nombres de las pestañas, que estos coincidan con los apartados o secciones determinadas.

-

Verificar que los mapas incrustados por Iframe de google maps estén en el idioma ingles y no en español.

-

Probar la página en los tres navegadores, esto para asegurar la compatibilidad de los códigos y clases CSS.

-

Revisar el código del sitio web y eliminar código sobrante o innecesario que quedo como resultado de la elaboración de la mismo.


-

Comprobar que los iconos de social media re direccionan correctamente a los respectivos URL del cliente.

-

Revisar los textos del contenido de la web, para verificar que no tengan errores gramaticales u ortográficos.

-

Revisar que el footer de la página tenga el nombre del cliente y el correspondiente año: ©copyright 2016 – nombre cliente all rights reserved

-

En caso del cliente contar también con un Mobile site, es necesario colocar un archivo index.php, al hacer esto, asegurarse que los links de redirección, sean los correctos y funcionen.

-

Comprobar que el documento index.php se redirecciona correctamente. Esto se logra ingresando a la web del cliente desde un dispositivo móvil.

CHECK LIST – WORDPRESS Cada Que elaboramos un Wordpres, hay unos requerimientos mínimos que seguimos y que se aplican a todos los wordpress independiente del cliente, es por eso que hemos elaborado una lista y cada que sea necesario se revisa y así se lleva control de lo que se ha realizado y de lo que falta: - Insertar código memoria Wordpress (wp-config.php) - Instalación plugins tema - Favicon - Instalación plugin cms whithe label y 404 error - Imagen login page - Page error 404 (htacces, html. Wordprees) - Quitar imágenes genéricas y textos de los template genéricos - Quitar (otro sitio creado en worpress de la plantilla) - Outline cliente - Permanent links configurar - Personalización footer, copy right, año, logo, (qr opcional) - Incluir apartado de Related Links - Revisión de enlaces absolutos si se cambia de carpeta - Probar envío de formularios - Menú desplazable - Revisar en otros navegadores y en dispositivos m{oviles - Social media links


Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.