2.20. Prototipos visuales de alta fidelidad

2.20. Prototipos visuales de alta fidelidad

  marzo 20, 2018    Fernando López

---

En el vídeo Prototipado: wireframes, mockups y prototipos de la lección 2.4.,se te ha explicado que existen diferentes tipos de prototipos, de baja y alta fidelidad.

En el siguiente vídeo se explica la evolución de los prototipos de baja a alta fidelidad, se muestran los principales atributos estéticos de los elementos de una página web (colores, áreas, cajas de contenido, imágenes, tipografías, menús y enlaces, iconos y elementos decorativos).

Se comentan algunos aspectos sobre el software de diseño visual (trabajar en capas, medir, editar imágenes).

Se ofrecen cinco consejos antes de empezar a diseñar:

1. busca inspiración, 
2. paleta básica de colores, 
3. busca recursos gráficos, 
4. define las tipografías, 
5. recopila el material necesario),

y cinco consejos para empezar a diseñar:

1. trabaja en capas, 
2. de general a particular, 
3. no abuses de ciertos elementos, 
4. optimiza el tiempo, 
5. organización.

Listado para explorar con el software de diseño, practicar con las posibilidades creativas, inspirarte o resolver tus dudas técnicas:

https://design.tutsplus.com/articles/50-great-photoshop-tutorials-for-clever-beginners--psd-785

http://www.tutorialmagazine.com/

https://www.digitalartsonline.co.uk/tutorials/

http://spyrestudios.com/30-adobe-photoshop-illustrator-tutorials-for-web-designers/

https://designrfix.com/resources/60-adobe-photoshop-illustrator-tutorials

https://blog.spoongraphics.co.uk/category/tutorials

https://creativenerds.co.uk/inspiration/100-fresh-new-photoshop-and-illustrator-tutorials/

http://www.vandelaydesign.com/photoshop-illustrator-tutorials/

Listado de sitios para encontrar inspiración, buscar ideas o explorar tendencias:
http://www.webcreme.com/
http://www.webdesign-inspiration.com/
https://designyoutrust.com/
http://abduzeedo.com/
https://ffffound.com/

Teoría del color:
https://desarrolloweb.com/articulos/1444.php
https://www.kabytes.com/diseno/uso-de-los-colores-en-diseno-web/
http://www.abcdisegno.com/teoria-del-color/
http://www.abcdisegno.com/colores-para-la-web/


Generar paleta de colores:
http://paletton.com/#uid=12J0u0kllllaFw0g0qFqFg0w0aF
http://www.colorhexa.com/

Inspiración colores:
https://www.pinterest.es/manekibeader/inspirational-colour-palettes/
http://www.colourlovers.com/

Recursos gráficos gratuitos:
http://freelancefolder.com/25-sites-for-free-vector-files/
http://www.vectorvalley.com/
http://all-silhouettes.com/
http://www.bestfreewebresources.com/
http://www.bittbox.com/
http://psd.fanextra.com/
http://designbeep.com/
https://webdesignledger.com/

Uso de la tipografía y sus características así como encontrar tipos de letra para tus diseños:
Artículos tipografía en diseño web:
https://www.creativebloq.com/web-design/choose-web-fonts-1233034
https://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/

Tendencias e inspiración tipográfica:
https://webdesignledger.com/21-examples-of-inspiring-typography-in-web-design/#97fa2e75c1

Recursos tipografía:
https://fonts.google.com/
https://www.fontsquirrel.com/
https://www.dafont.com/es/
http://www.fontfabric.com/
https://www.theleagueofmoveabletype.com/

Elementos de diseño:
https://www.johnlovett.com/design-overview
https://es.slideshare.net/contactofaum/elementos-de-diseo
https://www.ecured.cu/Elementos_b%C3%A1sicos_del_Dise%C3%B1o_Gr%C3%A1fico
http://www.cristalab.com/tutoriales/diseno-web-fundamentos-basicos-c63l/

Comunidades y blogs de diseño:
https://www.creativebloq.com/net-magazine
https://webdesignledger.com/
https://www.creativebloq.com/


Fuente: Actívate, Google España