homefinance blog
Hay momentos en que tienes que diseñar algo a toda prisa, y los diseñadores no están en ninguna parte. En momentos como estos, no podemos quedarnos y llorar, debemos piratear el diseño. Aquí hay algunos consejos de diseño de WordPress convenientes, que configurarán cualquier desarrollador para el éxito, incluso si hay una fecha límite apremiante. Elija su configuración sabiamente si tiene prisa, encuentre un tema de WordPress con un aspecto preproatido y páginas demostrativas. Use constructores visuales como Elementor o Beaver Builder para organizar y atascar rápidamente el aspecto y agregar elementos preexistentes. Al hacerlo, puede tener un sitio funcional en funcionamiento en unas pocas horas. Sí, puede parecer un poco genérico si no tienes cuidado, pero funciona. Considere agregar diseño y animaciones personalizadas para que sean poseerlos.
Sea sutil, este es probablemente uno de los consejos más importantes que cualquiera puede darle. Los diseñadores que tienen ojos para la estética y el diseño pueden volverse locos de vez en cuando. Sin embargo, si no ha nacido con la capacidad innata de llamar a 6 versiones azules, es más seguro permanecer sutil. Pruebe el diseño minimalista, con un toque de acentos de color y algunas animaciones sutiles aquí o allá. Ejemplos de excelente diseño minimalista para que funcione un estilo minimalista, debe hacer un esfuerzo adicional en detalles. Afortunadamente para usted, los detalles de los que hablo pueden ser elegantes con algo con lo que está más familiarizado.
No use Photoshop o Illustrator si sabe que no es bueno en esto, he estado usando Photoshop durante más de 10 años y acabo de recibir “C” para un Upwork Photoshop. Imagine mi sorpresa cuando descubrí que uso activamente solo el 30% de las funcionalidades de Photoshop. Lo mismo es cierto para AI. Lo que quiero decir es que, si eres bueno con el código y CSS, usa CSS. Te ahorrará mucho tiempo. Use aplicaciones y herramientas con las que se sienta cómodo. Esto lo ayudará a diseñar más rápido y de manera más eficiente. Algunas personas consideran que el canal es una solución verdaderamente simple e intuitiva. Aprenda SASS o menos SASS y menos son lenguajes de extensión CSS. Agregan características y funcionalidades adicionales en CSS a mano, como variables, funciones, imbrictos, operaciones aritméticas y mezclas. Consulte sus sitios oficiales para obtener información detallada y documentación. https://sass-lang.com/ http://lesscs.org/ no es algo que hará en unos días, lo sé, pero vale la pena considerarlo para el futuro. Una vez que aprenda una de estas extensiones de idiomas, mejorará y acelerará su flujo de trabajo. Adapte el código de otras personas a sus necesidades Hay muchas personas maravillosas que comparten su código gratuito. Si está en una crisis del tiempo, cambiar un diseño existente podría ser la respuesta a sus oraciones. Mi lugar favorito son los patrones de diseño en CodePen. Encontrará botones, acordeones, diapositivas, modelos y más contados con contabilidad.
Use imágenes SVG siempre que las imágenes SVG sean gráficos vectoriales escalables. Úselos para el logotipo, los iconos y otras imágenes gráficas en su sitio no perderán su calidad incluso cuando se amplíen. Atención a todos los SVG Power: las imágenes SVG se pueden crear y editar con cualquier editor de texto
Las imágenes SVG se pueden buscar, indexar, guiones y tabletas
Las imágenes SVG son escalables
Las imágenes SVG se pueden imprimir en alta calidad en cualquier resolución
Las imágenes SVG se pueden ampliar
Los gráficos SVG no pierden calidad si aumentan o se redimensionan
SVG es un estándar abierto
Los archivos SVG son xml puro
Use bibliotecas y marcos de JavaScript, espero con todo lo que no sea uno de esos desarrolladores de WordPress que todavía usan PHP exclusivamente. JavaScript es el lenguaje de programación de esta edad y por una razón.
Parte de la razón por la cual JavaScript es tan popular es que tiene una gran cantidad de bibliotecas, marcos y extensiones de código abierto. Al aprovechar estos recursos gratuitos, trabajará más rápido, mejor y más eficiente. ¿Quieres saber cómo agregar bibliotecas a WordPress correctamente? Afortunadamente, tenemos exactamente el trabajo para usted: un tutorial sobre cómo poner a JavaScript en la cola en WordPress. Aquí está la lista de bibliotecas de terceros JS que ya están incluidas en WordPress. Puede usarlos de inmediato, sin ponerlos en la cola.
Backbone.js
Codemirror
Corte de pelo
JQuery
JQuery.ImageAleEelect
JQuery.jcrop
jQuery
Swfuload (anticuado)
Caja gruesa
Tinymce
Elija 2 colores Elija un color primario y un color secundario que coincida bien entre sí. Use aplicaciones como la paleta de materiales y la computadora color para ayudarlo en esta tarea. Use sus colores primarios y secundarios de manera consistente en todos los elementos para los que desea tener una mancha de color. Para fondos y texto, agregue colores neutros a la paleta en consecuencia. No agregue demasiados colores en la mezcla. Manténgalo mínimo. Elija 2 fuentes Elija dos familias de fuentes complementarias que usará en su sitio web. Los sans-serif son mejores para títulos y títulos, mientras que las fuentes serif son mejores para el contenido textual. Escribí más sobre cómo elegir un par de fuentes y una paleta de colores en mi publicación anterior. Paga por un logotipo, lo siento, te lo dije, pero diseñar un logotipo no es algo que debas intentar hacer por tu cuenta. Un logotipo es el elemento visual más importante de cada empresa. Es la identidad visual de su empresa y le gustaría que se haga correctamente. Abstenerse de usar creadores de logotipos genéricos y pagar por un diseñador. Contrata a un profesional independiente si es necesario. Si el dinero es el problema, trate de encontrar un estudiante de diseño que esté lleno de ideas nuevas, pero que probablemente perciba mucho menos.
¿Elige fotos y videos de buena calidad que su cliente no le dio fotos para el sitio web? O tal vez lo hicieron, pero no estaban concentrados, pixelados y simplemente más allá de lo horrible, ¿no? Estábamos todos allí. La solución más simple es el uso de imágenes de stock de alta calidad. Hay muchas bibliotecas de acciones gratuitas y premium para elegir. Mi favorito personal es Unsplash para fotos de archivo gratuitas y Freepik para todo tipo de recursos. Las bibliotecas de fotos gratuitas más populares y probablemente más grandes son https://www.pexels.com/ y https://stocksnap.io/mults entre las fotos de stock en estos sitios se usan como contenido demostrativo en temas de WordPress. Evite usar las fotos que vio porque su sitio se verá genérico. Si está buscando algo específico y menos “USAT”, recomiendo sitios como https://www.reshot.com/ que ha elegido cuidadosamente fotos que no se ven. Otra opción es https://nos.twnsnd.co/ que contiene fotos antiguas de archivos públicos y se puede usar sin restricciones de derechos de autor. Para fotos y videos premium, las primeras paradas deberían ser: https://www.shutterstock.com/ y https://www.gettyimages.com/
Vale la pena ver este sitio alemán: https://www.photocase.com no es barato cuando se busca acciones impecables. Si encuentra una imagen de stock premium o un video perfecto, póngalo. Valdrá la pena. Puede usar filtros de imagen CSS para mejorar sus fotos de Stock y su sitio de WordPress. Optimizar las imágenes No olvide optimizar las imágenes web. Al descargar una foto de archivo, reduzca al tamaño que usará antes de cargar en WordPress. Para el franqueo y la optimización adicional, recomiendo el complemento Smush. Si usa Photoshop o de manera similar a las fotos de retocar, asegúrese de usar la opción de rescate web. Guarde fotos e imágenes con muchos colores como archivos .jpg y guarde gráficos PNG. Cuando guarda para la web, tiene la opción de elegir la calidad de un archivo JPG y PNG. No existe una regla real en este uso de la pantalla previa y asegúrese de no haber dañado por completo la calidad de la imagen antes de guardarla.
Tiene una llamada clara de CTA (CTA) es su forma de interactuar con el usuario. En cierto modo, si los usuarios hacen clic en un CTA, cumplen con el propósito de un sitio web. Es por eso que debe asegurarse de que los botones CTA sean claramente visibles, legibles y legibles. Sea consistente con la estilización de los botones. ¿Dónde poner CTA?
Los especialistas en marketing tienen un método científico completo. Depende claramente del contenido de su sitio, mi único consejo es resaltarlo. No te olvides de los usuarios de tus teléfonos móviles. Las mismas reglas de CTA no se aplican para dispositivos móviles y de escritorio. Consulte las mejores prácticas para CTA Mobile. Las animaciones son geniales cuando las animaciones simples de CSS o JavaScript se hacen correctamente realmente pueden elevar su diseño y hacer que se vea pulido y profesional. El secreto es, nuevamente, ser sutil y no exagerar. Buenos ejemplos: https://www.monogranofelicetti.it/en/ https://affinity.pt/en/about/ Ejemplo “Lo peor que podría hacer”: https: //www.lingscars. Com/icons-small Jugadores con grandes roles Los íconos son una parte extremadamente importante de su sitio, especialmente si escuchaste mis consejos y optaste por el diseño minimalista. Los iconos elegantes pueden levantar efectivamente todo su diseño web. Como desarrollador, debe saber que los buenos íconos son bastante difíciles de crear. Ni siquiera piensas en hacerlo desde cero. Encuentre algunos íconos gratuitos en bibliotecas de iconos como https://www.flaticon.com/ o https:
//icons8.com/ Prefiero Flaticon porque puedes encontrar paquetes de iconos del mismo autor. Encuentre un paquete de iconos que coincidan con el logotipo o el estilo de su sitio y le ahorrará muchos problemas. Nunca mezcle iconos de diferentes paquetes: simplemente se verá poco profesional. Para puntos de estilo adicionales, considere animar iconos SVG. La mejor manera de hacerlo es con Snap, una biblioteca JavaScript creada para animar gráficos SVG. Si, por algún motivo, no desea codificar en absoluto, puede usar la aplicación SVGator. Es una aplicación pagada con un mes de prueba gratuito y vale la pena verificar. El diablo está en detalles: para que un estilo minimalista se vea bien, debes volarte las mangas y poner algo extra en los detalles que importan. Todo esto se puede hacer usando el código. No todo en blanco y negro evita el color negro puro #000 o blanco puro #fff. Son demasiado ásperos para los ojos. Use variantes ligeramente más suaves, como #EFEFF para White y #181818 en lugar de negro. Los bordes son antiguos, intente usar la propiedad CSS Box Shadow en lugar de un borde en un artículo. Hará que su diseño sea más elegante y sutil. Los bordes sólidos de 1 PX o 2 PX pueden verse geniales y retro en algunos modelos. Sin embargo, nunca use bordes punteados o interrumpidos, por favor. Stilet tu
Los divisores suelen ser elementos aburridos que pueden tener un impacto positivo real si agrega un pequeño código. El creador de Pages Elementor también tiene una característica muy interesante para organizar los separadores. Los cuadrados son aburridos. No seas un cuadrado. Los modelos irregulares atraen más atención. Úselos con moderación para CTA o botones de jerarquía alta. Aarmolar que su menú de hamburguesas con hamburguesas sea una necesidad para dispositivos móviles, pero pueden verse muy bien en pantallas anchas. Encontré una elegante colección de hamburguesas en CodePen que me gustaría compartir con ustedes. Si no sabe cómo hacer un menú de hamburguesas, lea un tutorial en este artículo. Use degrades en lugar de usar un fondo de una sola color, ¿por qué no probar los degrades? Puede crear fácilmente sus propios gradientes con el editor de gradiente de Colorzilla y simplemente copiar el código CSS a su sitio web de WordPress. No te vuelvas loco con la cantidad de colores en un gradiente y ten cuidado de no chocar completamente los colores. Si encuentra problemas con la creación de su propia combinación de colores o no sabe qué funciona bien, puede optar por usar degradaciones prefabricadas gratuitas en cualquier momento. Gradiens también se puede usar como superposición para una foto de fondo, iconos, botones y otros elementos de diseño. Este es un muy buen truco para crear consistencia. Si desea superponerse con un gradiente sobre una imagen de fondo, use la propiedad y
: Antes (SASS) para agregar el gradiente y simplemente reducir su opacidad al 60 – 70%. Así es como se ve: para recapitular siempre es mejor contratar a un diseñador profesional, pero en tiempos de necesidad, ¡debemos manejarlo! Si tiene prisa, elija la configuración sabiamente. Instale un tema minimalista rápido e importe contenido demostrativo para él. Atraiga los detalles para que su diseño se vea más profesional y menos genérico. Use sus fortalezas (código) tanto como sea posible. Elija siempre combinaciones de colores probados e imágenes de alta calidad y imágenes de video de stock. Recuerde usar los paquetes de iconos del mismo autor y en el mismo estilo general que su sitio paga por un logotipo. Lo más importante, no olvide ser consistente y sutil con su diseño. ¡Feliz diseño de código! Espero que estos consejos lo ayuden en momentos de necesidad. ¿Tienes consejos adicionales que quieres compartir? ¿Puedes tener una pregunta o dos? ¡La sección de comentarios a continuación te llama!
Etiquetas:
diseño
Desarrolladores de WordPress
puntas
Diseño web
Tendencias de diseño web
