¿Técnica para diseñar un sitio web a partir de una muestra?

Question

Estoy empezando mi carrera como freelance como desarrollador web/diseñador web

En algunas pruebas, el cliente pone un enlace a un sitio web y dice que le gustaría ese estilo.

¿Cómo enfocaría ese problema?

Lo que hago es escribir HTML/CSS e intentar hacer una copia exacta del sitio web?

Luego vuelvo y comparo mi muestra con el original.

No estoy seguro de si eso es lo que hay que hacer.

Cualquier ayuda es muy recomendable.

Answer 1

En primer lugar, tendrá que hablar mucho con el cliente. Lo que creas que debes preguntar, pídelo. NUNCA presupongas que quiere algo. Pregunte, pregunte y pregunte. Si te das cuenta de que aburres al cliente, hay un 90% de probabilidades de que se trate de un mal cliente y al final tendrás problemas trabajando con este tipo de clientes. Los buenos clientes que quieren que su proyecto tenga éxito siempre tendrán tiempo para su proyecto. Nunca te dirá que estás haciendo una pregunta estúpida (a menos que sea realmente estúpida) e incluso repetirá las cosas que has preguntado antes.

Así que cuando dice que quiere un sitio web como XY, entonces quiere ese aspecto, UX e impresión en los usuarios. Ahora depende de ti y de tu experiencia hacerle las preguntas adecuadas. Por ejemplo: ¿Necesitas un backend? ¿Tiene alojamiento? ¿Quiere un sitio web basado en linux o en windows (para que pueda elegir la tecnología y el idioma)? y así sucesivamente.

A continuación, elabora una lista de todas las características que se convertirán en especificaciones del proyecto. Si algo no está claro, se pregunta al cliente. Si dice no sé, puedes recomendarle cosas.

Sea siempre sincero y realista en cuanto a los plazos. Si has seguido todos estos pasos y el cliente te deja, entonces tienes suerte: has descubierto al mal cliente a tiempo y no has perdido dinero, salvo unas horas de tu tiempo.

Answer 2

Yo lo hago de la siguiente manera:

1. Pida al cliente una serie de sitios (o ideas de diseño) que le gusten (Nota: pida al cliente que no se detenga en sitios que ofrezcan el mismo servicio que ellos).
2. Entonces me siento, miro su lista y pienso.
3. Una vez que tengo algunas ideas, creo una serie de diseños (originales) en Photoshop, quizá 2-3. También intento incluir un diseño "fresco" que tenga poco que ver con sus ideas.
4. Los envío (en formato jpgs o pdf) al cliente que los considere.
5. El cliente (por lo general) elige un diseño que nosotros seguimos desarrollando. A menudo dicen algo así como "me gusta el diseño 1, pero pon el menú del diseño 2 en su lugar".
6. Tras unas cuantas iteraciones de los pasos 4-5, se obtiene un diseño final con el que todos están satisfechos.
7. A continuación, se obtiene el diseño "firmado" o completamente acordado por el cliente.
8. Empieza a escribir el HTML, CSS, etc.

Si combina esto con una "especificación técnica" al mismo tiempo, su trabajo será mucho más fácil.

(Especificación técnica: qué hace; especificación de diseño: qué aspecto tiene).

Una vez que todo está acordado y usted ha construido el sitio, si el cliente luego quiere "adiciones" o "cambios", usted puede argumentar que esto no es lo que se acordó y, por lo tanto, añadir algunos cargos adicionales. Es una buena forma de evitar que el diseño se desplace.

Answer 3

Visión global no de alcance limitado.

Cuando un cliente te proporciona un enlace a un sitio web que le gusta, tienes que dar un paso atrás y mirarlo con perspectiva. sin formación los ojos. Pregúntate a ti mismo:

• ¿Por qué puede gustarles?
• ¿Qué tipo de colores utiliza el sitio?
• Cómo se ve la navegación
• ¿Cómo funciona la navegación para el lector?
• ¿Cómo se formatea el contenido?
• ¿Qué tipo de letra se utiliza?
• ¿Son visibles los efectos de la interfaz de usuario?

No lo haga alguna vez en estos sitios como diseñador o desarrollador para empezar. Tienes que ver el sitio como lo haría un usuario. No te preocupes por cómo se implementa algo. Busque conceptos utilizados en el sitio. Por ejemplo:

• Es un sitio de una sola página. Al cliente le pueden gustar los diseños de una página
• Utiliza una paleta de colores apagados y pastel. Es posible que el cliente no esté a favor de las combinaciones de colores brillantes y chillones.
• La navegación es desplegable en la parte superior. Puede que al cliente no le guste la navegación lateral.
• La navegación tiene efectos hover simplemente subrayados y los desplegables requieren un clic. Puede que al cliente no le guste el estilo de navegación "botón" ni los efectos hover elaborados.
• El contenido se presenta en tres columnas con una imagen principal. El cliente puede estar a favor de las columnas y querer la imagen principal.
• En la mayor parte del sitio se utiliza tipografía Sans Serif, aunque en algunos lugares se emplean titulares con script. Puede que al cliente no le gusten los tipos con gracias.
• El contenido se pulsa y se desliza. Hay imágenes animadas. Hay una ventana modal dentro de la página. El cliente puede querer más interactividad del lado del cliente en su conjunto.

En general, sólo tiene que hacerse una idea de la disposición general y nunca realmente sumergirse en el código del sitio específicamente. Se trata de hacerse una idea de lo que le interesa al cliente cuando éste tiene poca o ninguna idea de cómo funcionan las cosas. en realidad trabajo.

A partir de aquí, empieza a preguntar por los detalles: ¿Imaginaba un sitio de una sola página? ¿Quiere un tema de colores más pastel? ¿Cómo ve la interacción del contenido con los usuarios? etc.....

Los enlaces de referencia sólo se utilizan para referencia no deberías copiar ningún código de ellos en absoluto y en la mayoría de los casos ni siquiera necesitas mirar el código.