{"id":5913,"date":"2021-08-22T15:55:12","date_gmt":"2021-08-22T18:55:12","guid":{"rendered":"https:\/\/web4.com.ar\/?p=5913"},"modified":"2025-10-28T14:15:45","modified_gmt":"2025-10-28T17:15:45","slug":"como-iniciar-el-diseno-de-un-sitio-web","status":"publish","type":"post","link":"https:\/\/www.web4.com.ar\/en\/como-iniciar-el-diseno-de-un-sitio-web\/","title":{"rendered":"How to start a website design"},"content":{"rendered":"

[et_pb_section fb_built=\u00bb1″ _builder_version=\u00bb4.16″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_row admin_label=\u00bbIntro\u00bb _builder_version=\u00bb4.27.0″ width=\u00bb100%\u00bb custom_padding=\u00bb10px|0px|0px|0px|false|true\u00bb border_color_bottom=\u00bb#cecece\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.16″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text _builder_version=\u00bb4.27.0″ text_font_size_phone=\u00bb14px\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n

En este art\u00edculo te mostrar\u00e9 c\u00f3mo iniciar el dise\u00f1o de un sitio web.
Conocer\u00e1s los pasos a seguir en el desarrollo y c\u00f3mo debes recopilar la informaci\u00f3n de los contenidos para presentarlos a tu webmaster.<\/p>\n

Una vez que hayas reunido los Requisitos para tener un sitio web<\/strong><\/em><\/a> que te expliqu\u00e9 en mi art\u00edculo anterior, ya estar\u00e1s en condiciones de avanzar para concretar tu website
Quiz\u00e1s no sepas por d\u00f3nde empezar y es por eso que te presento una gu\u00eda de organizaci\u00f3n que podr\u00e1s seguir muy f\u00e1cilmente.<\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row custom_padding_last_edited=\u00bbon|phone\u00bb admin_label=\u00bbQuiero\u00bb _builder_version=\u00bb4.27.4″ background_color=\u00bbrgba(39,91,0,0.13)\u00bb width=\u00bb100%\u00bb module_alignment=\u00bbcenter\u00bb custom_margin=\u00bb30px||30px||true|false\u00bb custom_padding=\u00bb15px|0px|15px|0px|true|true\u00bb custom_padding_tablet=\u00bb15px||15px||true|true\u00bb custom_padding_phone=\u00bb10px|10px|10px|10px|true|true\u00bb border_color_bottom=\u00bb#eaeaea\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.16″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text admin_label=\u00bbQuiero\u00bb _builder_version=\u00bb4.27.4″ header_line_height=\u00bb2em\u00bb custom_padding=\u00bb5px|0px|5px|0px|true|true\u00bb custom_padding_tablet=\u00bb5px|0px|5px|0px|true|true\u00bb custom_padding_phone=\u00bb5px||5px||true|true\u00bb custom_padding_last_edited=\u00bbon|tablet\u00bb header_2_font_size_tablet=\u00bb24px\u00bb header_2_font_size_phone=\u00bb24px\u00bb header_2_line_height_tablet=\u00bb\u00bb header_2_line_height_phone=\u00bb\u00bb header_2_line_height_last_edited=\u00bbon|tablet\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n

>>>\u00a0 QUIERO MI WEB <<<<\/strong><\/p>\n

[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/www.web4.com.ar\/wp-content\/uploads\/2024\/09\/Boton-Whats-app.png\u00bb alt=\u00bbPackaging posavasos\u00bb title_text=\u00bbPackaging posavasos\u00bb url=\u00bb@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6Ijc1MiJ9fQ==@\u00bb url_new_window=\u00bbon\u00bb align=\u00bbcenter\u00bb admin_label=\u00bbBoton consulta\u00bb _builder_version=\u00bb4.27.4″ _dynamic_attributes=\u00bburl\u00bb _module_preset=\u00bbdefault\u00bb custom_padding=\u00bb5px||5px||true|false\u00bb custom_padding_tablet=\u00bb5px||5px||true|false\u00bb custom_padding_phone=\u00bb10px||10px||true|false\u00bb custom_padding_last_edited=\u00bbon|phone\u00bb saved_tabs=\u00bball\u00bb global_colors_info=\u00bb{}\u00bb transform_styles__hover_enabled=\u00bbon|hover\u00bb transform_scale__hover_enabled=\u00bbon|hover\u00bb transform_translate__hover_enabled=\u00bbon|desktop\u00bb transform_rotate__hover_enabled=\u00bbon|desktop\u00bb transform_skew__hover_enabled=\u00bbon|desktop\u00bb transform_origin__hover_enabled=\u00bbon|desktop\u00bb transform_scale__hover=\u00bb110%|110%\u00bb global_module=\u00bb11717″ theme_builder_area=\u00bbpost_content\u00bb locked=\u00bboff\u00bb][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=\u00bbIntro\u00bb _builder_version=\u00bb4.27.0″ width=\u00bb100%\u00bb custom_padding=\u00bb10px|0px|0px|0px|false|true\u00bb border_color_bottom=\u00bb#cecece\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.16″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text _builder_version=\u00bb4.27.0″ text_font_size_phone=\u00bb14px\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n

Sitio web responsivo<\/h3>\n

Aseg\u00farate que tu dise\u00f1ador desarrolle un sitio web responsivo, tambi\u00e9n llamado dise\u00f1o web adaptable, dise\u00f1o web adaptativo o web responsive.
Esta es una normativa de desarrollo web cuyo objetivo es adaptar la apariencia de las p\u00e1ginas al dispositivo que se est\u00e9 utilizando para visitarlas.<\/p>\n

[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/web4.com.ar\/wp-content\/uploads\/2021\/08\/responsive-web-design.jpg\u00bb alt=\u00bbresponsive web design\u00bb title_text=\u00bbresponsive-web-design\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.16″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.16″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n

Hoy d\u00eda las p\u00e1ginas web se ven en multitud de dispositivos como tabletas, tel\u00e9fonos inteligentes, libros electr\u00f3nicos, port\u00e1tiles, PC, etc.
Adem\u00e1s, cada dispositivo tiene sus caracter\u00edsticas concretas: tama\u00f1o de pantalla, resoluci\u00f3n, potencia de CPU, sistema operativo o capacidad de memoria entre otras.
Esta tecnolog\u00eda pretende que, con un \u00fanico dise\u00f1o web, todo se vea correctamente en cualquier dispositivo, priorizando siempre la legibilidad de los textos e im\u00e1genes.
Google exige que los sitios sean responsivos para ser indexados en sus buscadores, de modo que si tu web no lo es, te quedas afuera\u2026<\/p>\n

La siguiente imagen muestra un esquema de visualizaci\u00f3n en un tel\u00e9fono entre un sitio no responsivo y otro responsivo, donde se observa la priorizaci\u00f3n de la legibilidad.<\/p>\n

[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/web4.com.ar\/wp-content\/uploads\/2021\/08\/comparacion-web-responsive-y-no-responsive.jpg\u00bb alt=\u00bbcomparacion responsive\u00bb title_text=\u00bbcomparacion-web-responsive-y-no-responsive\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.16″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.16″ width=\u00bb100%\u00bb custom_padding=\u00bb10px|0px|0px|0px|false|true\u00bb border_color_bottom=\u00bb#cecece\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.16″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text _builder_version=\u00bb4.16″ text_font_size_phone=\u00bb14px\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n

\u00bfQu\u00e9 informaci\u00f3n debes proveer a tu webmaster?<\/h3>\n

Es necesario que sepas de antemano qu\u00e9 es lo que quieres comunicar y mostrar a trav\u00e9s de tu website.
Cu\u00e1les son los valores que deseas transmitir, a qu\u00e9 target de p\u00fablico te diriges, qui\u00e9nes son tus competidores y qu\u00e9 imagen quieres mostrar acerca de tu negocio, actividad, o de tu propia persona.<\/p>\n

Debes tomarte un tiempo previo de an\u00e1lisis, que te permitir\u00e1 \u201cfiltrar\u201d los contenidos de tu web, definir la est\u00e9tica y esencia de tu proyecto, y tambi\u00e9n en nivel de lenguaje que utilizar\u00e1s en los textos e im\u00e1genes.<\/p>\n

[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/web4.com.ar\/wp-content\/uploads\/2021\/08\/estrategias-web.jpg\u00bb alt=\u00bbestrategias y organizacion web\u00bb title_text=\u00bbestrategias web\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.16″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.16″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n

Observar a tu competencia<\/h3>\n

Seguramente no eres la \u00fanica persona o empresa en el mundo que realiza determinada actividad y quiere mostrarla en la web.
Te aconsejo que veas sitios similares de tus posibles competidores, y hagas un listado con las direcciones web de sus respectivos sitios.
Esto no es para imitarlos o copiarlos, sino para \u201cinnovar\u201d los conceptos comunicacionales y obtener un mejor resultado.
Innovar significa \u201cmejorar lo que ya existe\u201d para obtener un nuevo est\u00e1ndar de calidad.<\/p>\n

La siguiente imagen muestra distintos websites de empresas del rubro \u00ababerturas y cerramientos\u00bb en Argentina.<\/p>\n

[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/web4.com.ar\/wp-content\/uploads\/2021\/08\/comparativos-competencia.jpg\u00bb alt=\u00bbobservar a tu competencia\u00bb title_text=\u00bbcomparativos-competencia\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.16″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.16″ width=\u00bb100%\u00bb custom_padding=\u00bb10px|0px|0px|0px|false|true\u00bb border_color_bottom=\u00bb#cecece\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.16″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text _builder_version=\u00bb4.16″ text_font_size_phone=\u00bb14px\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n

Cada desarrollo web requiere de un an\u00e1lisis previo para obtener un \u201cknow-how\u201d (saber c\u00f3mo hacer algo).
Por eso suponemos que cada sitio que hayas visitado ya lo ha realizado previamente (bien o mal).
Eso te permite tomar puntos de partida ya testeados y adaptarlos a tu propia identidad y necesidades.<\/p>\n

Realizar una cr\u00edtica y evaluar los aciertos y desaciertos de tus competidores te permitir\u00e1 optimizar los resultados buscados.
No olvides siempre consultar a tu webmaster acerca de los contenidos, ya que seguramente tendr\u00e1 mucha m\u00e1s experiencia que t\u00fa y sabr\u00e1 asesorarte correctamente.<\/p>\n

 <\/p>\n

Recopilar informaci\u00f3n para tu website<\/h3>\n

Esta puede ser quiz\u00e1s la parte m\u00e1s compleja para ti, ya que requiere de tu participaci\u00f3n y el trabajo en equipo con el webmaster.
No te desanimes si no sabes c\u00f3mo empezar, ya que muchas veces es muy dif\u00edcil hablar acerca de uno mismo.
Pero tampoco pretendas delegar todo el trabajo en tu dise\u00f1ador, ya que no conoce tu historia, tu empresa, tus objetivos, ni tus ideas.
En ese caso te sugiero que le cuentes tus necesidades para que elabore un organigrama y puedan ir resolviendo juntos cada etapa del desarrollo web.
Una vez que hayas superado esta etapa inicial todo estar\u00e1 encaminado y tu participaci\u00f3n ser\u00e1 m\u00ednima.<\/p>\n

[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/web4.com.ar\/wp-content\/uploads\/2021\/08\/contenidos-web.jpg\u00bb alt=\u00bbcontenidos web\u00bb title_text=\u00bbcontenidos web\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.16″ _module_preset=\u00bbdefault\u00bb box_shadow_style=\u00bbpreset3″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.16″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n

A continuaci\u00f3n, te muestro algunos \u00edtems que deber\u00e1s tener antes de encargar tu website.<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=\u00bb4.27.4″ link_font=\u00bb||on||on||||\u00bb link_text_color=\u00bb#0C71C3″ ol_text_color=\u00bbrgba(0,0,0,0.35)\u00bb custom_margin=\u00bb50px||50px||true|false\u00bb custom_margin_tablet=\u00bb30px||30px||true|false\u00bb custom_margin_phone=\u00bb\u00bb custom_margin_last_edited=\u00bbon|phone\u00bb custom_padding=\u00bb0px||0px||true|false\u00bb text_font_size_phone=\u00bb14px\u00bb ol_font_size_tablet=\u00bb18px\u00bb ol_font_size_phone=\u00bb16px\u00bb ol_font_size_last_edited=\u00bbon|desktop\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb ol_font_size__hover_enabled=\u00bbon|hover\u00bb ol_font_size__hover=\u00bb20px\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n

    \n
  1. Estructura de organizaci\u00f3n del sitio web (Secciones)<\/a><\/li>\n
  2. Informaci\u00f3n textual<\/a><\/li>\n
  3. Im\u00e1genes y videos<\/a><\/li>\n
  4. Optimizaci\u00f3n de contenidos para SEO<\/a><\/li>\n
  5. Redes Sociales<\/a><\/li>\n
  6. Perfil de Empresa Google<\/a><\/li>\n
  7. Actualizaciones de contenidos<\/a><\/a><\/li>\n<\/ol>\n

    [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/web4.com.ar\/wp-content\/uploads\/2021\/08\/organigrama-diseno-web.jpg\u00bb alt=\u00bborganigrama dise\u00f1o web\u00bb title_text=\u00bborganigrama-dise\u00f1o-web\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.16″ _module_preset=\u00bbdefault\u00bb box_shadow_style=\u00bbpreset3″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.16″ width=\u00bb100%\u00bb custom_margin=\u00bb12px|auto||auto||\u00bb custom_padding=\u00bb10px|0px|50px|0px|false|true\u00bb border_color_bottom=\u00bb#cecece\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.16″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text module_id=\u00bbnicho\u00bb _builder_version=\u00bb4.27.4″ header_3_text_color=\u00bb#ffffff\u00bb header_3_line_height=\u00bb1.2em\u00bb header_4_text_color=\u00bb#FFFFFF\u00bb background_color=\u00bb#8f8f8f\u00bb custom_padding=\u00bb5px|0px|0px|0px|false|true\u00bb header_3_text_shadow_style=\u00bbpreset2″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n

    1. Estructura de organizaci\u00f3n del sitio web (Secciones)<\/h4>\n

    [\/et_pb_text][et_pb_text _builder_version=\u00bb4.16″ text_font_size_phone=\u00bb14px\u00bb header_font_size_tablet=\u00bb\u00bb header_font_size_phone=\u00bb\u00bb header_font_size_last_edited=\u00bbon|desktop\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n

    Tu website debe estar dividido en secciones para facilitar su navegaci\u00f3n online y organizar los contenidos.
    Estas secciones presentan tem\u00e1ticas muy generalizadas, de modo que el usuario pueda encontrarlas con facilidad.
    Suelen ser bastante similares en todas las webs, y es bueno que as\u00ed sea, ya que los usuarios est\u00e1n acostumbrados a dichas estructuras.<\/p>\n

    Dependiendo del tipo de sitio que tengas, una organizaci\u00f3n b\u00e1sica podr\u00eda ser la siguiente:<\/p>\n

     <\/p>\n