¿Cuál es la mejor manera de aprender cómo diseñar hermosas páginas web?

Estás pasando por la fase “Me siento atascado después de aprender HTML y CSS”. 🙂

Eso es bastante natural.

Aunque estoy de acuerdo con los demás en que necesita practicar mucho, creo que necesita una mejor comprensión de qué es el diseño:

1. El diseño se trata de resolver problemas.

Esa es la razón por la que existe cualquier tipo de diseño (web incluida).

Entonces, tu pregunta está en camino:

¿Cómo aprendiste a diseñar sitios web para diferentes propósitos?

Pero no del todo.

Al trabajar con clientes, no se supone que diseñe plantillas web para la industria X. Se supone que debe diseñar un sitio web que cumpla con un objetivo comercial en particular en una situación particular .

Sí, habrá muchas cosas que se superponen entre proyectos similares. Y sí, podría tener una idea de lo que es correcto para un sitio web corporativo y de lo que no es PERO, no es a eso a lo que debería apuntar.

Debes apuntar a resolver el problema exacto del cliente actual.

Es por eso que cualquier proyecto de diseño comienza con ¿Por qué?

¿Por qué el cliente necesita este sitio web? ¿Qué objetivo de negocio hay que cumplir?
¿Por qué el usuario visita este sitio web? ¿Qué quieren hacer?

La próxima vez que desee diseñar algo, intente basar sus decisiones en el objetivo comercial. No en qué categoría está el negocio.

2. El diseño se basa en la psicología.

Estás tratando de enviar un mensaje no verbal . Para tener éxito, necesita una comprensión firme de cómo las personas perciben las cosas en un nivel no verbal.

No es sorprendente que la mayoría de los humanos reaccionemos de manera idéntica a ciertos estímulos.

Por ejemplo, ¿algunos de estos cuadrados parecen estar conectados de alguna manera? ¿Cómo se moverán tus ojos al mirarlos? ¿En qué dirección? Si tuvieras que colocar un número, ¿cuál sería el cuadrado # 1?


Cierto, parecen tres filas de cuadrados. Y si vive en algún lugar de Europa o América, moverá sus ojos de izquierda a derecha. Entonces, el cuadrado # 1 estará arriba a la izquierda.

Ese es el principio Gestalt de proximidad en juego. Los objetos cercanos entre sí se perciben como un grupo separado de los objetos que están más alejados. Tu mente compara la distancia y concluye que hay 3 grupos distintos de cuadrados aunque son idénticos en tamaño y color.

Entonces, para responder a tu segunda pregunta:

¿Cómo aprendiste a elegir colores, fuentes e imágenes de fondo?

Debe aprender la psicología detrás del diseño, observar cómo otros lo incorporan en sus diseños y luego probar los principios en sus propios diseños.

Los principios psicológicos le dan la razón para elegir colores y fuentes. Sabiendo cómo reacciona la gente a ciertas formas y colores y sabiendo qué objetivo empresarial tiene que alcanzar, podrá tomar una decisión informada.

No se necesita un instinto o cosas como “el azul es para el diseño corporativo”.

Otras lecturas

1. Este post en Smashing Magazine: Principios de diseño: percepción visual y los principios de Gestalt – Smashing Magazine
2. Este curso de correo electrónico gratuito que se basa en los conceptos básicos de diseño para la web y está diseñado especialmente para personas como usted (para curar el síndrome de “Me siento atascado después de aprender HTML y CSS”): diseño web más allá de HTML y CSS: 7 pasos prácticos

Como en cualquier otra materia, la mejor forma de aprender es practicar. Cuantos más diseños hagas, observarás cómo tu trabajo mejorará y mejorará. Para empezar, le aconsejaré que se olvide de la codificación, comience a jugar en Photoshop u otro programa que le resulte útil.

Para conocer las “reglas” del diseño, le recomendaría que lea las Soluciones de diseño gráfico de Robin Landa – http://www.amazon.com/Graphic-De

Después de aprender los principios del buen diseño, vea algunos ejemplos en Behance para ver cómo se usan en la práctica.

Puede comenzar haciendo rediseños para los sitios que le gustan o que no le gustan. Puedes tomar a Quora como ejemplo. Para hacer un buen diseño, debe comprender completamente lo que hace la empresa, cuáles son sus valores, propósitos y cómo puede reflejarlos en su diseño. Haga un mapa mental, pregúntese cuál es el objetivo del usuario cuando ingresa a la página y cómo puede mejorar su experiencia. Por ejemplo, piense en por qué la página de noticias en Qoura no tiene un logotipo, sino que tiene las categorías. ¿Podrías colocar este botón mejor?
Comience a hacer wireframes base en su mapa mental.

Entonces comienza a pensar sobre qué estilo debes seguir. Para mantener el diseño con estilo, puede usar http://styletil.es .

Puedes continuar haciendo las maquetas. Busque inspiración en otros sitios para ver cómo hicieron los diferentes elementos, pero no olvide mantener la consistencia.

Cuando las maquetas estén listas pruebalos. Vea si algún usuario puede encontrar la información que está buscando fácilmente. Puedes mostrarles a tus amigos y pedirles que encuentren algo. Te pueden dar buenos comentarios. También subirlos y pedir comentarios sobre Behance.

En todas las etapas, debe recordar que el diseño no es arte y tener en cuenta los objetivos de sus usuarios.

Cuando comencé a aprender un buen diseño web, comencé por averiguar exactamente qué era un buen diseño web. Todo esto comenzó mirando sitios web bien diseñados y descubriendo qué me gustaba de ellos. Luego me sentaría y pondría en práctica mi conocimiento de HTML / CSS / JS y vería si podía replicar lo que hicieron (sin mirar su fuente). Si podía hacer esto, entonces sabía que era capaz de recrear un buen diseño. Comencé haciendo cosas así mucho (y me refiero a MUCHO).

Es como practicar un instrumento: ¿quieres hacer música como Mozart?

Primero, aprenda cómo leer partituras y cómo tocar esas notas en un instrumento. Esto es como aprender las cosas de HTML / CSS.

Después de mucha práctica, puedes comenzar a tocar música de oído. Esto es como tomar un buen diseño de sitio web y ver si puede recrearlo usted mismo sin mirar la fuente.

Una vez que sabes que puedes jugar de oído, puedes comenzar a componer. La capacidad de redactar, diseñar y codificar un sitio web comenzará a ocurrir de forma natural. Habrá visto este tipo de cosas tantas veces que ya no tendrá que ver cómo lo hizo otra persona, simplemente sabrá cómo debe hacerse.

Para diseñar hermosas páginas web, debe tener conocimiento del diseño de sitios web y el diseño de sitios web implica muchas tecnologías. Primero enumero las tecnologías involucradas, luego elaboraré las formas en que puede aprenderlas.

  • HTML [Muy fácil de aprender, su versión más reciente es HTML 5]
  • CSS [Se trata de diseñar los contenidos en una página web, CSS3 es el más nuevo]
  • JavaScript
  • jQuery [Puedes saltarte el extenso JavaScript e iniciar jQuery]
  • PHP [Utilizado principalmente para el back-end, estar familiarizado con PHP te ayudará mucho]
  • AJAX
  • Photoshop [La herramienta más importante para hacer tus diseños]

Si realmente desea aprender diseño web y desea convertirse en un diseñador de sitios web profesional, personalmente, me gustaría recomendarle que se una a un curso de diseño web y tome clases de capacitación en diseño web de un instituto en el que pueda aprender las habilidades de diseño de sitios web en Orientación de expertos en diseño de páginas web para tutores. También me gustaría sugerirle uno de los nombres de instituto en la Academia de Capacitación y Desarrollo de Delhi

Primero necesitas comprender el básico muy bien. Creo que deberías aprenderlo de CodeSchool. Sus cursos son impresionantes con buenos recursos. Todos sus cursos se basan en proyectos reales, lo que es útil.

Después de comprender lo básico, debe seguir el trabajo de otras personas desde Behance y Dribbble. Trabajar en un proyecto real también es importante para que pueda trabajar en fiverr.com o en cualquier otro mercado.

También puede utilizar marcos que pueden acelerar todo el proceso. Codeschool también ofrece el primer mes de prueba, que es realmente útil:

Inscribirse en el código de la escuela por 9 dólares

Me gusta diseñar en Indesign, un programa de diseño de página. Me gusta porque puedo jugar, mover cosas, cambiar colores, cambiar fuentes rápidamente. Tengo las limitaciones del diseño web en mente cuando lo hago, pero trato de presionarlo.
Lo bueno de trabajar así es que puedo exportar a PDF o imprimirlo; Lo malo es que cualquier tipo de interactividad o animación necesita ser explicada.
Cuando se acepte el diseño de la maqueta, lo rehaceré todo en HTML. Este paso es muy técnico y no de diseño.

Si el equipo desea explorar primero los aspectos técnicos del diseño, la mejor manera de hacerlo sería utilizar un programa de creación de prototipos o simplificar los colores / fuentes en InDesign, concentrándose en el diseño. El segundo paso pondría colores, fotos y fuentes en su lugar.

http://www.w3schools.com
Visite este sitio web, todos los contenidos que está buscando se dan de manera sistemática y se explican muy bien.