fix(guide): simplify directory structure

guide/english/visual-design/color-theory/color-and-culture/index.md

@@ -0,0 +1,30 @@
+---
+title: Color and Culture in Visual Design
+---
+## Color and Culture in Visual Design
+
+
+Color contributes to and affects context.
+Feng shui accepts this principle, whether a contemporary home decor strategy of the West, or as part of a traditional Chinese practice.
+From this, who could disagree with the premise that culture and psychology affect how colors are interpreted in context of information?
+Specific combinations of colors may also represent symbols, as in colors of a national flag, a favorite sports team, school or institution for example.
+
+
+Colors are one of the first impressions a viewer recognizes and interprets in communication --before letters are read, numbers analyzed, and graphs interpreted.
+This is why it is important to research about [biases that viewers](/working-in-tech/unconscious-bias/index.md) may have.
+A pallet of colors may change the context and meaning of content you publish.
+
+
+<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  -->
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->
+
+[Rainbows in culture (Wikipedia.org)](https://en.wikipedia.org/wiki/Rainbows_in_culture)
+
+[Color in culture (Wikipedia category)](https://en.wikipedia.org/wiki/Category:Color_in_culture)
+
+[Color and psychology (Wikipedia.org)](https://en.wikipedia.org/wiki/Color_psychology)
+

guide/english/visual-design/color-theory/index.md

@@ -0,0 +1,90 @@
+---
+title: Color Theory
+---
+## Color Theory
+
+Color Theory is a practical application of mixing colors and using color to achieve a specific visual effect.
+
+Colors are used in all sorts of ways.
+
+The choice of colors in visual display is often constrained by hardware, software running on the hardware, limitations of the human eye and variations on how humans perceive color.
+
+Limits to choices are also shaped by artificial constraints supplied by a project, such as having to conform to design style and branding.
+
+A color wheel is the main tool used by designers to specify or locate color. Color wheels can include the entire color spectrum or they can be organized by a defined category of colors. 
+
+The four main category of colors, which you might already be familiar with, are Primary Colors, Secondary Colors, Tertiary Colors, Complementary Colors.
+
+Using color theory can help meet the requirements of projects while maximizing legibility of text and accessibility of content to viewers with different viewing traits or needs.
+
+### Color Wheel or Color Picker
+
+A color wheel or picker is a tool used by designers to specify or locate color.
+Color pickers may include a color spectrum or they may be organized by defined categories of light, such as brightness and hue.
+
+
+**Primary Colors**
+
+In art and illustration, colors are traditionally separated into three categories: Primary Colors, Secondary Colors, and Tertiary Colors.
+Primary colors are colors that cannot be mixed or formed by any combination of other colors.
+Secondary colors are the ones formed by mixing two of the primary colors.
+Tertiary colors are the ones formed by mixing all three primary colors.
+
+In traditional painting, the colors are red, yellow and blue (RYB).
+All other colors are derived from these three.
+The actual hue of each primary color affects the range of colors available.
+
+Computer visual displays commonly use a different set of three primary colors to approximate color: red, green and blue (RGB).
+Every color displayed is made of varying the brightness of the primary colors.
+
+Computer printers commonly use four primary colors to represent color.
+A black is sometimes used as a contrast medium to increase the range of contrast.
+The combination of Primary colors Cyan, Magenta, Yellow, and Key (CMYK) is common. "Key" represents black.
+Key is a traditional term for the most significant impression of a combination of imprints.
+
+### Color Psychology
+
+Color Psychology is a study of how color influences human mood and behavior. The colors chosen for the design can influence how 
+successful a product is.
+
+**Complementary Colors:**
+Red-green, yellow-purple, blue-orange
+These are colors formed by mixing colors that are oppsite from each other on the color wheel.
+
+In web design, colors also carry with them connotations and implications that need to be understood or else you could cause confusion. The color red in a non-digital space, such as a fast-food restaurant, carries the implication of energy or excitement. However, on the web the color red also carries with it the implication that the user has committed an error. This example of how color means certain things in certain settings should be a critical reminder to understand how the person viewing your page will interpret the color selection you’ve made.
+
+### Web colors
+
+Web standards including HTML, CSS, and graphics file formats: jpeg, PNG, GIF, and SVG use primary colors of red, green, and blue.
+Each technology or device displays a slightly different hue of primary color.
+For example, a pure red on one monitor may look more pink or orange on another.
+These variances add to the complexity of attempting to portray accurate colors on a computer screen.
+This is a significant issue, for example, when trying to:
+
+* represent a product with a specific color hue, or
+* represent a rainbow of color, or
+* alert a user with messages having various degrees of importance.
+
+Web design, advertising, and human-computer interface heuristics also recognize that colors carry cultural connotations and implications. 
+
+<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  -->
+
+#### More Information:
+
+<a href="http://lfhs.lfcisd.net/UserFiles/Servers/Server_904/File/ECCastillo/Color%20Theory%20Worksheet.pdf">Basic Color Theory Worksheet</a>
+
+<a href="https://en.wikipedia.org/wiki/Color_psychology">Color Psychology Wiki</a>
+
+[Table of spectral or near-spectral colors in RGB](https://en.wikipedia.org/wiki/Spectral_color#Table_of_spectral_or_near-spectral_colors)
+
+[Color and Usability](/visual-design/color-theory/usability/index.md)
+
+[Color and Culture](/visual-design/color-theory/color-and-culture/index.md)
+
+[How to get a professional look with color](https://www.webdesignerdepot.com/2009/12/how-to-get-a-professional-look-with-color/)
+
+[Its Only Color](https://robots.thoughtbot.com/Its-only-color)
+
+

guide/english/visual-design/color-theory/usability/index.md

@@ -0,0 +1,61 @@
+---
+title: Color and Usability
+---
+## Color and Usability
+
+Like the variances in [representation of color by visual displays](/visual-design/color-theory/index.md), human eyes and brain interpret colors in a variety of ways.
+
+About one in twenty people have color blindness.[2]
+That's almost a billion people!
+Color blindness is when a range of different colors are interpreted as hues of one color.
+Sometimes a person does not know that they experience color blindness, because the colors "look normal" to them.
+This has serious implications for contrasting colors between letters and their backgrounds, and for alerts, where color coveys a context of importance for example.
+Even something as simple as conveying 'stop' and 'go' is problematic, since the most common form of color blindness is where red and green appear the same.
+
+
+Over one percent of the population has [other kinds of significant visual loss (Wikipedia.org)](https://en.wikipedia.org/wiki/Visual_impairment).
+Losses may include sensitivity to too much or too little contrast, distortions, and limits in the range of viewing clarity (nearsightedness or farsightedness).
+
+Computer screens are capable of displaying contrasts that are about double of contrasts available on paper. 
+
+
+Here are guidelines to help meet design challenges of accommodating these variances while not adversely affecting others' experience.
+These guidelines also help [adaptive technology (Wikipedia.org)](https://en.wikipedia.org/wiki/Assistive_technology#Visual_impairments) work more effectively.
+
+### Definitions
+
+**brightness** To determine brightness for the guidelines, sum the RGB color values. If a font has RGB color (255,0,0) this means it has 100% red, and 0% green and blue light. It's brightness is 255 + 0 + 0 = 255.
+Maximum brightness is white with 255 + 255 + 255 = 765.
+
+**contrast** To determine contrast for the guidelines, subtract the *brightness* between two colors.
+
+### Guidelines
+
+ 1. Avoid exceeding paper-level contrasts in text.  Differ brightness between text and text background at least 300 if not 400 --a little more for small fonts, less for larger fonts. 
+If the font color is Red, the RGB value might be (255,0,0) is a brightness of 255 out of 765.
+If the background is yellow, the RGB value might be (255,255,0) = 510.
+The difference between 510 and 255 is 255. 
+This example contrast is too low, and brings us to the next guideline.
+
+ 2. For purposes of checking contrast and adapting color blindness, assume red and green primary colors are the same color.
+The most common form of color blindness sees red and green similarly.
+This means for effectiveness with important communication, consider that the colors Red RGB(255,0,0), Green RGB(0,255,0) and "Olive"[1] RGB(127,127,0) are essentially the same color with the same contrast.
+For calculating contrast, yellow RGB(255,255,0) has double the brightness of any one primary color.
+The two primary colors still produce twice the brightness of one.
+
+### Summary
+
+The good news is that there is still lots of flexibility available in choosing an effective color pallet that is palatable to readers.
+
+ 
+
+<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  -->
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->
+
+1. [Web colors (Wikipedia.org)](https://en.wikipedia.org/wiki/Web_colors#Web-safe_colors)
+
+2. [Color blindness (Wikipedia.org)](https://en.wikipedia.org/wiki/Color_blindness)

guide/english/visual-design/index.md

@@ -0,0 +1,24 @@
+---
+title: Visual Design
+---
+## Visual Design
+
+In this section, we'll have guides to a wide variety of visual design concepts.
+
+
+Various design methodologies can be employed when doing visual design example, brutal and post-punk. Different companies have their own design languages in a broad sense. For example, Google is a large propogator of [Material Design](https://material.io) in which design elements are made to look like real materials with the same flow and shadow effects.
+
+Visual Design deals with how applications looks to the user as well as how it feels. It can be seen as the digital equivalent of graphic design. And as such, visual design should also strive to follow Dieter Rams' well-known principles of good design.
+
+
+### 10 Principles of Good Design
+1. Good design is innovative
+2. Good design makes a product useful
+3. Good design is aesthetic
+4. Good design makes a product understandable
+5. Good design is unobtrusive
+6. Good design is honest
+7. Good design is long-lasting
+8. Good design is thorough down to the last detail
+9. Good design is environmentally friendly
+10. Good design involves as little design as possible

guide/english/visual-design/layout/index.md

@@ -0,0 +1,20 @@
+---
+title: Layout
+---
+## Layout
+
+Layout refers to the arrangement or placement of elements on a given page. Elements can include functional items such as paragraphs, headings, lists, and sections. Elements can also include design items such as icons, shapes, and images. The use of whitespace, padding, and margin is also used heavily in layout. You can consider the former to be design characteristics rather than elements in and of themselves.
+
+The layout of a page is the arrangement of these various items into a presentation that conveys meaning to the person viewing the page. Thus, a primary consideration for layout should be how the layout will be understood and what meaning it will ultimately convey. Without carefully considering the meaning of a layout, you can cause confusion and distrust amongst your target audience.
+
+One common mistake you might make is to determine layout based on what you think looks best. Doing this can violate the idea of standard conventions and should be avoided until you are more experienced in layout design.
+
+Standard Conventions is a term used to describe a process or application of a technique that has industry-wide approval and general cultural acceptance amongst users.
+Examples of these conventions as it relates to layout are listed below:
+*	Placement of heading text above the paragraph it’s meaning to describe.
+*	Placement of a navigation bar at the top of the page.
+*	Use of whitespace to separate different sections and types of content.
+*	Lack of whitespace to bring together sections and types of content.
+* Ensuring elements are neat and organized (i.e two buttons aligning to be visually acceptable)
+* Simplicity of the layout such that it is easy to follow and flows nicely
+* Use of visual hierarchy to help keep the layout visually flowing (Size, color, positioning, etc)

guide/english/visual-design/visual-hierarchy/index.md

@@ -0,0 +1,30 @@
+---
+title: Visual Hierarchy
+---
+## Visual Hierarchy
+
+Visual hierarchy is the organization and presentation of content. You can use visual hierarchy to focus users' attention and show where the most important information is.
+
+What you need to remember while creating the visual hierarchy of your content is that it's all relative. The parts you want to highlight should stand out from other parts of your content.
+
+You can achieve visual hierarchy in many ways, including (but not limited to):
+
+* Size
+* Color and contrast
+* Headings and subheadings
+* Typography
+* White or blank space
+* Texture
+* Position
+* Orientation
+* Overall layout
+
+#### More Information:
+
+Tools to Create a Visual Hierarchy: <a href='https://designschool.canva.com/blog/visual-hierarchy/' target='_blank' rel='nofollow'>Design School blog</a>
+
+6 Principles of Visual Hierarchy: <a href='https://99designs.com/blog/tips/6-principles-of-visual-hierarchy/' target='_blank' rel='nofollow'>99 designs blog</a>
+
+Case Study - Improving a Page with Visual Hierarchy: <a href='http://blog.formedfunction.com/post/3029763425/on-visual-hierarchy' target='_blank' rel='nofollow'>blog</a>
+
+Adding Visual Hierarchy: <a href='https://medium.com/designed-thought/8-ways-to-add-visual-hierarchy-8820be73218a/' target='_blank'>Medium</a>

guide/english/visual-design/wireframing/index.md

@@ -0,0 +1,28 @@
+---
+title: Wireframing
+---
+## Wireframing
+
+<p>A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors.</p>
+<p>Wireframing is a way to design an application at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page for these reasons, wireframes typically do not include any styling, color, or graphics. Wireframes also help establish relationships between a website’s various templates.</p>
+<p>Find additional resources on Wireframing <a  href="http://www.experienceux.co.uk/faqs/what-is-wireframing/" target="blank">here</a></p>
+<br>
+<h2>Wireframing Tools</h2>
+<hr>
+<ul>
+  <li>
+  <a href="https://marvelapp.com/home" target="blank">Marvel</a>
+  </li>
+  <li>
+  <a href="https://www.invisionapp.com/" target="blank">InVision</a>
+  </li>
+  <li>
+  <a href="https://proto.io/" target="blank">Proto App</a>
+  </li>
+  <li>
+    <a href="https://www.lucidchart.com/pages/examples/wireframe_software/" target="blank">Lucidchart</a>
+  </li>
+  <li>
+    <a href="http://pencil.evolus.vn/Default.html/" target="blank">Pencil</a>
+  </li>
+</ul>