[ · ]
DISEÑO DE PÁGINAS WEB EN CÓRDOBA
FUNDAMENTOS DEL DISEÑO WEB PROFESIONAL
Nadie duda de que estamos inmersos en un mundo cada vez más digital. Y en lo que respecta al mercado local, el grado de penetración de la digitalización ha alcanzado sectores que hasta este momento se habían resistido a su transformación. En el último año, el diseño de páginas web ha sido una de las búsquedas más demandadas en Google. Por ello, desde tabarestabares queremos compartir algunas de las principales tendencias en diseño web a nivel internacional y expondremos las claves para desarrollar una web profesional adecuada también al ámbito local.
CONTENIDOS
• [ 1 ] Tipos de Páginas Web › Webs corporativas, webs portfolio, webs ecommerce y blogs• [ 2 ] Diseño Web › Pasos para la creación y desarrollo de un sitio web de calidad• [ 3 ] Posicionamiento Web › SEO, marketing digital y otras estrategias para la obtención de resultados• [ 4 ] Tendencias › Presente y futuro del diseño web• [ 5 ] Wireframes › Las estructuras detrás del diseño de páginas web• [ 6 ] Influencias › Algunos de nuestros referentes
[ 1 ]
TIPOS DE PÁGINAS WEB › WEBS CORPORATIVAS, WEBS PORTFOLIO, WEBS ECOMMERCE Y BLOGS
Existen diferentes tipos de páginas web y una pregunta para la que la mayoría conoce respuesta ¿por qué un negocio debe tener una página web? Hace 30 años Internet solo era una parte del mundo y en la actualidad no podemos entender el mundo sin Internet. Todas las empresas ofrecen productos o servicios y hoy día quien los necesita hace su búsqueda en la red. Ser encontrado depende fundamentalmente de disponer de una página web profesional. Por ello, a continuación, vamos a ver cuáles son las más frecuentes. • Página web corporativa › En lo que respecta a reputación e imagen de marca sería el primer paso en el camino hacia la transformación digital. El soporte perfecto para exponer a través de Internet aquellos valores, productos, servicios e información de contacto de la empresa. • Página web portfolio › Especialmente indicada para quienes tienen una obra que exponer. Es la mejor forma de mostrar cualquier tipo de proyecto, pues permite dar a conocer aspectos detallados o casos de estudio, y quizás una de las principales estrategias para construir marca personal. • Página web ecommerce › También denominada tienda online, ofrece la posibilidad de mostrar un catálogo de productos detallado para su compraventa a través de Internet. Este modelo de negocio ha sido clave para el desarrollo y crecimiento de empresas de carácter local permitiéndoles mostrar su stock, además de la posibilidad de acceder a nuevos mercados. • Página web blog › Es una plataforma normalmente diseñada sobre WordPress. Hoy día el 40% de las páginas web están diseñadas sobre este gestor de contenidos y precisamente está indicada para publicar artículos con regularidad. Desde un punto de vista estratégico, los blogs permiten un grado de especialización muy específico permitiendo ganar autoridad y posicionamiento en un sector.
[ 2 ]
DISEÑO WEB › PASOS PARA LA CREACIÓN Y DESARROLLO DE UN SITIO WEB DE CALIDAD / 2 . 1
Como hemos mencionado anteriormente, en la actualidad ya son más del 40% las páginas web que están realizadas con WordPress. Y la razón principal es porque son bastante asequibles. De entrada, cualquiera puede crear una web con WordPress de manera sencilla y en pocos pasos. Es cierto que, desde un punto de vista profesional, habrá que tener en cuenta muchos factores y dependerá sobre todo de la capacidad de inversión y de los objetivos. En principio, para comenzar, cualquiera podría llevarla a cabo y más adelante en función de la proyección de la empresa ponerla en manos de un estudio de diseño web especializado. Antes de comenzar, necesitaremos contratar nuestro nombre de dominio y un proveedor de hosting donde alojar el sitio web. Como hemos mencionado, los principales beneficios de utilizar WordPress son: • Sencillez › No requiere de ningún conocimiento de programación para las funciones básicas. • Rentabilidad › Es una de las opciones más económicas y asequibles, ya que WordPress presenta una de las bibliotecas de temas y plugins gratuitos más grandes del mundo disponibles a través de la propia plataforma. • Facilidad › Finalmente, gracias a la gran comunidad de desarrolladores y bloggers apasionados detrás de WordPress es posible encontrar soluciones y respuestas de manera rápida y eficaz a través de sus foros en caso de dudas. A partir de aquí, ya estamos listos para comenzar. Cualquier proveedor de alojamiento web te permitirá la auto-instalación de WordPress desde el propio panel de control con un sólo clic. A continuación, únicamente deberás seguir los pasos del configurador y en pocos minutos tendrás acceso al panel de gestión de la plataforma.
[ 2 ]
DISEÑO WEB › PASOS PARA LA CREACIÓN Y DESARROLLO DE UN SITIO WEB DE CALIDAD / 2 . 2
• Diseño › La ventaja principal para la creación de una página web con WordPress es la gran cantidad de temas disponibles que existen en su catálogo. Sean cuales sean las necesidades del proyecto, seguramente encontrarás un diseño adecuado para estructurar con gusto el contenido. Dispone de más de 6000 referencias al alcance desde el panel de control › apariencia › temas. Además de las versiones gratuitas, existen marketplaces como themeforest que ofrecen plantillas profesionales con las que poder desarrollar webs de un modo más elaborado. • Contenido › En lo que respecta a este punto, nosotros recomendamos tenerlo perfectamente definido antes de diseñar. Es el método que utilizamos. Un sitio web no deja de ser una herramienta de comunicación que responde a unos objetivos específicos. Si tenemos la información estructurada previamente será más fácil llevar a cabo el diseño. Volviendo a la parte técnica, existen tres tipos de contenidos con los que podemos estructurar la información en WordPress: páginas, entradas y medios. Las páginas son consideradas como la unidad básica de cualquier sitio web y permiten crear secciones o apartados como quiénes somos, productos, servicios, contacto, etc. Las entradas, en cambio, están orientadas a la creación de artículos para blogs. Y finalmente los medios están referidos a imágenes y videos.
[ 2 ]
DISEÑO WEB › PASOS PARA LA CREACIÓN Y DESARROLLO DE UN SITIO WEB DE CALIDAD / 2 . 3
• Plugins › Este tipo de funcionalidad es primordial, ya que WordPress permite usar aplicaciones dentro de nuestra web. De este modo, podemos añadir funciones y características extra como un formulario de contacto o un chat de WhatsApp. Hay miles de plugins disponibles dentro de la plataforma y en su mayor parte gratuitos. Es importante instalar plugins de seguridad, también de caché para mejorar la velocidad de carga del sitio y por supuesto Yoast SEO para potenciar el posicionamiento. • Ejecución › Hasta aquí tendríamos las nociones básicas en líneas generales para la creación de una página web. Es cierto, que el proceso requiere de tiempo y esfuerzo en función de la complejidad del sitio. Y también, que el diseño de una página web profesional entraña muchos detalles en cada paso. Nosotros recomendamos las dos opciones, tanto la versión autodidacta para iniciarse con proyectos personales que no disponen de demasiados recursos y la versión contratación que permite contar con la ayuda de estudio de diseño profesional para un desarrollo integral desde una triple perspectiva: estrategia, diseño y optimización SEO. Y hablando de posicionamiento web, en el siguiente apartado vamos a analizar la importancia y los beneficios comerciales del diseño web SEO.
[ 3 ]
POSICIONAMIENTO WEB › SEO, MARKETING DIGITAL Y OTRAS ESTRATEGIAS PARA LA OBTENCIÓN DE RESULTADOS / 3 . 1
Actualmente, el marketing digital se ha convertido en el gran boom para agencias y marketers especializados en rincones de todo el mundo. Esta disciplina engloba a todas aquellas acciones estratégicas que se ejecutan en Internet desde el plano comercial. A raíz de la enorme evolución de la tecnología y el big data, esta especialidad ha experimentado rápida y progresivamente profundos cambios tanto en las técnicas como en las herramientas que utiliza. Y podemos diferenciar entre un marketing digital más global y otro más específico orientado fundamentalmente al mercado local. A continuación analizamos cuáles son las estrategias más conocidas: • SEO › El acrónimo más reconocido de los últimos tiempos Search Engine Optimization, se define en castellano como la optimización web en relación al funcionamiento de los motores de búsqueda. Dicho de otro modo, es la disciplina que se ocupa de estudiar la lógica que hay detrás de estos buscadores para adecuar las páginas web y que aparezcan en los primeros resultados. El más conocido es Google que se encarga de indexarlas para poder ofrecérselas a todos/as aquellos/as que las están buscando del modo más eficaz. Hay una burbuja empresarial en este sentido y no siempre se cumplen los resultados que se prometen. Pero cuando el SEO se realiza de forma ética y profesional es posible obtener resultados tremendamente positivos en cuanto a incremento de ventas y facturación. Desde una perspectiva local la optimización de motores de búsqueda se centra en potenciar los resultados para productos y servicios en una determinada ciudad. Los/as usuarios/as confían en Google para encontrar información sobre todo aquello que necesitan, como por ejemplo, un buen restaurante para almorzar, una clínica dental de confianza o un despacho de abogados de prestigio para su empresa. • SEM › A diferencia del anterior, y aunque el Search Engine Marketing tiene el mismo objetivo, impulsar un sitio web hasta las primeras posiciones del buscador, esta disciplina lo hace mediante inversión en espacios publicitarios digitales. Ofrece un alto control y resultados inmediatos pero a golpe de talonario, mientras que el SEO consigue resultados de forma orgánica.
[ 3 ]
POSICIONAMIENTO WEB › SEO, MARKETING DIGITAL Y OTRAS ESTRATEGIAS PARA LA OBTENCIÓN DE RESULTADOS / 3 . 2
• Content Marketing › También conocido como marketing de contenidos, es la estrategia basada en la creación de contenidos para atraer al público objetivo. De forma popular, podríamos afirmar que se trata de sembrar, sembrar y sembrar para poder recoger la cosecha en un futuro. Es una estrategia a largo plazo, muy efectiva cuando hablamos de autoridad, prestigio y personal branding. • Social Media Marketing › Se dice de la estrategia que pone las redes sociales al servicio de un proyecto o negocio aprovechando todas y cada una de sus funcionalidades. El objetivo principal es captar la atención del target a medio-largo plazo, mediante contenidos orgánicos y/o patrocinados. ¿Y cómo afectan todas estas estrategias a los resultados de nuestra página web? Todo contribuye a mejorar su posicionamiento ya que todas estas acciones están ideadas para dirigir tráfico hacia ella proporcionándole autoridad, visibilidad y sobre todo, conversión. Por ello, una web estará perfectamente diseñada tanto interna como externamente. Los contenidos deberán estar estructurados de manera ordenada teniendo en cuenta la estética. Y a nivel técnico perfectamente estructurada para que sea indexada del modo más eficaz y mostrada entre los primeros puestos de resultados en el buscador. Una de las cuestiones técnicas que Google establece como factor clave es la velocidad de carga. Para ello, compartimos dos herramientas que nos permiten comprobar en tiempo real cómo de bueno es nuestro sitio web en ese sentido. Cualquiera que haya contratado una página web puede comprobar de forma inmediata cómo de veloz es su sitio web tanto en su versión móvil como en su versión de escritorio para ordenadores portátiles y de sobremesa. Incluso puede realizar comparaciones entre la suya y las de la competencia, ya que son muy útiles para medir eficacia, calidad y diseño de páginas web: • Pagespeed › www.pagespeed.com• GTMetrix › www.gtmetrix.com
[ 4 ]
TENDENCIAS › PRESENTE Y FUTURO DEL DISEÑO WEB / 4 . 1
Las tendencias, en general, nos ayudan a vislumbrar el camino futuro y nos proporcionan altas dosis de inspiración. En lo referente al diseño web parecen compartir un tema común: Los diseñadores web se están alejando de la fantasía para centrarse en el realismo, y están mezclando lo digital y lo ordinario como nunca antes. A continuación, veremos las tendencias más interesantes de diseño de páginas web en la actualidad. • Parallax Animation › Esta tendencia va desde las micro-interacciones hasta los fondos de partículas más elaborados, volviéndose aún más complejas a través de la separación de los elementos. La profundidad creada mediante el uso del primer plano y el fondo tienen un beneficio adicional de inmersión, transformando la pantalla en algo parecido al escenario de un teatro. A medida que los usuarios navegan por la web, se sienten atraídos por su rendimiento que fluye como por arte de magia, es verdaderamente hipnótico. • Neumorphism › Es sucesora en gran medida del diseño plano, un estilo que simplificó iconos y colores de una manera uniforme y fácilmente identificable. Esta tendencia presenta diseños que imitan la fisicalidad a través de sombras selectivas mientras se superponen con colores semiplanos. Por lo general, el efecto se asemeja al estampado o al grabado digital, permitiendo a los diseñadores recuperar la experiencia táctil y aumentando la conexión del usuario con el diseño con el que está interactuando.
[ 4 ]
TENDENCIAS › PRESENTE Y FUTURO DEL DISEÑO WEB / 4 . 2
• Abstract Composition › Las formas abstractas, especialmente aquellas que consisten en estructuras geométricas primitivas como cuadrados y círculos pueden parecer simples y restrictivas. Sin embargo, diseñadores web de todo el mundo las están incorporando en composiciones complejas con un resultado realmente estético. En muchos casos, estas ilustraciones de arte abstracto están reemplazando a las fotografías de archivo y a otro tipo de ilustraciones figurativas. El resultado son páginas web que se sienten expresivas y vivas a través del dinamismo compositivo y al color. • Comfortable Colors › Nos llama especialmente la atención esta tendencia que deriva directamente de los nuevos hábitos y formas de vida cotidianas en la actualidad. Dada la naturaleza digital del mercado laboral reciente, la mayoría de trabajadores/as pasan gran parte de su tiempo frente al ordenador. Por lo que no es extraño que los/as usuarios/as experimenten fatiga visual después de mirar una pantalla durante largos períodos de tiempo. Los diseñadores siempre atentos a los cambios sociales lo están teniendo en cuenta y van utilizando esquemas de color más agradables a la vista. • Scrolling Transformations › El scroll es una de las formas más sutiles de interacción. Por lo que acciones físicas como mover los dedos sobre el ratón podrían provocar determinadas respuestas en la pantalla. El diseño web actual está aumentando las respuestas visuales que los usuarios experimentan al hacer scroll, desde cambios de esquemas de color hasta complejas transiciones animadas.
[ 4 ]
TENDENCIAS › PRESENTE Y FUTURO DEL DISEÑO WEB / 4 . 3
• 3D Products › Puede que Apple haya sido la compañía que desde hace años ha liderado esta tendencia. Los productos suelen estar en el corazón de una web y como tal, funcionan además como elementos de diseño con los que poder crear. Este enfoque no solo posibilita una sinergia visual entre producto y web, sino que también hace que el diseño ofrezca páginas verdaderamente magnéticas y atractivas. • Captivating Questionnaires › Cada vez son más los diseñadores de páginas web que investigan en el UX para introducir nuevas formas de interacción. Una tendencia en alza en este sentido es la utilización de cuestionarios pop-up para fomentar una experiencia web aún más participativa. El objetivo es involucrar al usuario/a por ejemplo mediante preguntas agradables de opción múltiple que se centran en sus gustos acerca de los productos o servicios de la marca. • 3D Color › Finalmente, los esquemas de color siempre han tenido gran protagonismo en el diseño web. Si bien desde hace tiempo el uso de degradados había tomado fuerza en diseñadores de todas las partes del mundo. Recientemente su evolución está concluyendo en transiciones de color cada vez más realistas, dando lugar a este nuevo estilo que se logra mediante un fino sombreado para esferificar y dar cierto volumen a los elementos.
[ 5 ]
WIREFRAMES › LAS ESTRUCTURAS DETRÁS DEL DISEÑO DE PÁGINAS WEB
Si conocéis algunos detalles sobre nuestro trabajo sabréis que nos encantan las retículas y las estructuras. Para nosotros es un paso previo antes de abordar cualquiera de los proyectos de diseño que llevamos a cabo, y como no podía ser de otra manera, también en la creación y diseño de páginas web en Córdoba y en el resto de la geografía nacional. Un wireframe no es más que un boceto o esquema en el que se representa visualmente de una manera sencilla y escueta la estructura de una página web. Su objetivo es definir el contenido y la posición de los diversos bloques de contenido incluyendo menús de navegación o acciones determinadas de interacción. Los wireframes no utilizan color ni tampoco tipografías y están centrados en la funcionalidad, la estructura y la experiencia de usuario. En nuestro caso solemos realizarlos a mano en una primera versión. Desde luego, ofrecen una metodología eficaz para la construcción y desarrollo de sitios web, ya que permiten componer páginas de forma sencilla y realizar múltiples versiones hasta encontrar la opción u opciones más adecuadas en un tiempo reducido. Y algo realmente valioso, posibilitan la detección de posibles problemas y sirven como herramienta de trabajo para cotejar y consensuar planteamientos esenciales con el cliente.
[ 6 ]
INFLUENCIAS › ALGUNOS DE NUESTROS REFERENTES
Para finalizar, quisiéramos compartir algunos de los estudios de diseño web que nos resultan más interesantes, también como importantes referentes de los que tomar inspiración. Entre ellos, se encuentran Human First y Roger P. A nivel internacional, el top five de agencias especializadas que están marcando el presente y el futuro del diseño de páginas web a nivel internacional son Clay, Huge, Hello Monday, Active Theory y Hey Days.
ACERCA DE TABARESTABARES
Somos un estudio de diseño de páginas web ubicado en Córdoba especializado en branding y comunicación visual. Concebimos el diseño como un instrumento estratégico con capacidad para impulsar activos de marca a gran escala. Y definimos su eficacia como el equilibrio perfecto entre estética y funcionalidad. A lo largo de nuestra trayectoria, hemos recibido tres reconocimientos en los Premios de Diseño Gráfico Nacional ANUARIA, sido finalistas en los Premios de Diseño Andalucía AAD y nuestro trabajo se ha mostrado en la exposición de diseño gráfico nacional 128 Miradas. Durante nuestros 9 años de actividad, hemos tenido la oportunidad de trabajar para diferentes clientes y marcas de diversa índole, entre ellas, Junta de Andalucía, Ayuntamiento de Córdoba, Diputación, Ministerio de Ciencia e Innovación o Universidad de Córdoba. Una experiencia que nos ha capacitado para adecuar con eficacia la mejor estrategia de diseño a cada proyecto en cada sector.
