Esta guía es para novatos que están empezando con el diseño web y no tienen claros los conceptos de diseño. Si estás apenas empezando en el mundo del diseño para Internet, esta guía te aclarará varias cosas, pero no mucho si ya tienes experiencia..
Preparativos iniciales
Para crear una web necesitamos varias cosas. Aquí muestro las básicas
Tu programa de diseño (Corel, Photoshop, Fireworks, Paint)
La temática de tu web (restaurantes, personal, autos, keyra)
Un trasero y ojos aguantadores.
Usa la cabeza
Para armar una web hay varios métodos. Por lo general yo uso el cuerpo humano, es una forma fácil de visualizar el diseño de una web, para no tener problemas de derechos de autor y esas cosas. Usaré como ejemplos mis propios diseños (aclaro que aun no están terminados).
El ejemplo 1 es un diseño estándar. Imaginemos que este diseño es un cuerpo humano, el rectángulo gris de la parte de arriba que representaría la cabeza se le llama header o encabezado. Generalmente este elemento se ubica en la parte superior pero en algunas ocasiones se llega a mover a los laterales como en elejemplo 3.
Este elemento es muy importante ya que es lo primero que ve un usuario. Se le puede incluir el logo, alguna pequeña animación o como en el caso de cristalab una imagen, un buen header por lo general es sencillo y limpio, sin caer en efectos exagerados.
El menú
El menú lo comparo con el brazo, y puede ser lateral, superior o de cuello. En todos los ejemplos anteriores he utilizado el menú lateral. Por lo general un menú es suficiente aunque algunos incluyen dos los cuales pueden estar ubicados a los lados dándole a la web realmente el aspecto de una persona (cabeza, cuerpo, brazos y pies).
El menú de cuello se ubica entre el cuerpo de la web y la cabeza. Particularmente no me gustan los menús dobles en especial cuando tienen las mismas opciones. Sin embargo, como siempre y a pesar de lo desagradable que nos llegue a parecer, el cliente es el que paga y tenemos que hacer lo que a ellos les guste.
Contenido en un contenido
El body (área central o cuerpo) es donde va a ir nuestra información principal. El cuerpo se ubica en el área central de la web siempre tratando de darle el mayor espacio posible.
El cuerpo unido a un buen diseño puede llegar a ser muy flexible, como en el ejemplo 1, 3 y 4. Por ejemplo, el cuerpo del ejemplo 4 es pequeño ya que lo he diseñado pensando en la carga de algún juego o vídeo. El ejemplo 1 es mayormente ocupado por el cuerpo para la integración de grandes cantidades de noticias. El ejemplo 3 esta pensado para una pequeña descripción, con una o dos imágenes como apoyo. Dependiendo de la flexibilidad de tu web podrás adaptar tu cuerpo para darle la mejor opcion al cliente.
Patas para arriba
El pie se ubica en la parte inferior de la web. El pie está presente en la mayoría de las webs, por lo general se usa como rebase del diseño para que el body no se vea cortado al llegar al limite vertical. También se usa para agregar los derechos de autor o el nombre de la empresa que diseño la web.
Ya quiero que termine este tutorial chafa
Estos son los puntos bases para el diseño de una web, espero que les sirva, cualquier cosa que sea utilidad o aporte a este tema por favor postealo.
FAQ (Preguntas Frecuentes)
Antes de que empiecen a hacer preguntas del millón pondré algunas que creo serán las que harán (así es, pensé en todo)
PREGUNTA: ¿Por qué llamas de manera incorrecta algunos elementos? RESPUESTA: Porque este tutorial esta pensado en los novatos que se confunden al iniciar una web, y al llamar a los elementos ejemplificando el cuerpo humano es mas sencillo de entender
PREGUNTA: ¿Puedo robar tus diseños? RESPUESTA: No, en especial el EJEMPLO 4 esa es la imagen de mi futura web personal, pero puedes usarlos como base para armar los tuyos, recuerda diseño original antes y nunca uses templates si quieres llamarte a ti mismo diseñador.
PREGUNTA: ¿Harás otro tutorial? RESPUESTA: Desgraciadamente todo indica que sí.
Tips de última hora
Bueno ya tranquilo ya casi termina esta tortura, solo unos datos finales para mejorar tus diseños:
Si se te dificulta hacer un diseño novedoso, solo haz uno estándar, y a partir de ahí crea ligeras modificaciones al diseño como en el ejemplo 2.
Si la combinación de colores no se te da bien, intenta esto: utiliza un color estandar, rojo, azul, amarillo. No utilices rojo quemado, azul turquesa o colores difíciles de combinar. Cuando tengas un color juega con el brillo y el contraste, siempre tratando de que el color se vea vivo, entre menos opaco mejor. Casi no uso colores opacos, para mi gusto quedan fatal (a menos que el cliente indique lo contrario).
Incluye siempre imágenes ya que resaltan y le dan vida a una web. Un diseño sencillo con buenas fotos y buena combinación de colores pueden dar como resultado una hermosa creación, sin tener que recurrir a filtros exagerados.
no le coloquen flash, es de lo mas malo para una web (al menos desde mi punto de visto), por defecto tengo desabilitado el flash en mi navegador, y si una pagina solo es flash no la visito nunca mas.
Algunos diseñadores se vuelven locos colocandole flash con sonido, imagenes y un montos de tonteras que son nada, no entregan informacion, y solo son una molestia.
"A falta de contenido interesante en la una pagina, llenenla de flash" (creo que algunos piensan) Por:yo_blog
Me parecio bueno el tuto, a no es un tuto , bueno me parecio bueno el tip...
De hecho me sirve bastante, ya que pues soy algo nuevo en esto (diseño)
Has dado las "instrucciones" para crear las webs mas sobreccargadas y con peor "diseño" de la historia.
Me explico:
1.- "instrucciones" no son, puesto que sólo encaminas a la gente a hacer la maqueta de cómo será una web, pero no dice por dónde seguir o qué hacer con eso. Eso se hace (la maqueta) cuando uno ya sabe lo que es cada elemento y cómo usarlo, así que de iniciación nada. 2.- Las partes del cuerpo. Usas esa "jerga" (por llamarlo de alguna manera) del cuerpo humano cuando lo mas sencillo es usar palabras que TODO el mundo entiende como: "Encabezado", "Menu izquierdo", "Pie de pagina"... Lo mejor de todo es que luego dices banner (o rectángulo gris). De risa 3.- Si pretendías que sea un tutorial, haz que sea un tutorial y al menos dí cómo hacer todo eso, y si no pues NO LO LLAMES TUTORIAL. 4.- "Para crear una web necesitamos..." de todo menos lo que tú has mencionado. Quitando las 2 últimas tonterias (ojos y videos bla bla bla) de las 2 primeras realmente no necesitas ninguna, puesto que la primera es solo para editar las imagenes y la segunda es para... nada (a no ser que quieras que tu imagen sea un fiel reflejo de su contenido, lo que no tiene mucho que ver con montar la web)
En fin, podría seguir pero me aburro.
Conclusión: Sólo querias mostrar tus diseños. Pues al respecto opinaré que puedes estar tranquilo, no pienso usarlos puesto que me parecen feos, sobrecargados y poco funcionales. Por:uno_blog
Por cierto, que sepas que las imágenes que tan algremente plantas en tus "diseños" tienen derechos de autor... lo mismo deberías aprender diseño de verdad, y no a combinar alegremente elementos y colores, como haces. Por:uno_blog_blog
Victor-Nael escribió: Antes de iniciar quiero que quede claro que esta guía es para novatos . Si eres experimentado y sabes cómo combinar colores, el uso de recursos de filtros e imágenes, por favor no leas este post
y despues escribio: PREGUNTA: Por que llamas de manera incorrecta algunos elementos? RESPUESTA: Por que este tutorial esta pensado en los novatos que se confunden al iniciar una web, y al llamar a los elementos ejemplificando el cuerpo humano es mas sencillo de entender
Solo tengo que decir que desde el inicio lo advertí, es para novatos, por lo de las imagenes se que tienen derechos de autor y como dije tambien aun no estan terminados solo son de muestra.
Sin embargo gracias por participar pueden pasar a recoger su premio de consolacion con mi secretaria. Por:Victor-Nael
mi comentario acerca de este dicho comentario o tutorial en mi opinion falta mas informacion para aquellos que deseen ya cargar el diseño ..con que programa? o a donde envio el diseño? falta falta informacion..... Por:Alejandro Nieto (Colombia
desearia saber sobre el papel que desempeñan los pesos en la web? -despues de hacer mi diseño a que parte mando el diseño ya que este ah sido trabajado en fhotoshop... porfa envienmen informacion a rockclasic111@yahoo.es Por:Alejnadro Nieto (Comombia
***editado***
Victor-Nael ha invertido parte de su tiempo para crear un aporte para esta comunidad, cosa que es de agradecer. Evidentemente es una visión muy personal sobre un tema y no tiene por que ser acertada ni del agrado de todo el mundo. Se aceptan criticas constructivas pero no insultos Por:uno_blog
Quisiera saber diseñar en fireguorks snif.. Por:Wanaya_c00l_blog
Are you kidding me? Por:Ego_blog
A mi me gustó Tampoco soy novato, pero si hubieran puesto un tutorial como este cuando empezaba me hubierra ahorrado mucho tiempo, esfuerzo y hubiera comprendido mas facilmente. sin contar los lentes
P.D. parecen que no leen las instrucciones a un lado de donde escribes el comentario, Especialmente esta:
IMPORTANTE Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla. Por:néstor
El tuto estuvo bien horrible, y ese primer comentario que denigra al preciado flash, me parece que ese tipo es un frustrado que no supo tener ideas geniales acerca de hacer una web, lo invito a visitar www.thefwa.com Por:combito_blog
El tutorial esta bien para empezar, como introducción, pero no estoy de acuerdo cuando hablas del NO rotundo a usar templates. Pienso, que a veces es bueno arrancar con un template cuya estructura te guste y a partir de ahi empezar a jugar con las css u otros elementos que puedan añadirse. Seguro que al final se obtendra algo diferente comparando con lo que se empezo. Por:nick77_blog
Si no tienes nada positivo que decir... Mejor no digas nada...
El de el primer comentario si tanto asco le tiene a flash no se que hace leyendo esta comunidad, una de las mejores de flash en habla hispana. Por:Yo_blog
Yo creo en la sencillez de una página no necesita tener un "super diseño" para q sea atractiva, veo mas importante que tenga funcionalidad, dar al visitante la posibilidad de que interactue con la página y que la vea cercana a él ó ella.Tampoco veo bien sobrecargar la web con imagenes, sonidos, etc, eso es para los crios de 15 años que les gustan ese tipo de páginas.
Tampoco creo que la gente "cierre el acceso a las paginas de flash en su navegador" me parece una bobada ya que ahi muchas páginas en flash que estan bien diseñadas.
saludos! Por:delnak_blog
Primero que nada, gracias "Victor-Nael" por estos conceptos básicos para el diseño de site, creo que a muchos les será de ayuda para comenzar.
Quizás nuestra opinión en cuanto a los métodos, terminología, estilo, lo que fuere... no es la misma que la de Victor, pero creo que muchos andan perdiendo tiempo en criticar el esfuerzo de un clabber por ayudar a la comunidad, porque no se dejan de quejar, criticar y hacen ustedes un tuto? Si no les gusta, no lo lean.
Sobre el post de "flash" o "no flash", creo que el que opino eso esta un poco desorientado, aunque respeto la opinión. Yo creo que el problema no es flash, sino saber usarlo, saber el como, cuando y cuanto... ya que no en todos los sites seria beneficioso su uso, o cierta cantidad de aplicaciones flash.
Saludos a todos y buen dia!! Cristian. Por:cromosoma47
tendremos Por:edward_blog
consejos para la pagina web en asp en formularios Por:Ericsson_blog
Me parece buenazo los tutoriales que presentan ayuda mucho para el desarrolo de la web Por:carlos_blog
Hola Victor-Nael, por el hecho de que hayas puesto que en las preguntas frecuentes que si se pueden robar los diseños y en espeial el 4 y tu respuesta fuera un NO.
Me entro unas ganas de plagio.
No mentiras, es que me hizo reir esa pregunta Por:esutoraiki_blog
No se pero casi no me gusto Por:FlasherMx_blog
No está nada mal, pero si te esfuerza un poco lograrás hacerlo mejor en otra oportunidad... Por:torrealbaruben
consejos para asp Por:darren hayey_blog
Pienso k es bueno........aclara las cuestiones primarias.....obviamente no profundiza lo k seria interminable.......para los k se hacen los pro en diseño x k no muestran algo de lo k hacen para k los demas digan realmente sin son bueno o no.......despues yo flasheo a full y el k no abre las paginas x k estan en flash...son un *******.... no t das cuenta k es el futuro y todos estan flashiando todas las pages.....k son mas lo k los clientes buscan ademas ......del tema de lo k pesa cada page.....ahora 1 mega es casi comun....osea....una pagina k pesa...digamos mucho para 512 en un mega son segundos........y la velocidad sigue avanzando esto hablando de argentina en europa y demas de amerika un mega es como decir 256.....entienden...no se keden en el tiempo ................solo eso gracias a todos y sigan haci k ahi gente k se le sirve lo k hacen y ahi gente k esta al pero y la critica......atte seven Por:seven_blog
(esto es extra: el de arriba tiene que aprender que existe la letra q para escribir "que") Interesante, apoyo a uno de mas arriba: si me ubieran dicho eso cuando empece me ubiera servido bastante. Lo de no copiar templates..mm... apoyo en parte, porque revisar como hacen siertas cosas en las templates es productivo porque aprendes cosas nuevas. Flash. El famoso Flash. Aprendi bastante de flash como para enseñar lo basico a alguien mas nuevo, pero acer toda una web en flash es un poco exagerado, aunque aveces se ve bastante elegante, en siertos casos prefiero un html-flash porque con ese flash le daremos un poco mas de "movimiento" a la pagina.
La cosa esque cada uno tiene su eleccion y quieran o no tienen que respetarla.
saludos
pd: el texto seria bueno modificarlo para la primera parte de un tutorial, asi se aprende la estructura comun de una web. Por:mauriziox_blog
oigan, porque no salio mi comentario, tienen que ser aprovados o quep? Por:manolo_blog
Oigan... ZEN Como dice Victor, es para principiantes, ojala hubiese tenido un tip asi cuando empece con esto, no sabia ni como llamar al header, tuve que aprender de codigo que veia por ahi. Como tuto para principiantes esta bueno, pero no es un tuto. Como tip esta bueno, sencillo y practico. Gracias por el tip.
Con respecto al flash, se pueden hacer cosas maravillosas y cosas espantosas, con el XHTML pasa lo mismo y con toda herramienta (con un martillo podes hacer una casa o matar a alguien) realmente lo que importa no es la herramienta sino quien la usa. En lo personal el flash me gusta usarlo como parte de una web, y no hacer la web en flash, pero si el cliente paga la web en flash yo pregunto ¿que tamaño de resolucion quiere? Por:Dientuki
Es poco inteligente valorar un mundo en el que se considera sólo hay blanco o negro. El mundo está lleno de grises, es más , de no ser así, no existía el blanco , porque no sería comparable en calidad al gris. Sin más preambulos, mucho menos inteligente considero el hacer crítica a este TIP, valorando el diseño web bajo parámetros de los que desempeñamos esta profesión. No se puede en un tip para novatos integrar conceptos que , a mi personalmente, me ha costado aprender durante años de experiencia. No citaré las críticas, pues no merecen ni mención. Un tutarial para novatos. Muy bien hecho! Es de agradecer tu esfuerzo y el tono humorístico en el que ha sido tratado. Denota personalidad y tu estilo. Por:Carmen Vivas
me alegra mucho que mi tip reciba tan buenas criticas tambien me alegra que se hayan tomado el tiempo de leer y comprender todos los puntos en especial la parte que dice PARA NOVATOS
en vista del rotundo exito que he tenido he decidido hacer la segunda parte Por:Victor-Nael
no por favor, no hagas otro tutorial!!
Me han editado el anterior comentario (donde no insultaba a nadie, quede claro), así que me reitero:
no escribas con mayusculas [mx] (por más que algun amigo tuyo ponga en los comentarios que si) Por:uno_blog
Bueno, creo que no hace falta decir nada mas... siempre va a haber hijos de p#&@..
Esperamos ansiosos los tips o tutoriales de los que critican Por:cromosoma47
uno_blog, espero con ansias tu tip o tutorial para cristalab. tu mamá no te enseñó a tener modales de chico? o tambien la tratabas asi? No seas tan troglodita o ve a serlo en otro foro. Por:Mariux
hola me gustaron mucho tus dibujos que haces nada mas que tengo una pregunta como le haces para crear a humanos no a caricatiras me gustaria mucho saber Por:yasne _blog
Victor-Nael :
tambien me alegra que se hayan tomado el tiempo de leer y comprender todos los puntos en especial la parte que dice PARA NOVATOS
Nunca un tip o tuto es para novatos, es para TODOS, siempre es bueno ver lo que uno sabe desde otra optica o desde otra fuente, o verlo todo junto; en mi caso aprendi tu tip a la fuerza con trabajo, y verlo todo junto y tan claro te obliga a juntar todo y verlo todo junto, eso esta bueno ya que uno puede reafirmar conceptos y con eso acentar bien los conocimientos. Espero el otro tip/tuto o lo que sea. Por:Dientuki
Para yasne _blog
me parece que hay un tuto para hacer las caricaturas de personas, que es muy bueno en este mismo foro, de todos modos creo que robare tu idea y hare un tuto de como parsar peronas a caricatura, mientras ese tuto llega disfruta del Cristalab Peru , Claro si estas en peru no como yo que estoy en mexico Por:Victor-Nael
Me parece un buen tutorial para aquellos que no saben por dónde empezar a la hora de hacer una página web por ellos mismos, sin utilizar templates...
Como usuario "no novato" que me considero, pienso que hubiese sido mejor utilizar palabras más técnicas como Header (Encabezado), Footer (Pié de Página), etc... haciendo una explicación de los conceptos, así no tendrían problemas los novatos para entender los demás tutoriales que no son "para novatos".
También quería aclarar que el Flash no siempre es malo, simplemente, como dice cromosoma47 es una cuestión de saber utilizarlo y, sobre todo, cuestión de gustos. Yo, personalmente, no lo utilizaría en una web hecha por mi, pero a lo mejor a otra persona que sí le gusta, lo utiliza y le va bien... "El libro de los gustos...".
Simplemente decir eso y darle las felicidades a Victor-Nael. Buen tip y buena Web...
Saludos!! Por:DllrSoft_blog
es ke kiero escribir algo ke se vea em todas las paginas para la persona ke amo es por eso ke kiero escribir algo asi ( jairo sos mi8 vida maka del ch) entendes vubueno te dejo mi msn para ver si se puede o no a si me contestas ok maka_la25@hotmail.com porfis contetasta dale Por:maka_blog
Esta web me ha audado bastante con mi web, porque no tenia ni idea. Pero lo que yo aún sigo buscando son complementos para ells, esta muy sosa. Al menos, ya me he enterado un poco mas de que va la cosa. Espero, aún, encontrar lo que busco, pero, de todas formas, gracias por ayudarme en esta web. Thais C. Por:Thais_blog
Me ha ayudado bastante, la web, pero, (aunque lo soy), no me gusta que me llamen novata. [img] Pero, en el ejemplo 2, como has puesto eso de al lado derecho que dice iniciar sesion, Contraseña:_______ etc. No tengo MSN ni E-mail, pero si puedes, contestame aquí. Por:Maria_blog
hola maria me gustaria conocerte que se maten entre ellos llink_Cema@hotmail.com es mi email nos vemos chau Por:cesar_blog
Hmmm aquí te enseñan como pintar la casa, pero si no sabes construirla no sirve para nada.
Igualmente me ha gustado, se html, css, diseño gráfico pero no consigo combinar todo esto T_T Por:infernalpr
Alguien sabe ¿por que ponen en las instrucciones que no insulten?, al parecer nadie le presta atención, he visto como 3 tutoriales y siempre hay uno que critica como si cobrara por eso. Por:Franscal
Franscal :
siempre hay uno que critica como si cobrara por eso.
Pero una critica no es un insulto. Recuerdalo. Por:Freddie
Muy interesante.....pero si realmente considerais para novatos... el nivel de esquema de una web, entonces que son los que no saben por donde empezar... Por:ArtMarin_blog
es importanticimo ............... realmente consideramos para nobatos Por:isamar_blog
es imporatanteeeeeeeeeeeeeeeeeeeee para nosotras las personas del PERU Por:mafer_blog
ok lo del diseño lo entiendo, y luego omo lo subo a un servidor gratuito por ejemplo, o sea que envio el archivo, o lo debo dividir en carpetas (cuerpo, imagenes), que mas Por:julio_blog
el simple hecho de tomarte el tiempo para explicar un poco, esto, es valioso, y me parece de lo mas fastidioso q vengan a darte una charla de como deberias hacer las cosas, si es importante q se te sugieran, algunas cosillas para mejorar, pero no con la prepotencia de algunos, si les molestó tanto tu intervencion, q saquen un tutorial para superdotados como ellos, sin mas nada q decir, muchas gracias por tu informacion Por:silvia_blog
A ver... yo soy diseñador web y programador desde hace unos cuantos años ya. Realizo webs dinámicas, con bases de datos, y diseños 2.0. También soy profesor de diseño e informática. Creo que sé de qué va esto...
El tutorial es malo por una razón: porque dice qué hay que hacer. Jamás se me ocurriría a mí decir qué hay que hacer. Puedes decir qué cosas se llevan, qué cosas están de moda, qué es lo que sueles hacer tú, qué es lo que te gusta y lo que no... Pero decir que todas las páginas deben tener esto o lo otro, que siempre tiene que haber un menú que va en tal o cual sitio... El mundo del diseño es muchísimo más que eso.
Y por mucho que diga que es para novatos... Es que precisamente con este tutorial creo que los novatos se van a liar más todavía. Se puede simplificar más aún todo lo que en este tutorial se dice.
No sé, yo no le he visto ni pies ni cabeza al tema de despiezar la página en ¿partes del cuerpo? Todos los convencionalismos que usamos la mayoría de diseñadores web a la porra... Los programas que se aconsejan son... Bueno... Lo de los colores... sin comentarios, también.
Y, antes que me digáis que en vez de criticar podía escribir cosas... deciros que ya lo hago, tengo web, blog, y participo en un montón de foros.
Saludos a todos. Y esto es una crítica sin insultos. Por:MAx Power
son todos gatos para mi nose ustedes,, Por:el mas capo_blog
, bueno me parecio bueno el tip...
***editado***
, Claro si estas en peru no como yo que estoy en mexico 
