¬ŅBuscas ayuda con tu proyecto?
[email protected]
+51 984 656 072
Dise√Īo Gr√°fico y Dise√Īo Webs Per√ļ, para profesionales que tienen ansiedad por aprender Social Media, Branding, Creatividad, Contenidos, SEO

Dise√Īo web para principiantes – Gu√≠a completa 2022

Dise√Īo web para principiantes pdf da los primeros pasos en su carrera de dise√Īo web con esta gu√≠a completa para principiantes. Conozca las diferentes teor√≠as, reglas, mejores pr√°cticas y m√°s, y sum√©rjase en el conjunto de conocimientos que hemos preparado para usted.

El dise√Īo web es una profesi√≥n hermosa, llena de creatividad y singularidad. No solo hace que un sitio web se vea mejor, sino que tambi√©n tiene el poder de influir en opiniones y emociones. Por lo tanto, tiene una gran demanda y si alguna vez has querido aprender dise√Īo web, ¬°ahora es el momento! 

Pero el dise√Īo web incluye muchas teor√≠as, reglas, mejores pr√°cticas y otros matices que debe conocer, y dentro de este mar de conocimiento, uno puede perderse f√°cilmente. Por eso hemos creado una gu√≠a completa sobre dise√Īo web para principiantes. Aqu√≠ encontrar√° todo lo que necesita saber para comenzar su carrera de dise√Īo web. Empecemos.

¬ŅQu√© es el dise√Īo web?

El dise√Īo web es el proceso de creaci√≥n de la interfaz visual de un sitio web. En otras palabras, los dise√Īadores web crean todo lo que vemos en l√≠nea. El dise√Īo web no solo incluye la est√©tica, tambi√©n se refiere a la usabilidad de un sitio web o aplicaci√≥n m√≥vil, as√≠ como a la estructura y dise√Īo general.

El dise√Īo web es diferente del desarrollo web, que se refiere a la codificaci√≥n real que hace que un sitio web funcione. Los dise√Īadores web se enfocan en los aspectos visuales y de front-end de un sitio, lo que influye en su usabilidad y UX en general.

Hay dos objetivos principales en el dise√Īo web: 

  • Para que el sitio web se vea bien. 
  • Para ayudar a los visitantes a lograr f√°cilmente sus objetivos en el sitio.

T√©rminos comunes de dise√Īo web

Aqu√≠ es donde resulta √ļtil comprender algunos t√©rminos de dise√Īo web de uso com√ļn: 

Interfaz de usuario (UI)Lo que ven los visitantes cuando ingresan a un sitio web: el dise√Īo, la navegaci√≥n, las im√°genes, el color, la tipograf√≠a, etc.
Experiencia de usuario (UX)C√≥mo se sienten los visitantes cuando se mueven e interact√ļan con la interfaz de un sitio web. 
UsabilidadQu√© f√°cil es para los visitantes realizar tareas b√°sicas. Cuando hay fricci√≥n en el dise√Īo (desde gr√°ficos mal elegidos hasta men√ļs complicados), esto interrumpe la UX general.
dise√Īador webLa persona que dise√Īa la interfaz visual e interactiva de un sitio web.
desarrollador webLa persona que escribe el c√≥digo que convierte el dise√Īo visual en un sitio web funcional.

Como principiante, querr√° tener un buen manejo de los conceptos b√°sicos de UI y UX. M√°s adelante, si decide que le interesa centrarse en una de estas √°reas, puede seguir una carrera como especialista en dise√Īo y sube de nivel tu salario, tambi√©n.

Por ahora, concentrémonos en lo básico.

¬ŅCu√°les son los principios del dise√Īo web?

Gu√≠a de dise√Īo de paginas web para principiantes
Gu√≠a de dise√Īo de paginas web para principiantes

Los principios del dise√Īo web establecen las reglas del juego, por lo que esta deber√≠a ser su l√≠nea de base. Uno de los problemas de lanzarse a una nueva carrera es la abrumadora cantidad de cosas que aprender. Entonces, ¬Ņpor d√≥nde empiezas? 

Cada sitio web en el que trabaje debe cumplir con lo siguiente: 

Efecto de usabilidad est√©tica: la gente asume que un sitio web bellamente dise√Īado es m√°s f√°cil de usar que uno que no es atractivo o est√° desactualizado.

Ley de Jakob: la familiaridad genera confianza. Si existe coherencia en la forma en que se maneja un elemento de un sitio web a otro, no se desv√≠e de la norma. 

Ley de Fitt: Aumente la interacci√≥n y dise√Īe los objetivos t√°ctiles para que:

  • Son lo suficientemente grandes para encontrar. 
  • Son lo suficientemente grandes como para hacer clic sin errores. 
  • Est√°n colocados en un √°rea de f√°cil acceso.
  • Hay un amplio espacio entre varios objetivos t√°ctiles en un solo espacio.

Ley de Hick: Reduzca el abrumador y minimice la cantidad de pasos que dan los visitantes con: 

  • Menos opciones. 
  • Simplificaci√≥n de tareas complejas en pasos m√°s peque√Īos y manejables. 
  • Recomendaciones para la opci√≥n mejor / m√°s popular / de mayor valor. 

Ley de Pr√§gnanz: use formas y elementos reconocibles para evitar que los visitantes se confundan o se frustren cuando se encuentran con algo demasiado complejo para comprender.

Ley de Miller: minimice la sobrecarga visual organizando el contenido en grupos (con cinco a nueve elementos).

Leyes de dise√Īo Gestalt: el cerebro humano toma lo que ve y trata de darle sentido bas√°ndose en la l√≥gica y el orden, por lo que su dise√Īo debe ajustarse a las siguientes reglas de estructura y patr√≥n: 

  • Semejanza
  • Continuaci√≥n
  • Cierre
  • Proximidad
  • Figura / suelo
  • Simetr√≠a y orden

Efecto de posici√≥n de serie: coloque las partes m√°s importantes en la parte superior o inferior de una p√°gina web. Estos son los lugares m√°s memorables y con los que interactu√≥.

Regla de punta: la primera y la √ļltima impresi√≥n de un sitio web son las que m√°s recuerdan los visitantes. Si bien toda la experiencia debe ser de primera categor√≠a, la entrada de la p√°gina de inicio y el punto final de conversi√≥n deben ser impecables.

¬ŅQuiere explorar m√°s pr√°cticas recomendadas de dise√Īo web? 

¬ŅQu√© son los est√°ndares web?

Los est√°ndares web establecen las reglas para la web en su conjunto. Generalmente, giran en torno a los aspectos t√©cnicos de la construcci√≥n de un sitio web, con el objetivo principal de hacer de la web un lugar al que todos puedan acceder y disfrutar por igual. 

A diferencia de los principios de dise√Īo web que a menudo se derivan de estudios psicol√≥gicos y leyes, los est√°ndares web son en realidad establecidos y regulados por varios √≥rganos rectores. 

A la vanguardia de los est√°ndares web se encuentra una organizaci√≥n llamada Consorcio Mundial de la red (W3C), que est√° dirigido por Tim Berners-Lee (el tipo que invent√≥ la Web). 

Estos son los principales objetivos del W3C

  • P√°gina Web para todos : se logra mediante la creaci√≥n de sitios web accesibles y compatibles con todo el mundo.
  • Web on Everything : esto se refiere al dise√Īo web receptivo: compatibilidad total entre navegadores y dispositivos para cada sitio web.
  • P√°gina Web para una interacci√≥n enriquecida : pautas para las t√©cnicas y los lenguajes de programaci√≥n que se deben utilizar.
  • Web de datos y servicios : se refiere a la gesti√≥n de datos dentro y entre sitios web.
  • Web of Trust : la priorizaci√≥n de la seguridad y la privacidad en la web.

Aqu√≠ hay mucha orientaci√≥n sobre lo que debe y no debe hacer al crear sitios web. 

Dicho esto, es una buena idea dejar en suspenso la exploraci√≥n de este tema hasta que haya dominado todo lo dem√°s que necesita saber sobre el dise√Īo web para principiantes. No es que esto sea menos importante que el resto. Es solo que hay mucho que ver con la gesti√≥n t√©cnica de un sitio, que es una habilidad que no desarrollar√°s hasta m√°s tarde.

¬ŅCu√°les son las habilidades m√°s importantes para dominar?

Habilidades m√°s importantes en dise√Īo web para principiantes
Habilidades m√°s importantes en dise√Īo web para principiantes

Hablando de las habilidades que necesita para convertirse en dise√Īador web, establezcamos algunas prioridades. Los dividiremos en dos categor√≠as: habilidades duras y blandas.

Habilidades duras que necesitan los dise√Īadores web principiantes

Las habilidades duras se refieren al conocimiento t√©cnico y la t√©cnica. Estos son los m√°s importantes para dominar: 

  • Dise√Īo de interfaz de usuario: crea una interfaz atractiva y moderna.
  • Dise√Īo UX: cree un viaje en el sitio web y h√°galo sin fricciones.
  • Composici√≥n: dise√Īe un sitio web para que sea atractivo y f√°cil de seguir. 
  • Tipograf√≠a: seleccione y par de fuentes para establecer un estado de √°nimo y crear una interfaz legible.
  • Teor√≠a del color: desarrolle una paleta de color que aporta la emoci√≥n y el ambiente adecuados a un sitio web sin desequilibrar las cosas.
  • Dise√Īo web receptivo: dise√Īe un sitio web que no solo se vea bien en todos los dispositivos y navegadores, sino que brinde una experiencia consistente de una plataforma a otra.
  • Optimizaci√≥n y edici√≥n de im√°genes: gestione la est√©tica, el tama√Īo y el peso de las im√°genes para mejorar la usabilidad.
  • SEO: mejore la clasificaci√≥n de un sitio web con mejoras t√©cnicas, como compresi√≥n de im√°genes, metadatos de b√ļsqueda optimizados y dise√Īo receptivo.
  • HTML & CSS: C√≥digo con los lenguajes de programaci√≥n b√°sicos: HTML para manipular texto y CSS para cambiar el estilo de la p√°gina web.
  • JavaScript: agregue interactividad a una p√°gina web con JavaScript.
  • Herramientas de dise√Īo web: crear wireframes, maquetas y prototipos para un sitio web con software de dise√Īo profesional. 
  • Sistemas de gesti√≥n de contenido: utilice un creador de sitios web que le permita crear constantemente sitios web de alto rendimiento para los clientes.

Habilidades blandas que necesitan los dise√Īadores web principiantes

Las habilidades blandas se refieren a los rasgos de personalidad que le permiten tener √©xito como dise√Īador web. Estos son los m√°s importantes en los que centrarse:

  • Gesti√≥n de proyectos: planifique los trabajos del sitio web y mant√©ngalos encaminados con un proceso bien documentado y plataformas gesti√≥n de proyectos como Trello de uso gratuito.
  • Disciplina: Comprom√©tase al 100% con su trabajo, con cada proyecto, con cada cliente y con todos los principios y est√°ndares de dise√Īo web que le han allanado el camino.
  • Ingenio: sepa c√≥mo salir de un aprieto y hacer que las cosas sucedan incluso cuando parezca que hay obst√°culos en todas partes.
  • Atenci√≥n al detalle: Marque cada ‚Äúi‚ÄĚ y cruce cada ‚Äút‚ÄĚ para que los clientes nunca tengan una raz√≥n para estar descontentos con usted. 
  • Empat√≠a: no haga suposiciones sobre su cliente o su audiencia; t√≥mese el tiempo para conocer a qui√©nes sirven para que pueda crear el mejor sitio web que pueda.
  • Comunicaci√≥n: aprenda a comunicarse con los clientes en un idioma que comprendan y que genere confianza.
  • Servicio al cliente: brinde una experiencia superior al cliente al hacerse cargo el d√≠a 1 y estar preparado para responder sus preguntas y tranquilizarlos en el camino.

Al dominar estas habilidades de dise√Īo web duras y blandas, producir√° un mejor trabajo y, como resultado, atraer√° clientes que realmente valoran la calidad del trabajo que realiza.

¬ŅQu√© implica el proceso de dise√Īo web para principiantes?

Los dise√Īadores web generalmente siguen un proceso similar de un proyecto a otro. La duraci√≥n de cada fase puede diferir al igual que la intensidad de lo que est√° involucrado, pero los pasos siguen siendo los mismos. 

Esto es lo que incluir√° su proceso de dise√Īo web:

Paso 1: Desarrolle las especificaciones del proyecto

Esta es la etapa en la que toma el negocio y las necesidades de la empresa y determina qu√© tipo de sitio necesitan (por ejemplo, blog, sitio web, comercio electr√≥nico, etc.) y qu√© es exactamente lo que necesita construir en t√©rminos de p√°ginas y caracter√≠sticas. Por ejemplo:

  • Un sitio web educativo de cinco p√°ginas para una organizaci√≥n sin fines de lucro.
  • sitio web de la cartera para un fot√≥grafo profesional que permite a los clientes reservar sesiones con ellos. 
  • Un sitio web de gran tama√Īo para una empresa de software que proporciona a los clientes informaci√≥n sobre caracter√≠sticas de productos, precios, preguntas frecuentes y m√°s. 

Paso 2: programar el proyecto

Una vez que sepa lo que est√° dise√Īando, crear√° una l√≠nea de tiempo para ello. Esto no solo le permite equilibrar de manera m√°s efectiva varios proyectos de sitios web a la vez, sino que esta informaci√≥n es muy √ļtil para los clientes que tienen hitos tangibles que pueden esperar. 

En cuanto a la creaci√≥n del cronograma, realmente depende del alcance del trabajo y de su disponibilidad. Sin embargo, en general, cada paso del proyecto lleva m√°s tiempo que el anterior. 

Para determinar la cantidad correcta de tiempo para cada uno, use una herramienta de seguimiento del tiempo cada vez que dise√Īe un nuevo sitio web (incluso si es el suyo propio o uno gratuito que est√° haciendo para un amigo o familiar). Esto le ayudar√° a calcular cu√°nto tiempo necesita programar para cada fase. No olvide que en proyectos para clientes, tambi√©n debe dejar tiempo para comentarios.

Paso 3: Investigue

El proceso de incorporaci√≥n es fundamental para los dise√Īadores web. Si no hace las preguntas correctas por adelantado, podr√≠a encontrarse haciendo muchas revisiones m√°s adelante (lo que puede llevar no solo a incumplir la fecha l√≠mite, sino tambi√©n a alcance fluencia y lucro cesante). 

Antes de comenzar su investigaci√≥n, primero debe crear un cuestionario de dise√Īo de sitios web para recopilar toda la informaci√≥n, archivos e inicios de sesi√≥n esenciales de su cliente. Esto formar√° la base de su investigaci√≥n. 

Durante esta etapa, querr√° analizar: 

  • El cliente y su marca (si tiene historia)
  • La audiencia a la que se dirigen
  • La competencia
  • La industria
  • en su conjunto

Una vez que tenga una idea de a qu√© se enfrenta su cliente, puede formular un plan para el dise√Īo y el enfoque del sitio web.

Paso 4: crea una guía de estilo

El gu√≠a de estilo de la marca es donde documentar√° la estrategia visual de una marca y su sitio web.

Hay varias razones por las que una gu√≠a de estilo es √ļtil: 

  • Le permite establecer una visi√≥n clara del sitio web desde el principio. 
  • Le permite colaborar con otros dise√Īadores y no tener que preocuparse por producir un trabajo consistente.
  • Es algo que puede brindarle a su cliente para asegurarse de que ellos (o su futuro dise√Īador) mantengan la identidad visual que ha creado para ellos. 

Para crear una gu√≠a de estilo, deber√° armar reglas para los elementos visuales clave en el sitio (como tipograf√≠a, uso del logo, colores, etc.).

Que de debe hacer con el logotipo
Que de debe hacer con el logotipo

Paso 5: crea el mapa del sitio

Como quiera llamarlo (arquitectura de la informaci√≥n, mapa del sitio, navegaci√≥n o men√ļ), este es el primer componente importante que establecer√° para el sitio web. 

Mapa del sitio Web en GlooMaps
Mapa del sitio Web en GlooMaps

El mapa del sitio no es solo una lista de p√°ginas para incluir en el sitio web. Establece la jerarqu√≠a y las relaciones entre p√°ginas. Esto es importante ya que la forma en que conecta las p√°ginas entre s√≠ puede mejorar o erosionar la usabilidad de su sitio web.

Paso 6: cree wireframes, maquetas y prototipos para su sitio

En realidad, esta es una fase de tres pasos que le permite crear un sitio web de forma incremental desde cero.

cree wireframes, maquetas y prototipos para su sitio
cree wireframes, maquetas y prototipos para su sitio

Wireframes

Los wireframes son esqueletos de sus p√°ginas. Esboza la composici√≥n, usa marcadores de posici√≥n para mostrar a d√≥nde va el contenido y determina c√≥mo colocar y dimensionar cada bloque y elemento.

Wireframes oara desarrollo web
Wireframes oara desarrollo web

Puede crear estructuras al√°mbricas con un bol√≠grafo y papel de buena calidad, utilizar una herramienta de creaci√≥n de estructuras WordPress con Elementor. 

Nota: Si elige usar WordPress durante esta etapa y la siguiente, es mejor hacerlo en un sitio de prueba en lugar de en el dominio en vivo del cliente. He aqu√≠ c√≥mo configurar un sitio de ensayo para estos fines.

Maquetas

Las maquetas son archivos de dise√Īo est√°ticos. Tienen el mismo aspecto que una p√°gina web, excepto que no son interactivas. 

Al dise√Īar maquetas, tiene la oportunidad de solucionar cualquier problema en el dise√Īo, el dise√Īo, los elementos, etc. antes de comprometerlo todo en un prototipo funcional.

Maquetas de dise√Īo web para principiantes
Maquetas de dise√Īo web para principiantes

Debes dise√Īar tus maquetas con una herramienta similar (si no la misma) a la que usaste para crear tu estructura al√°mbrica. Por ejemplo, si su estructura al√°mbrica est√° en WordPress, tiene mucho sentido crear su maqueta all√≠ tambi√©n.

Prototipos

Los prototipos son la versi√≥n interactiva de las maquetas. En la creaci√≥n de prototipos, crea conexiones entre las p√°ginas y anima otros elementos interactivos en la p√°gina. 

Esto le da a usted y a su cliente la oportunidad de ver sus dise√Īos en acci√≥n.

Prototipos de dise√Īo web para un negocio
Prototipos de dise√Īo web para un negocio

Nuevamente, te mostramos que herramienta puedes usa para sus wireframes y maquetas

Pluma y papel

Muchos dise√Īadores comienzan su proceso de encuadre con una hoja de papel en blanco y un l√°piz o bol√≠grafo negro. Luego comienzan a dibujar y crear lo que se conoce como wireframes de baja fidelidad. Estos se parecen a los wireframes digitales normales, pero est√°n dibujados a mano y son incluso m√°s f√°ciles de revisar y modificar que los wireframes digitales. Muchos dise√Īadores prefieren comenzar con estos bocetos hechos a mano como una forma de crear una base para el dise√Īo de su dise√Īo y hacer fluir su creatividad. 

Adobe XD

Adobe XD es una herramienta UX / UI basada en vectores que forma parte de Adobe Creative Cloud Suite. A diferencia de la mayor√≠a de los dem√°s programas de Adobe, Adobe XD se puede utilizar de forma gratuita con un l√≠mite de un proyecto. Los dise√Īadores utilizan Adobe XD para crear wireframes, prototipos y dise√Īos de pantallas digitales, como sitios web y aplicaciones de escritorio o m√≥viles.

Bosquejo

Sketch es otra herramienta de dise√Īo digital basada en vectores (solo Mac) que se utiliza para dise√Īar sitios web y todas las interfaces digitales, como wireframes, prototipos, sitios web, aplicaciones, etc. Sketch se ejecuta con una suscripci√≥n basada en una licencia de un a√Īo. Es una opci√≥n muy popular para los usuarios de Mac que buscan una alternativa m√°s barata y ligera a Photoshop o Illustrator.

Figma

Un poco m√°s nuevo en el mercado del dise√Īo, Figma es una herramienta de dise√Īo de interfaz de usuario basada en navegador (con una opci√≥n de aplicaci√≥n de escritorio tambi√©n). Figma puede abrir archivos .sketch y es una excelente opci√≥n para dise√Īadores, desarrolladores y colegas que buscan trabajar en equipo en colaboraci√≥n.

Adobe Photoshop

Photoshop es un editor de gr√°ficos que se especializa en la edici√≥n de im√°genes. Photoshop tiene muchos, muchos casos de uso, y el dise√Īo web es uno de ellos (y tambi√©n la creaci√≥n de prototipos). Los dise√Īadores a menudo optan por utilizar Photoshop para editar fotos, optimizar im√°genes, crear activos web y dise√Īar dise√Īos de p√°gina. 

Paso 7: Construya el sitio web

Si dise√Īa sus wireframes, maquetas y prototipos en WordPress, no necesitar√° una etapa de desarrollo web real, ya que ya lo ha hecho. 

Sin embargo, si dise√Ī√≥ todo con software de dise√Īo web y otras herramientas, esto es lo que debe hacer para convierta su prototipo en un sitio web de WordPress.

Paso 8: QA el sitio

QA significa Quality Assurance y su función no solo abarca el control de calidad del desarrollo Web sino también ayudar al equipo para que las cosas funcionen bien. 

A lo largo del proceso de dise√Īo web, querr√° comunicarse con el cliente cuando alcance hitos clave. Al recopilar comentarios y aprobaci√≥n durante todo el trabajo, reducir√° la necesidad de revisiones excesivas en esta etapa. 

Una vez que el sitio est√© en WordPress y listo para su revisi√≥n, deber√° enviarlo a dos partes para que lo prueben: 

  • Su equipo de aseguramiento de la calidad interno (o miembro del equipo). Har√°n una revisi√≥n completa y se asegurar√°n de que no haya problemas, desde enlaces rotos hasta p√°ginas de carga lenta y todo lo dem√°s. Si trabaja solo, puede realizarlo usted mismo.
  • Tu cliente. Deben dar la aprobaci√≥n final en el sitio web antes del lanzamiento. Esta etapa les permite hacer eso con un sitio web que funcione y no solo con dise√Īos que est√°n en progreso.

Paso 9: Lanzamiento

Con todas las aprobaciones necesarias en la mano, es hora de lanzar. 

¬ŅCu√°l es el mejor software de dise√Īo web para principiantes?

Cada dise√Īador web debe tomarse el tiempo para crear su propia caja de herramientas. En t√©rminos de las herramientas de dise√Īo web esenciales que debe incluir, estas son las que debe comenzar con:

WordPress

Una de las formas de especializarse como dise√Īador web es elegir un sistema de gesti√≥n de contenido (CMS) para crear sitios. 

WordPress ha sido durante mucho tiempo el campe√≥n reinante de CMS y mucho de eso se debe a que permite a los dise√Īadores web hacer m√°s con un sitio web de lo que permiten otras herramientas de creaci√≥n de sitios web.

WordPress
WordPress

Dicho eso WordPress necesita algo de tiempo para acostumbrarse. Pero la recompensa vale la pena, ya que puede crear sitios web mucho m√°s potentes, m√°s grandes y con muchas funciones para los clientes.

Temas de WordPress

Un tema de WordPress es una plantilla de sitio web predise√Īada. Se requiere que cada sitio web tenga uno, incluso si decide usar un constructor como Elementor para dise√Īar. 

Aca encontraras plantillas mas famosas de WordPress gratis para que pruebes tus proyectos:

Temas de WordPress
Temas de WordPress

Cuando se instala en WordPress, un tema no solo ‚Äúcubre‚ÄĚ el sitio web con el dise√Īo prefabricado, sino que agrega p√°ginas de marcador de posici√≥n y contenido. Esta es una excelente manera para que los dise√Īadores principiantes ahorren tiempo construyendo los elementos b√°sicos de un sitio.

Como dise√Īador web, querr√° encontrar un pu√Īado de temas con los que se sienta realmente c√≥modo y que funcionen bien para su nicho. De esa manera, no tendr√° que preocuparse por aprender a manejar un tema con cada nuevo proyecto y podr√° dedicar a√ļn m√°s tiempo a personalizar el dise√Īo.

Elementor

Hay varias razones para usar un complemento de creaci√≥n de p√°ginas como Elementor adem√°s de su tema de WordPress: 

  • Es un editor visual de arrastrar y soltar que le permite dise√Īar en tiempo real.
  • Convierte el hostil editor de WordPress en un editor de bloques amigable para el cliente.
  • Tiene la flexibilidad de utilizar ajustes preestablecidos de dise√Īo o codificar sus propios estilos personalizados.
  • Puede dise√Īar una p√°gina web desde cero o usar plantillas de WordPress de secci√≥n o p√°gina completa para crearlas.
  • El constructor tambi√©n viene con kits de plantillas, que funcionan de manera similar a un tema y son totalmente compatibles con Elementor.
Elementor editor visual de WordPress
Elementor editor visual de WordPress

El Creador de p√°ginas Elementor El complemento se adapta a usted y a su forma preferida de trabajar como dise√Īador web, lo que lo convierte en una herramienta de dise√Īo web con la que puede crecer.

Complementos de WordPress

Los complementos de WordPress son extensiones que desarrollan las caracter√≠sticas y la funcionalidad de un sitio web. Los complementos pueden ayudarlo a hacer cosas como: 

Complementos de WordPress
Complementos de WordPress

Como dise√Īador web principiante (diablos, incluso como profesional), los complementos de WordPress le ahorran la molestia de tener que codificar cada cent√≠metro de un sitio web. 

Solo tenga en cuenta que los complementos pueden ocupar espacio en su servidor e introducir vulnerabilidades en su sitio web, así que elija sabiamente.

Nota : Si decide realizar el trabajo inicial de planificaci√≥n y dise√Īo fuera de WordPress, necesitar√° un software de dise√Īo web adicional para su caja de herramientas. Empezando aqu√≠:

GlooMaps / Slickplan

Antes de realizar cualquier trabajo de dise√Īo, querr√° ordenar la navegaci√≥n de su sitio web. Puedes usar una herramienta como GlooMaps o Slickplan para desarrollar sus mapas de sitio visuales.

Esta herramienta es √ļtil para planificar la arquitectura de la informaci√≥n de su sitio web: qu√© sitios web incluir en la navegaci√≥n y c√≥mo se relacionan entre s√≠.

Bosquejo / Photoshop

Si bien es ciertamente m√°s f√°cil dise√Īar wireframes, maquetas y prototipos directamente desde WordPress, tambi√©n puede usar software de dise√Īo profesional como Sketch y Photoshop

Estas herramientas de dise√Īo se pueden utilizar para m√ļltiples prop√≥sitos a lo largo del ciclo de vida de un trabajo: 

  • Dise√Īo gr√°fico
  • edici√≥n de fotos
  • Dise√Īo y planificaci√≥n de sitios web

Por lo tanto, incluso si utiliza principalmente WordPress para crear sus sitios web, es posible que a√ļn encuentre un uso para ellos.

Código de Atom / Visual Studio

Si bien es posible que no necesite un entorno de desarrollo integrado (IDE) cuando comience a dise√Īar sitios web, puede encontrar √Ātom.io o C√≥digo de Visual Studio √ļtil en el futuro. 

Los IDE son plataformas de edici√≥n y escritura de c√≥digo. No solo facilitan la escritura de c√≥digo en un entorno aislado, sino que tambi√©n puede ejecutar y depurar su c√≥digo aqu√≠.

Local por Flywheel / MAMP

Hay varias formas de crear un entorno local o de ensayo para sus proyectos de WordPress. 

Puede utilizar su cuenta de alojamiento web para crear un servidor intermedio. Tambi√©n puede utilizar una herramienta de desarrollo de WordPress local como Local WP o MAMP

De cualquier manera, el objetivo es construir un sitio web de WordPress lejos de las miradas indiscretas de su cliente y al mismo tiempo mantenerlo alejado de posibles visitantes y de los robots de indexaci√≥n de Google mientras est√° en progreso. 

Dicho esto, si realmente est√° tratando de mantener su proceso relegado a WordPress, siempre puede usar el modo de mantenimiento de WordPress para que los visitantes y Google sepan que el sitio a√ļn no est√° listo para ser visitado.

¬ŅDonde estudiar dise√Īo de p√°ginas web?

Una de las preguntas m√°s comunes que escuchamos en la comunidad de dise√Īo web es: ‚Äú¬ŅNecesito un t√≠tulo para convertirme en dise√Īador web?‚ÄĚ

La respuesta es no, pero tampoco te har√° da√Īo. 

La verdad es que, cuando se trata de aprender dise√Īo web, la elecci√≥n es suya. Si siente que necesita un programa universitario reglamentado para convertirse en un dise√Īador magistral, h√°galo. Sin embargo, si prefiere la ruta autodidacta, hay toneladas de recursos que puede utilizar.

Solo tenga en cuenta que tomar√° tiempo y pr√°ctica de cualquier manera.

Para aquellos de ustedes que prefieren el enfoque de bricolaje o simplemente desean fortalecer las habilidades de dise√Īo que ya han adquirido, los siguientes recursos son el camino a seguir.

Libros para dise√Īadores web

Para obtener una educaci√≥n verdaderamente integral sobre temas de dise√Īo web para principiantes, comience con estos libros sobre dise√Īo y desarrollo web. Cubren toda la gama de temas, que incluyen: 

  • Conceptos b√°sicos del dise√Īo web 
  • Introducci√≥n a la codificaci√≥n con HTML y CSS
  • Tutoriales de programaci√≥n para JavaScript y PHP
  • Dise√Īar con WordPress
  • Consejos de estrategia y dise√Īo de la experiencia del usuario
  • Sistemas de dise√Īo
  • Y m√°s

Como beneficio adicional, algunos de estos recursos vienen con libros de trabajo y √°reas de juego para que pueda probar lo que ha aprendido a medida que avanza.

Cursos en l√≠nea para dise√Īadores web

Encontrar√° muchos cursos en l√≠nea que ense√Īan los conceptos b√°sicos del dise√Īo web para principiantes. 

Si desea acceder a una gran cantidad de recursos educativos, en una variedad de temas, un sitio de cursos de membres√≠a es una buena opci√≥n. Hay una gran combinaci√≥n de contenido gratuito y de pago.

Tenga en cuenta que su contenido de video no solo proviene de expertos en la materia. Algunos de estos sitios albergan cursos de algunas de las mejores universidades del mundo. Por lo tanto, puede completar un programa de capacitaci√≥n formal, simplemente lo har√° desde la comodidad de su hogar, oficina o cafeter√≠a en lugar de una sala de conferencias.

Canales de YouTube para dise√Īadores web

Si bien los libros y los cursos en l√≠nea son excelentes para brindarle una educaci√≥n integral en un tema espec√≠fico (como c√≥mo codificar con HTML o los fundamentos de la teor√≠a del color), Los videos de YouTube son los mejores para aprender nuevas habilidades sobre la marcha, as√≠ como para mantenerse al d√≠a con las √ļltimas tendencias de dise√Īo web. 

Al elegir un canal de YouTube para seguir, aseg√ļrese de que el profesor sea un experto en dise√Īo web y que publique contenido con frecuencia, y que lo haya hecho recientemente. Quieres lecciones que te ayuden a dise√Īar sitios web hoy, no hace dos a√Īos.

Aqu√≠ hay algunos canales que producen regularmente tutoriales actualizados al minuto sobre dise√Īo web, WordPress y m√°s: 

  • NNgroup: Tutoriales y consejos r√°pidos sobre el dise√Īo de la experiencia del usuario.
  • Chris Coyier: Tutoriales de dise√Īo CSS, as√≠ como consejos sobre c√≥mo administrar los aspectos t√©cnicos detr√°s de escena de un sitio web.
  • Jesse Showalter: Recorridos en vivo que demuestran c√≥mo dise√Īar maquetas, prototipos y sitios web receptivos.
  • Creador de sitios web Elementor para WordPress: Orientaci√≥n sobre c√≥mo aprovechar Elementor al m√°ximo. 
  • Flujo: Consejos para el negocio y la gesti√≥n de clientes de ser dise√Īador web.

Blogs para dise√Īo web principiantes

Para aquellos de ustedes a quienes les gusta capacitarse a partir de tutoriales y gu√≠as escritos, los blogs son una excelente opci√≥n. Son una fuente inagotable de informaci√≥n sobre dise√Īo web para principiantes, expertos experimentados y todos los dem√°s. 

Estos son algunos de los mejores blogs de dise√Īo web para empezar: 

  • Dep√≥sito de dise√Īo web: Obtenga informaci√≥n r√°pida sobre lo que est√° sucediendo en el mundo del dise√Īo junto con tutoriales breves pero √ļtiles de dise√Īo y codificaci√≥n. 
  • Revista Smashing: Este blog publica gu√≠as pr√°cticas para dise√Īadores y desarrolladores web, que a menudo presentan a los lectores enfoques y tendencias nuevos e innovadores.
  • WPBeginner: Todo lo que pueda querer hacer en un sitio web de WordPress ha sido cubierto por este blog con detalles claros y exhaustivos.
  • Blog de Awwwards: Si bien puede aprender sobre el dise√Īo de UX, la raz√≥n principal para seguir este blog es por los ejemplos de sitios web llamativos y la inspiraci√≥n que contiene cada publicaci√≥n.

Podcasts para dise√Īadores web

Cuando tiene poco tiempo, los podcasts le permiten llevar sus lecciones de dise√Īo web a donde quiera que vaya. Es m√°s, los podcasts te ense√Īan sobre el dise√Īo web de una manera diferente a como lo hacen los blogs, videos o cursos. A menudo, aprendes de las experiencias personales de dise√Īadores reales.

Aqu√≠ hay algunos podcasts que est√°n m√°s orientados a dise√Īadores web principiantes:

  • Presentable: Descubra por qu√© los principios de dise√Īo web y los est√°ndares web son realmente cruciales para una experiencia de usuario positiva. 
  • El show de Boagworld UX: Cada temporada est√° dedicada a un tema diferente: el proceso de dise√Īo web, las habilidades de dise√Īo esenciales, las mejores pr√°cticas de UX y m√°s.
  • Fregadero de cocina WP: Este programa es una mezcolanza de contenido, que va desde consejos sobre c√≥mo desarrollar procesos comerciales para administrar el backend de un sitio web.
  • Dise√Īadores honestos: Obtenga consejos y trucos √ļtiles sobre c√≥mo empezar con fuerza en sus primeros d√≠as como dise√Īador web. 
  • Chats en el pasillo: Los miembros de la comunidad de WordPress comparten las luchas y los √©xitos que han experimentado al intentar trabajar en este espacio.

D√© los primeros pasos para convertirse en un gran dise√Īador web

Cuando se trata de dise√Īo web para principiantes, hay mucho que cubrir. Obviamente. Pero una vez que tenga un conocimiento firme de lo que hace un buen dise√Īo web y, lo que es m√°s importante, por qu√©, puede fijar su mirada en conseguir su primer cliente y construir su primer sitio web.

Cuando est√© listo para dar ese salto, te ense√Īaremos todo lo que necesita saber para comenzar su negocio de dise√Īo web.

5/5 - (8 votes)
Miguel Zicia Osorio
Miguel Zicia Osorio
https://ziccosor.com
CEO de ZICCOSOR - M√°s de 10 a√Īos asistiendo a empresas y a emprendedores de todo el mundo a convertir sus ideas, historias en s√≥lidas Marcas, Proyectos digitales, construyendo relaciones de confianza y duraderas.
guest

6 Comments
Anteriores
Recientes M√°s votado
Opiniones integradas
Ver todos los comentarios
Jose
Jose
1 a√Īo atr√°s

Gracia Miguel,. esto me ayuda a como crear una p√°gina web

Roberto
Roberto
1 a√Īo atr√°s

EXLENTE INFORMACION!!!
Cuando tendremos un curso para crear una web en wordpress con un buen Hosting.
optimizado y que califique muy bien en PageSpeed Insights.

Seria genial.

erminsul sanchez
erminsul sanchez
8 meses atr√°s

simplemente nutritivo soborie cada letra y entendi cada concepto muy buen trabajo gracias por la ayuda Dios lo bendiga