Compartimos diferentes teor\u00edas, reglas, mejores pr\u00e1cticas y m\u00e1s, y sum\u00e9rjase en el conjunto de conocimientos que hemos preparado y usado para para usted.<\/p>\n\n\n\n
El dise\u00f1o web es el proceso de creaci\u00f3n del ambiente gr\u00e1fico visual de todas las p\u00e1ginas que forman un sitio web. En otras palabras, los dise\u00f1adores web crean todo lo que vemos en l\u00ednea. El dise\u00f1o web no solo incluye la est\u00e9tica, tambi\u00e9n se refiere a la usabilidad de un sitio web o aplicaci\u00f3n m\u00f3vil, as\u00ed como a la estructura y dise\u00f1o general.<\/p>\n\n\n\n
El dise\u00f1o web es diferente al desarrollo web, porque en las tareas de desarrollo de incluye la codificaci\u00f3n de la estructura de las paginas web<\/strong><\/a>, su funcionalidad y de c\u00f3mo el usuario podr\u00e1 navegar en cada contenidos.\u00a0Los dise\u00f1adores web se centran en los aspectos visuales y de front-end de un sitio, lo que influye en su usabilidad y UX en general.<\/p>\n\n\n\n Hay dos objetivos principales en el dise\u00f1o web: <\/strong><\/p>\n\n\n\n Los principios del dise\u00f1o web pr\u00e1cticamente establecen todas las reglas de crear sitios web, por lo que esta deber\u00eda ser su l\u00ednea de base. Uno de los problemas de saltar a una nueva carrera es la abrumadora cantidad de contenido sin saber c\u00faal es la mejor estrategia para crear su sitio web. <\/p>\n\n\n\n Recomendaciones m\u00ednimas a cumplir para crear un sitio web profesional:<\/p>\n\n\n\n Efecto de usabilidad y est\u00e9tica:<\/strong> Los usuarios tienden a asumir que un sitio web bellamente dise\u00f1ado es m\u00e1s f\u00e1cil de usar que uno que no es atractivo o est\u00e1 desactualizado.<\/p>\n\n\n\n Ley de Jakob: <\/strong>La familiaridad genera confianza. Uso de la coherencia, en la forma en que se presentan sus contenidos de una p\u00e1gina a otra.<\/p>\n\n\n\n Ley de Fitt:<\/strong> Incrementar la interacci\u00f3n y dise\u00f1ar objetivos t\u00e1ctiles para que:<\/p>\n\n\n\n Leyes de dise\u00f1o Gestalt:<\/strong> El cerebro humano toma lo que ve y trata de darle sentido bas\u00e1ndose en la l\u00f3gica y el orden, por lo que su dise\u00f1o debe ajustarse a las siguientes reglas de estructura y patr\u00f3n: <\/p>\n\n\n\n Los est\u00e1ndares web establecen las reglas para la web en su conjunto. Generalmente, giran en torno a los aspectos t\u00e9cnicos de la construcci\u00f3n de un sitio web, con el objetivo principal de hacer de la web un lugar al que todos puedan acceder y disfrutar por igual. <\/p>\n\n\n\n A diferencia de los principios de dise\u00f1o web que a menudo se derivan de estudios psicol\u00f3gicos y leyes, los est\u00e1ndares web son en realidad establecidos y regulados por varios \u00f3rganos rectores. <\/p>\n\n\n\n A la vanguardia de los est\u00e1ndares web se encuentra una organizaci\u00f3n llamada Consorcio Mundial de la red<\/a> (W3C), que est\u00e1 dirigido por Tim Berners-Lee (el tipo que invent\u00f3 la Web). <\/p>\n\n\n\n Las habilidades se refieren al conocimiento t\u00e9cnico, la t\u00e9cnica y principalmente la experiencia. Estos son los m\u00e1s importantes para dominar: <\/p>\n\n\n\n Los dise\u00f1adores web generalmente siguen un proceso similar de un proyecto a otro. La duraci\u00f3n de cada fase puede diferir al igual que la intensidad de lo que est\u00e1 involucrado, pero los pasos siguen siendo los mismos. <\/p>\n\n\n\n Esto es lo que incluir\u00e1 su proceso de dise\u00f1o web:<\/p>\n\n\n\n Etapa de inicio donde se identifican todas las necesidades de la empresa y se determina qu\u00e9 tipo de sitio web necesitan (por ejemplo, blog, sitio web, comercio electr\u00f3nico, etc.) y qu\u00e9 es exactamente lo que necesita construir en t\u00e9rminos de p\u00e1ginas y caracter\u00edsticas. Por ejemplo:<\/p>\n\n\n\n Tambi\u00e9n hay que poner atenci\u00f3n a los peque\u00f1os detalles para desarrollar para poder definir correctamente cada uno de los objetivos antes de que comience el proyecto.<\/p>\n\n\n\n Una vez que sepa lo que est\u00e1 necesita en su sitio web, crear\u00e1 una l\u00ednea de tiempo para el desarrollo de su proyecto. Esto no solo le permite equilibrar de manera m\u00e1s efectiva de crear varias p\u00e1ginas web del proyecto al mismo tiempo, sino que esta informaci\u00f3n es muy \u00fatil para saber la inversi\u00f3n de tiempo real y necesaria. <\/p>\n\n\n\n En cuanto a la creaci\u00f3n del cronograma, realmente depende del alcance del trabajo y de su disponibilidad. Sin embargo, en general, cada paso del proyecto lleva m\u00e1s tiempo que el anterior. <\/p>\n\n\n\n Para determinar la cantidad correcta de tiempo para cada uno, use una herramienta de seguimiento del tiempo cada vez que dise\u00f1e un nuevo sitio web (incluso si es el suyo propio o uno gratuito que est\u00e1 haciendo para un amigo o familiar). Esto le ayudar\u00e1 a calcular cu\u00e1nto tiempo necesita programar para cada fase. <\/p>\n\n\n\n El proceso de investigaci\u00f3n es fundamental para el dise\u00f1o web. Si no se hacen las preguntas correctas por adelantado, podr\u00eda tener muchas revisiones m\u00e1s adelante.<\/p>\n\n\n\n Antes de comenzar la investigaci\u00f3n, primero hay que crear un\u00a0cuestionario de dise\u00f1o de sitios web, para recopilar toda la informaci\u00f3n, archivos e inicios de sesi\u00f3n esenciales de su cliente.\u00a0Esto formar\u00e1 la base de su investigaci\u00f3n.\u00a0<\/p>\n\n\n\n Durante esta etapa, hay que analizar: <\/p>\n\n\n\n Una vez que tenga una idea de a qu\u00e9 se enfrenta, puede formular un plan para el dise\u00f1o y el enfoque del sitio web.<\/p>\n\n\n\n Las gu\u00eda de estilo de la marca es donde documentar\u00e1 la estrategia visual de una marca y su sitio web.<\/p>\n\n\n\n Hay varias razones por las que una gu\u00eda de estilo es \u00fatil: <\/p>\n\n\n\n Para crear una gu\u00eda de estilo, deber\u00e1 armar reglas para los elementos visuales clave en el sitio (como\u00a0tipograf\u00eda, uso del logo, colores, etc.).<\/p>\n\n\n\n Como quiera llamarlo (arquitectura de la informaci\u00f3n, mapa del sitio, navegaci\u00f3n o men\u00fa), este es el primer componente importante que va a establecer para el sitio web. <\/p>\n\n\n\n El mapa del sitio no es solo una lista de p\u00e1ginas para incluir en el sitio web. Establece la jerarqu\u00eda y las relaciones entre p\u00e1ginas. Esto es importante ya que la forma en que conecta las p\u00e1ginas entre s\u00ed puede mejorar o erosionar la usabilidad de su sitio web.<\/p>\n\n\n\n En realidad, esta es una fase de tres pasos que le permite crear un sitio web de forma incremental desde cero.<\/p>\n\n\n\n Los wireframes son esqueletos de sus p\u00e1ginas. Esboza la composici\u00f3n, usa marcadores de posici\u00f3n para mostrar a d\u00f3nde va el contenido y determina c\u00f3mo colocar y dimensionar cada bloque y elemento.<\/p>\n\n\n\n Puede crear estructuras con bol\u00edgrafo y papel de buena calidad o utilizar una herramientas de creaci\u00f3n de estructuras con WordPress.<\/p>\n\n\n\n Nota:<\/strong> Si elige usar WordPress durante esta etapa y la siguiente, es mejor hacerlo en un sitio de prueba en lugar de en el dominio que este online. <\/p>\n\n\n\n Las maquetas son archivos de dise\u00f1o est\u00e1ticos. Tienen el mismo aspecto que una p\u00e1gina web, excepto que no son interactivas. <\/p>\n\n\n\n Al dise\u00f1ar maquetas, tiene la oportunidad de solucionar cualquier problema en el dise\u00f1o, el dise\u00f1o, los elementos, etc. antes de comprometerlo todo en un prototipo funcional.<\/p>\n\n\n\n Dise\u00f1ar maquetas web tambi\u00e9n conocidas como mockup<\/strong> usando una herramienta similar (si no la misma) a la que usaste para crear tu estructura est\u00e1tica. Por ejemplo, si su estructura est\u00e1tica est\u00e1 en WordPress, tiene mucho sentido crear su maqueta all\u00ed tambi\u00e9n.<\/p>\n\n\n\n Los prototipos son la versi\u00f3n interactiva de las maquetas. En la creaci\u00f3n de prototipos, crea conexiones entre las p\u00e1ginas y anima otros elementos interactivos en la p\u00e1gina. <\/p>\n\n\n\n Esto permite la oportunidad de ver los dise\u00f1os de cada p\u00e1gina web en acci\u00f3n.<\/p>\n\n\n\n Si dise\u00f1a sus wireframes, maquetas y prototipos en WordPress, no necesitar\u00e1 una etapa de desarrollo web real, ya que ya lo ha hecho. <\/p>\n\n\n\n Sin embargo, si el proceso de creaci\u00f3n es con software de dise\u00f1o web y otras herramientas de maquetaci\u00f3n como atom, esto es lo que debe hacer para convierta su prototipo en un sitio web.<\/p>\n\n\n\n A lo largo del proceso de dise\u00f1o web, la comunicaci\u00f3n con el cliente es cuando alcanza momentos clave. Al recopilar comentarios y aprobaci\u00f3n durante todo el trabajo, reducir\u00e1 la necesidad de revisiones excesivas en esta etapa. <\/p>\n\n\n\n Una vez que el sitio est\u00e9 en WordPress y listo para su revisi\u00f3n, deber\u00e1 enviarlo a dos partes para que lo prueben: <\/p>\n\n\n\n Con todas las aprobaciones necesarias en la mano, es hora de lanzar. <\/p>\n\n\n\n Como se puede ver, es un gran tema que llega a ser de especialidad el ser un gran dise\u00f1ador web y crear sitios web que realmente sean una inversi\u00f3n para sus cliente. La gran nube de contenidos montados en Internet pueden aumentar la oferta no profesional de los servicios que pueden ser la mejor o peor experiencia de su negocio online, dependiendo de que tanto un dise\u00f1ador, desarrollador aplique o no los requerimientos para crear sitios Web.<\/p>\n","protected":false},"excerpt":{"rendered":" Compartimos diferentes teor\u00edas, reglas, mejores pr\u00e1cticas y m\u00e1s, y sum\u00e9rjase en el conjunto de conocimientos que hemos preparado y usado para para usted. \u00bfQu\u00e9 es el dise\u00f1o web? El dise\u00f1o web es el proceso de creaci\u00f3n del ambiente gr\u00e1fico visual de todas las p\u00e1ginas que forman un sitio web. En otras palabras, los dise\u00f1adores web crean … Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":1,"featured_media":2395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-2385","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/posts\/2385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/comments?post=2385"}],"version-history":[{"count":1,"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/posts\/2385\/revisions"}],"predecessor-version":[{"id":11900,"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/posts\/2385\/revisions\/11900"}],"wp:attachment":[{"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/media?parent=2385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/categories?post=2385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/tags?post=2385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\u00bfCu\u00e1les son los principios del dise\u00f1o web?<\/h3>\n\n\n\n
\n
\n
\u00bfQu\u00e9 son los est\u00e1ndares web?<\/h3>\n\n\n\n
Habilidades que necesita el dise\u00f1o web Profesional<\/h3>\n\n\n\n
\n
\u00bfQu\u00e9 implica el proceso de dise\u00f1o web?<\/h3>\n\n\n\n
Paso 1: Desarrolle las especificaciones del proyecto<\/h4>\n\n\n\n
\n
Paso 2: Programar el proyecto<\/h4>\n\n\n\n
Paso 3: Investigaci\u00f3n<\/h4>\n\n\n\n
\n
Paso 4: Creaci\u00f3n de una gu\u00eda de estilo<\/h4>\n\n\n\n
\n
Paso 5: Creaci\u00f3n de un mapa del sitio web<\/h4>\n\n\n\n
Paso 6: Creaci\u00f3n de wireframes, maquetas y prototipos para su sitio<\/h4>\n\n\n\n
Wireframes<\/h5>\n\n\n\n
Maquetas<\/h5>\n\n\n\n
Prototipos<\/h5>\n\n\n\n
Paso 7: Creaci\u00f3n del sitio web<\/h4>\n\n\n\n
Paso 8: QA el sitio<\/h4>\n\n\n\n
\n
Paso 9: Lanzamiento<\/h4>\n\n\n\n
Ser un gran dise\u00f1ador web<\/h2>\n\n\n\n