¿Cuáles son las mejores prácticas al diseñar un sitio web receptivo en Sketch?

Answer 1

Como la única respuesta aquí ahora está desactualizada, me gustaría agregar una nueva respuesta.

Sketch ahora tiene una herramienta de restricciones para fijar la posición y los tamaños a un tablero de arte.

Algunas prácticas recomendadas al usar esta herramienta después de establecer restricciones en una mesa de trabajo de escritorio, cambiar el tamaño de la mesa de trabajo para que sea más pequeña y más grande para detectar si los elementos se rompen.

Determine si puede arreglar la ruptura aplicando restricciones de manera diferente y si no puede, duplique la mesa de trabajo, modifíquela más allá del punto en el que se rompe y luego vuelva a diseñar su diseño para que se ajuste bien en esa mesa de trabajo más estrecha.

De aquí proviene el término “punto de quiebre”.

Es probable que tenga una mesa de trabajo para computadora de escritorio, tableta y dispositivo móvil. Y puede estirar estas mesas de trabajo a para ver cómo se distribuyen dentro de sus tamaños relativos.

Answer 2

Hay una plantilla para un diseño web receptivo en el menú principal de la aplicación. Sketch no tiene un motor de cambio de tamaño dinámico de ningún tipo como otros programas como Axure RP. Eso significa que tendrá que diseñar su sitio en mesas de trabajo separadas para cada tamaño. (escritorio, tableta, móvil)

En cuanto a las mejores prácticas, debe diseñar su proyecto teniendo en cuenta algunas consideraciones sobre la plataforma web, si aún no ha hecho un proyecto similar antes: si ese es el caso, intente comprender la plataforma web para lo que es, sus limitaciones haz que sea lo que es: no es un lienzo abierto para la creatividad, sino una plataforma bien definida donde puedes ser eficaz y elegante con tus diseños.

Intente echar un vistazo a los marcos receptivos como Bootstrap o incluso pregunte a sus desarrolladores qué utilizarán y quédese con un diseño que se ajuste a la plataforma y que sea una representación realista de sus componentes y funcionalidad general.