Bueno, el diseƱo web es un Ć”rea enfocada en el desarrollo de interfaces digitales, como el diseƱo de sitios y aplicaciones para web Ā«Progressive Web AppĀ». Para ello, los diseƱadores web crean sitios utilizando lenguajes de programaciĆ³n como HTML, CSS, JavaScript, e incluso otros tantos mĆ”s. Pero, siempre, el motivo del diseƱo debe estar orientado a brindar una experiencia de usuario satisfactoria, la famosa UX.
ā Pensemos en lo que dije reciĆ©n, ĀæAlguna vez has entraste en una pĆ”gina web y te fuiste porque el diseƱo era la pasiĆ³n del desarrollador muy malo?. Bueno, este efecto rebote en el sitio web, es muy malo para las propias mĆ©tricas SEO. Pues, aumenta la tasa de rebote, disminuye el dwell time, ademĆ”s de que podrĆa generar malas recomendaciones de tu sitio.
AdemĆ”s, este efecto podrĆa verse potenciado, sĆ incluso, el propio sitio web tarda mucho en cargar. Esto es asĆ porque se brinda una mala experiencia de usuario, mĆ”s no por la propia velocidad en sĆ (que tambiĆ©n, pero no tanto).
Pero, en definitiva, todos estos parƔmetros, resultan en la calidad general del sitio, y la experiencia del usuario dentro de nuestro sitio web. El diseƱo web es eso, pensar en brindar una buena experiencia, con una buena estƩtica, y una buena velocidad de carga, para encantar a tus clientes.
Entonces, para entender y profundizar este concepto, veremos las ventajas posibles de tener un gran diseƱo web en nuestro sitio. Y cĆ³mo podĆ©s ser un gran diseƱador (o al menos, como contratar correctamente a uno).
ĀæQuĆ© es el diseƱo web?
ā OK, Āæbuscamos una definiciĆ³n mĆ”s tĆ©cnica que la que brindamos en la introducciĆ³n?. Pues, en tal caso, podemos decir que el diseƱo web es todo el trabajo implicado con el layout y la estĆ©tica de un sitio web. AdemĆ”s, a todo esto, debemos agregarle la producciĆ³n contenidos por medio de un plan de marketing de contenidos, y demĆ”s parĆ”metros relacionados con la experiencia de usuario.
Para alcanzar ese objetivo, los propios diseƱadores web utilizan lenguajes de programaciĆ³n cĆ³mo los mencionados en la introducciĆ³n. Dentro de los lenguajes de programaciĆ³n mĆ”s comunes en el desarrollo y diseƱo web, tenemos:
1. HTML
El HTML dentro del diseƱo web es el alma. Pues, Ć©ste lenguaje de programaciĆ³n es el principal, y posiblemente, mĆ”s del 99% de los sitios web estĆ”n creados en HTML. SĆ pudiĆ©ramos hacer una analogĆa con la creaciĆ³n de una casa, el HTML serĆa el encargado de levantar las propias paredes, ya que crea la estructura.
2. CSS
El CSS es otro de los lenguajes de programaciĆ³n mĆ”s importantes en la creaciĆ³n de los sitios web. Es posiblemente, el segundo en jerarquĆa en cuanto al diseƱo web, pues, su funciĆ³n es completamente estĆ©tica, y se encarga de la parte visual de la web. Por continuar con nuestra analogĆa de la construcciĆ³n de la casa, el CSS serĆa el encargado de darle la pintura, y la estĆ©tica de la misma.
3. JavaScript
El JavaScript, otro lenguaje importante dentro del mundo del diseƱo web y la programaciĆ³n. Este lenguaje de programaciĆ³n se encarga de darle funcionalidades especĆficas al sitio web, cĆ³mo mensajes emergentes, y demĆ”s. SĆ de la construcciĆ³n de una casa se tratase, el JavaScript serĆa el encargado de darle las diferentes funciones a la casa, cĆ³mo la calefacciĆ³n o el horno para cocinar.
4. Otros
Aunque esos lenguajes son los principales, tambiĆ©n podemos encontrarnos otros lenguajes de programaciĆ³n que tienen cierta relevancia dentro del diseƱo web. Ellos pueden ser el XML, que se utiliza mucho para lo que son los sitemaps; el PHP que se utiliza mucho en el backend; el TXT que se utiliza para crear los robots; Ruby; Phyton; entre otros.
Entonces, los diseƱadores se valen de todos estos lenguajes de programaciĆ³n, en mayor o menor medida, para construir correctamente un sitio conforme al diseƱo web establecido.
Para el proceso de creaciĆ³n del sitio web, se utilizan herramientas cĆ³mo Adobe Dreamweaver; el propio Visual Studio Code; o directamente algĆŗn CMS para no complicarse tanto con el cĆ³digo y meterse de lleno en el maquetado, y la creaciĆ³n de contenidos.
En cuanto a los gestores de contenido, sin duda WordPress es el mĆ”s conocido y utilizado. Pues, cuenta con muchos maquetadores cĆ³mo Elementor o Divi; ademĆ”s de plantillas preestablecidas cĆ³mo el famoso Twenty Fifteen, que posiblemente sea el mĆ”s descargado de la historia.
Elementos clave del diseƱo web
Bueno, ya vimos quƩ es el diseƱo web y las herramientas que utilizan los diseƱadores web para crear sus propios sitios web. Sin embargo, cabe destacar que todo diseƱo web estƔ orientado a dar una buena experiencia de usuario, y para ello, se deben tener en cuenta los siguientes puntos clave:
1. DiseƱo web responsive o de responsividad
El pĆŗblico que llega desde el telĆ©fono mĆ³vil a nuestro sitio estĆ” en aumento, entonces, diseƱar conforme a Ć©stos dispositivos es mucho muy importante. E incluso, sĆ querĆ©s llevar la optimizaciĆ³n al extremo, podrĆas plantearte la creaciĆ³n de una Progressive Web App.
2. Que el contenido se pueda escanear
Hoy en dĆa, el pĆŗblico busca contenidos mĆ”s cortos, y sĆ bien, muchas veces los contenidos cortos son insuficientes para desarrollar un tema, lo que se puede hacer es dividir al mĆ”ximo los contenidos. Pues, la cultura del muchos usuarios se puede definir con una frase: Ā«Demasiado textoĀ«.
Entonces, para intentar captar la atenciĆ³n de Ć©ste pĆŗblico, tenemos que evitar pĆ”rrafos y secciones muy extensas. Pues, para el lector no recurrente, es demasiado agotador. De ahĆ se desprende la importancia de que el contenido sea escaneable. Es decir, que de una sola mirada, pueda entender lo que va a encontrar el contenido.
3. Una correcta tipografĆa
El tipo de letra es tambiĆ©n un punto relevante al momento de pensar en el diseƱo web. Pues, muchas veces, algunas tipografĆas pueden haber pasado de moda, y en algunos casos, podrĆa generar un efecto de rechazo impresionante. Por poner un ejemplo, imaginemos todo un post creado con letra Comic Sans; quizĆ”s para los aƱos 90 estaba bien, porque era una letra muy linda, pero hoy en dĆa le quita seriedad.
4. Buena velocidad de carga
Bueno, cĆ³mo sabrĆ”n, en los tiempos que corren, los consumidores parecen estar apurados y querer todo ya. ā No juzgo a nadie, me pasa lo mismo; cuando compro algo por internet quiero que llegue en el dĆa. Entonces, por eso, los sitios que tardan mĆ”s de 2 o 4 segundos en cargarse, son completamente despreciados por el usuario. Por eso, no descuides tu velocidad de carga.
5. Un diseƱo web relevante y original
Este punto se relaciona con un tema mĆ”s de marketing que de diseƱo web. Pues, podremos cumplir con los apartados anteriores, pero sĆ es todo mĆ”s de lo mismo, pasaremos por el mercado completamente desapercibidos.
Para ser mĆ”s especĆficos, quiero contarles un ejemplo de un contenido que me sale Ćŗltimamente en el feed de Instagram. El mismo estĆ” creado por una agencia de marketing digital, y el mensaje es: ā En el marketing digital todos hacen lo mismo, no seas igual. Pero, lo que el Ā«genioĀ» que diseĆ±Ć³ eso, estĆ” haciendo exactamente lo mismo que el resto, se contradice en su propio anuncio. ā ĀæFactor diferencial?, bien, gracias.
*Nota: Estuve todo el dĆa buscĆ”ndola, se ve que se avivaron y sacaron el anuncio, pero, sĆ lo vuelvo a encontrar les comparto el enlace.
Beneficios de invertir en un buen diseƱo web
Bueno, te dejo 7 beneficios relevantes para que pienses en invertir aprender sobre diseƱo web o al menos, contratar a un profesional. El profesional de diseƱo web, debe ser capaz de poder brindarte los siguientes beneficios luego de finalizar con la creaciĆ³n del sitio web:
1. El diseƱo web debe generar una buena impresiĆ³n con impacto visual
El sitio es la carta de presentaciĆ³n de una empresa en los medios digitales. Entonces, cada vez que un potencial cliente accede a la pĆ”gina web, tenĆ©s que tratar de engancharlo con una buena primera impresiĆ³n. Pues, ya saben lo que dicen: ā La primera imagen es la quĆ© mĆ”s cuenta.
CĆ³mo premisa principal, quedate de que tenĆ©s dos locales (sĆ es que efectivamente es asĆ), uno fĆsico y otro digital. Ambos deben estar limpios, en condiciones, y deben generar un buen impacto en el potencial cliente. Por eso, un diseƱo web poco profesional hace que los visitantes no tengan una buena experiencia y pierdan interĆ©s.
En resumen, te perderĆ”s muchos tratos, pese a tener un mejor marketing-mix que la competencia. ā Si no, pensemos en un local fĆsico, por mĆ”s que comas la mejor pizza del mundo, sĆ vienen cucarachas en el menĆŗ, lo mĆ”s probable es que no compres nada.
2. Mejora el trƔfico orgƔnico con prƔcticas SEO
Por sĆ aĆŗn no lo saben, el SEO es la optimizaciĆ³n de los motores de bĆŗsqueda, y refiere justamente, a laĀ optimizaciĆ³n orgĆ”nica de tu sitio web, con el fin de conseguir mĆ”s visitantes. Para ello, debemos valernos de buenas prĆ”cticas conforme a lo que los motores de bĆŗsqueda pretenden. Este punto, es clave en toda estrategia de marketing digital, y cada profesional deĀ marketingĀ necesita aprender.
Por suerte, de una u otra manera, llegaste a este sitio web. ā Y, por suerte, soy especialista de SEO desde hace aƱos, entonces, para aprender mĆ”s de esto, te recomiendo que sigas mi blog.
Volviendo a lo que nos compete, las personas que buscan en internet acerca de un negocio o un servicio especĆfico, ingresan tĆ©rminos en los diferentes motores de bĆŗsqueda como Google. Entonces, lo mĆ”s probable es que los usuarios ingresen primero, en los sitios que se encuentran mĆ”s arriba en el resultado de la bĆŗsqueda Ā«SERPsĀ».
Sin embargo, sĆ tenĆ©s un sitio web poco optimizado, tu contenido no aparecerĆ” en los primeros lugares, sino que mucho mĆ”s abajo. Eso, sĆ el contenido se te indexĆ³ correctamente, es decir, sĆ aparece en Google, pues, puede ocurrir que directamente pases desapercibido.
AdemĆ”s, la estadĆstica dice que la primera pĆ”gina de Google se lleva la inmensa mayorĆa del trĆ”fico. El resto, es lo mismo que sĆ no existiera, de aquĆ la importancia de optimizar tu web, y comprender sobre posicionamiento web orgĆ”nico.
3. Ventaja competitiva
Bueno, tener un sitio web profesionalizado, tambiĆ©n te permite ser referencia de tu nicho de mercado. En especial, sĆ estĆ”s en un mercado competido, pues, mientras mĆ”s profesional seas, mĆ”s relevante serĆ”s en el sector. Caso contrario, un sitio web con un mal diseƱo, puede resultar un alguien poco serio, que solo estĆ” de paso en el mercado digital.
Entonces, cuando tu competencia reciĆ©n comienza a darse cuenta de los beneficios de la digitalizaciĆ³n empresarial, vos ya tenĆ©s que estar comenzando a se referencia con tus competidores directos.
4. Mejora la rentabilidad de tu negocio
De por sĆ, un sitio web ya es una nueva boca de ventas, pues traerĆ” beneficios extra al actuar como segundo negocio. Pero, ademĆ”s, mientras mĆ”s profesional sea, mĆ”s pĆŗblico traerĆ”s, ergo, mĆ”s ventas. Ya que, naturalmente, las personas se ven atraĆdas por buenos diseƱos web.
AquĆ yace la importancia de ser lo mĆ”s profesional posible en cuento al sentido estĆ©tico de tu web. Tampoco quiere decir que vos seas el Ćŗnico que tenga que diseƱar todo increĆblemente bien, podĆ©s contratar un profesional de diseƱo web para que te ayude con tu web.
Pero tampoco te quedes solo con la estĆ©tica, pensĆ” tambiĆ©n en el sentido y el contenido, pues, asĆ tenĆ©s mĆ”s posibilidades de conseguir clientes. Es decir, podrĆ”s obtener mĆ”s ingresos y la rentabilidad de tu negocio.
5. Aumento del marketing boca a boca
ā ĀæTe pasĆ³ de ver algo increĆble en la web y compartirlo inmediatamente por WhatsApp o la propia red social de turno?. Bueno, parte de la responsabilidad de esto, estĆ” determinada por el diseƱo. Por eso, no hay que subestimar el poder que tiene el diseƱo web, mĆ”s aĆŗn, porque se puede generar este efecto viral, compartido de boca a boca.
El boca a boca es mĆ”s comĆŗn de lo que podrĆas llegar a creer. Entonces, tener un sitio web con diseƱo profesional, puede fortalecer tu imagen de marca por medio de un marketing de boca a boca.
DespuƩs de todo, un buen diseƱo y una gran experiencia del usuario, brindan grandes beneficios a tu negocio. AdemƔs, de viralizarte en el proceso. A mayor trƔfico, mƔs posibilidades de convertir a tus clientes.
6. Mayor alcance con tu pĆŗblico
Bueno, en los tiempos que corren parece obvio mencionar el alcance que tiene internet en los consumidores. Sin embargo, es destacable comentar que es mucho mƔs rƔpido contactar una empresa por medio de una pƔgina web que tener que ir hasta el propio local.
Entonces, facilitar este proceso por medio de un diseƱo web poderoso e intuitivo, le permitirĆ” al pĆŗblico encontrar informaciĆ³n relevante cĆ³mo tu nĆŗmero de telĆ©fono; direcciĆ³n; o el contacto por correo electrĆ³nico. Esta es una gran es una gran ventaja comercial que no tenĆ©s que desaprovechar.
AdemĆ”s, pueden descubrir fĆ”cilmente lo que haces y lo que podĆ©s ofrecer. A veces, pocas palabras alcanzan para dar un mensaje, en especial sĆ el diseƱo web habla por vos. ā Es decir, de poco sirve que digas que sos un profesional del diseƱo, sĆ tu pĆ”gina web estĆ” diseƱada como el traste muy mal.
7. Aumenta la red de contactos
Esto estƔ muy emparentado con lo anterior, pues, un gran diseƱo harƔ crecer tu red de contactos, los famosos leads. Gracias a estos, podrƔs comenzar con una gran estrategia de marketing digital y newsletters, por poner un ejemplo, y luego convertirƔs mucho mƔs fƔcil.
Como consejo, te recomiendo que aprendas a manejar un CRM.
ĀæEl diseƱador es solamente el profesional encargado del diseƱo web?
Bueno, es comĆŗn pensar que un diseƱador web es responsable de crear sitios web atractivos y completamente funcionales. Pero, en realidad, los diseƱadores hacen mĆ”s que eso.
Pues, los diseƱadores web tienen en su trabajo tareas rutinarias relacionadas con la creaciĆ³n de un diseƱo para medios digitales y la creaciĆ³n de contenido. Por lo tanto, deben analizar tanto las necesidades del cliente como los objetivos para configurar un sitio web a fin de brindar a los visitantes la mejor experiencia.
AdemĆ”s, diseƱadores web deben saber cĆ³mo insertar grĆ”ficos, usar lenguajes como HTML y actualizar el sitio cuando sea necesario.
ā Al momento de contratar un diseƱador, tenĆ©s preguntarle sĆ el diseƱo web es su pasiĆ³n.
Ejemplos de sitios con un gran diseƱo web
Bueno, toca ver tres ejemplos de sitios web que, desde mi punto de vista, tienen varios factores diferenciales y cumplen con creces con lo establecido.
1. Minimalist Baker
Este blog de comidas llamado Minimalist Baker es uno de mis sitios mĆ”s recurridos. No solo porque los platos se vean ricos y estĆ©n explicados correctamente. Si no, porque su blog tiene un fondo de color blanco que permite que sobresalgan las fotografĆas de sus preparaciones, un branding Ćŗnico y memorable, y una breve biografĆa para personalizar su sitio web.
Te genera esa sensaciĆ³n de limpieza y buen gusto con solo verlo. Cumple con el apartado visual de llamar la atenciĆ³n desde el momento cero.
2. Marshall
La marca de amplificadores Marshall, favorita de los rockeros tambiĆ©n es ya una de los principales e-commerce de audĆfonos y parlantes bluetooth para el hogar. En su sitio hay un buen balance entre el diseƱo que habla de un estilo de vida (donde la mĆŗsica es la gran protagonista) y una tradiciĆ³n que comenzĆ³ en los escenarios de rock.
Cuando entrĆ”s en la web de Marshall la experiencia del usuario es Ćŗnica, porque realmente te crees un rockstar.
3. Rockstar Games
Y, justamente, hablando de rockstar, es turno de la empresa de videojuegos. La pƔgina web de Rockstar Games se destaca por varios aspectos, en especial por su interfaz simple, y la buena experiencia del usuario que se logra con un visitante navega por ella. Este sitio web cumple con todos los puntos citados en el apartado de los elementos clave.
En definitiva, no necesitƔs mucho mƔs que eso, para alcanzar un gran nivel de calidad.
ConclusiĆ³n:
Bueno, llegamos al final del post. Vimos mucho sobre el diseƱo web, o al menos lo suficiente cĆ³mo para darte las pautas principales de diseƱo. AdemĆ”s, de los beneficios potenciales que obtendrĆas al tener un diseƱo web optimizado. SĆ esta Ć”rea se escapa de tu nivel de conocimiento, siempre existe la posibilidad de contratar un diseƱador web.
TambiĆ©n, tenĆ©s que tener en cuenta todo lo relacionado con la experiencia del usuario Ā«UXĀ», y la interfaz del usuario Ā«UIĀ». Pues, ambas aristas son parte de un mismo concepto: Ā«Darle lo mejor al pĆŗblicoĀ«. En entregas posteriores hablaremos de UX writing, pero por lo pronto solo te quiero dejar ideas de copywriting y storytelling.
Ahora si, para finalizar, quiero dejarte un regalo de 25 dĆ³lares para que puedas crear tu propio sitio web en WordPress. Lo Ćŗnico que tenĆ©s que hacer es clic el enlace que se encuentra en el banner, y luego, seguir las instrucciones. Entonces, una vez que tengas tu propia web, solo resta aplicar lo aprendido en diseƱo web, y listo. Con eso lograrĆ”s triunfar en el mercado.
