Introducción al diseño web

Datos a tener en cuenta a la hora de empezar en el diseño web, pues la web es un canal de publicación con características muy especiales.

El otro día tuve que responder a una persona que en cierto foro de diseño web preguntaba: "Aunque no sé mucho de ordenadores, siempre estoy enganchada, y ahora quiero hacer mi propia página web. ¿Por dónde empiezo?".

Desde luego eso era toda una declaración de intenciones y no existía, ni existe, una respuesta infalible. El desarrollo web es un proceso creativo e íntimo, como lo es la navegación en Internet; ¿dónde voy si me conecto a la Red? Pues eso depende de ti. De la misma manera, una vez que empezamos a diseñar, existen diversas aproximaciones que vendrán definidas por nuestra forma de trabajar. ¿Cierto?.

Entonces, ¿quiere esto decir que no hay una especie de protocolo de principiantes? Oh, sí que hay un protocolo, un camino de baldosas que todos podemos seguir para llegar a nuestro destino (naturalmente, el destino de cada desarrollador es distinto, y mientras más diferente e ingenioso, mayor será el aprendizaje).

Conocimientos necesarios para dedicarse al diseño web

Te preguntarás, ¿pero qué tengo que aprender? ¿Cuál es el mejor camino? Obviamente, si estás en DesarrolloWeb.com ya has tenido un buen comienzo! Si has tenido tiempo para navegar por las secciones del sitio o conversar con algún amigo sobre esta profesión, te habrás podido dar cuenta que hoy existen muchas tecnologías que aprender. Hay tantos programas, lenguajes, librerías o frameworks que es normal que una persona que quiera empezar a diseñar para la web se pueda perder.

El desarrollo web es multidisciplinar. Tenemos que aprender un poco de todo y estar preparados para entender el medio de una manera global, pero a la vez especializarnos en hacer una cosa determinada muy bien. Esta especialización produce incluso que, dentro de la figura de un diseñador, podríamos encontrar diversas variantes de perfiles enfocados para una u otra actividad. Puedes encontrar profesionales que se deniminan diseñador gráfico, diseñador frontend, el arquitecto de CSS, diseñador de experiencia de usuario, etc. Pero más o menos todos deben dominar los mismos lenguajes y programas de base.

1.- Conocimiento general de Internet

Lo primero que debemos tener es un conocimiento tecnológico de Internet; estamos obligados a saber cómo funciona de manera general, desde las conexiones de ordenador hasta el valor de los servidores, pasando por la arbitraria congestión de las líneas de datos y, desde luego, considerando los diversos navegadores que hay en el mercado, así como los distintos tipos de dispositivos, desde ordenadores a móviles.

Estos conocimientos técnicos nos informan de nuestras posibilidades creativas; no basta con crear una preciosa imagen y colgarla en nuestra página principal, si no sabemos que dicha imagen podría tardar un minuto en cargarse.

2.- Conocimiento de los lenguajes

En segundo lugar, estamos obligados a saber trabajar no solo con los programas, sino también con el código. Y si trabajas en modo código, debes dominar el HTML, CSS y otros lenguajes de uso común en la Red. HTML es el lenguaje que todo el mundo debería aprender en primer lugar y luego lo básico de CSS. Más tarde, dependiendo de tu especialización podrás estar más enfocado al CSS, ser capaz de dominar Javascript y alguna librería que te permita aplicar dinamismo fácilmente, como jQuery.

Nota: Que quede claro que hoy no se recomienda usar software de tipo "WYSIWYG" (lo que ves es lo que obtienes, en español), como por ejemplo DreamWeaver. Es necesario usar los lenguajes estándares de la web.

3.- Conocimiento de los usuarios

En tercer lugar es fundamental saber que Internet no es una conferencia telefónica, un CD-ROM o televisión a la carta. Lo más importante son las personas que están al otro lado de la pantalla y hay que ofrecerles lo que éstos han venido a buscar. Hay muchas otras webs que pueden ofrecer lo mismo o cosas muy parecidas! y los usuarios son extremamente impacientes. Sirva de ejemplo decir que si tu página tarda más de unos pocos segundos en ofrecer algún tipo de respuesta, es posible que tu visitante aprete el botón de atrás del navegador y escoja el siguiente resultado en Google.

Por ese motivo es importante la optimización, desde el contenido hasta la carga y que sea fácil de usar. Para poder comenzar debes entender que la Red sufre limitaciones propias y disfruta también de posibilidades más extensas y personales. Así, cuando diseñamos nuestros sitios web, debemos entender que el visitantes no espera lo mismo de nuestras páginas que de un programa de TV, incluso aunque ambos traten el mismo tema.

Tomemos por ejemplo un documental sobre los elefantes africanos. E imaginemos a un ciudadano muy interesado en dichos animales, que en un momento del día debe elegir entre ver la vida de los elefantes en televisión, o buscar información en Internet a propósito de lo mismo. Nosotros tenemos la obligación de diseñar una página web al respecto. ¿Tomaríamos inspiración de la televisión? Quizás alguna, pero si sabemos lo que nos conviene, no pasaríamos de ahí. Por ejemplo, la tele se encuentra a un mínimo de dos metros del televidente; el monitor de la computadora, a unos palmos; el texto debe ser estrecho para no irritar al navegante. En la tele eso da igual. A la tele también le es indiferente mostrar cientos de tomas, cientos de perspectivas y cientos de sonidos emitidos por los elefantes africanos. En la web eso quizás no funcionaría si el usuario tiene una conexión lenta. Pero nosotros podemos crear enlaces a páginas que traten todas y cada una de las costumbres del enorme paquidermo. La televisión, no...

Además, como en cualquier otro medio, tenemos que pensar en qué damos al navegante para hacerle fiel. Aunque tan sólo sea para que durante una sesión visite varias páginas. Crear una web atractiva necesita personalización, contenidos, ingenio, belleza, oportunidades, comodidad, síntesis, gráficos, etc. ¿Estamos en condiciones de hacer estas cosas? Más nos vale.

4.- Presta atención a tu alrededor

Hay más cosas, cierto. El diseño enfocado a la Red suele ser hijo de la receptividad, como cualquier otro tipo de diseño. Más allá del aprendizaje técnico, que consiste en leer informaciones a veces aburridas y engorrosas, existe un modo complementario y muy excitante de aprender. Como decía, hablamos de receptividad. De ver lo que otros muchos hacen con un talento que parece inagotable, y dejar que lo que vemos sedimente en nuestro trabajo; desde el diseño gráfico de los sitios web, desde las imágenes que incluyen y que a veces definen su identidad, hasta la manera en que escriben sus textos. Dejadme decir que pocas cosas me parecen tan divertidas y poco serias como un párrafo mal escrito. ¿Es que desenvolvernos en un entorno digital nos da derecho a escribir mal? Sin duda que no. Los textos deben ser sugestivos, esclarecedores o enigmáticos, pero siempre llamativos y eficientes.

Hace poco visitaba un sitio web de cierta gran empresa y terminé preguntándome si la redacción había corrido a cargo de algún narrador extranjero. El texto era breve y directo, pero cometía fallos gramaticales tan evidentes que llamaba la atención sobre el resto del sitio; incluso más que el bonito y efervescente diseño. Tengamos en cuenta que si nos consideran poco aplicados, no nos tomarán como una alternativa razonable. (Y olvidemos la idea de que alguien nos pague por nuestro trabajo.)

Miremos, analicemos, aprendamos de los demás. Es un proceso basado en la febril actividad de nuestro ratón. Si te fijas en las mejores compañías puede ser un buen inicio, porque gastan cantidades astronómicas para definir un diseño. Podrás observar denominadores comunes, guías de diseño división de los espacios, interfaces para navegación. Casi siempre podrás deducir que las soluciones que han tomado son obra de una buena cantidad de profesionales, que decidieron que ésa era la mejor manera de hacer las cosas. Aunque no siempre es así, tu criterio debe siempre estar bien engrasado.

Herramientas para profesionales del diseño web

Para trabajar en el mundo del diseño web necesitas herramientas, software que te sirva para canalizar tu talento y te permitirá publicar tu creación. El número de herramientas y sus alternativas es inacabable, desde editores de código, programas de diseño gráfico, programas para transferir archivos, mantener el control de las versiones de tus proyectos, etc.

Diseño gráfico

Existen muchas alternativas y variantes de programas, aunque quizás cuando hablamos de diseño gráfico todos en algún momento u otro hemos trabajado con Photoshop. Se trata de un programa de edición fotográfica, que suele trabajar en modo de mapa de bits, por lo que realmente no es el mejor software para hacer todos los tipos de tareas que podremos necesitar. El diseñador que se precie tendrá que aprender también algún programa de diseño vectorial, como Illustrator.

Hoy además hay que añadirle otras opciones de software importantes como Sketch App para lo que es la creación de wireframes o mockups o Adobe Experience Design.

Trabajar con el código

Para simplificarte la vida, te vamos a recomendar unas pocas herramientas para trabajar con código (HTML, CSS, Javascript), las que realmente se usan profesionalmente de manera más habitual. En este punto hay pocas diferencias entre una u otra herramienta para escribir código, ya que más o menos todas tienen las mismas funcionalidades, o plugins que puedes instalar para que realicen esas funciones. Serían Visual Studio Code, Atom o Brackets, los tres gratuitos y con versiones compatibles para todos los sistemas operativos habituales.

Este es solo un breve resumen de las herramientas que necesitas, porque luego a medida que profundices irás añadiendo nuevos programas para hacer las cosas más diversas, como conectar con servidores para transferir archivos, optimizar los ficheros de una página (imágenes y código), etc.

En el presente manual podrás obtener bastante luz y encontrar diversas fuentes con las que continuar tu aprendizaje, no solo hasta conseguir hacer tu web de manera personal, sino incluso si quieres dedicarte a ésto de manera profesional.

Autor

Gck

Compartir

Comentarios

liliana

14/2/2010
crear pajina
quisiera seber como empezar aser pajina`por favor ayudenme lo nesesito para trabajar por fa no se como empezar

Juan

12/6/2011
Iniciación pagina
Saludos ! ando bastante perdido en el proyecto ' hacer una pagina web ' queria hacerla y exponerla pero no hace falta que sea mediante internet , tan solo con una plantilla sacada de donde medianamente bien me recomendeis y con un programa como xampp y uno de base dedatos que creo que ya tiene uno . Me gustaria hacer una pagina web , sabeis lo necesario para hacerla tal y como os he plasmado un poco ? he de utilizar php y html , algun otro lenguaje .. ?