No entiendo el desarrollo web / móvil. ¿Diseñas, luego codificas lo que acabas de diseñar? ¿Como funciona?

Sí, en el escenario más simple, codificaría desde su diseño. Por lo general, primero habría pasado por un proceso de planificación y desarrollado un mapa del sitio y wireframes primero. Esto guiaría el diseño.

Imaginemos un sitio web estático simple con 3 tipos de páginas, la página de inicio, las páginas de inicio de sección y las páginas interiores. Usted, como diseñador, podría darme un archivo de Photoshop en capas con diseños para cada tipo de página. Idealmente, alguien también me proporcionará contenido aprobado, como archivos de texto y fotos que lo acompañen.

Tomaría esas páginas y las usaría como mi guía.

  1. Abriría el archivo para la página interior y vería cómo están organizados los elementos.
  2. Luego abriría mi editor y comenzaría a crear un archivo HTML para incluir elementos como un encabezado, logotipo, título, menú principal, barra lateral, área de contenido principal, etc. Este paso es como enmarcar una casa. Quiero asegurarme de poner todo en el orden correcto. Lo guardaré como algo como history.html, que podría ser una de mis páginas internas.
  3. Crearé un nuevo archivo para mi hoja de estilo principal y comenzaré a agregar el CSS a este archivo que controlará el loo, el posicionamiento, el tamaño del texto, los colores, etc. del HTML. Me referiré con frecuencia a mi archivo de diseño para verificar dimensiones, colores, etc. y para tomar activos como imágenes de fondo o logotipos.
  4. Trabajando de arriba hacia abajo, comenzaré a agregar contenido a la página. (Texto e imágenes, enlaces, etc.)
  5. Cargaré el archivo HTML y CSS en mi servidor web para ver cómo se ve hasta ahora.
  6. Seguiré editando el HTML y CSS y subiré el archivo hasta que se vea bien. Una vez que lo hace, se convierte en mi diseño maestro para páginas interiores. Puedo copiar eso y reemplazar el contenido para crear las otras páginas interiores.
  7. Abriré los archivos de diseño para los otros tipos de página y seguiré el mismo proceso, pero comenzaré editando una copia de mi página interior maestra ya que algunos de esos elementos serán los mismos para los otros tipos de página.

Esa es una vista simplificada del proceso. El sitio también puede incluir JavaScript, PHP o algo más para incluir características particulares. Si el sitio responde a dispositivos móviles, es posible que también esté trabajando con archivos de diseño para versiones móviles. Por ejemplo, podría usar un diseño de una columna para teléfonos pequeños y un diseño de 3 columnas para escritorio.

Si el sitio requiere más funcionalidad de back-end, como bases de datos y scripts, podría trabajar en el proyecto con un desarrollador de back-end y compartiríamos el código entre nosotros para que las cosas funcionen. Necesitaríamos comunicarnos entre nosotros. O podría hacerlo todo yo mismo si tengo las habilidades necesarias.

Por ejemplo, si el sitio tiene un formulario de consulta que enviará un correo electrónico al propietario del sitio y pondrá una copia en una base de datos, entonces necesitaré tener una base de datos configurada y necesitaré algún tipo de script para procesar el formulario . Como desarrollador front-end necesitaré información sobre el script que pueda incluir en mi HTML. Como desarrollador de back-end, necesitaré saber qué campos hay en el formulario, para poder incluirlos en el script y la base de datos.

Parte del trabajo de back-end tendrá que hacerse temprano, algunos vendrán más tarde. Depende del proyecto. Si tenemos un desarrollador front-end y un desarrollador back-end trabajando en equipo, se unirán para determinar el orden en el que deben realizarse las tareas. Hay una cierta cantidad de ida y vuelta en esto.

Normalmente construyo sitios de WordPress, que maneja muchos de mis requisitos de back-end, así que comenzaré instalando WordPress y mi base de datos. Luego crearé mi tema (una colección de archivos de plantilla) y usaré complementos y scripts para agregar características. El contenido se agregaría a través del panel de control de WordPress.

En todo lo que haces, el diseño es primordial antes de la implementación:

  • Si desea construir una casa en la que los humanos vivirán, será mejor que la diseñe (un arquitecto) primero antes de poner los cimientos y luego comenzar a construir. Construir una casa sin un diseño cuidadoso podría resultar desastroso, como bien sabrá.
  • Del mismo modo, si necesita alimentarse, primero “diseñará” su comida en su mente antes de cocinarla o comprarla. En este caso, su “diseño” implicará decidir sobre cosas como ¿qué estoy comiendo? bajo en carbohidratos o alto en grasas? proteínas? simple o de tres platos? comiendo en casa o en un restaurante? etc)
  • Como último ejemplo, para ir a la escuela y obtener una educación formal más allá de la escuela secundaria, deberá “diseñar” sus elecciones para que pueda tomar una decisión inteligente sobre qué disciplina estudiar a medida que va a obtener una educación superior .

Así que, en general, siempre es bueno diseñar primero su software antes de construirlo.

Pero sepa también que el diseño está en varios niveles:

  • diseño de bases de datos
  • diseño de interfaz de usuario
  • diseño de experiencia de usuario
  • arquitectura de seguridad
  • diseño de reglas de negocio
  • diseño de protocolos de comunicación de proceso / módulo / datos
  • etc.

En su mayoría, las primeras etapas del diseño implican maquetas relativamente simples de las pruebas de concepto más básicas, que se comparten con la mayor cantidad posible de interesados ​​para obtener comentarios útiles que le permitirán pasar a la implementación real.

Y en todas las etapas, es importante saber que la iteración continua y la revisión serán necesarias a medida que se acerque a entregar el producto deseado con las características y el comportamiento deseados.

Mis mejores deseos 🙂

Para el desarrollo web / móvil, la mayoría de las empresas ahora utilizan la gestión de proyectos ágiles y el desarrollo de software. Ágil es un gran tema, que debe ser estudiado por cualquier persona interesada en el desarrollo web.

Sin embargo, con respecto a la pregunta, el desarrollo ahora generalmente comienza con la definición de las características que se desean escribiendo ‘historias de usuario’ y dibujando maquetas ‘wireframe’ antes de que comience la codificación.

En estos días, las mejores prácticas son obtener primero un MVP (producto viable mínimo) frente a los usuarios reales y utilizar sus comentarios para impulsar el proceso. Esto significa que necesita destilar su sitio / aplicación a sus funciones más esenciales y construir la interfaz más simple posible para implementar esas funciones. Luego, a medida que recibe comentarios de los usuarios, continúa agregando funcionalidad o eliminándola, y su producto crece con las necesidades de sus usuarios.

Depende del tipo de persona que eres y de cómo trabajas. Algunas personas diseñan el front end primero (también conocido como la interfaz de usuario) y algunas personas pueden hacer que el backend funcione primero.

La forma en que lo hago es que primero me burlo de la interfaz de usuario, se la muestro a los clientes y hago que jueguen con ella. Luego pueden brindar comentarios sobre la apariencia de la interfaz de usuario y luego puede cambiarla para que coincida con lo que desean.

Ahora no tiene que hacerlo de esta manera porque su aplicación debe funcionar de la misma manera, sin importar el front-end que coloque sobre ella.

More Interesting

Estoy buscando contratar a mi primer asociado de ventas solo por comisión para mi creciente empresa de diseño web. ¿Qué buscan los vendedores en una empresa y qué información les gusta tener? ¿Y también qué debo esperar y estar preparado?

Cómo comenzar un diseño de sitio web

Quiero renovar y rediseñar el sitio web de mi negocio en Vancouver. ¿A qué empresa local de diseño web debo ir?

Estoy buscando ingresar al diseño web como freelance, ¿alguien puede compartir sus experiencias y conectarme con algunos tutoriales / cursos gratuitos en línea?

Estoy dispuesto a dedicar al menos 12 horas cada día en un año para aprender el desarrollo web completo, ¿cómo podría comenzar?

He terminado HTML, CSS y JavaScript. Ahora quiero hacer que mi sitio web responda. Entonces, ¿qué debo aprender y dónde?

Quiero implementar un sistema de preguntas frecuentes en mi sitio. ¿Cúal me recomiendas?

Si uso Squarespace, ¿puedo crear un sitio para juegos?

Vengo de un entorno no tecnológico y estoy interesado en aprender el desarrollo web. ¿Alguien puede guiarme por dónde empezar?

Quiero ser diseñador web. Sé HTML y CSS. ¿Qué debería hacer ahora?

Estoy interesado en el desarrollo de iOS. ¿Qué idiomas necesito aprender? ¿Cuánto tiempo tardará?

Si quiero ser un desarrollador front-end, ¿tengo que conocer PS o todas las demás cosas de diseño?

¿Por qué utilizo un índice z en CSS?

¿Quiero diseñar un sitio web para mi negocio? Alguien sabe Diseñador de sitios web bueno y barato.

Quiero hacer un curso de diseño web. ¿Qué instituto sería mejor en Bangalore?