¿Cuáles son los mejores recursos (sitios, libros o tutoriales) para aprender diseño web?

Oye, ¿te refieres a los recursos de “Diseño web” o “Desarrollo web“? Si te refieres a “Diseño”, hay muchos recursos que he recopilado a continuación, que incluyen inspiración de diseño, sitios web, herramientas, blogs, libros, etc. Espero poder ayudarte.

# Páginas web útiles:

  • Dribbble ★★★★★
    Mostrar y contar a los diseñadores (inspiración de la interfaz web)
  • Behance ★★★★★
    Plataforma online para mostrar y descubrir trabajos creativos.
  • DesignMunk
    Inspiraciones de la página de destino
  • Muzli 2 ★★★★★
    Toda la inspiración de diseño que necesitas.
  • UpLabs ★★★★★
    El mejor diseño de materiales, iOS y recursos web, todos los días.
  • Lapa ★★★★★
    Página de inicio de la galería de inspiración.
  • Caza del color
    Colección curada de hermosos colores, actualizada diariamente.
  • Tarro de interfaz de usuario
    Diseños seleccionados a mano de Dribbble para proyectos de la vida real.
  • Recoger UI
    Inspiración diaria recopilada del archivo #dailyui y más allá.
  • Land Book ★★★★★
    La patria de los buenos sitios web.
  • Pttrns ★★★★★
    Los patrones de diseño móvil y los recursos de UI como UIKit y elementos de UI están disponibles en Pttrns para diseñadores.
  • GoodUI ★★★★★
    ¿Qué tipo de diseño se puede llamar como una buena interfaz de usuario? En GoodUI, puede encontrar una gran cantidad de consejos y capacitación de habilidades.
  • UI OH MY
    Compara pantallas de aplicaciones de iPhone y Android de lado a lado
  • Site Inspire
    Una galería de CSS y una muestra de la mejor inspiración de diseño web, con más de 2,500 sitios web que se pueden buscar por tipo, tema y estilo.
  • Estados flotantes
    Explore y filtre el archivo completo de inspiración de diseño web de Hover States.
  • Diseño hecho en alemania
    Marcadores diarios para su inspiración.
  • Iconos
    Una enorme biblioteca de iconos. Bastante la cosa más grande nunca.
  • Inspiración general de la interfaz de usuario
    Descubre y comparte interfaces móviles.
  • Tamaños de pantalla
    Mantenga un registro de todos los diferentes tamaños de pantalla móvil.
  • Awwwards
    Los Premios del sitio web que reconocen y promueven el talento y el esfuerzo de los mejores desarrolladores, diseñadores y agencias web del mundo.
  • Wadline
    Las mejores agencias de desarrollo web y móvil. Estudios de mercado, revisiones. Premios 2018.
  • Amor de una pagina
    El escaparate definitivo de los sitios web de una página.
  • Webcreme
    Un escaparate de los mejores diseños web para tu inspiración. Navegue por nuestros archivos de más de 6000 sitios web inspiradores con diseños creativos.
  • Revista Smashing ★★★★★
    Smashing Magazine es un sitio web y editor de libros electrónicos que ofrece contenido editorial y recursos profesionales para desarrolladores y diseñadores web.
  • TopDesignInspiration
    ¡El escaparate de la mejor inspiración de diseño web y diseño creativo!
  • Archivo UX ★★★★★
    Presenta los flujos de usuarios más interesantes para que pueda construir su punto de vista e inspirarse para diseñar las mejores experiencias de usuario.
  • Interfaz de usuario inspirada
    Patrones de diseño de aplicaciones móviles.
  • Patrones móviles
    Una biblioteca de capturas de pantalla de iOS y Android para que los diseñadores y desarrolladores hagan referencia.
  • LoveUI
    Colección de elementos de la interfaz de usuario móvil.

# Pautas de diseño móvil

  • Android – Directrices de interfaz de usuario
    Pautas de diseño de la interfaz de usuario de Android
  • Apple – Directrices de interfaz humana
    Obtenga información detallada y recursos de UI para diseñar excelentes aplicaciones que se integren a la perfección con las plataformas de Apple.
  • Pautas de diseño de material de Google
    Las pautas de diseño de materiales son un documento vivo de guía visual, interactiva y de movimiento.
  • Telefono windows
    Pautas para el diseño de Windows Phone

# Herramientas de diseño

  • Águila ★★★★★
    Si alguna vez tiene problemas para administrar sus imágenes que siempre están dispersas en su escritorio, Eagle es la mejor herramienta que un diseñador podría tener.
  • Coolors
    Generador de combinaciones de colores súper rápidos para diseñadores geniales.
  • Vista previa de Skala
    Envíe vistas previas en vivo de sus diseños a sus dispositivos.
  • Mejores páginas de error
    Construye gratis las páginas 404, 503 y de mantenimiento en 60 segundos.
  • Lottie por Airbnb ★★★★★
    Agregue fácilmente animaciones de alta calidad a cualquier aplicación nativa.
  • InVision Studio
    La herramienta de diseño de pantalla más potente del mundo.
  • Diseño de marcos
    Diseñar, codificar y colaborar. Ahora todo en uno.
  • Milanote ★★★★★
    La aplicación de notas para el trabajo creativo.
  • Witeboard
    Una pizarra en tiempo real para tu equipo. No se requieren inscripciones.
  • Resumen
    Un concentrador seguro y controlado por versión para sus archivos de diseño.
  • Kactus
    Diseñe el control de versiones sin cambiar sus herramientas.
  • PixelSnap
    La forma más rápida de medir todo en la pantalla.
  • Escriba cualquier cosa
    Prueba y crea la configuración de tipografía perfecta para tu sitio web.
  • Adobe XD ★★★★★
    Una solución integral para el diseño y la creación de prototipos.
  • Mejores páginas de error
    Construye gratis las páginas 404, 503 y de mantenimiento en 60 segundos.
  • Zeplin ★★★★★
    Colaboración y transferencia para diseñadores de interfaz de usuario / desarrolladores frontend.
  • Figma
    La primera herramienta de diseño de interfaz con colaboración en tiempo real.
  • Webflow CMS
    Construye sitios web profesionales dinámicos sin ningún código.
  • Zoommy
    Te ayuda a encontrar increíbles fotos de stock gratis para tu producto.
  • Caza del color
    Colección curada de hermosos colores, actualizada diariamente.
  • Flinto para Mac ★★★★★
    Los diseñadores de herramientas de prototipado han estado esperando.
  • Atómico
    La forma más rápida de diseñar interacciones hermosas.
  • FlowMapp
    Herramienta de planificación UX para crear un sitemap visual.
  • Marvel ★★★★★
    Diseño super simple, prototipado y colaboración.
  • Raindrop.io
    Todo en un gestor de marcadores se vuelve aún mejor.
  • Canva ★★★★★
    Diseño gráfico sorprendentemente simple.
  • Sip para Mac ★★★★★
    La mejor manera de coleccionar, organizar y compartir tus colores.
  • Infograma
    Hacer gráficos e infografías que la gente ama.
  • Adele
    Repositorio abierto de sistemas de diseño y bibliotecas de patrones.
  • RightFont para Mac ★★★★★
    Ayudando a los diseñadores a encontrar la fuente correcta rápidamente.
  • Principio para Mac
    Enviar eventos entre componente y paren.

Herramientas de prototipos

  • Flinto ★★★★★
    Sólo móvil. Me gusta porque es rápido.
  • InvisionApp ★★★★★
    El primer proyecto es gratis. Bueno para múltiples plataformas.
  • Marvel ★★★★★
    Diseño super simple, prototipado y colaboración.
  • Sketch ★★★★★
    Solo Mac, herramienta de diseño profesional.
  • Principio
    Solo para Mac, una herramienta de diseño fácil de aprender para hacer diseños de movimiento. Incluye una función de línea de tiempo.
  • Adobe XD
    Sólo Mac (por ahora). Construido para UX (como se llama).
  • FramerJS
    Requiere un poco de código, potente.
  • Origami
    Plugin, construido por los diseñadores de Facebook.

Recursos de diseño

  • Startup Stash ★★★★★
    Un directorio curado de 400 recursos y herramientas para startups.
  • Pexels
    Las mejores fotos libres en un solo lugar.
  • Unsplash 5.0 ★★★★★
    Gratis (haz lo que quieras) fotos de alta resolución.
  • Recursos de diseño de Facebook ★★★★★
    Una colección de recursos gratuitos hechos por diseñadores en Facebook.
  • Gradientes Web ★★★★★
    Colección curada de 180 gradientes de fondo frescos gratuitos
  • Pixabay ★★★★★
    Más de 1300000 fotos, ilustraciones y gráficos vectoriales de alta calidad. Gratis para uso comercial. No se requiere atribución.
  • TinyFaces
    Galería de avatares de fuentes gratuitas que incluye el plugin Sketch
  • Caras de interfaz de usuario
    UI faces es un sitio web para encontrar avatares de muestra para maquetas de UI. Es muy bueno usarlo para diseño visual.

# Design Blogs & Posts

  • Webdesigner Depot
    Recursos de diseño web para diseñadores web.
  • Diseño de google
    Blog oficial de diseño de Google.
  • Grupo Nielsen Norman ★★★★★
    Líder en el campo de la experiencia del usuario, NN / g realiza investigaciones innovadoras, capacita y certifica a los profesionales de UX y brinda consultoría de UX a los clientes.
  • Artículos y libros de UX Design
    La biblioteca más grande y autorizada de recursos de diseño de UX de código abierto.
  • Revista Smashing ★★★★★
    Para diseñadores web profesionales y desarrolladores.
  • Adobe Creative Cloud
    Blog oficial de diseño de adobe.
  • Diario de Cooper
    Un blog sobre diseño, negocios y el mundo en que vivimos.
  • Blog de Usabilla ★★★★★
    El equipo de Usabilla comparte sus ideas sobre UX y la optimización de comercio electrónico.
  • Tubik Studio Blog ★★★★★
    Blog del equipo de diseño Tubik Studio. Proporciona los artículos y estudios de casos sobre diseño UI / UX, logotipo, marca, diseño de movimiento, ilustración, iconos, aplicaciones y diseño web.
  • Stand de UX ★★★★★
    UX Booth cuenta con la confianza de más de 100,000 profesionales de la experiencia del usuario.
  • Blog de InVision ★★★★★
    Blog oficial de diseño de InVision.
  • Pequeños grandes detalles
    Little Big Details es una colección curada de inspiraciones de diseño diarias.
  • Designmodo
    Designmodo publica artículos de diseño web, tutoriales y tiene una gran tienda con los mejores temas de WordPress y Bootstrap, complementos, kits de IU y más.
  • HackingUI
    Hacking UI es una comunidad para diseñadores, desarrolladores y emprendedores creativos apasionados.
  • Bloq creativo
    Inspiración diaria para personas creativas. Reflexiones recientes, consejos de expertos y tutoriales para potenciar tus músculos creativos.
  • Revista UX ★★★★★
    UX Magazine es un recurso central y único para todo lo relacionado con la experiencia del usuario.
  • Blog de Icons8
    Hablando de iconos, UX y diseño gráfico.
  • Pin UX Blog
    Blog oficial de diseño de UX Pin.
  • UX para las masas
    Artículos y presentaciones sobre diseño, investigación y estrategia de UX.
  • Cabaña de diseño
    Design Shack es una fuente diaria de artículos, inspiración, noticias y guías para la comunidad de diseño.
  • UX Podcast ★★★★★
    La gran colección de podcasts de audio, en su mayoría entrevistas con diseñadores e investigadores de UX famosos y reconocidos.
  • 556 videos para diseñadores de 68 conferencias.
    Gran colección de discursos en video de expertos en UI, UX, interacción y diseño de productos.
  • 99 diseños
    Examine bellas ideas de diseño gráfico para inspirar su próximo proyecto.
  • Cajas Y Flechas
    Un montón de tutoriales y actualizaciones.
  • Recursos de diseño web en Tuts +
    Cientos de tutoriales en profundidad, disponibles en varios idiomas.
  • Geek de usabilidad
    Información útil para ayudarte en tu desarrollo como diseñador.
  • UX Pin Studio
    Asesoramiento desde la perspectiva de los expertos de Wireframing.
  • 52 semanas de UX ★★★★★
    Impresionante colección de publicaciones de blog en UX.
  • Pixeles hermosos
    Colección de sus diseños de aplicaciones favoritas.
  • Blog Proto.io
    Blog de diseño móvil con un enfoque en prototipos.
  • Abduzeedo
    Genial si buscas inspiración.
  • Webdesignerdepot
    Tendencias de diseño web y tutoriales.
  • Diseñadores y Geeks
    Varias charlas grabadas de eventos en vivo sobre diseño, arte y tecnología.
  • GoodUI ★★★★★
    Una buena interfaz de usuario tiene altos índices de conversión y es fácil de usar. Es bueno tanto para el lado comercial como para la gente que lo usa.

Libros

  1. El diseño de las cosas cotidianas por Donald A. Norman
  2. No me hagas pensar por Steve Krug
  3. El libro de diseño de los que no son diseñadores, por Robin Williams
  4. Los elementos de la experiencia del usuario por Jesse James Garrett
  5. Formas que funcionan por Caroline Jarrett y Gerry Gaffney
  6. Una guía de proyectos para el diseño de UX Por Russ Unger y Carolyn Chandler
  7. Comunicar diseño por Dan M. Brown
  8. Piensa primero por Joe Natoli
  9. Acerca de Face Por Alan Cooper, Robert Reimann,
  10. Smashing UX Design Por Jesmond Allen y James Chudley
  11. El libro de UX por Rex Hartson y Pardha Pyla
  12. Simple y utilizable – Por Giles Colborne
  13. Diseño de usabilidad web – Por Jakob Nielsen
  14. Usabilidad móvil – Por Jakob Nielsen y Raluca Budiu.
  15. 100 cosas que todo diseñador debe saber sobre las personas – Por Susan M. Weinschenk Ph.D
  16. Midiendo la experiencia del usuario – Por Tom Tullis y Bill Albert

Con suerte, la respuesta será útil. Como de costumbre, estoy abierto a la discusión si es necesario.

Actualmente estoy trabajando en la “Aplicación Eagle”. Si alguna vez tiene problemas para administrar sus imágenes que siempre están dispersas en su escritorio, creo que Eagle es su estrella. Fácil de usar y flexible para todas las plataformas, es la mejor herramienta que un diseñador podría tener.

Por favor visite el siguiente enlace para probar Eagle ahora. Te ayudamos a organizar tus activos digitales como un jefe:
https://en.eagle.cool

CS Geeks (CS Geeks)

Este es el mejor canal de YouTube para aprender el lenguaje de programación en hindi, Csgeeks es posiblemente el mejor recurso para cualquier persona que quiera convertirse en programador. Los tutoriales en este canal cubren una gama de diferentes lenguajes de programación y Frameworks … Él explica cada línea de código …

Significa apilar

NODE.js + ExpressJs

Angular 2

angular 4

Ruby on Rails 5

Script ECMA 6 ES6

MongoDb

Magento 2

Ir

Scala

Rubí

React.js

Codeigniter 3

DO#

Laravel

Node.js

Oreja

Django

MsExcel

Mi SQL

PHP

JavaScript

XHTML

CSS

LINUX

ANDROIDE

R

Pitón

Java

do

C ++ ..

Este canal debe estar en su lista de seguro. Si quieres aprender a programar, solo hazlo.

Gracias por A2A!
Para comenzar y acostumbrarse a los términos ( etiquetas ) utilizados, comience desde Aprender para codificar. Con esto, sabrás lo que estarás aprendiendo y lo importante que será.
Después de esta introducción, comience el curso de HTML y CSS desde Aprender a Código HTML y CSS o Tutoriales en línea de W3Schools en línea. Le sugiero que prefiera Aprender a Codificar HTML y CSS porque en el curso W3SCHOOL puede confundirse debido a demasiadas etiquetas, pero visite W3SCHOOL de vez en cuando.

Ahora vas muy bien y sin problemas, también visita algunos otros sitios que son muy útiles en lo que respecta a la lógica. Estos sitios son:

  • Smashing Magazine – Para diseñadores web profesionales y desarrolladores
  • http://alistpart.com
  • Red de desarrolladores de Mozilla

Espero que funcione!

Los siguientes son algunos de los recursos para aprender diseño web.

Tutoriales en linea

Tutoriales en línea de W3Schools en línea

Presentando Online Learning Library Center por Eduonix

Comunidad de Spiceworks

Desbordamiento de pila: donde los desarrolladores aprenden, comparten y construyen carreras

CIW | Certificaciones

Blogs

55 Blogs de diseño web a seguir en 2016

Los 15 mejores blogs de diseño web que debes seguir en 2017

Blogs increíbles de diseño web que debes seguir – Repick.co Blog

16 maneras de aprender algo nuevo sobre diseño y desarrollo web esta semana

20 herramientas brillantes para el diseño y desarrollo web

Libros

7 de los mejores libros para aprender diseño web

11 libros geniales para aprender diseño web en 2015

5 grandes libros para aprender diseño web de la manera correcta

Comencé con una combinación de libros (The Photoshop Bible, Understanding CSS, etc.), Lynda: cursos en línea, clases, capacitación, tutoriales, visualización y estudio de otros sitios que me gustaron, etc.

No hay sustituto para la experiencia. Construir, construir, construir. También ayuda a encontrar el área de desarrollo que más le convenga. La mayoría de las personas no pueden construir una casa de arriba a abajo. Tienen un área que les atrae: carpintería vs plomería vs electricidad.

Los sitios de construcción generalmente tienen dos divisiones: programación y diseño. Entré al campo desde el diseño. Mi enfoque estaba en el diseño y la presentación. Esto llevó a desarrollar habilidades locas con HTML y CSS. Os dejo la programación para programadores.

WordPress y Drupal ofrecen muchas oportunidades ya que pueden proporcionar una funcionalidad muy robusta y compleja sin tener que escribir código. Puedes centrarte en la temática y el diseño.

Lo más importante es mirar la web con un ojo que disecciona y discierne. ¿Este sitio funciona para su propósito? ¿Es cómodo e intuitivo? ¿Por qué? ¿Cómo lo hicieron? El inspector de tu navegador es tu oportunidad de mirar por detrás de la cortina y descubrir la magia.

Durante años he descubierto que, si bien es extremadamente fácil crear sitios web con wordpress (CMS)

El vacío se produce cuando desea realizar una Tarea especial en sus sitios y darse cuenta de que no existe ningún complemento en el mundo que pueda manejar esa necesidad.

Aquí es donde recuerdas que deberías haber aprendido a programar y poder construir lo que quieras con el lenguaje de programación correcto

Te recomendaré que comiences inmediatamente

Aprenda a codificar y asegúrese de completar el primer curso en HTML y CSS

NOTA:

Por favor, no se limite a otros sitios, tan sencillo como es la academia de códigos, asegúrese de terminar el curso. La clave es entender y asegurar que usted codifique en una PC y no en una pestaña o teléfono.

(Los sabios aprenden de los errores de otros, es el tonto que desea aprender de sus propios errores)

Una vez que hayas terminado, vuelve y te contaré un secreto que te ayudará a seguir aprendiendo y sin parar.

Buena suerte

Treehouse, Aprende Diseño Web, Desarrollo Web, y más
Codecademia, Aprende a codificar
Code School, Aprende Haciendo – Code School
Udacity, avance su carrera a través de clases en línea basadas en proyectos

Esos son 4 buenos lugares para comenzar. ¡La mejor de las suertes!

La mayoría de la gente tiende a pensar en el diseño web como HTML y CSS. Si bien se requiere que estos idiomas comiencen con el diseño web, realmente se está limitando a sí mismo si se detiene allí. Por lo tanto, es importante comenzar a aprender JavaScript y jQuery desde el principio también. Siento que muchas personas se saltan esta parte porque es difícil. No es una opción si me preguntas. Le sugiero que encuentre recursos que aborden todos estos idiomas.
Una gran opción es el diseño web con HTML, CSS, JavaScript y jQuery, de Jon Duckett.
Escribo un poco más sobre esto aquí:
Los mejores libros de diseño web
Siéntase libre de comprobarlo!

En cualquier caso, buena suerte con el aprendizaje! 🙂

Prueba la escuela w3, la academia de códigos son muy buenas para aprender HTML5, CSS y Javascript.

Para tutoriales de video Los tutoriales y la capacitación de video en línea tienen una colección masiva de tutoriales sobre estos temas.
También puedes probar la serie de libros Oreally que son muy buenos para empezar.

Recomiendo buscar cursos de diseño web en Udemy: cursos de diseño web

http://www.w3schools.com
Este es un muy buen lugar para comenzar.

Debe descargar la capacitación en video de YouTube y también obtener un archivo PDF para php, jquery, html y css.