DIU_Recursos.md

Recursos UI/UX

Recursos para el Diseño de Interacción y experiencia de usuario

Inspiration

• Google Design. Apoyo al diseño para todos, incluyendo font, iconos etc. https://design.google

• Graphic Design Conjuntions: Design, Fonts, Inspiration, Mockups, Logos; Web Design http://graphicdesignjunction.com/

• Dribbble. find & showcase creative work and home to the world's best design professionals. https://dribbble.com

• Muzzli. The best design inspiration https://muz.li/

• Awwwards . Web desing awards. https://www.awwwards.com

• Behance (con Adobe XD) https://www.behance.net/galleries/xd

• Site inspire https://www.siteinspire.com/

• Lapa Ninja landing pages & books https://www.lapa.ninja/

• Godly (web design inspirations) https://godly.website/

• Landingfolio Landing Page Design Inspiration, https://www.landingfolio.com/

Documentación & Video

• UI Pin. Web UI Design Best Practices (ebook) https://www.immagic.com/eLibrary/ARCHIVES/GENERAL/UXPIN_PL/U141030B.pdf

• 50 TIPS to improve User Interface (ebook) https://fifty.user-interface.io/50_ui_tips.pdf (AMM)

• Designing Mobile Apps (ebook) https://appdesignbook.com

• De la conferencia de desarrolladores Google I/O de este año se presentó la nueva versión de Material Design (que han llamado Material You) para su uso a partir de Android 12. https://www.youtube.com/watch?v=rLKtIGY2Mgc (DHC)

• Cómo escribir experiencias de usuario, Video (52 minutos): https://www.youtube.com/watch?v=uIcA4_JJmns. (DHC)

• Material design videos https://www.youtube.com/@materialdesign

Design best practices (checklist)

• Checklist Design A collection of the best design practices. https://www.checklist.design/

• UX Check UX Check is a Chrome Extension that helps you identify usability issues through a heuristic evaluation

  https://www.uxcheck.co/

• Usability review checklist (xls template ) http://www.uxforthemasses.com/usability-reviews/

• UOC Design Toolkit -https://design-toolkit.recursos.

Case Study

• Case Study Club: https://www.casestudy.club/
• growth.design Visual Case Study: https://growth.design/case-studies/
• UX Collective: https://uxdesign.cc/ux-case-studies/home
• Bestfolios: https://www.bestfolios.com/casestudy
• Ejemplo Case Study (growth design) https://growth.design/case-studies/
• Ejemplo Case Study (Muse Map Street Map): https://blog.prototypr.io/musemap-street-art-app-ux-case-study-9bec6a99823b
• Ejemplo Case Study (Spotify) https://www.muze-studio.co.il/spotify-case-study.html
• DIU: UX Case Study Hall of Fame: https://github.com/mgea/UX_CaseStudy

• UX Timeline (case study). http://uxtimeline.com

• UXfolio: Crear UX portfolio, https://uxfol.io/

Design Pattern

• Mobbin : App Design pattern. https://mobbin.design
• UI Garage. https://uigarage.net/
• Pttrns, https://www.pttrns.com
• Screenlane https://screenlane.com/
• Simform (animated mobile pattern 2023) https://www.simform.com/mobile-patterns/

UI Guidelines

• Apple Human Interface Guidelines - https://developer.apple.com/design/human-interface-guidelines/
• Apple Design Resources - https://developer.apple.com/design/resources/
• Google Material: https://material.io/
• Microsoft Guidelines. https://www.microsoft.com/design

UI Kits

• Google Material design 3 https://m3.material.io

Universal Design & A11y

• Principio del Diseño Universal: CheckList http://webaim.org/standards/wcag/WCAG2Checklist.pdf
• WCAG 2.1 CheckList https://romeo.elsevier.com/accessibility_checklist/
• WUHCAG Web accessibility for developers WCAG 2.1 CheckList https://www.wuhcag.com/wcag-checklist/
• WAVE Web Accessibility Evaluation Tool. https://wave.webaim.org
• Cynthia Says. Revisa WCAG 2.0 (A, AA, AAA) http://www.cynthiasays.com
• TAW. Validación Nivel A, AA, AAA. www.tawdis.net

A11y Simuladores

• tota11y an accessibility visualization toolkit https://khan.github.io/tota11y/
• Sim Daltonism. The color blindness simulator.https://michelf.ca/projects/sim-daltonism/
• Web Accessibility Evaluation Tools List https://www.w3.org/WAI/ER/tools/
• The Web Accessibility Toolbar (WAT) https://developer.paciellogroup.com/resources/wat/
• NoCoffee Vision Simulator. NoCoffee can be helpful for understanding the problems faced by people with slight to extreme vision problems, such as low contrast sensitivity or color blindness.

Prototyping tools & Resources

• Figma https://www.figma.com (education plan https://www.figma.com/education/)
• Penpot (open source prototyping tool) https://penpot.app/
• Protopie http://protopie.io
• Lista de herramientas. https://uxtools.co/tools/design
• • Design Tool Database 2022 (UXtools) https://uxtools.co/tools/design
• Designer Survey 2023 (questionaire) https://uxtools.co/survey/2023/

Web design tools (chrome extensions)

• Fonts Ninja: Font identifier Chrome extension by Handy Tools and Apps for Designers

  https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh/related?hl=es

  Fonts Ninja helps to identify fonts and provide information about them by checking available styles, foundry, and price. The algorithm examines the fonts as well as their CSS properties. https://www.fonts.ninja/

• GoFullPage - Full Page Screen Capture, Captura página web completa a pdf/png con páginas complejas https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=es-419

• Nimbus Screenshot & Screen Video Recorder Screen Capture FULL Web page or any part. Edit screenshots. Record screencasts - record video from your screen https://chrome.google.com/webstore/detail/nimbus-screenshot-screen/bpconcjcammlapcogcnnelfmaeghhagj?hl=es

• HTML to Figma by Builder.io https://github.com/BuilderIO/figma-html

  Extension: https://chrome.google.com/webstore/detail/html-to-figma-by-builderi/efjcmgblfpkhbjpkpopkgeomfkokpaim?hl=es

• Smart Color Palette https://chrome.google.com/webstore/detail/smart-color-palette/gakfleegiilbiiebpmbihadgcbpjgoha/relate The Smart Color Palette is a great extension that provides the list of used colors in any webpage

• Window resizer Resize the browser window to emulate various screen resolutions. https://coolx10.com/window-resizer/

Figma Resources

• ^ html.to.design: Figma import html https://www.figma.com/community/plugin/1159123024924461424/html-to-design

• ^ ghost, converts mockups to placeholders https://www.figma.com/community/plugin/1017135840453013129

• ^ A18Y Contrast checker [AY11 – Color Contrast checker](http://figma.com/c/plugin/733159460536249875/A11y---Color-Contrast-Checker(opens in a new tab))

Responsive Design Testing

• Check (URL) in differents devices (free) https://responsivetesttool.com/

Web design tools

• nicepage (1 site con 5 pages) https://nicepage.com/
• mobirise one page design https://mobirise.com/

Web design sandbox

• CodemyUI Web Design & UI Inspiration with Code Snippets https://codemyui.com/

Artboards para Diseño e ideación (colaborativa)

• Milanote (for Moodboard) http://www.milanote.com/
• Miro for Moodboard & ideation (https://miro.com/)
• Figjam, collaborative artboard de Figma https://www.figma.com/figjam/
• FlowMapp (added 2024) Visual design for sitemap and User Flow https://www.flowmapp.com/

Eye Tracking

• Gaze (Web) Recorder https://gazerecorder.com/
• Screen web recorder https://screen-rec.vercel.app/

Iconos & ilustraciones

• flaticon. Free vector icons https://www.flaticon.com/
• unplash. Free photos https://unsplash.com
• StorySet. Free customizable (animate) illustrations https://storyset.com/
• ShapeFest library of free 3D shapes https://www.shapefest.com/
• Iconos http://fontawesome.io/
• Ouch https://icons8.com/illustrations/
• Open Peeps https://www.producthunt.com/posts/open-peeps
• Undraw https://undraw.co/illustrations
• Vecteezy https://www.vecteezy.com/

Mockup for branding

• Freepik. Isometric Branding formato PSD/EPS https://www.freepik.com/free-psd/
• Freepick Photography: Isometric mockup with photography concept, PSD https://www.freepik.com/free-psd/isometric-stationery-mockup-with-photography-concept_3047755.htm#page=2&query=branding+identity+mockup&position=6
• GDJ. Free Branding Identity Mockup PSD Templates http://graphicdesignjunction.com/2016/07/50-free-branding-identity-stationery-mockups/
• Mockups-Design (+ scene creator) https://mockups-design.com
• PSDRepo (XD, Card mockup) https://psdrepo.com
• [magic mockups] https://magicmockups.com/
• [the Mockup Club] https://themockup.club/
• [the Mockup World] https://www.mockupworld.co/
• [threed.io beta] https://threed.io
• [mockupworld] https://www.mockupworld.co/all-mockups/

[DIU] Resources

• Respositorio de guión de prácticas / portfolio https://github.com/mgea/DIU
• Hall of fame de Buenas prácticas https://github.com/mgea/UX_CaseStudy
• Checklist de métodos UX https://github.com/mgea/UX-DIU-Checklist -> https://mgea.github.io/UX-DIU-Checklist/index.html

Color

• Image Color Extractor. Subir foto para extraer paleta colores (https://designs.ai/) https://designs.ai/colors/image
• Paleta colores (https://designs.ai/colors/)
• Paletton permite escoger la paleta de colores (http://www.paletton.com/)
• Colormind Generador de paleta de color (mediante IA) http://colormind.io
• Cooolors (generador de paleta ) https://coolors.co/
• CHEEKY PALETTES (crear por inspiración paleta de color) https://www.cheekypalettes.com/

Banco de imágenes

• Lifeofpix fotografías de alta resolución https://www.lifeofpix.com
• Pexels fotografías / videos https://www.pexels.com/
• DesignInspiration Buscador de fotografías https://www.designspiration.com
• The pattern library (fondos mosaico) http://thepatternlibrary.com/
• Pattern icon (fondo personalizado con iconos) https://lazymau.com/project/patternico
• Burst shopify (free bank of photos) https://burst.shopify.com
• BarnImages Free high-resolution images for everyone. https://barnimages.com
• Life Of Pics Free photos https://www.reshot.com/free-stock-photos/photo/lost-is-a-place-yw1v02/
• IsoRepublic free Photos & video https://isorepublic.com/
• Designian (free design) https://www.designian.co/

Random Users:

• Random User (free, open Source) https://randomuser.me
  • cómo usar: https://medium.com/@ssokurenko/generating-random-user-profiles-for-a-web-application-f0172b437db9
• Personas UIFaces: https://www.uifaces.co
• Fake users: https://uiuxjobsboard.com/random-users-generator

Fonts

• Google fonts: https://fonts.google.com

• GDJ. 24 Fresh Free Fonts For Graphic Designers http://graphicdesignjunction.com/2020/10/fresh-free-fonts-24/

• Fonts pairs, Asistente para combinar fuentes con AI (https://designs.ai/) https://designs.ai/fonts/

• Selección de fonts: https://www.fontpair.co/

• Selección de fonts https://fontjoy.com/

• Selección de fonts https://designs.ai/fonts/

Logo design

• logo maker Logo y asistente: https://www.tailorbrands.com/es/logo-maker
• LOGO design Low resolution https://hatchful.shopify.com/e
• LogoMakr Logo maker con asistente https://logomakr.com/
• Branding maker, https://www.tailorbrands.com/es/logo-maker
• Crear logotipo (https://www.designevo.com/)

Anim

• Fable App: desarrollo de animaciones https://www.fable.app/

Juegos / Challenges / Coding

• Juego para identificar un buen diseño (can’t unseen) https://cantunsee.space/
• Laws of UX https://lawsofux.com
• Cards for Humanity A practical tool for inclusive design https://cardsforhumanity.idean.com
• UX cards challenges. https://uxtools.co/challenges/

Vintage GUIS

• https://guidebookgallery.org/

• https://www.hudsandguis.com/

---

CCBY Miguel Gea, https://mgea.github.io/DIU/ Diseño de Interfaces de Usuario, 2021-24

Universidad de Granada