¿Cuál es el flujo del proceso del diseño de la página web actual y con qué herramientas?

Answer 1

El flujo de proceso común está usando algo como esto:

Comience con Ux, en lugar de Ui: diseñe la experiencia del cliente ANTES de intentar hacer el diseño o la dirección de arte.

Después de tener Ux, desarrolle un prototipo en una aplicación de creación de prototipos como Marvel Free mobile & web prototyping (iOS, Android) para diseñadores – Marvel ‘

Dibuje https://www.sketchapp.com/ (reemplazando Fireworks) para crear elementos visuales.

En lugar de LameWeaver (lo siento, DreamWeaver), use un editor de código como Sublime Sublime Text – Download o Atom Un editor de texto pirateable para el siglo XXI

En lugar de usar el sistema de archivos en su computadora local, configure un servidor NodeJS.

Mejor aún, use un sistema en la nube como Cloud 9 Su entorno de desarrollo, en la nube o Nitrous https://www.nitrous.io/ para obtener un servidor virtual completo.

Cree animación de estilo Flash en una biblioteca de JavaScript como D3 https://d3js.org/.

Haga un prototipo de código en un entorno de desarrollo con muchas herramientas de línea de comandos (Terminal en Mac, Consola en Windows).

En lugar de CSS, use hojas de estilo Sass Syntactically Awesome y transpile a CSS

Use un marco front-end como ReactJS Una biblioteca de JavaScript para construir interfaces de usuario | React o AngularJS Superheroic JavaScript MVW Framework para construir su interfaz de usuario.

En lugar de adivinar por qué falla su código, abra la consola web (haga clic con el botón derecho del mouse en inspeccionar) para ver el DOM, JavaScript y CSS. Otra razón por la que DreamWeaver ya no se usa.

En lugar de PHP / MySQL vanilla, use Ruby on Rails Ruby on Rails Tutorial (3ra Ed.), Django The Web framework para perfeccionistas con plazos, o Laravel The PHP Framework para Web Artisans (PHP framework).

En lugar de guardar copias de seguridad en una carpeta, use GitHub http://github.com

En lugar de la codificación del lobo solitario, trabaje en equipos usando Git https://git-scm.com/.

En lugar de cargar FTP, use un sistema de implementación (escrito en la línea de comandos) a un servidor en la nube como Heroku (Cloud Application Platform | Heroku)

En lugar de aprender todo esto de un libro, use un sistema de autoaprendizaje en línea como FreeCodeCamp http://freecodecamp.com

Answer 2

• Puede comenzar con una documentación css, una guía de estilo de identidad visual (puede estar en html, pdf o impreso) o algo así. Asumiremos que el lenguaje visual para la empresa ya está de alguna manera definido. Si no necesita un lenguaje visual personalizado, omita este paso.
• Si no hay ningún CSS escrito anteriormente, tendría que escribir uno. Usaría SASS y, en general, construiría sobre una biblioteca ya existente (ej. Un tema para bootstrap). Por supuesto, también querrá place normalize.css para restablecer estilos y aumentar la fidelidad entre navegadores.
• Comenzamos ahora a escribir el html: hacerlo también puede requerir escribir css adicionales sobre la marcha. Cada módulo de un sitio (encabezado, pie de página) se escribe primero en html simple, pero de acuerdo con el CMS (wordpress, vanilla PHP o incluso servicios como tumblr o blogger) el código final puede incluir muchas partes que no son html. Algunos marcos, como react.js o node.js, están construidos para que pueda escribir su sitio de agujero en javascript (no tengo experiencia en este tipo de marcos, así que esto es todo lo que voy a hacer).
• Si está creando una aplicación web, también escribiría mucho javascript. Generalmente se usa jQuery, aunque parece que ahora se está volviendo menos popular. Probablemente cargaría una gran cantidad de datos dinámicamente (Ajax) para evitar volver a cargar la página de agujeros para insertar nuevos datos (¿recuerda cómo solían recargar los sitios antiguos después de enviar un comentario? ¡Ahora algunos sitios web se actualizan casi por completo sin recargar!).
• Cada cms, lenguaje de programación o marco tiene una forma de desarrollarse localmente, a menos que estemos hablando de un servicio web. Por lo general, probaría mucho su sitio para asegurarse de que funciona (especialmente importante para las aplicaciones web). Una versión local de su sitio, o la versión de prueba, es la versión de desarrollo. La versión final en vivo es la versión de producción. Como regla general, está haciendo un buen trabajo si la diferencia entre esos dos es mínima =)
• Dado que hay muchos CMS, lenguajes de programación y tipo de aplicaciones que desarrollaría, la configuración real del sitio puede variar MUCHO. ¡Ni siquiera cubrimos el creador visual de sitios web como blockity o readymag, ni el robot en la cuadrícula que diseña blogs de acuerdo con la naturaleza del contenido que proporciona, ni siquiera las aplicaciones web que diseñan aplicaciones web!

Entonces, este proceso ahora es realmente accesible, pero es difícil dominarlo. Cada año llegan nuevos marcos y mantenerse al día con las últimas tecnologías es difícil.

Descargo de responsabilidad: Ese es un enfoque muy básico de lo que he observado y experimentado al hacer sitios web y probar con tecnologías web en los últimos dos años. No tengo experiencia trabajando en equipos y las tecnologías que uso no tienen nada que ver con las tecnologías que usan las grandes compañías tecnológicas, solo las ideas de un usuario regular con casi ningún fondo de programación.

Gracias por la A2A

Answer 3

Ahora es más fácil comenzar con un marco css como bootstrap o fundación, que ya tiene puntos de interrupción receptivos, configuraciones de columna, formularios y barras de navegación, etc., y distribuye sus filas y columnas como una estructura alámbrica usando ese marco, y luego comience a agregar gráficos y colores reales a sus filas existentes.