Los mejores consejos y herramientas para construir su primer sitio de WordPress

Tengo una confesión que hacer hoy: no soy muy buen diseñador web. Nunca he tenido ningún entrenamiento formal, soy completamente autodidacta. Mi oficio es escribir, y elegí el diseño web como un elemento necesario para ser un escritor independiente y no tener el presupuesto para un sitio web adecuado. Decidí desde el día 1 que prefería tener un sitio web de bricolaje decente que me gustara (pero con algunos posibles "errores") que pagar por un sitio web de bajo presupuesto que odiaba y no podía ajustar con el tiempo. Después de todo, todos sabemos cómo pueden ser los proveedores de servicios de bajo presupuesto.

Así comenzó mi entrada en el diseño web DIY amateur. Rápidamente, el proceso del sitio web de bricolaje despertó mi interés en el diseño web. Todavía no soy un "verdadero diseñador", pero sé lo suficiente de los fundamentos para maximizar mi flujo de trabajo, abrirme camino en un tema que me gusta e implementar los ajustes específicos que quiero.

Este es el trato: no soy (y probablemente nunca lo seré) un diseñador web profesional. Y puede ser difícil encontrar recursos para personas que hacen bricolaje como yo: personas que son lo suficientemente inteligentes como para resolver la mayoría de las cosas y están dispuestas a dedicar tiempo, pero que no tienen una formación técnica real.

Estas son algunas de las mejores herramientas y recursos para el diseñador web DIY que he adquirido en el camino. Si tienes una inclinación similar, ¡este es para ti!

Creadores de sitios web y temas personalizables

Personalmente, no soy un gran admirador de los creadores de sitios web: me encanta WordPress y me gusta tener mucho más control que el que ofrecen la mayoría de los creadores de sitios web. Si le gusta la idea de arrastrar y soltar para obtener el sitio exacto que desea sin toda la agonía, eche un vistazo al tema Divi para WordPress. También puede encontrar una gran cantidad de temas personalizables para WordPress.

Cómo crear un tema hijo de WordPress

Por lo general, es casi imposible encontrar el tema perfecto; siempre hay algunas modificaciones que deben hacerse. Entonces, ¿por qué no simplemente tomar un buen tema predeterminado de WordPress, como Twenty Fifteen, y ma...

Cada diseñador tiene su tema favorito, y el favorito de este (no) diseñador DIY es GeneratePress. Puede hacer prácticamente cualquier cosa que imagino, los complementos valen la pena al 100 % y son muy asequibles, los tutoriales en video responden el 98 % de mis preguntas y el desarrollador (Tom) es muy activo y receptivo en los foros de soporte. He usado este tema durante 2 años y no podría estar más feliz con él.

Cuidando las apariencias

En estos días, incluso yo sé que el diseño receptivo y compatible con dispositivos móviles es una necesidad absoluta. He visitado sitios web en mi teléfono que no eran móviles ni receptivos, y no es bonito. En estos días, la mayoría de los temas tienen un elemento receptivo; asegúrese de que el suyo también lo tenga. Y luego, mientras está en el proceso de creación, use una herramienta como Duo, Screenify o Browser Shots para asegurarse de que el diseño de su sitio se vea bien en cualquier dispositivo.

¿Alguna vez has usado una guía de estilo? Es una hoja de referencia para todos los elementos visuales de su diseño: las fuentes, los estilos, el formato de los títulos y los colores de su sitio web. Es extremadamente útil tener una referencia a medida que crea y modifica su sitio web, y puede generar el suyo propio con Stylify Me.

Esto puede parecer insondable en este punto de su carrera de diseño de bricolaje, o tal vez no, pero llegará el día en que desee realizar algunas modificaciones en el CSS para modificar la apariencia de algunos elementos específicos. Cuando llegue el momento, puede sumergirse en tutoriales, buscar soporte de su tema o recurrir a un generador de CSS para obtener el código que desea. También puede consultar Webflow, un editor de arrastrar y soltar que le permite crear lo que desea ver en la página y luego genera el código CSS por usted. Sin embargo, es un servicio pago que tiende a ir en contra del bricolaje.

Esta es una papa pequeña, pero asegúrese de que su sitio tenga un favicon. Puede usar este generador de favicon u obtener un complemento de favicon simple para su sitio de WordPress para que el proceso sea súper simple. (Prefiero mucho más la ruta del complemento, en mi opinión poco profesional).

El favorito de todos: fuentes

Las fuentes son el hijo de oro del diseño web; parece que todo el mundo ama las tipografías. Pero si no sabe lo que está haciendo, las fuentes pueden ser algo intimidantes. Comprar una fuente, instalarla, incluso modificarla... sí. Si solo desea que su sitio se vea bien, puede instalar Google Fonts y hacer uso de una base de datos bastante sólida de tipos de letra compatibles con la web. También es fácil encontrar combinaciones de fuentes de Google que se vean bien con una simple búsqueda en la web.

Type-Finder es un sitio que le hace una breve serie de preguntas y luego le ofrece sugerencias de fuentes. Elija y elija los que le gusten, y estará en el buen camino. Facilita la elección de fuentes, especialmente si no está bien versado en fuentes y teoría de fuentes.

Cuando se sienta valiente y esté listo para obtener la fuente exacta que desea para sus encabezados, pines y más, consulte Glyphr. Es un editor de fuentes y es genial.

Herramientas de flujo de trabajo

Cuando eres un diseñador de bricolaje volando por el asiento de tus pantalones, rara vez piensas en el flujo de trabajo. Pero he aprendido (de la manera difícil) que algunos elementos de flujo de trabajo de diseño pueden hacer que su diseño web de bricolaje sea mucho menos un dolor de cabeza.

13 herramientas basadas en navegador que todo diseñador debería tener en su caja de herramientas

Ah, la aplicación basada en navegador. Es un software sólido que se actualiza solo. No tienes que preocuparte por descargar cosas. Y, quizás lo más fantástico de todo, se puede acceder a la aplicación de su elección en cualquier ma...

Lo primero que querrás adoptar de los “diseñadores web reales” es el concepto de wireframes. Los wireframes pueden ser tan simples como dibujar cada página en papel o tan complejos como las cuadrículas en Adobe Photoshop. Para mis propósitos, por lo general, los bocetos en papel son suficientes (después de todo, nunca me vuelvo demasiado técnico con mis diseños), pero si prefiere ver las cosas de manera más formal en una cuadrícula digital, consulte Mockflow (que es un servicio pago) o Moqups.

Otro lugar donde me quedo atascado es dónde irán las palabras y cómo se verán, antes de que tenga la copia escrita. Para esto, un generador de texto ficticio es genial. Tener una copia en su sitio mientras lo está construyendo hace que sea fácil de evaluar sin obsesionarse con las palabras que realmente serán (lo cual es mi caída personal).

Cuando llegue el momento de dejar de jugar con líneas y palabras y empezar a jugar con el color, tienes algunas opciones divertidas. Los selectores de color son algunas de mis cosas favoritas: elijo un color y luego el selector de color escupe algunas combinaciones de colores geniales. Adobe y Color Wizard son dos opciones divertidas para jugar.

Si sus selectores de color no son suficientes para usted, puede usar algo como Pictaculous. Cargue una imagen que le guste y escupirá un tema de color extraído de la imagen. ¡Es genial!

Eso no es todo

No hay fin a las herramientas de diseño que son excelentes para los diseñadores de bricolaje, pero estas son las cosas que he encontrado que hacen la vida mucho más fácil para el diseñador principiante. ¿Cuál es la herramienta que te gustaría tener?

Ebook gratuito: 25 herramientas imprescindibles para diseñadores web

El conjunto de herramientas de un diseñador puede ser la clave de su éxito, pero ¿cómo sabe qué herramientas incluir en su flujo de trabajo? Creemos que estas 25 herramientas son imprescindibles para cualquier diseñador web exitoso.