UI Mockup y herramienta de creación de esquemas para la interfaz de usuario de la aplicación Mac OS X [cerrado]

Estoy buscando obtener información de diseñadores experimentados, ya que mi trabajo principal gira en torno a la codificación y no tanto al diseño...

¿Qué buenas herramientas existen que se pueden usar para simular algunas interfaces de estilo os x? Sería preferible algo más moderno, no una herramienta que eran las rodillas de las abejas en 2006 o algo así.

Además, si es una aplicación para Mac, entonces aún mejor. ¡Gracias por adelantado!

No tengo ninguna experiencia en diseño de interfaz de usuario, pero diré: tenga cuidado con lo bien que se ve desde el principio. No importa cuántas veces les diga, comenzarán a editar la copia y la alineación de píxeles en lugar de apegarse al panorama general y los conceptos básicos que espera resolver.
Gracias por la anotación. Entonces, ¿estás diciendo que lo mantengas muy básico porque cuanto mejor se vea, más se obsesionarán con el aspecto que con la funcionalidad?
Sí. Creo que es por eso que muchas de las herramientas de maqueta tienen una sensación de "cuaderno de bocetos".
¿Está preguntando por maquetas de diseño de interfaz de usuario de alta fidelidad o maquetas de estructura alámbrica esbozadas? ¿O ambos? ¿O tampoco?
Voy a segundo horatio. Me parece que mostrar maquetas que son de alta fidelidad (lo que significa que se parecen mucho a la realidad) puede ser una gran trampa y, a menudo, conduce a muchos malentendidos por parte de los clientes. También alienta al cliente a centrarse en los colores y las fuentes en lugar de cosas como los objetivos comerciales, la usabilidad y las tareas del usuario.

Respuestas (3)

Creo que esta pregunta se ha hecho antes, pero aún no la he encontrado y si realiza una búsqueda en Google de herramientas de creación de esquemas o herramientas de maquetas , obtendrá una lista enorme para revisar. Dicho esto, algunas personas usan Omnigraffle para maquetas que, si tuviera que usar, lo haría.

Otras herramientas:

Dependiendo de lo que esté haciendo y tenga una cantidad decente de habilidades de diseño, crearía su propia maqueta en Illustrator o Photoshop.

Editar según tu comentario

Gracias abuelo. La razón por la que pregunté fue debido a la abrumadora cantidad de estas herramientas disponibles, estoy tratando de encontrar la mejor utilizada por la mayoría de mis diseñadores. Tanto como Photoshop e Illustrator son los de facto.

Algunos dirían que Onmigraffle o balsamiq son los más populares, pero si está preocupado por el diseño, consideraría implementar el diseño en el navegador porque daría como resultado el mejor resultado posible y sería más fácil al pasar de la maqueta a un sitio de trabajo. Solo tenga en cuenta que siempre habrá alguna variación entre el diseño en papel y el código real. No se preocupe por el CSS o las imágenes, algo similar que funcione en el dispositivo previsto:

ingrese la descripción de la imagen aquí

Gracias abuelo. La razón por la que pregunté fue debido a la abrumadora cantidad de estas herramientas disponibles, estoy tratando de encontrar la mejor utilizada por la mayoría de mis diseñadores. Tanto como Photoshop e Illustrator son los de facto.
no habrá nada mejor que diseñar en el navegador al que he hecho la transición. Dicho esto, enmarcaría los componentes básicos que necesitará y las animaciones, luego puede presentar un prototipo funcional pero mantenerlo simple, tal vez en blanco y negro. Editaré mi respuesta para reflejar un ejemplo.
Realmente me gustaría saber qué herramienta se usó para crear la estructura alámbrica del modelo, en la parte inferior de su respuesta. ¡Se ve genial!
Sander: Supongo que es la plantilla graffletopia.com/stencils/1205 para Omnigraffle
Fwiw, el enlace de OmniGraffle da un error de "no disponible en la tienda de EE. UU. en este momento": enlace genérico a la página de 'Graffle de OmniGroup aquí .

¿Has intentado usar xCode Storyboards? No se puede obtener mucho más parecido a una aplicación de Apple que eso y xCode contiene todo tipo de elementos que se pueden poner en una aplicación OSX.

Acabo de intentar usar Omni-Graffle (versión 5) y tengo que decir que hay algunos obstáculos importantes si estás haciendo diseño de pantalla:

  1. Los tamaños de fuente no están en píxeles, ni son correctos: si introduzco un texto en OmniGraffle y le doy un tamaño de 12, luego exporto la pantalla como PNG y la abro en Photoshop, el tamaño del texto es en realidad 9 píxeles. Si ingreso 18, en Photoshop es 15, etc.

  2. Colores: la forma en que OmniGraffle maneja los colores no es buena. Se basa en el selector de color integrado de manzanas que da resultados inexactos. Por ejemplo: ejemplo, creo un rojo con 255 0 0 o #ff0000. Si ahora uso la herramienta de selección de color en OmniGraffle y hago clic en el rojo que acabo de crear, ahora es 242 0 0.

  3. Tamaño de pantalla: no puedes establecer un tamaño de pantalla en Pixel, solo en puntos (pt).

Ahora también estoy buscando una herramienta confiable de creación de esquemas y maquetas. Sin embargo, no puedo culpar a OmniGraffle. En realidad, es una herramienta de diagramas de flujo y no está pensada para estructuras de alambre.

Algunas notas: los tamaños de fuente no son los mismos que el tamaño de la letra en píxeles. Omnigraffle es realmente para wireframing, no para diseño visual de alta fidelidad.