diff --git a/client/src/pages/guide/english/product-design/index.md b/client/src/pages/guide/english/product-design/index.md index c1c09c08ec..239e8f6634 100644 --- a/client/src/pages/guide/english/product-design/index.md +++ b/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. \ No newline at end of file +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: + + + ###### Courses: +Product Design Course +[Udacity] (https://classroom.udacity.com/) + + Product Design: The Delft Design Approach +[edX] (https://www.edx.org/) + + ###### Youtube: +Netflix Product Designer | Navin Iyengar | Design Like a Scientist +[Awwwards Youtube Channel] (https://www.youtube.com/channel/UCYWGYef22gx8PaXZMLHAQsw) + + How to be a Freelance Product Designer — Jared Erondu +[Dann Petty Youtube Channel] (https://www.youtube.com/channel/UCTOwGti_mRb2J1JfTdIkg_w) + + How to be a Freelance Product Designer — Jared Erondu +[Dann Petty Youtube Channel] (https://www.youtube.com/channel/UCTOwGti_mRb2J1JfTdIkg_w) + + + ###### Resources: +Product Design Resources I’ve Found Helpful +[Jeannie Huang Medium] (https://medium.com/@jeanniehuang) + + Product Design - UX Collective +[UX Collective] (https://uxdesign.cc/) + + 7 free resources every product designer needs +[Inside Design by InVision] (https://www.invisionapp.com/inside-design/) diff --git a/client/src/pages/guide/english/user-experience-design/index.md b/client/src/pages/guide/english/user-experience-design/index.md index 1f2471b706..1210819c93 100644 --- a/client/src/pages/guide/english/user-experience-design/index.md +++ b/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 + + Prtotypr.io +[Prototypr.io] (https://www.prototypr.io/home/) + + UX Planet +[UX Planet] (https://uxplanet.org/) + + UX Collective +[UX Collective] (https://uxdesign.cc/) + + Google Design on Medium +[Google Design on Medium] (https://medium.com/google-design/tagged/ux) + + Pablo Stanley +[Pablo Stanley on Medium] (https://medium.com/@pablostanley) [Boxes & Arrows](http://boxesandarrows.com) [Usabilla](http://blog.usabilla.com) -#### Textbook for User Experience Design - -[Interaction Design: Beyond Human-Computer Interaction (4th Edition) - Amazon](https://www.amazon.com/Interaction-Design-Beyond-Human-Computer/dp/1119020751) +#### 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] + + 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) diff --git a/client/src/pages/guide/english/user-experience-design/user-flow/index.md b/client/src/pages/guide/english/user-experience-design/user-flow/index.md index adc8fe4626..26c2ed26e7 100644 --- a/client/src/pages/guide/english/user-experience-design/user-flow/index.md +++ b/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. Help our community expand it. - -This quick style guide will help ensure your pull request gets accepted. - +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: - +###### Youtube: +Personas and User Flows | UX/UI Design | Product Design | Udacity +[Udacity Youtube] (https://www.youtube.com/user/Udacity) + Recreating Instagram's User Flow: An exercise in UX design - UXT#5 +[https://www.youtube.com/channel/UCNN-covyHLvm1Q7vUV6StAg] (UX Tracks) + The Difference Between User Journeys and User Flows | UX Tutorial +[https://www.youtube.com/channel/UCpzWITCC0EjA9tiKeyO1i3A] (Robert Smith) + How to Analyze User Flows by Scoot Product Manager +[https://www.youtube.com/channel/UC6hlQ0x6kPbAGjYkoz53cvA] (Product School San Francisco) + ###### Resources: +The biggest WTF in design right now +[https://uxdesign.cc/] (UX Collective) + User Journey Maps or User Flows, what to do first? +[https://medium.com/sketch-app-sources] (Design + Sketch) + Creating Perfect User Flows for Smooth UX +[https://www.uxpin.com/] (UX Pin) + How to Design a User Flow Diagram for Your Website +[https://optinmonster.com/blog/] (Optinmonster) diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md index 90d55f9435..e104819ac2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md +++ b/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
-The simplest way to make your images appear "retina" (and optimize them for retina displays) is to define their width and height 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 width and height 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:
<style>
  img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="A most excellent picture">