Uso de boceto para diseñar hermosos sitios web de WordPress

En 2008, la Compañía de Desarrollo de Codificación Bohemia desconocida creó y creó Sketch. La aplicación se perdió en la agitación general de Internet durante mucho tiempo, pero recientemente despegó, y por una buena razón. Sketch 3 ahora no solo es una alternativa viable a Photoshop e Illustrator, sino que lo supera de muchas maneras, especialmente si se enfoca en su diseño web. Es obvio que el boceto se hizo teniendo en cuenta los sitios web, pero la atención a los detalles y la atención en la interfaz de uso lo hace excelente para muchos tipos de trabajos de diseño. Se integra incluso con muchos servicios diferentes, incluida la invisión.
Lo uso para muchos de mis proyectos y no puedo recomendarlo lo suficiente.

Bienvenido a una de las mejores herramientas de diseño de sitios web que usará. En este artículo, presentaré exactamente lo que es capaz de bosquejar y enfatizaré algunas de las características que me hicieron elegir en el lugar Photoshop para la mayoría de mis necesidades de diseño. Antes de comenzar antes de comenzar a comprender cómo usar Sketch, es importante enfatizar que solo está disponible para los usuarios de OS X. Desafortunadamente, los desarrolladores no piensan que aceptan boceto en Windows o Linux. Por lo general, tratamos de satisfacer a los usuarios de Windows y Mac, pero en este caso es difícil hacer esto, porque no hay nada que abordar la calidad del boceto en estas otras plataformas.
Quizás la aplicación más cercana es Adobe Fireworks, que se centra en el desarrollo web. Desafortunadamente, Adobe interrumpió este producto, pero aún puede usarlo. Es bastante sólido y sin errores, pero el problema es que no habrá nuevas versiones. Uso de boceto: insertar elementos La primera acción que probablemente hará cuando comience a usar boceto por primera vez es insertar un nuevo elemento. Las más fáciles de comenzar son las formas, de las cuales son ocho: línea, flecha, rectángulo, ovalada, rectángulo redondeado, estrella, polígono y triángulo. A la derecha, puede ver un rectángulo con algunas propiedades modificadas. Al usar el panel de propiedades del inspector, puede cambiar muchos aspectos de un formulario, que incluye el tamaño, la posición, el radio del borde, la opacidad, la mezcla, los rellenos, los bordes, los bordes, paraguas y más. Lo mejor es que puede asignar más rellenos, bordes y sombras para crear modelos más complejos.
Una forma y algunas propiedades. Al principio pensé que el uso del panel del Inspector sería engorroso, pero resulta que estaba equivocado. Al crear un nuevo sitio web, desea darle a un desarrollador un diseño perfectamente planificado. Si el desarrollador puede medir la distancia entre dos widgets o la distancia entre el título de publicación y los metadatos, no tendrá que volver a usted para averiguar esos detalles y la pequeña información.

El panel de inspección le permite colocar las cosas perfectamente píxeles. ¡Junto con excelentes guías automáticas, nunca pensarás en el éxito automático de Photoshop! Si es una persona vectorial, puede usar curvas Bezier como en Photoshop o Illustrator para crear cualquier forma que desee. Encontré un excelente video sobre cómo funcionan las curvas Bezier si siempre te preguntas qué está sucediendo en el fondo, ¡es súper intensivo! No dibujar nada usando curvas Bezier.
Como puede ver en la captura de pantalla anterior, puede agregar más fondos, más censores, puede cambiar la opacidad, agregar sombras y puede hacer todas las otras cosas grandes con formas personalizadas, como puede para formularios prefabricados.

La inserción de texto e imágenes es, por supuesto, bastante estándar. Simplemente toque “T”, haga clic y comience a escribir. Puede insertar imágenes simplemente deslizándolas y colocándolas en la aplicación o copiando y pegando desde el portapapeles. Lo que me gusta al colocar las imágenes es lo fácil que es cortar una imagen después de colocarla. Haga doble clic, seleccione y haga clic en Cortar. Arts of Art es otra característica de mi favorito. Le permiten compartimentar su área de trabajo en diferentes segmentos. Esto es ideal para crear una visualización paralela en el escritorio y el móvil. Hay varias pinturas de arte prefabricadas disponibles para su uso, pero puede crear sus propias personalizadas.
Insertar símbolos es una característica fuerte que le permite trabajar más rápido y más consistente. Un símbolo es un tipo especial de objeto agrupado. Puede crear un botón “Comprar” y convertirlo en un símbolo. Este símbolo contendría el fondo y el texto del botón. Luego puede insertar este símbolo en cualquier lugar y la edición de uno de ellos los actualizará todos los demás. Veremos esto más detallado a continuación. Cree nuevos objetos en Sketch con precisión.
Organización del trabajo La organización es otra área en la que Sketch sobresale mucho más allá de Photoshop, en mi opinión. Hay cinco características que puede usar para crear un documento súper organizado y lógico: páginas, pisos, capas, grupos y símbolos.
Las páginas se pueden usar para mostrar diferentes páginas de un sitio, por ejemplo. Cada página, por supuesto, tiene su propio conjunto de capas. Es como tener diferentes hojas de cálculo en un documento de Google. Las artes se pueden usar para organizar diferentes vistas de su diseño. También utilicé paneles de arte para documentar elementos de un diseño. Creé una hoja para botones, uno para tipografía, uno para elementos comunes, etc. Las capas funcionan lo mismo que en Photoshop o cualquier otro software activado para capas. Las capas se ordenan de arriba a abajo, cuanto más alta sea la capa en la lista, más cerca de la “cara” de la visión. Las capas pueden ser objetos simples (texto, forma, una imagen, etc.), o pueden ser grupos o símbolos.

Los grupos se agrupan en capas simples. Simplemente ordene o haga clic en las capas para seleccionar más y haga clic en el botón de grupo (o presione Order + G) para crear un grupo. Una vez que se crea un grupo, todas las capas que contiene ingresarán una carpeta que pueda (y debe) nombrarlo. Al hacer clic en cualquier elemento en un grupo en la vista principal, le permitirá mover todo el grupo, muy útil. Historias, paneles de arte, grupos y símbolos Puede hacer doble clic en el área principal para ingresar a un grupo y llegar a un elemento en él para manipular solo ese elemento.
Los símbolos son grupos especiales. Un símbolo funciona igual que los grupos, pero cambiar un símbolo en cualquier lugar del documento actualizará automáticamente todos los demás símbolos del mismo tipo. Esto es muy útil para crear botones y otros elementos comunes que se presentan en su diseño. El texto siempre es una parte importante de un diseño y algo que Photoshop no lo hace fácil. Sketch le permite agregar estilos de texto, lo que hará que su trabajo sea mucho más consistente. Funciona exactamente como cabría esperar de las páginas de Microsoft Word o Apple. Seleccione una capa de texto y elija un estilo para que cambie todas sus propiedades al instante. Lo mejor, modificar un estilo donde el texto se actualizará con el mismo estilo en todas partes. Esto es excelente para crear widgets, páginas y otros materiales basados ​​en texto en múltiples pinturas de dibujo y varias páginas
Los complementos de boceto para mejorar aún más el boceto, puede usar complementos. Hay muchos disponibles en la página de arado y encontrará mucho más en GitHub. Uno de los favoritos es la línea de base del texto alineada. La alineación del texto es poco difícil de hacer, porque la alineación vertical no lo hace correctamente debido a la altura del elemento de texto. Este complemento calcula la diferencia y alinea el texto exactamente en el medio del elemento elegido. Botones perfectamente alineados, ¡aquí estoy! También me gusta el complemento de boceto Unsplash It. Dibuja un rectángulo y toma una foto al azar del sorprendente Unsplash. Eche un vistazo a esta demostración del creador: una demostración del complemento de boceto Unsplash IT
Sketch Palettes es útil para proyectos que trabaja con una paleta de colores establecida (probablemente debería ser todos los proyectos). Puede guardar y cargar los colores muy fácilmente y luego seleccionarlos en cualquier momento, según las expectativas. La creación de datos de prueba siempre es una gran parte de nuestro trabajo como diseñadores y desarrolladores. En el trabajo de diseño, consiste en gran medida en una gran cantidad de copias -ipat y luego escribiendo. Hay algunos complementos excelentes que ayudan a esta tarea. Personas para Sketch le permite generar datos de usuario directamente en su documento, así es como (gracias al autor del proyecto): una demostración del complemento para el boceto Me gusta cómo se hicieron los complementos y para las necesidades de diseño de nicho. ArtWork Fetcher le permite seleccionar elementos, especificar a un autor y luego esperar a que las portadas del álbum se extraan de Last.fm directamente a su diseño.

Una demostración de la obra de arte de Sketch de complementos Fecher Hay muchos otros complementos realmente útiles, pero creo que realmente muestran el poder del boceto, la capacidad de usar servicios de terceros para permitirle trabajar más rápido y mejor.Si tiene algunos complementos favoritos para Sketch, ¡distribuye en los comentarios!Entonces, ¿por qué es mejor boceto?Para mí, el boceto era una mano de Dios.¡Finalmente, dejé Photoshop por completo para el diseño web!
Tengo varias razones para esto, que analizaré en detalle, para que pueda ver de dónde vengo: 1. Puede ser un boceto muy preciso que le brinde una mejor precisión en todo momento. Un ejemplo es la cuadrícula personalizable y las mejores guías automáticas, que realmente ayudan, en lugar de estar en el camino (lo que le permite establecer elementos equidistantes). También me gusta la capacidad de diseñar por números, para ingresar valores de píxeles. Esto conduce a diseños perfectos para píxeles, que minimizan el tiempo de comunicación y maximizan la eficiencia y la claridad. 2. Es un enfoque vectorial fácil Me encantan algunos vectores, pero lo que me gusta aún más es la capacidad de trabajar con ellos fácilmente. Photoshop hace que esto sea complicado innecesario por algunas razones. Tengo la última versión de Photoshop CC y cuando intento agregar un icono SVG a un diseño, recibo el error: “No podría colocar el documento” 1445368362_bubble.svg “porque ningún analizador o formato de archivo puede abrir el archivo”. Estoy seguro de que la compañía que hace un editor de vectores dedicado podría entender esto. En Sketch, simplemente toco y coloco mi icono SVG en la aplicación y se muestra como era de esperar. Otro aspecto de la edición vectorial que me gusta son los cuatro botones para la Unión, la disminución, la intersección y la diferencia. Esto me permite seleccionar dos formas y combinarlas para crear algo hermoso. Para hacer el globo a continuación, agregué un rectángulo, luego un triángulo. Utilicé guías inteligentes para colocarlas correctamente, las seleccioné a ambos y usé la unión para convertirlas en una sola forma. Demasiado fácil. La forma combinada en boceto
3. Acepte la importación de SVG. Ya he hablado sobre cómo puede deslizar y colocar imágenes SVG (uso un poco de iconos) directamente en la aplicación.Me sorprendió gratamente cuando pude extender la carpeta de imagen para alcanzar todas las capas y editar el icono en sí. Edición de una capa de un icono SVG

4. Qué maravillosa es enmascarar la máscara es otra área donde el boceto hace exactamente: ¡no esperaba que fuera tan suave!Para crear una imagen redondeada, todo lo que tenía que hacer era dibujar un círculo sobre ella, seleccionar ambas capas y presione el botón de máscara.¡Voila, redondeada!Lo que sucede es muy obvio en el panel de capa, una gran ventaja para las personas que, como yo, no son realmente verdaderos diseñadores.
Una máscara circular aplicada en el boceto

5. El espaciado perfecto de los píxeles hay muchas situaciones en las que tendrá que distanciar las cosas de manera uniforme, y Sketch hace un trabajo maravilloso al ayudarlo a lograr esto. Cree objetos, seleccione, haga clic con el botón derecho y en la parte inferior del menú contextual, verá las opciones de distribución horizontal y vertical. Funciona como un encanto. Cada. Único. Tiempo. 6. El boceto de exportación es fácil está orgulloso de una opción de exportación extremadamente poderosa. Tanto que los tutoriales completos han parecido para mostrarle cómo obtener exactamente lo que desea. Puede exportar páginas completas, juntas e incluso elementos específicos. 7. Se escucha rápidamente informes sobre problemas de rendimiento en Sketch, pero deben haberse resuelto hasta que comencé a usar la aplicación, porque nunca tuve un problema, por el contrario. Hice un rediseño de un sitio a fines del año pasado y el archivo de Photoshop estaba en algún lugar de la región de 100 MB. Tengo un iMac bastante poderoso y, a veces, me asfixié, tengo que esperar años para algunas cosechas y obtener las actuaciones agitadas al llevar a cabo el documento. Ni siquiera quiero entrar en lo que sucedió cuando quería tragar muchos elementos (5-6 segundos de espera). Recreé el mismo diseño en Sketch y el archivo era de aproximadamente 25 MB, una cuarta parte del tamaño del archivo PSD. No experimenté absolutamente ningún retraso, sin importar lo que hice, todo fue mucho más rápido que en Photoshop. De hecho, seleccionamos todos los artículos en una página y los tragamos, inmediatamente fuimos 10px a la izquierda. Incluso podría hacer clic y tirar de todo, se renderizó sin problemas.
8. El punto óptimo para mí, hay algo intangible para bosquejar que lo haga mejor que cualquier cosa que haya usado para crear sitios web. Creo que gran parte de esto es que funciona como era de esperar. Tengo muchos ejemplos para demostrar esto. Puede agregar un rectángulo y un rectángulo redondeado por separado. En un caso, agregué un rectángulo normal y me di cuenta de que probablemente quisiera uno redondeado. En lugar de tener que eliminarlo y crear una nueva forma, descubrí que puedo controlar el radio del borde y solo agregué 3px. Reutilice los elementos y ahorre tiempo.

Inmediatamente después de eso, quería crear un rectángulo en el que solo se redondearon dos de las esquinas. Pensé que tendría que crear dos formas y peinarlas, pero me di cuenta de que el radio se puede controlar para cada esquina separada. No recuerdo todo, pero hubo al menos 5-6 momentos en los que realmente derramé una lágrima porque quería hacer algo de cierta manera y el boceto tenía la opción allí mismo, o estaba haciendo las cosas aún mejor. ¡No es mejor que eso! Sitios web creados con boceto utilicé el boceto personal para administrar el diseño de 3-4 proyectos de WordPress ahora, incluido el rediseño de un sitio web de biología molecular llamado Bio Bitesize y el rediseño futuro del popular blog tecnológico.
Reparación de Ghacks con boceto

Fleet Feet Sports Shoe Company también ha sido completamente diseñada en boceto:
Puedes decir que no fue diseñado por mí porque en realidad se ve bien

Además de algunos de estos ejemplos del mundo real, puede encontrar conceptos completos de sitios web de bocetos que puede usar como base para su propio diseño o simplemente para averiguar cómo otros hacen las cosas.Un excelente ejemplo es este concepto de cartera: el concepto de cartera en boceto.
Usando boceto para el próximo proyecto, comencé a usar Sketch a principios de este año y, como puede ver, me convertí en fanático.Si está interesado en lo que otros creen, hay muchas reseñas.Estas son algunas de las historias personales que pueden ser interesantes si piensas en ir:
Un año usando el boceto

Un mes con boceto 3
Descubrimiento del boceto

Sketch vs Photoshop
Organización de boceto 3 Desarrollo de iOS

¿Qué pensamos sobre Sketch 3 por primera vez?
Era una de esas aplicaciones en las que ni siquiera tenía una curva de aprendizaje (o simplemente una muy superficial). Me gustó al instante porque me permitió hacer lo que quería, exactamente como quería y las funciones que siempre quise en Photoshop. Los desarrolladores de bocetos han trabajado continuamente para remediar los errores que aparecen, casi siempre con éxito. El escenario más rápido es que, justo antes de remediar muchos errores, muchas personas lo han revisado. Casi todas las reseñas que leí han dicho algo como “Aunque Sketch tiene muchos errores, nuestro equipo ha decidido que es mejor para el diseño”. Siento lo mismo, cualquier lado negativo de esta aplicación es superado tan fácilmente por todo el asombro que contiene, que el paso de regreso a todo lo demás parece completamente inútil. ¿Entonces es hora de renunciar a Photoshop? Si eres un diseñador web en el corazón, entonces tal vez. Photoshop tiene capacidades de edición de fotos avanzadas y muchas características adicionales que el boceto no tiene, pero la idea es que no es necesario. Todavía tengo Photoshop instalado, pero el próximo mes me rendiré por completo y usaré Pixelmar. Haz todo lo que necesito a una fracción del costo. Si aún no has probado el boceto, te insto mucho a que hagas esto. Una vez que lo haya usado durante un período, escríbanos una fila en los comentarios y díganos qué piensa. Si tiene excelentes recomendaciones de complementos, lo agradecería y siempre busca excelentes extensiones.

Etiquetas:
diseño
bosquejo