Fui contratado como desarrollador web / de aplicaciones. Quieren que cree maquetas de aspecto muy profesional. Tengo poca o ninguna experiencia con Photoshop (y ellos lo sabían). ¿Qué debo hacer?

¿Que haces? ¡No entres en pánico!

Crear maquetas es divertido : puedes ponerte en el lugar de los usuarios / clientes. Piense en cómo y qué les gustaría ver cuando visiten su web / aplicación.

Buenas noticias de que no necesitas saber Photoshop para crear maquetas o wireframes. Hay mejores herramientas para esto:

  • Sketch es una herramienta muy popular y fácil de usar (para usuarios de Mac)
  • Para la creación de prototipos, puede usar herramientas como InVision, UXPin, Justinmind
  • Para diagramas puede usar Cacoo, Lucidchart, draw.io

Recuerda:

Las maquetas / wireframes son una representación de cómo se posicionan sus elementos (imágenes, texto, botones, etc.) en la página y cómo se relacionan entre sí. Ver ejemplo a continuación.

Una vez que aprueben las maquetas iniciales, puede comenzar a preocuparse por los detalles, como colores, fuentes, iconos, etc. No es un proceso rápido. Puede que tenga que rehacerlo varias veces para hacerlo bien.

¡Buena suerte!

Haz lo mejor que puedas para comunicar el descanso verbalmente porque hay una diferencia entre el desarrollador y el diseñador de la interfaz de usuario. Pero si es muy importante y altamente rentable para usted (de cualquier manera), puede obtener un diseñador de interfaz de usuario en Fiverr y obtener un diseño de maqueta según sus requisitos.

Pero, en general, le recomendaría convencerlos de contratar a un diseñador de interfaz de usuario, ya que no es su trabajo.

Hola,

Estoy de acuerdo con Neil Proctor con la creación de maquetas a través de: herramienta de creación de prototipos de maquetas en línea, Wireframe e interfaz de usuario

También hay constructores de arrastrar y soltar si necesita crear un prototipo de diseño en un CMS como WordPress. Cuando termine, use una herramienta de captura de pantalla como Web Page Photo en Chrome.

Después de tomar la captura de pantalla, cree un archivo index.html y agréguelo con la imagen en una carpeta con el código a continuación.

Cuando termine, cargue la carpeta en un dominio en vivo y envíela al cliente 🙂

Si necesita ayuda de diseño web con respecto a las maquetas, etc., envíeme un correo electrónico, le daré algunos consejos más. Salud.

…………………………………………………………………… ..

El título de tu maqueta

* {relleno: 0; margen: 0;}

img {max-width: auto; altura máxima: 100%;}

Explíqueles que un desarrollador web / de aplicaciones trabaja con código para crear páginas web. La necesidad de contratar a un diseñador y artistas gráficos para que las páginas se vean bien y se vean profesionales.

Muéstreles sitios de aspecto profesional, Amazon, Google, NBC, CNN … y distinga para ellos que los buenos gráficos están hechos por un artista gráfico profesional, toda la página fue visualizada por un diseñador,

Su trabajo es hacer que los gráficos y el texto aparezcan en varios navegadores / teléfonos / tabletas tal como los visualiza el diseñador, utilizando los gráficos proporcionados por el diseñador gráfico. Además, se asegura de que estas páginas se sirvan, de manera razonable, dentro de un tiempo razonable y se entreguen de forma segura al navegador / tableta / teléfono.

¡Estas de suerte! Como desarrollador web, he tenido este mismo problema, y ​​afortunadamente he encontrado una gran solución para usted:

Herramienta de prototipos de maquetas en línea, estructura alámbrica e interfaz de usuario · Moqups

Tienen excelentes componentes de plantilla preconstruidos para todo tipo de elementos de la interfaz de usuario.

Muy buen servicio y un precio decente también.

¡use mockuplus -Prototype más rápido, más inteligente y más fácil con Mockplus!

es increíblemente fácil (1 día de aprendizaje es suficiente) y efectivo: lo he usado para una aplicación móvil.

Adobe Experience Design es agradable. Muy simple y puedes crear maquetas interactivas que simulan una aplicación real.

No sé si externalizaría el trabajo de diseño de mi trabajo a Fiverr. Creo que tienes que aprender a diseñar tú mismo. ¿Qué pasaría si le mostraras a tu equipo una maqueta y ellos pidieran cambios y los pidieran realmente rápido? ¿Ahora tienes que localizar a un chico en Paraguay? Encuentra inspiración, observa, copia, repite. Aprenda sobre tipografía, composición y solicite revisiones de otros diseñadores.

En mi experiencia, los desarrolladores web / de aplicaciones deberían estar bien en el diseño porque hay pequeñas decisiones que tomar cuando la maqueta de alta fidelidad, proporcionada por el diseñador principal, no contiene todos los casos límite. No desea acudir a su diseñador cada hora para preguntas sobre el relleno. Por lo tanto, si su empleador sabe que usted es ecológico en el área de diseño, debe brindarle apoyo y usted debe demostrar su esfuerzo. Mejorarás con el tiempo.

Para empezar, les recuerda que no pueden hacer maquetas. Pero en cualquier caso, puede usar balsamiq, es fácil de usar. Como desarrollador (back end) debes conocer un poco de front end.

Por otro lado, check inVision es gratis para una maqueta. Le sugiero que haga que su empresa pague una suscripción.

Otra alternativa es subirse a Weebly o Wix y crear un MVP usando esas aplicaciones.

Hay muchos productos disponibles para maquetas.

Espero que esto ayude.

Hay algunas herramientas gratuitas de maquetas y marcos de alambre que puede encontrar en línea que pueden ayudar a acelerar el proceso con menos curva de aprendizaje que Photoshop.

Si no utiliza esas herramientas, puede crear algo a mano (sin vergüenza en lápiz y papel) o puede codificar una estructura metálica y usar texto de relleno e imágenes de marcador de posición (Imágenes de marcador de posición rápidas y simples, texto y más, por ejemplo).

Usted compra una copia de Balsamiq Mockups o se suscribe a la versión web de la misma: Balsamiq Mockups

Crea maquetas de mierda y luego contrata a alguien en trabajo pesado o Fiverr para que se vean profesionales a bajo precio.

Si le pagan por hora, cargue al cliente unas horas extra de su tarifa por hora y mantenga la diferencia. Si tomó una cantidad fija, puede pedirle al cliente que la pague o puede pagarla de su bolsillo.

Buena suerte.

Use algunas plantillas de HTML5 UP como sus maquetas. Luego use el código de lo que más le guste.

Esto es lo que intentaría hacer:

  • Repasar mis habilidades de Photoshop. O Inkscape, supongo. Eso sería más fácil.
  • Trabaja muy duro para crear algunas buenas maquetas. Aprende mucho en el camino.
  • Impresiona con mis resultados.
  • Lucro.

Si tienes miedo de aprender cosas nuevas bajo presión, entonces el desarrollo de software no es para ti. Recoja y haga lo que le han pedido, o encuentre una línea de trabajo diferente donde no sea necesario aprender cosas nuevas.

Además, un desarrollador que puede hacer más que solo escribir código vale más para la empresa.

Te puedo ayudar con algunas maquetas http://www.essencecartoon.com

Ir a Fiverr – Mercado de servicios independientes para The Lean Entrepreneur

Puede ser una estafa. Desafortunadamente, muchos subcontratistas, con el pretexto de una entrevista, obtienen trabajo gratis. Solo ten cuidado y haz más preguntas.

Dígales. Y tal vez haga algunas maquetas lo mejor que pueda. Cuanto más lo hagas, más fácil será.

Hay muchos foros, tutoriales de YouTube sobre el uso de Photoshop.

Primero aprendería los conceptos básicos y cómo encontrar e instalar fuentes.

More Interesting

Cómo convertirse en un desarrollador web pago en un año

¿Cómo promover un complemento de WordPress de recargo? Qué sitios se pueden colocar en la publicación del complemento

Si no quiero hacer desarrollo móvil o web, pero quiero hacer algunos proyectos para mostrar a los empleadores, ¿cuál sería mejor seguir?

¿Cuál es una manera de crear un sitio web como MyFridgeFood o Supercook usando WordPress?

Como aficionado al diseño y desarrollo web, quiero crear mi nuevo sitio web con WordPress. ¿Cómo podría configurar esto mientras mi dominio todavía está alojado en otra plataforma y migrarlo rápidamente a WordPress, con poco tiempo de inactividad?

¿Por qué necesito ingenieros incluso después de construir mi plataforma?

¿A qué recursos debe referirse un desarrollador web para obtener ayuda y mantenerse actualizado?

Cómo hacer un mapa y usarlo en mi archivo HTML

¿Qué sitios web ayudan a estudiar diseño web desde casa?

Cómo elegir el proveedor de alojamiento web adecuado

Creo que Internet Explorer 11 es mejor que Edge. ¿Puedes demostrarme que estoy equivocado?

He creado un formulario en HTML. ¿Cómo creo un archivo PHP para enviar el contacto a mi correo electrónico?

Cómo aprender cómo se diseñó el framework Ruby on Rails

Quiero desarrollar un sitio web de compras en dotnet, pero no sé nada sobre dotnet. ¿Dónde debería comenzar a estudiar? ¿Cuáles son algunos libros electrónicos gratuitos que me pueden ayudar? (principalmente libros electrónicos para ASP.NET).

Cómo comenzar a crear un sitio web