Update of Product Design, UX Design and User Flow articles (#18709)

* User Flow: Information, Articles, Youtube update

Explanation on what is User Flow with youtube videos and articles for reference and/or resource.

* Update of UX Design article

Update the article with more information and more links to articles and books.

* Product Design: Info, Articles, Youtube update

Explanation on what is Product Design with youtube videos and articles for reference and/or resource.

* Update description of Retina Display

As reported in issue #18129, there is a lack of explanation on what a retina display is and some users find it difficult to understand what they are doing exactly, so I added a short explanation on what a High-Resolution Display is and what a Retina Display is.

client/src/pages/guide/english/product-design/index.md

@@ -3,4 +3,37 @@ title: Product Design
 ---
 ## Product Design
 
-In this section, we'll have guides to a wide variety of tools and methods used by product designers.
+Product Design is a the process of defining a problem, finding a solution and creating a usable product.
+User Research, Data Analysis, UX and Interaction Design, Graphic and UI Design, Motion and Animation Design are all subprocesses of a Product Design.
+
+
+ #### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->
+
+ ###### Courses:
+<a href='https://classroom.udacity.com/courses/ud509' target='_blank' rel='nofollow'>Product Design Course</a>
+[Udacity] (https://classroom.udacity.com/)
+
+ <a href='https://www.edx.org/course/product-design-the-delft-design-approach-0' target='_blank' rel='nofollow'>Product Design: The Delft Design Approach</a>
+[edX] (https://www.edx.org/)
+
+ ###### Youtube:
+<a href='https://www.youtube.com/watch?v=XRd6Ddn4ZSY' target='_blank' rel='nofollow'>Netflix Product Designer | Navin Iyengar | Design Like a Scientist</a>
+[Awwwards Youtube Channel] (https://www.youtube.com/channel/UCYWGYef22gx8PaXZMLHAQsw)
+
+ <a href='https://www.youtube.com/watch?v=v-XDF57OOQQ' target='_blank' rel='nofollow'>How to be a Freelance Product Designer — Jared Erondu</a>
+[Dann Petty Youtube Channel] (https://www.youtube.com/channel/UCTOwGti_mRb2J1JfTdIkg_w)
+
+ <a href='https://www.youtube.com/watch?v=v-XDF57OOQQ' target='_blank' rel='nofollow'>How to be a Freelance Product Designer — Jared Erondu</a>
+[Dann Petty Youtube Channel] (https://www.youtube.com/channel/UCTOwGti_mRb2J1JfTdIkg_w)
+
+
+ ###### Resources:
+<a href='https://medium.com/@jeanniehuang/product-design-resources-ive-found-helpful-5dadad58dcff' target='_blank' rel='nofollow'>Product Design Resources I’ve Found Helpful</a>
+[Jeannie Huang Medium] (https://medium.com/@jeanniehuang)
+
+ <a href='https://uxdesign.cc/product-design/home' target='_blank' rel='nofollow'>Product Design - UX Collective</a>
+[UX Collective] (https://uxdesign.cc/)
+
+ <a href='https://www.invisionapp.com/inside-design/7-free-resources-every-product-designer-needs' target='_blank' rel='nofollow'>7 free resources every product designer needs</a>
+[Inside Design by InVision] (https://www.invisionapp.com/inside-design/)

client/src/pages/guide/english/user-experience-design/index.md

@@ -3,19 +3,41 @@ title: User Experience Design
 ---
 ## User Experience Design
 
-User Experience Design is a field that focuses on how the end users of a product interact with it, and how they feel about the product.
+User Experience Design is a field that focuses on how the end users interacts with a product or a service. User Experience Design cover covers a wide range of aspects related with a product and not only the visual aspect(such as the GUI). A UX Designer is responsible for the overall experience the end users has with the product and thus a UX Designers role could span from the business side of the product, such as Market and User research, to the Graphical aspect, such as GUI, Interaction Design(sometimes called IxD) and Sound Design. Due the wide area a UX Designer covers it is not uncommon for people to branch out and specialise in certain aspects of the User Experience field, such as User Research, User Interface, User Interaction, Motion Design, Copywriter etc. 
 
-In this section, we'll have guides to a wide variety of user experience design concepts.
+This section and it's guides, will cover a wide variety of user experience design concepts.
 
-#### Articles for Resources and Inspiration for User Experience Design
+
+#### Articles, Resources and Inspiration for User Experience Design
+
+ <a href='https://www.prototypr.io/home/' target='_blank' rel='nofollow'>Prtotypr.io</a>
+[Prototypr.io] (https://www.prototypr.io/home/)
+
+ <a href='https://uxplanet.org/' target='_blank' rel='nofollow'>UX Planet</a>
+[UX Planet] (https://uxplanet.org/)
+
+ <a href='https://uxdesign.cc/' target='_blank' rel='nofollow'>UX Collective</a>
+[UX Collective] (https://uxdesign.cc/)
+
+ <a href='https://medium.com/google-design/tagged/ux' target='_blank' rel='nofollow'>Google Design on Medium</a>
+[Google Design on Medium] (https://medium.com/google-design/tagged/ux)
+
+ <a href='https://medium.com/@pablostanley' taget='_blank' rel='nofollow'>Pablo Stanley</a>
+[Pablo Stanley on Medium] (https://medium.com/@pablostanley)
 
 [Boxes & Arrows](http://boxesandarrows.com)
 [Usabilla](http://blog.usabilla.com)
 
-#### Textbook for User Experience Design 
+#### Textbook for User Experience Design
-
+ The Design of Everyday Things: Revised and Expanded Edition -> (Amazon)[https://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654/ref=sr_1_1?ie=UTF8&qid=1538897807&sr=8-1&keywords=design+of+everyday+things]
-[Interaction Design: Beyond Human-Computer Interaction (4th Edition) - Amazon](https://www.amazon.com/Interaction-Design-Beyond-Human-Computer/dp/1119020751)
+ 
+ Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd Edition) -> (Amazon)[https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=sr_1_1?ie=UTF8&qid=1538897464&sr=8-1&keywords=don%27t+make+me+think]
+ 
+Interaction Design: beyond human computer interaction 4th edition -> (Amazon)[https://www.amazon.com/Interaction-Design-Beyond-Human-Computer/dp/1119020751]
 
 #### Mostly Free Online UX Design Curriculum
 
 [Springboard Learning Path: User Experience Design - Julia Debari](https://www.springboard.com/learning-paths/user-experience-design/learn/#)
+
+[UX Design for Mobile Developers
+by Google](https://www.udacity.com/course/ux-design-for-mobile-developers--ud849)

client/src/pages/guide/english/user-experience-design/user-flow/index.md

@@ -3,13 +3,27 @@ title: User Flow
 ---
 ## User Flow
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/user-experience-design/user-flow/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
-
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
-
 <!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+User Flow is a fundemantal tool for every User Expereince Designer in predicting a Users actions and travel path through a product. By designing a User Flow a UX designer puts himself in the shoes of a fictional user and completes a task product they are designing. The resulting 'diagrams' are called a "User Flow Map"(not to be mistaken with "User Journey Map") and through it a designer could predict and plan the directions a future user might take when using a certain aspect of the product.
 
 #### More Information:
 <!-- Please add any articles you think might be helpful to read before writing the article -->
 
-
+###### Youtube:
+<a href='https://www.youtube.com/watch?v=wClXAzTFUIY' target='_blank' rel='nofollow'>Personas and User Flows | UX/UI Design | Product Design | Udacity</a>
+[Udacity Youtube] (https://www.youtube.com/user/Udacity)
+ <a href='https://www.youtube.com/watch?v=JjjxDXbgfYY' target='_blank' rel='nofollow'>Recreating Instagram's User Flow: An exercise in UX design - UXT#5</a>
+[https://www.youtube.com/channel/UCNN-covyHLvm1Q7vUV6StAg] (UX Tracks)
+ <a href='https://www.youtube.com/watch?v=-MqBBvw6wBY' target='_blank' rel='nofollow'>The Difference Between User Journeys and User Flows | UX Tutorial</a>
+[https://www.youtube.com/channel/UCpzWITCC0EjA9tiKeyO1i3A] (Robert Smith)
+ <a href='https://www.youtube.com/watch?v=XmhUkDfXv3U' target='_blank' rel='nofollow'>How to Analyze User Flows by Scoot Product Manager</a>
+[https://www.youtube.com/channel/UC6hlQ0x6kPbAGjYkoz53cvA] (Product School San Francisco)
+ ###### Resources:
+<a href='https://uxdesign.cc/the-biggest-wtf-in-design-right-now-87139f367d66' target='_blank' rel='nofollow'>The biggest WTF in design right now</a>
+[https://uxdesign.cc/] (UX Collective)
+ <a href='https://medium.com/sketch-app-sources/user-journey-maps-or-user-flows-what-to-do-first-48e825e73aa8' target='_blank' rel='nofollow'>User Journey Maps or User Flows, what to do first?</a>
+[https://medium.com/sketch-app-sources] (Design + Sketch)
+ <a href='https://www.uxpin.com/studio/blog/creating-perfect-user-flows-for-smooth-ux/' target='_blank' rel='nofollow'>Creating Perfect User Flows for Smooth UX</a>
+[https://www.uxpin.com/] (UX Pin)
+ <a href='https://optinmonster.com/how-to-design-a-user-flow-diagram-for-your-website/' target='_blank' rel='nofollow'>How to Design a User Flow Diagram for Your Website</a>
+[https://optinmonster.com/blog/] (Optinmonster)

curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md

@@ -7,7 +7,9 @@ videoUrl: 'https://scrimba.com/p/pzrPu4/cVZ4Rfp'
 
 ## Description
 <section id='description'>
-The simplest way to make your images appear "retina" (and optimize them for retina displays) is to define their <code>width</code> and <code>height</code> values as only half of what the original file is.
+With the increase of internet connected devices, their sizes and specifications vary, and the displays they use could be different externally and internally. Pixel density is an aspect that could be different on one device from others and this density is known as Pixel Per Inch(PPI) or Dots Per Inch(DPI). The most famous such display is the one known as a "Retina Display" on the latest Apple MacBook Pro notebooks, and recently iMac computers. Due to the difference in pixel density between a "Retina" and "Non-Retina" displays, some images who have not been made with a High-Resolution Display in mind could look "pixelated" when rendered on a High-Resolution display.
+
+The simplest way to make your images properly appear on High-Resolution Displays, such as the MacBook Pros "retina display" is to define their <code>width</code> and <code>height</code> values as only half of what the original file is.
 Here is an example of an image that is only using half of the original height and width:
 <blockquote>&lt;style&gt;<br>&nbsp;&nbsp;img { height: 250px; width: 250px; }<br>&lt;/style&gt;<br>&lt;img src=&quot;coolPic500x500&quot; alt=&quot;A most excellent picture&quot;&gt;</blockquote>
 </section>