Proceso de diseño frontend

Muchas gracias por todo y que te vaya bién.
Un saludo

Efectivamente, cuanto más te especializas puede que estés restringiendo más el mercado potencial, pero realmente solo estás filtrándolo, quedando lo que más te interese (en mi caso, diseño web).

Y claro, no se puede generalizar, cada circunstancia personal es única y cada uno toma sus decisiones acorde a sus necesidades.

No te preocupes que no hay una edad para empezar con algo, solo importan las ganas con las que se coja. Verdad verdadera.

De todas maneras espero que te haya servido el resto del post para orientarte un poco en el proceso que llevo haciendo desde hace más de 5 años. :)

Estoy de acuerdo con tu exposición y te lo agradezco, pero ojala pudiera especializarme. En la mayoría de las empresas en las que he trabajado, hay que saber hacer casi de todo.
Es un poco frustante porque los avances tecnológicos son apabullantes y hay que estar al quite de todo, pero es que no hay más remedio.
Supongo que trabajarás es una empresa grande donde hay varias secciones, pero date cuenta que una pyme es dificil que se modularice asi.
Soy diseñador gráfico hace bastante tiempo y aunque tengo ya la cuarentena , estoy reconvirtiendome al diseño y desarrollo web .
Bueno seguramente será muy pretensioso meterme de cabeza en este sector pero para mi es apasionante y necesario, pero con un poco de esfuerzo voy comprendiendo la programación básica.

Hola,

Php ya entraría dentro de la programación de servidor, es decir, (atención, opinión puramente personal) digamos que es "fácil" hacer algo en Php, pero también es fácil cagarla si no sabes lo que haces, por eso, si no eres programador, dejaría Php para los programadores, lo cual no quiere decir que no esté bien saber algo. No obstante si creo que si te quieres meter en el mundo web, considero necesario saber bien HTML, CSS y JS (jQuery realmente), de ahí que considere que es mejor dejar Php para "los programadores" como también aconsejo a los programadores dejar a los diseñadores, el diseño.

Esto no tiene por que ser siempre así y lo considero válido si es que quieres especializarte en el mundo Web/App. Si quieres ser diseñador editorial, web, etc. todo al mismo tiempo, lo considero inviable si no es bajando considerablemente la calidad media de los ámbitos: "Aprendiz de todo, maestro de nada". Creo que hoy en día la especialización es muy importante. Creo que fue a alguien de este foro que le leí lo de, para conseguir un buen trabajo, especialízate; para conseguir un trabajo, haz de todo.

Al margen de este apunte, mi proceso involucra unas cuantos pasos más, conservando tus pasos añadiría:

1. Objetivos de la web y mapa del sitio.

1a. Identificación del Objetivo: ¿Conseguir registros?, ¿Presentar productos?, ¿Vender X?. Esto se debería de saber de antemano porque será lo que quiera conseguir tu cliente con su web (a veces tienen las expectativas muy altas, ojo, cuidado).

1b. Recopilación de todo el material (textos, imágenes y/o futuras secciones que quieran incluso si no tiene contenidos por el momento).

1c. ¡¡¡Análisis de la competencia!!! (Puntos fuertes y flacos). No intentes inventar la Rueda, ya está inventada, tu objetivo es mejorarla/optimizarla.

1d. Análisis de Contenidos, como presentar todo de la manera más óptima (optimización de secciones/textos, redundancias, eliminar ruido en general que distraiga de lo importante: el objetivo). Elegir el mensaje principal o lo más importante. En caso de ausencia intentar conseguir el material faltante, si es información que no puedes obtener por ti, díselo al cliente, el conoce mejor que nadie su negocio.

1e. ¡¡¡Análisis de Requisitos!!!. ¿En qué navegadores tiene que funcionar correctamente?, ¿Responsive?, ¿Va a ser una tienda Online?, ¿Magento, Prestashop?, ¿Va a tener un Blog?. ¿Wordpress, incluso Tumblr?, ¿LOPD?, ¿Analítica Web? ¿Google Analytics?.

2. Diseño gráfico de las páginas.

Esto siempre después de analizar a la competencia, análisis de requisitos y tener muy claro como vas a estructurar todo. Todo lo anterior va a condicionar tu diseño, sí o sí.
Y aun así este paso podría ser también el 2, 3, 4 o más, porque es bastante probable que haya que rehacer el diseño en varias versiones hasta conseguir lo que el cliente quiere (con un límite) o hasta que cumplas todo lo definido anteriormente.

Cuando tengas una idea/solución "innovadora" que no se te había ocurrido antes, vuelves al ¡¡¡Análisis de requisitos!!! y estudias/piensas cómo vas a trasladar eso a HTML, si es viable técnicamente (por ej. para los navegadores objetivo) y si compensa el esfuerzo de tiempo (dinero) en él.

Cada decisión que tomes que tenga un motivo claro, y no simplemente porque sea bonito, porque es posible que el cliente te lo pregunte y/o te lo pida cambiar, y tú has de razonarle el motivo por el que has tomado esta decisión. Una web no es un cuadro, el objetivo de la web no puede estar supeditado al diseño, si no al revés. Aquí es donde muchos grandes diseñadores se pegan el batacazo en la "web" y se crean las polémicas en este foro (xD).

3. Creación del libro de estilos.

¿Libro de estilos para una web?. Puede ser más util para el programador (si eres tú u otro) que para tu cliente, excepto que este sea un cliente muy grande. No sé si vale la pena nada más que para destacar el tipo de fuente a usar, colores, etc. Pero vaya, creo que es muchísimo trabajo que la mayoría de las Pymes, no van a utilizar. (El mundo Web en esto es diferente a cuando haces el Branding o Papelería de una empresa, no hace falta detallar esto porque no va a ir a una imprenta y tú vas a intentar que te caiga a ti el mantenimiento de la web, ¿no?).

4. Maquetación.

Aquí poco más, ya que todo estará definidísimo de antemano, puede ser que te encuentres con alguna imposibilidad técnica que te obligue a cambiar un poco el diseño, ya sea algo esperado (degradación progresiva) o inesperado (bug concreto que te oblige a replantear algún detalle en concreto del diseño, esto es raro, las limitaciones de los navegadores suelen ser bastante conocidas y documentadas, aparte de que esto lo tendrías que haber pensado en el ¡¡¡Análisis de requisitos!!!)

*Algunos de estos pasos no se circunscriben únicamente al diseño propiamente dicho si no que se acercan más al UX, Usabilidad, etc.

Ahora que lo veo, creo que esto me daría para un post de un blog en un futuro. Probablemente lo desarrolle más adelante :)

Ahora las preguntas:

¿Diseñadores que lo hacen todo en 4 horas?. Claro, y seguro que en menos, pero el resultado será el que será. También hay gente que hace logos en 5 minutos (de reloj), pero el resultado (por llamarlo resultado, más bien engendro o típica página clon entre negocios distintos en los que solo cambian los colores y el logo xD). La experiencia será la que te haga rebajar los tiempos de todo ese proceso, en mi caso, actualmente mucho de las limitaciones de navegadores, como presentar alguna cosa, suelo tenerlas muy trilladas y no tengo que volver a analizar todo eso, así que como todo, solo la experiencia te hará ser más eficiente. En cualquier caso 4 horas, es un chiste. Y ya me imagino como serán sus páginas web. El cliente tendrá lo que pague, ni más, ni menos.

Frameworks:
Hay muchísimos, pero yo siempre uso el mismo: HTML5Boilerplate. No necesito más, me gusta este, me he acostumbrado a él y está en continua mejora. Personalmente no utilizo grids, quizás debería pero tampoco los echo de menos "Cada maestrillo con su cuadernillo".

CSS:
Hago los CSS mientras maqueto. Esto puede variar ya que luego hay herramientas que te dan código CSS como CSS-Hat. Útil para ahorrarte tiempo con códigos de degradados y cosas así, pero no suple los conocimientos CSS, simplemente es una ayuda. Si estás aprendiendo olvídate de las herramientas cómodas y rápidas, tienes que sufrir y sudar para aprender.

Y creo que ya está todo, ¿Domestika paga por palabra o por letra? ¿Cómo va el tema? xD

PD: Mucho texto, he intentado no tener faltas de ortografía pero quizás se me ha colado alguna, sorry :)