Home ¬Ľ Dise√Īo ¬Ľ ¬ŅC√≥mo dise√Īar una p√°gina web?
¬ŅC√≥mo dise√Īar una p√°gina web?

¬ŅC√≥mo dise√Īar una p√°gina web?

A estas alturas, no hace falta que te digamos la importancia de tener una buena p√°gina web¬†para empresas o proyectos personales. Esto no significa que el dise√Īo de una p√°gina web desde cero (o enfrentarse aun redise√Īo) sea f√°cil. Son muchos los frentes que debes tener en cuenta. Y conviene ir paso a paso para no dejarnos nada fuera en el proceso.

Con una página web puedes promocionar tu negocio o producto y posicionarlo en los buscadores. También puedes crear una estrategia de marketing alrededor de la misma.

√ćndice – Claves en el dise√Īo de p√°ginas web

 

Pasos para realizar una p√°gina web

Para poder conseguir¬†hacer una p√°gina web lo suficientemente atractiva, vas a tener que tener que seguir un proceso que te detallamos a continuaci√≥n, desde el punto en el que tenemos que definir el proyecto hasta el momento del lanzamiento y promoci√≥n. Te contamos c√≥mo dise√Īar una p√°gina web paso a paso.

 

1. Define la idea y objetivos de tu sitio web

Aunque parezca muy gen√©rico nos referimos a que necesitas tener un plan de negocio. Una vez que tengas definido el tipo de negocio con el que vas a comenzar, podremos dar el enfoque que buscas a la web corporativa. Si est√°s en internet, tu negocio existe. De lo contrario, es m√°s complicado que el p√ļblico te conozca. La p√°gina debe ser el principal escaparate para tu negocio.

Para dise√Īar una p√°gina web el primer paso es definir tu idea. Decide qu√© tipo de web quieres crear y qu√© es lo que quieres ofrecer con ella: publicidad, promoci√≥n, entretenimiento‚Ķ Todo esto tiene que estar muy claro.¬†
¬ŅQu√© quieres conseguir con tu web? ¬ŅEs un e-commerce? ¬Ņuna p√°gina de servicios? Marcarte unos objetivos te ayudar√° a definir el contenido de tu web y saber qu√© tipo de web necesitas para tu negocio.

Por ejemplo, si tu objetivo es conseguir más leads, más contactos con clientes potenciales, necesitarás mostrar de forma atractiva lo que ofreces y permitir de forma sencilla entrar en contacto. Si por el contrario quieres aumentar ventas a través de internet, tendrás que centrarte en simplificar el proceso de pago.

En este paso puede que no necesites a ning√ļn experto en desarrollo de p√°ginas web o dise√Īo web. No obstante s√≠ que te podr√≠a resultar interesante contar con un consultor de negocio para saber c√≥mo enfocar el proyecto si as√≠ lo consideras.

 

dise√Īo creacion paginas web
Pantalla con business strategy. Fuente:Rawpixel a través de Unsplash

 

2. Define los contenidos para tu web

Es necesario que tengas muy en cuenta lo que vas a decir en tu páginas web. Los contenidos son los que te van a hacer posicionar en los buscadores, si quieres apostar por el SEO. Pero también son los que van a convencer al usuario que visite tu web.

Es esencial que en una primera fase definas muy bien qué quieres decir, qué terminologías y qué vocabulario quieres utilizar. Pero será clave que cuentes con un experto para retocar el resultado final. Contar con un buen redactor SEO y comunicador será clave para tener un resultado convincente.

 

3. Primer dise√Īo: mockup y wireframe

Una vez tengas claro qu√© es lo que quieres de tu p√°gina web y sabes qu√© es lo que te va a ofrecer, hay que pasar a la primera fase de dise√Īo.

No tengas miedo a coger un trozo de papel y plasmar sobre el papel lo que tienes en mente. El mockup no es m√°s que un ‚Äėskech‚Äô, un esbozo o un borrador muy b√°sico de las p√°ginas y la estructura general de la web. Puedes definir tus p√°ginas principales y c√≥mo se navega entre ellas, pero sin entrar en detalles de textos.

El siguiente paso es transformar este primer esbozo en un¬†wireframe, un dise√Īo incipiente en el que se ven los elementos de cada p√°gina, su tama√Īo y posici√≥n. Existen muchas herramientas digitales para hacer wireframes (NinjaMock es gratuita y una de las m√°s conocidas).

 

Si no tienes experiencia en crear y dise√Īar p√°ginas web te recomendamos que te inspires en plantillas u otras webs para estos pasos.

 

Con todo esto terminarás con un mapa conceptual con el que saber en qué paso estás y cuál es el siguiente.

 

como hacer una pagina web - mockups

4. Dise√Īador web experto

Con todo lo que hemos adelantado en el dise√Īo web de nuestra p√°gina, este es el momento ideal para hablar con un dise√Īador experto. En muchas ocasiones querr√°s participar activamente y eso est√° bien, pero tambi√©n debes dejar trabajar al dise√Īador: √©l es quien sabe c√≥mo hacer un dise√Īo de una p√°gina web.

Cualquier sitio debe atender a la cuesti√≥n de la usabilidad web y unas proporciones de dise√Īo que hagan que el dise√Īo de una p√°gina web funcione de forma efectiva. Tambi√©n es importante estar al tanto de las √ļltimas tendencias de dise√Īo web como el motion design.

Si tu web es el punto de partida de tu marca, √©l realizar√° una serie de estudios para determinar la l√≠nea gr√°fica de tu empresa (estilo de letra, colores y tipos de im√°genes). Si ya tienes estos aspectos definidos, aseg√ļrate de enviarle tu gu√≠a de estilo.

Ten cuidado a la hora de contratar a tu dise√Īador. ¬°Un programador no es un dise√Īador! Encontrar a un profesional del dise√Īo que haga lo que realmente te conviene para alcanzar tus objetivos es clave. Puede que en una situaci√≥n as√≠ sea √ļtil subcontratar el dise√Īo de tu p√°gina web.

 

¬ŅNecesitas contratar un dise√Īador web? En Yeeply te ayudamos a encontrarlo entre nuestros profesionales certificados.

 

5. Desarrollo de páginas web: es hora de escribir código

¬ŅPreparado para lo m√°s complejo? Es la hora de desarrollar el proyecto que nos hemos planteado. Dependiendo de la complejidad de tu proyecto necesitar√°s un desarrollador, dos o hasta un equipo completo de desarrollo de p√°ginas web.

También influye mucho la celeridad con la que quieras terminar el trabajo. Cuanta más urgencia más equipo y horas de desarrollo necesitarás invertir.

Recuerda que cu√°nto m√°s tengas adelantado y definido antes de empezar con el desarrollo m√°s sencillo ser√°. Es recomendable que tengas todo el tema de contenidos y de dise√Īo preparado para cu√°ndo busques a un desarrollador. Si no tienes muy claro qu√© desarrollador contratar, cu√©ntanos tu proyecto y te ayudamos a encontrar al m√°s adecuado.

 

ūüĎČūüŹľ Quiz√°s te interese: Desarrollador web remoto: las ventajas de trabajar con esta figura

 

como crear una pagina web
Desarrollador escribiendo codigos. Fuente: Danial RiCaRoS a través de Unsplash

 

6. Testing de tu web

Al dise√Īar una web y antes de ponerla en internet es necesario probarla: no solamente cuando est√© acabado el desarrollo, sino cada vez que termines una fase. Solo as√≠ detectar√°s todos los posibles problemas que puede tener, ver que todo est√© en su sitio y sobre todo que sea funcional.

El testeo es esencial, especialmente si lo realizan personas que no han desarrollado o dise√Īado el producto. Te har√° entender qu√© debes mejorar a nivel de dise√Īo y usabilidad y te permitir√° detectar posibles fallos y ver qu√© cosas debes corregir antes del lanzamiento de la p√°gina web.

 

ūüĒé Quiz√°s te interese | Plugins de WordPress para dise√Īar una web sin c√≥digo

 

7. Lanzamiento de tu p√°gina

Una vez hayas revisado todos los aspectos anteriores debes prepararte para el gran lanzamiento. Eso sí, antes de hacerlo deberás preparar un par de cosillas para que sea un lanzamiento espectacular.

  • Prepara nota de prensa. Explicando qui√©n eres y por qu√© eres una novedad.
  • Ten a mano informaci√≥n relevante e im√°genes de tu marca. Prepara im√°genes, logos, fotos de equipo, etc.
  • Genera contactos para promocionar tu sitio. Es recomendable que trabajes en esto antes del lanzamiento y programes acciones con colaboradores o influencers de tu sector.

 

ūüö©Art√≠culo recomendado |¬† Creaci√≥n web: 12+1 preguntas que debes hacerte antes de construir tu sitio

 

que es dise√Īo de pagina web
Pantalla ordenador con pagina web. Fuente: Igor Miske a través de Unsplash

 

8. Estrategia de marketing

Este apartado va más allá del desarrollo de páginas web para entrar en el del marketing online. Pero si quieres que tu desarrollo web tenga éxito debes prestar atención a tu estrategia. Si has seguido la recomendación de optimizar los contenidos para SEO, puedes retomar el marketing digital desde este punto. Apuesta por una estrategia de posicionamiento web y empieza a crecer en los primeros meses.

 

9. An√°lisis y mejoras: ¬Ņnecesitamos hacer cambios?

¬ŅC√≥mo saber si has alcanzado tus objetivos iniciales? Seguro que recuerdas el primer punto de esta lista: definir objetivos. La anal√≠tica te ayudar√° a definir si has conseguido los objetivos y metas marcadas en un inicio. Si los has conseguido, genial, marquemos nuevos retos.

Si no los has alcanzado deber√°s identificar porqu√©, d√≥nde fallas y marcar nuevas modificaciones para lograrlos. ¬ŅEstas preparado? Prep√°rate para ver, analizar y reparar todos los problemas que hayan surgido de los pasos anteriores.

También deberás optimizar todos los aspectos del SEO de tu web. Así conseguirás que esté en los primeros puestos de los buscadores.

 

crear web paso a paso - analitica de la web

Aspectos a tener en cuenta para elaborar una p√°gina web

Podemos ayudarte en el desarrollo de tu proyecto. Creemos en el crecimiento de tu negocio a nivel online y offline. A continuaci√≥n, te explicamos cada uno de los peque√Īos pasos que tendr√°s que dar.

La p√°gina debe ser usable

Busca que la navegación sea lo más sencilla posible. Debes tener claros los objetivos que quieres, para evitar que el usuario se pierda. Marca un rumbo sencillo que facilite al usuario encontrar lo que busca de forma rápida y concisa. En caso de vender productos y realizar e-commerce, la compra debe realizarse en pocos pasos. Se debe ahorrar tiempo de espera al usuario. Eso hará que nuestro negocio resulte más atractivo.

Crea contenido web de calidad y lectura sencilla

Cuida el fondo y la forma. No sirve de nada hacer una web corporativa si no cuidas lo que se ofrece en ella. La informaci√≥n tiene que tener calidad. Debe incitar a la lectura del usuario y a satisfacer sus necesidades de b√ļsqueda. No hay te conformes con ofrecer algo vistoso, carente de sentido.

Tu web corporativa debe ser responsive

Es necesario adaptar la p√°gina a todo tipo de dispositivos. Ya no se puede pensar en el ordenador como √ļnico medio en el que el usuario leer√° nuestra web. En todas las viviendas como m√≠nimo existe un smartphone. Tampoco es complicado encontrar una tablet o dispositivo similar.

Utiliza las redes sociales para promocionar tu web

El usuario busca cercan√≠a y una buena relaci√≥n con √©l har√° crecer nuestro negocio. Es bueno incluir alg√ļn testimonio positivo de los clientes, pero tampoco de debe abusar. Tambi√©n es necesario estar presente en dichas redes e incluir enlaces que enlacen nuestra web corporativa a lugares como Facebook, Twitter, Instagram‚Ķ

 

como hacer paginas web integradas con redes sociales

Rodéate de profesionales cualificados

Si en tu idea es crear una web corporativa de calidad, no dudes en contratar a buenos profesionales para su desarrollo y expansión. Una vez que tengas la página corporativa finalizada, es necesario pensar en invertir en publicidad. Como mínimo debes tener una o dos personal que se encarguen del marketing online y offline.
El trabajo no acaba con la puesta en marcha de la web. Posteriormente, se deben desarrollar campa√Īas de publicidad, posicionamiento web y otras muchas opciones que desde Yeeply podemos ofrecerte.

Ebook 4 Checklist web

Tendencias en el dise√Īo de sitios web

Lamentablemente, todas las p√°ginas webs acaban qued√°ndose desfasadas y necesitan un redise√Īo. Para que la tuya resista lo m√°ximo posible el paso del tiempo gu√≠ate por las √ļltimas tendencias en dise√Īo de p√°ginas web pero siempre con criterio.¬†Las modas pasan y lo importante es que tu identidad permanezca.
Te dejamos algunas tendencias de dise√Īo web de 2019 que te pueden servir como inspiraci√≥n. Tienes m√°s en este magn√≠fico art√≠culo de Awwwards.

Del mobile-first al thumb-first

S√≠, tu web debe ser responsive y desde el minuto uno de su concepci√≥n tienes que pensar en c√≥mo se ver√° en la peque√Īa pantalla. La cuesti√≥n es que seg√ļn Josh Clark (Designing for Touch)¬†el pulgar es el protagonista en la interacci√≥n con el¬†smartphone. A la hora de preparar la versi√≥n mobile de tu web, aseg√ļrate de pensar con el dedo gordo.
¬ŅUn ejemplo de c√≥mo aplicar esta tendencia?¬†No te extra√Īar√° ver cada vez m√°s el acceso a al men√ļ o la navegaci√≥n de las p√°ginas web situadas en la parte inferior de la pantalla, al alcance del pulgar.

 

como disenŐÉar una pagina web para mobile

Ilustración con carácter

Si lo hace todo el mundo quiz√°s es el momento de dejar de hacerlo. En el √°mbito gr√°fico las galer√≠as de iconos flat est√°n muy machacadas. Por eso muchas marcas apuestan por integrar en su dise√Īo de p√°gina web dise√Īos creados espec√≠ficamente para ellos; e incluso trabajos de ilustraci√≥n que les permitan diferenciarse.

 

como se hace una pagina web paso a paso - ilustraciones
Mailchimp

 

Más vídeo

Y no hablamos del t√≠pico v√≠deo enorme en tu p√°gina de inicio para explicar tu producto. El v√≠deo se integra en el dise√Īo de p√°ginas web para comunicar o incluso simplemente como recurso gr√°fico, insertado con¬†auto-play.¬†

Formas m√°s naturales y org√°nicas

Puede ser que el mundo del c√≥digo y la programaci√≥n sea un poco cuadriculado, pero eso no significa que el dise√Īo de p√°ginas web se tenga que limitar a formas geom√©tricas.
Los dise√Īadores apuestan cada vez m√°s por formas suavizadas y naturales; y dan la espalda a la geometr√≠a y la simetr√≠a. ¬ŅEl resultado? P√°ginas web mucho m√°s humanas y vivas.

 

DisenŐÉar prototipos web con formas organicas
Tyepform

 

Vocabulario b√°sico en el dise√Īo web

Para ir terminando, si no has entendido alguno de los conceptos que hemos descrito anteriormente, a continuación vamos a daros una lista de conceptos con los que entender todo lo necesario.

  • Dise√Īo: Es el proceso previo de configuraci√≥n, en la b√ļsqueda de una soluci√≥n. Se plasma el pensamiento en una soluci√≥n o en las alternativas mediante esbozos, dibujos, bocetos o esquemas trazados en cualquiera de los soportes.
  • Mockup: El mockup o maqueta es un modelo a escala o tama√Īo real de un dise√Īo o un dispositivo. Esto se puede utilizar para la demostraci√≥n, evaluaci√≥n del dise√Īo, promoci√≥n y para otros fines. Es esencial sobretodo en las fases de prototipado de proyectos digitales como webs o apps.
  • Resoluci√≥n de pantalla: Es el n√ļmero de p√≠xeles que pueden ser mostrados en la pantalla. Viene dada por el producto del ancho por el alto, medidos ambos en p√≠xeles, con lo que se obtiene una relaci√≥n, llamada relaci√≥n de aspecto.
  • Im√°genes vectoriales: Es una imagen digital formada por objetos geom√©tricos independientes, cada uno de ellos est√° definido por los diferentes atributos matem√°ticos de forma , posici√≥n y color. Es completamente distinto al formato de las im√°genes de mapa de bits, tambi√©n llamados im√°genes matriciales, que est√°n formados por p√≠xeles.

 

Encuentra al equipo perfecto para dise√Īar tu web

Dise√Īo, desarrollo, usabilidad, contenidos… ¬°Es dif√≠cil que t√ļ solo vayas a poder con todo esto! Sobre todo, es dif√≠cil que puedas hacerlo todo al nivel que exige una p√°gina web de √©xito. Pero no te preocupes: en Yeeply podemos ayudarte. Yeeply es una plataforma de profesionales digitales certificados.
Puedes darnos más detalles sobre tu página web a través de este enlace y nos encargaremos de encontrar al equipo perfecto para crear tu página web.

Proyecto Dise√Īo

ACTUALIZACI√ďN: Este art√≠culo fue publicado originalmente el 2 de noviembre de 2016 y ha sido actualizado para mejorar su calidad.¬†

Escrito por

Yeeply
Yeeply

Yeeply es una plataforma premium especializada en el desarrollo de apps móviles y sitios webs a medida. Desde 2012 nuestros clientes nos confían el desarrollo de sus proyectos, y nos apoyamos a nivel técnico en los mejores profesionales certificados: desarrolladores de aplicaciones móviles o web freelance, empresas de software top, y agencias mobile más punteras. ¡Crear una app o crear una web nunca ha sido tan rápido, confidencial y seguro como con Yeeply! Publica tu proyecto de software en Yeeply y deja que nuestro equipo te ayude durante todo el proceso.