feat: Web Design Rulles jonasschmedtmann#10 - Part 2: layout patterns

Author: Uribouz

starter/06-Components/note.md

@@ -57,18 +57,47 @@ Elements --> Components --Pattern--> Layouts --> Webpage
 #### C. Section Components
 
 1. Navigation
+   - At the top of the page
+   - Can contains 'submenu' to show a list of selection user can navigate to.
+   - Can also show 'overlay' on an entire webpage. (if you have a big website, with a lot of different pages).
+   - Can also show another navigations tabs (again if you have a big website, with a lot of different pages).
 2. Hero section
+   Types:
+   2.1) Text on oneside, picture on another side
+   2.2) Having a background images, text in the front.
+   2.3) Hybrids of both the above.
 3. Footer
+   - Sitemap for an entire website (if your website is not too big.)
+   - Information about the company
+   - Privacy or policy
 4. Call-to-action section
+   - Close to the end of the page
+   - After show user all the information about the product, want user to take some action like buying/signing for our product. (Very important)
+   - Can just a link for user to contact them, like emails/ phone numbers.
 5. Featuer row
+   - Small section of the page, showing your product (Photo on the other side, text on another side.)
+   - Can have 'Call-to-action' inside.
 
 #### D. Layout Patterns
 
 1. Row of boxes or cards
+   - Having a couple of boxes/cards in a rows (x row)
 2. Grid of boxes or cards
+   - Having a boxes/cards in a grid (x/y rows)
+   - Aside: can be nested inside components
 3. Z-pattern
+   - Repeat 'Feature Row', but swap position of the text/picture down the vertical line.
 4. F-pattern
+   - Repeat 'Feature Row', down vertical lines.
 5. Single-column
+   - Can be used on mobile phones
+   - Can be use on very simple websites
+   - Can be use on a simple blogposts
 6. Sidebar
+   - Can be use Use for blogs
+   - Can be use on web-application where multiple options can be located.
 7. Multi-column/magazine
+   - Literally like a real magazine
 8. Asymmetry/Experimental
+   - Futuristics layout, experimental
+   - Using 'grid' as a baseline.