¿Cuáles son los pasos para diseñar un sitio web?

Llamando a todos los diseñadores web :)

Estoy empezando a hacer un sitio web para una pequeña empresa en mi ciudad natal y será mi primer proyecto adecuado. He hecho sitios en el pasado, lo que he hecho por placer. Soy fluido en HTML y CSS. Tengo los requisitos del cliente y lo que quiere en el sitio web, etc. Estoy atascado en los pasos que debo seguir después de finalizar los requisitos. He buscado en la web y no pude encontrar nada relevante para mis preguntas porque la información no está actualizada.

Mis preguntas son:

¿Qué es un flujo de trabajo de diseñadores web en 2014? (Debido a que todo está cambiando muy rápido) ¿Puedo crear wireframes del sitio y luego diseñarlos en Photoshop y luego codificar los diseños?

Solo quiero saber cómo funcionan los procesos de "diseño", como los pasos que debo seguir para crear el sitio web.

Gracias por adelantado.

Descubrimiento y alcance

Siéntese con el cliente para determinar, metas, propósito y necesidades. Debería haber redactado una cita del sitio propuesto y también discutir el tiempo de respuesta. Asegúrese de haber escrito todo lo necesario que no pueda proporcionar. Debe averiguar cómo se estructurará el sitio. Como receptivo, solo tableta y teléfono, solo escritorio, solo escritorio y tableta. Debe averiguar si el diseño es un objetivo de diseño de múltiples fases, como el cliente querrá lanzar una versión de escritorio y más adelante una aplicación móvil completa.

Mapeo de contenido

Esperemos que se le haya dado todo el contenido que se desea para el sitio. Debe mapear el sitio y su funcionalidad. Decida cómo es la escalabilidad para futuras modificaciones, decida cómo se puede estructurar el código si es para un CMS o una aplicación.

Ejemplo:

Bosquejo

Después de que haya completado su "árbol" o "mapa" con la aprobación del cliente, trabajaría en un boceto a mano o una herramienta de maqueta. Hay una gran cantidad de preguntas sobre este tema si realiza una búsqueda en la esquina superior derecha

Ejemplo:

Azulejo de estilo

Diseñar en Photoshop para diseño web anula el propósito de la era actual. No conozco a muchas personas que todavía usan Photoshop porque la cantidad de tiempo que te lleva hacer un botón elegante podría haber pasado la misma cantidad de tiempo y codificado en el navegador. Si tengo que usar una aplicación por una solicitud especial, la implementaré en Illustrator o InDesign. Aconsejaría migrar para diseñar un mosaico de estilo como:

Con el propósito del mosaico, no le estás entregando un diseño a un cliente y te estás poniendo en la esquina de "este no se parece al diseño que me diste". Además, si está planeando un sitio, no hay razón para pasar el tiempo diseñando en Photoshop para que responda porque pasará mucho tiempo diseñando para ciertos dispositivos, etc., etc. Si TIENE QUE diseñar el sitio completo, lo haría considere Illustrator, como se indicó, por su SVG y su capacidad para exportar elementos para su sitio en comparación con Photoshop. En cierto grado, incluso podría usar InDesign para formatear el contenido, pero solo usaría Photoshop para la manipulación de imágenes y, si voy a hacerlo, probablemente rodaría con ImageMagick. Llevo el Style Tile un nivel más allá que otros y lo codifico en una sola página, así que eliminé una tarea preliminar de mi maestro.css archivo.

Estructura metálica

Prefiero implementar el diseño en el navegador si no lo has notado. Ahora en estos días puedo usar Illustrator para un boceto del sitio o una maqueta del sitio, pero generalmente implemento un .cssarchivo de plantilla predeterminado con no más de 6 colores en una escala de grises y codifico todo para la estructura del sitio, ya que la mayoría de las personas no pueden obtener una comprensión del diseño y querer algo con lo que jugar. A veces sigo adelante y hago esto en PHP ya que es más fácil de implementar para un CMS. Luego, desarrollaré un subdominio simple con las fuentes PROPORCIONADAS por el cliente en blanco y negro para que la funcionalidad de todo el sitio esté presente y puedan pasar por ella. Como no he pasado el tiempo agregando todo el contenido o los colores (porque uso la referencia de texto ficticio: "Alternativa a Lorem Ipsum (texto ficticio) para sitios web") Puedo modificar fácilmente cualquier cambio que esté presente si no les gusta cierto elemento basado en un dispositivo.

Colorear y contenido

Una vez que el cliente haya cerrado sesión en la estructura del sitio y la funcionalidad, escribiré el resto del CSS y agregaré las animaciones solicitadas o los detalles de JavaScript. Como tengo el estilo de mosaico aprobado y si lo desarrollé correctamente, simplemente puedo copiar el CSS y configurarlo.

Depurar, depurar, depurar

El último paso antes de cerrar la sesión del cliente es depurar y asegurarme de que mi código sea sólido y sin errores. Si todo está correcto, debería tener una liberación sin problemas. Este paso también incluye pruebas de servicio y pruebas de carga, si eso es lo que ha tasado y ofrecido. Personalmente, creo firmemente que cualquier diseñador debe ser consciente de lo que está desarrollando para lo que usted, con suerte, estaría haciendo cuando se trata de un diseño de impresión. Si el cliente no puede permitirse un verdadero proveedor de alojamiento, podría limitar el rendimiento del sitio y todo lo que dirán es su culpa e hizo algo mal.

Formación

Normalmente hago una oferta en mi capacitación breve / cotización en los sitios de CMS. Algunos usuarios no tienen idea de lo que están haciendo, así que ofertaré por una tarde con una hora de relleno para después de las preguntas para asegurarme de repasar cualquier cosa o asegurarme de que están utilizando mi diseño al máximo de las capacidades.

Algunos otros temas que pueden ayudar ya que está haciendo una pregunta básica:

• ¿Cuál es la diferencia entre wireframes y maquetas?
• ¿Cómo presentar maquetas de diseño web a un cliente?
• ¿Cuáles son algunas buenas prácticas de "simulación" en diseño web?

También soy un diseñador web que acaba de comenzar en el campo. Sin embargo, he hecho algunos proyectos ahora. Para mí, mi flujo de trabajo es así:

1. Reunión inicial de diseño y desarrollo
   Aquí es cuando recopilo toda la información relevante, incluida la fecha de finalización esperada, hago una lista de los elementos necesarios de mi cliente, etc.
   
2. Maquetas de PhotoShop
   En este momento, encuentro un diseño o dos o tres que se ajustan a mi cliente y hago maquetas en Photoshop usando su marca, colores, estilos, etc. Los envío y analizo qué se debe cambiar / mantener en cada uno. , luego deje que el cliente decida qué diseño le gusta más.
   NOTA: Si está utilizando WordPress para construir, puede ir a http://themeforest.comy mira toneladas de temas. A partir de ahí, puede tomar capturas de pantalla y hacer sus maquetas, luego también puede proporcionar una demostración en vivo (sin las personalizaciones del cliente, obviamente). Si a su cliente le gusta una de estas maquetas, entonces compra el tema y puede modificarlo según lo necesite. Esto es lo que tiendo a hacer. Nunca uso un tema (o cualquier otra cosa) sin dar crédito / pago / etc. al creador original. :)
   
3. Desarrollo
   Entonces finalmente empiezo a desarrollar el sitio en un entorno de desarrollo (NO el sitio web en vivo del cliente, sino un subdominio si es posible, es decir, dev.clienturl.com). Envío actualizaciones a mi cliente cada vez que siento que una página se está cerrando. para completar, de esa manera si hay problemas, podemos solucionarlos de inmediato.
4. SIEMPRE SEGUIMIENTO
   Incluso después de que el sitio web de su cliente se haya activado y parezcan satisfechos y no hayan solicitado más modificaciones, asegúrese de realizar un seguimiento. Solo asegúrese de que todo funcione como debería, según sus expectativas. También recomiendo escribir una pequeña encuesta para que cada cliente termine una vez que el sitio web haya estado en funcionamiento durante aproximadamente una semana. Puede usar los comentarios desde aquí como testimonios en su sitio web.

Si necesita ayuda con algo, contácteme a través de mi sitio web. Tengo toneladas de recursos que puedo compartir con ustedes para cosas como contratos, encuestas de posproducción, cuestionarios iniciales, etc. http://anchorsawaydesigns.com/

intente obtener tanta información como sea posible desde el principio, luego siga un enfoque por etapas similar a lo que se muestra a continuación. Intente mantener informado a su cliente tanto como sea posible, ya que no querrá desarrollar algo de forma aislada solo para descubrir más tarde que no cumple con sus expectativas. Si invierte en una buena herramienta de estructura de alambre (uso balsamiq), la mitad del trabajo está hecho para usted.

1. Recopilación de requisitos
2. Wireframing
3. Maquetas de diseño
4. Diseño finalizado
5. Desarrollo
6. Hosting

Buena suerte.

Hola amigo, es bueno que estés comenzando un nuevo proyecto.

Pasos para su necesidad:

1. primero usted decide qué tecnología desea utilizar para su proyecto, me refiero al desplazamiento de una sola página, varias páginas, etc.

2. Luego, en consecuencia, prepare el boceto para su diseño y flujo de trabajo.

3. Ahora comience a diseñar su diseño en la herramienta que le gusta que hago con Photoshop, pero puede usar su gusto.

4. Después de eso, es bueno que muestre su diseño al cliente para cualquier cambio, es decir. color, fuentes, etc. para que pueda no causa dolor de cabeza en el momento de html.

5. Ahora, después de la confirmación de los clientes. Es hora de comenzar a codificar con Html y Css.

6. Después de eso, es hora de pasarlo al desarrollador para la codificación base de lenguaje adicional, es decir. PHP, .Net etc.

Disfrutar............

En la industria web, para agilizar su proceso de desarrollo, el diseño se realiza, y antes de presentar el diseño final para que se desarrolle o se pruebe, hay otros pasos intermedios:

Paso 1: obtener inspiración:

Si observa continuamente lo que otros diseñadores o sitios están haciendo por sus estructuras alámbricas, lentamente obtendrá una imagen en su mente de cómo una estructura metálica ayuda a organizar la información para la pantalla.

y para eso puede usar la herramienta "Wirify" Wireframing, simplemente agregue el enlace grande a su marcador y acceda a cualquier sitio web deseado, haga clic en el marcador, verá que el sitio web se convierte en una estructura metálica.

Paso 2: Diseño de su proceso:

Diferentes diseñadores abordan la estructura de alambre y su traducción a imágenes o código de diferentes maneras,

Aquí no es solo el diseñador el que elige el camino a seguir, a veces los clientes prefieren hacer maquetas directamente, y algunos prefieren más sistemáticos,

Bosquejo => Estructura metálica => Maqueta => Código

Paso 3: dibujar:

Ahora, cuando esté inspirado, tenga algunas ideas aproximadas y un enfoque de planificación, siempre es bueno comenzar a dibujar, sin importar cuán bueno sea para controlar su mouse / stylus o lo que sea que use, no pueden superar el papel, el lápiz en sencillez.

Dibujar a mano en papel es siempre un buen punto de partida para cualquier diseñador. Proporciona una manera rápida y fácil de enfocarse y organizarse. Si eres muy preciso con los bocetos, incluso podrías usar esto como tu estructura metálica final.

Paso 4: estructura de alambre:

Crear una estructura metálica es uno de los primeros pasos que debe seguir antes de diseñar.

Un wireframe lo ayuda a organizar y simplificar los elementos y el contenido dentro de un sitio web y es una herramienta esencial en el proceso de desarrollo.

Una estructura alámbrica es básicamente una representación visual del diseño del contenido en un diseño .

Al igual que la base de un edificio, debe ser fundamentalmente fuerte antes de decidir si le da una capa de pintura cara.

Elige tus herramientas

Aquí está la lista de Mashable de 10 herramientas gratuitas de Wireframing para diseñadores

Establecer una cuadrícula

Las cuadrículas son muy necesarias para lograr un diseño simétrico y paralelo.

cada vez que mira un sitio web bien diseñado, encontrará que su contenido comienza desde un punto específico en el cuerpo y termina en uno, que se gestionan mediante el uso de cuadrículas.

Determinar el diseño con cajas

Definir jerarquía de información con tipografía

Qué evitar mientras se enmarca:

• Demasiado sucediendo en la página.
• Énfasis en el color y el diseño.
• Demasiados detalles

La creación de una estructura alámbrica le brinda al cliente, desarrollador y diseñador la oportunidad de echar un vistazo crítico a la estructura del sitio web y les permite realizar revisiones fácilmente al principio del proceso.

Wireframing ofrece los siguientes beneficios clave:

Paso 5: Maquetas / Visual:

Ahora el Wireframe final se puede convertir en Maquetas finales o Visual:

Algunas herramientas comunes para Mockuos son Adobe Photoshop, Corel Draw y Sketch muy nuevo pero ya popular, etc.

Jerarquía de información

Es posible que deba considerar qué resaltar y qué información lateral, y el esquema de color, el reposicionamiento y la tipografía se deciden.

Tipografía

Elija una tipografía visualmente atractiva y legible para el sitio web con la combinación correcta de alternativas. El tamaño de fuente, el peso y los colores juegan un papel crucial en la legibilidad.

Esquemas de color

Un esquema de color que representa la identidad de la marca y los colores psicológicos como rojo para el peligro, verde para el éxito, etc.

Paso 6: prototipos :

Un prototipo es una muestra temprana, modelo o lanzamiento de un producto creado para probar un concepto o proceso o para actuar como algo para ser replicado o aprendido.

Los wireframes manejan la estructura, las maquetas manejan las imágenes y los prototipos manejan la usabilidad (en productos web / de aplicaciones).

Se hace un prototipo de producto y luego se prueba y se hace POC (Prof of concept). Ahora podemos dirigirnos a un producto Real (obviamente si no se necesita ningún cambio)

Enlace al artículo original con imágenes y otros enlaces.