Pasos para crear una buena página web
Proceso de diseño web:
Diseñar un sitio web es un proceso que consta de seis fases:
- 1 – Definición del Proyecto
- 2 – Estructura del Sitio
- 3 – Diseño Visual
- 4 – Desarrollo de Sitio
- 5 – pruebas
- 6 – Además de lanzamiento
Definición del Proyecto
El paso más crítico en el proceso de diseño de páginas web es la creación de una definición precisa del proyecto. Una definición del proyecto incluye un resumen del proyecto y un plan de proyecto. La encuesta de cliente se utiliza para recopilar la información necesaria para desarrollar el resumen del proyecto y el plan.
¿Cómo se crea la definición del proyecto para un sitio web? (Nota: Si va a crear una aplicación web dinámica, consulte la metodología Getting Real 37 de señal para las mejores prácticas en el desarrollo de software)
Paso 1: Realizar una entrevista de la encuesta de cliente – El propósito de esta entrevista es para determinar el propósito del proyecto, el público objetivo, las metas de la marca / percepción, la fuente de contenido inicial de especificaciones técnicas y estrategia de comunicación. * Use esta encuesta a los clientes para guiar a su entrevista.
Paso 2: Escribir el resumen del proyecto / Creatividad Breve – Basado en la información recopilada en la encuesta de clientes, escribir el proyecto * breve para definir los objetivos del proyecto en blanco y negro, perfil de la audiencia, la percepción del público, el mensaje principal y la ventaja competitiva. He aquí una breve muestra de los proyectos.
Paso 3: Desarrollar Persona (s) – Mirar hacia atrás en la encuesta de clientes y resumen del proyecto y desarrollar un personaje para el público principal. Utilice la plantilla de persona para que un miembro del público imaginario a la vida mediante la cumplimentación de los siguientes detalles: fotografía, nombre, presupuesto, descripción, datos demográficos, perfil técnico, los tres primeros objetivos del usuario, los tres primeros objetivos de negocio para el sitio. La construcción de una Persona leer los datos de respaldo para obtener información adicional.
Paso 4: Escribir las especificaciones del proyecto técnico – Utilizando la información recopilada en la encuesta de clientes, junto con las normas técnicas de la organización, documento de las Especificaciones Técnicas para establecer claramente los requisitos, como resolución de la pantalla, la compatibilidad del navegador, el tiempo de descarga, estándares web y accesibilidad. Aquí se muestra una especificación técnica.
Paso 5: Desarrollar el plan de proyecto / Cronología – Establecer el cronograma de entrega de resultados y las tareas de cada fase del proyecto. Asignar fechas de vencimiento y los recursos.
Paso 6: Consideraciones sobre el documento de mantenimiento – Desarrollar un sitio web de mantenimiento * plan que documenta cómo el sitio se actualiza y revisa continuamente. ¿Por qué en el mundo que se tiene en cuenta el mantenimiento en el inicio de un proyecto? Es importante establecer expectativas claras de que los sitios web y aplicaciones web requieren de soporte y mantenimiento. Ayudar a asegurar a sus clientes el plan para mantener el sitio saludable, explicando los requisitos de mantenimiento en la delantera.
Estructura del Sitio
“El rediseño de un sitio web es como la remodelación de una cocina – usted debe averiguar qué características y capacidades que necesita y cómo se van a utilizar antes de diseñar su diseño, aparatos lugar y tapones, y los azulejos seleccionar, cortinas y cubiertas.” – Rediseño Web 2.0
Un buen diseño web requiere de una sólida arquitectura del sitio basado en los objetivos del sitio y la audiencia meta establecida en el resumen del proyecto. Los resultados de esta fase son los siguientes:
ESQUEMA DE CONTENIDOS
- Diagrama del sitio
- Diagramas de descripción de página
- wireframes
- Estas cuatro tareas son dependientes el uno del otro y la necesidad de que se complete de forma secuencial.
ESQUEMA DE CONTENIDOS
Trabajando en estrecha colaboración con sus clientes, crear una lista de todo el contenido existente. Lluvia de ideas sobre el contenido que debe ser creado para el sitio. Revise la lista de contenidos, recortando cualquier cosa que no coincide con los objetivos o las necesidades de la audiencia como se indica en el resumen del proyecto. Tome tiempo para pensar en el futuro y cómo el contenido del sitio puede ser que necesite para crecer. Asegúrese de dejar espacio para el crecimiento. Siguiente grupo de su contenido en categorías. A medida que categorizar su contenido, considerando el conseguir comentarios de los usuarios a través de una especie de tarjeta. Una vez que las categorías se han establecido, crear un esquema de su contenido y lo comparta con sus clientes para la exactitud.
Diagrama del sitio
Lleve a su esquema del contenido final y crear un mapa o diagrama de sitio. Un diagrama de sitio es sólo una representación visual de su esquema de contenido y estructura del sitio. Puede usar Excel, Visio o Omnigraffle para crear su diagrama de sitio. Consulte la Guía de laLa IA perezoso para hacer Sitemapsarticle en cajas y flechas para ver un ejemplo paso a paso.
Diagramas de descripción de página
Muchos arquitectos de información están recomendando el uso de diagramas de descripción de página (PDD) como paso previo wireframes o incluso como un reemplazo de estructuras metálicas. El enfoque de un PDD es doble:
- ¿Qué contenido pertenece a esta página
- Lo que ista prioridad de cada fragmento de contenido
Un diseño común para la PDD es utilizar el acceso horizontal de prioridad. Por ejemplo, un PDD de cualquier página de dar puede tener tres columnas. La primera columna se lista el contenido de alta prioridad. La segunda columna se lista el contenido de prioridad media. La tercera columna se lista el contenido de la prioridad más baja.
Las ventajas de la PDD en la malla son:
- aclara todo el contenido de una página determinada
- aclara la prioridad de cada fragmento de contenido
- elimina por completo el diseño visual (color, fuente, ubicación) de esta etapa de la conversación.
Wireframes
Un wireframe es un diseño no-gráfica de una página web. Se trata de un simple dibujo de los fragmentos de información y funcionalidad de cada página en su sitio. Usted tendrá que crear una estructura metálica de la página de inicio, cada una única página de segundo nivel y de cualquier otra página muy diferentes en el sitio.
Wireframes incluyen los envases de todos los elementos principales de la página. Elementos de la navegación, imágenes, contenido, elementos funcionales (como la búsqueda) y pie de página.
Diseño Visual
“Estructuración del sitio en el papel antes de comenzar el diseño visual es un paso crítico hacia la efectiva presentación de los contenidos a su público objetivo.”
“Los diseñadores no son mindreaders o magos. Un buen diseño depende de la estructura del sitio bueno y una definición de proyecto sólido”.
Ahora es el momento para que los diseñadores ser creativos! Revise el resumen del proyecto, mapa y wireframes con el diseñador (s), y luego dar rienda suelta a generar soluciones y desarrollar los diseños visuales diferentes. El diseñador (s) también debería revisar las directrices de marca, así como los requisitos técnicos para la resolución de la pantalla, la compatibilidad del navegador, el tiempo de descarga, estándares web y accesibilidad.
En este punto, el diseñador (s) tiene una idea clara de la finalidad del sitio, los contenidos que componen el sitio, la arquitectura del sitio y los elementos que tienen que estar en cada página. Basándose en su conocimiento de los principios de diseño (balance, ritmo, proporción, dominence), elementos de diseño (punto, línea, forma, color, tipografía) y el diseño centrado en el usuario (usabilidad), pueden desarrollar opciones de diseño que cumplan con los objetivos del proyecto.
Una muestra de las tareas de diseño visual:
- Primero el proyecto de diseño visual de la página principal y una sub-página
- Cliente proporciona información sobre los diseños
- Segundo proyecto de diseño visual de la página principal y una sub-página
- Cliente selecciona el diseño y proporciona información
- 3er borrador del diseño visual de la página principal y todas las sub-páginas únicas
- Cliente proporciona información sobre el diseño
- Final de diseño visual de la página principal y todas las sub-páginas únicas
- La aprobación del cliente de diseño final
Desarrollo de Sitio
Ahora es el momento de construir realmente el sitio. Hay dos pasos importantes en esta etapa:
Confirmar y refinar el Plan Técnico / Funcional
Construir e integrar el Sitio
Técnico / Funcional del Plan
Comience por revisar el resumen del proyecto, estructura del sitio y el diseño visual y confirmar que todo está en la alineación y apoya los objetivos generales del proyecto y las necesidades. A continuación, revisar y ajustar las especificaciones técnicas / funcionales para el sitio:
Meta Datos técnicos – lo que los navegadores, sistema operativo, resolución y velocidad de conexión que objetivo.
Comprueba las especificaciones funcionales – ¿Qué funcionalidad de su sitio requiere? El uso de estándares web del W3C, se recomienda para asegurar que su sitio tiene los objetivos de la web para todo el mundo y la web en todo.
Plan del proyecto – revisar su calendario original y las especificaciones técnicas y funcionales, que acaba de establecerse. ¿Tiene los recursos que necesita para completar el proyecto a tiempo y dentro del presupuesto? Filtrar y añadir detalles del plan del proyecto se redactó durante la Etapa de Definición del Proyecto. Su plan de proyecto debe incluir una lista detallada de tareas concretas, tareas, fechas límite y las dependencias entre tareas.
- Navegadores
- * – lo que los navegadores le meta? ver las directrices de la UT en los navegadores web
- * Sistemas operativos – Mac, Windows, otros?
- * Resolución de pantalla – lo que es la resolución de la pantalla será el sitio diseñado para? ¿Qué resoluciones de pantalla que no contará con el apoyo gracia?
- * Velocidad de conexión – lo que se espera la velocidad de conexión para sus principales usuarios, lo que a otras velocidades de conexión que objetivo?
- Página Tamaño de la descarga –
- 30K y bajo
- 30-80k (página típica)
- 80-100k (gráficos pesados)
- 100k + (no se recomienda a menos que todos los usuarios de banda ancha)
- Navegador, plataforma y las estadísticas de resolución de la pantalla
- Velocidad de conexión
- CSS
- Flash
- (X) HTML versión
- JavaScript
- Rich Media (video, audio)
- Buscar – htdig y Google en la UT
- Transacciones seguras con tarjetas de crédito
- Tecnologías de servidor (base de datos, cgi, CMS, personalización, iniciar sesión)
- Web Analytics – Estadísticas Urchin para su sitio en la UT
- Construir e integrar el Sitio
- ¡Por fin! Hora de dar vuelta toda esta planificación a la realidad! Los pasos incluyen:
- Crear plantillas con los estándares web
- Crear páginas
Desarrollo de backend
- CSS – la presentación por separado de los contenidos
- (X) HTML – uso válido (X) HTML
- Javascript – agregar secuencias de comandos de luz, asegúrese de degradarse y mantener la accesibilidad
- Optimizar – optimizar las imágenes, CSS y HTML (x)
- Ejecutar las pruebas iniciales en las plantillas
- Verter el contenido en las plantillas
- Establecer el método para los contribuyentes de contenido de revisar, actualizar y agregar contenido
- Código dinámico características del sitio que requiere la base de datos / cgi y la integración como:
- búsqueda
- la personalización / inicio de sesión
- transacciones seguras
- Web Analytics
Pruebas
Su plan original del proyecto siempre se debe asignar el tiempo de pruebas formales. Idealmente, usted debe identificar a una persona para servir como la principal garantía de calidad. Prioridad de esta persona será la creación de un plan de control de calidad realista, gestionar el proceso de pruebas, los problemas prioritze, asegurar que las cuestiones de alta prioridad se resuelven y llevar a cabo la revisión final y la liberación del sitio.
Pruebas de control de calidad
-
Contenido – precisa, comprensible, ortografía, gramática (examen realizado por los contribuyentes de contenido / editores de contenido)
-
Enlaces – sitio de la revisión de los vínculos rotos con una herramienta automatizada como WebXMFuncionalidad – ¿El sitio desempeñar las funciones definidas en la definición del proyecto original, crear una lista de tareas y realizar pruebas metódicoValidez – validar (X) HTML, CSS validar
-
Accesibilidad – pruebas automatizadas sección 508 utilizando una herramienta automatizada como WebXM, manual de pruebas de la sección 508Browser / OS / Resolución – sitio de la prueba en los navegadores de destino de su anterior define de forma manual o utilizando BrowserCamVelocidad de conexión – utilizar el Analizador de página Web para obtener un análisis y recomendaciones sobre la velocidad / tamaño de sus páginasUsabilidad – facilidad de uso conducta formal o informal de pruebas con su público objetivoSearch Engine Optimization – revisar su sitio de marcado semántico. Leer 10 consejos SEO by Alan K’necht en su artículo titulado SEO y su sitio web
-
Prueba de carga – póngase en contacto con el administrador del servidor para discutir las técnicas de pruebas de cargaSeguridad – petición automatizada SecurityXM Scan, autorizaciones revisar el expediente, el método de revisión de autenticación, prueba de la conducta de autenticación
Prioritize Issues
Tomarse el tiempo para realizar pruebas antes de la producción es un elemento importante en el lanzamiento de un sitio de alta calidad. Sin embargo, si usted espera hasta que el sitio es perfecto, nunca se ejecutará. Hay un equilibrio entre la perfección y la calidad real que se debe encontrar. Como a controlar la lista de cuestiones que quedan al descubierto durante la fase de pruebas, dando prioridad a ellos en al menos tres categorías:
-
Prioridad 1 – crítico, se debe fijar antes de su lanzamientoPrioridad 2 – sería mejorar el sitio, pero podemos ir a vivir sin ella, la dirección tan pronto como el tiempo lo permitePrioridad 3 – enhancment futuro, buena idea / función, tendrá en cuenta para futuras versiones
Filtrar sitio
Después de todo esto un buen trabajo, asegúrese de que usted realmente poner en práctica la prioridad de un cambio en el sitio antes de la liberación.
Lanzamiento
- Guía de estilo
- Lanzamiento
- Mantenimiento
- Guía de estilo
A medida que el sitio se prepara para ir de producción, es importante documentar la guía de estilo. Una guía de estilo se compone de los siguientes elementos:
Normas de Diseño Visual – logos, colores, tipografía (para mantener el sitio de la marca)
Convenciones de nomenclatura – para archivos, directorios, css, imágenes, títulos
Estructura del sitio – documento el diagrama de sitio e indicar la forma de la estructura está construida para manejar el crecimiento
Plantillas – proporcionar la (X) HTML y CSS plantillas de diseño que indica, la tipografía, tamaño, color, navegación, los menús
Ejemplos de guías de estilo:
- UT Normas Pautas
- Stanford Escuela de Medicina de la Guía Web de estilo
- Carnegie Mellon Web Guía de Estilo
- El lanzamiento del sitio
Plan de la mejor fecha para ir a vivir. Tenga en cuenta sus actuales patrones de tráfico del sitio web y trata de iniciar de una manera que minimiza el tiempo de inactividad. Asegúrese de que todos en el equipo se encuentra a disposición para cualquier desafío que pueda ocurrir durante el lanzamiento. Si es posible, considere un lanzamiento suave (un lanzamiento beta tranquilo que le permite confirmar que todo está en marcha y funcionando antes de la fecha oficial de lanzamiento).
Llevar a cabo una fase final de pruebas de control de calidad en el sitio en vivo después de que esté completamente en la producción para asegurarse de que todo está funcionando bien.
Tome un momento para celebrar y después de dormir un poco!
Prepararse para la última sorpresas minutos por hora de programación para ajustar o solucionar cualquier problema unexected durante los primeros días o semanas del debut en el sitio.
Plan de Mantenimiento
* Implementar el plan de mantenimiento que se desarrolló en la primera etapa de este proceso. Hacer hincapié en la importancia de mantener un sitio
- Completo
- Corriente
- Coherente
- Búsqueda
- Accesible
- Atractivo
- Robusto
- Seguro
- Rentable
- En línea con el espíritu y los objetivos del proyecto
Recursos
- Cajas y Flechas: el diseño detrás del diseño
- Diseño en Teoría y Práctica de Joshua David McClurg-ginebrinos
- gotomedia recursos – incluyendo hojas de trabajo de la web del libro de Kelly rediseño 2.0
- Filósofo – un enfoque reflexivo a la calidad del sitio web de Derek Sisson
- UT Austin Pautas Editoriales
- Rediseño Web 2.0 por Kelly Goto y Cotler Emily
- Guía Web de estilo de Patrick Lynch y Sarah Horton
