# For Rookies
<!-- SUSU design manual for new member. -->

### Introduction：
**[🔗 The design thinking process](https://medium.com/digital-reflections/the-design-thinking-process-17d0ad5aec27)**
> An introduction for people who never heard of design thinking. This article explains designers' works in each design thinking step. When running your design journey, you can follow the design process to ensure that you are on the right way of product development.

**[🔗 UI/UX overview](https://medium.com/@iamjesseshow/ux-vs-us-7431dd859418)**
> UI and UX is totally different. In this article, you can understand what UI designer and UX designer work for, and differ UX from UI. Many companies love to ask the differences between those two works when you applying their jobs, so understand this concept may help you a lot. xD

**[🔗 UI UX case study](https://medium.com/studentwork/tagged/ui-ux-case-study)**
> Case studies can help you fully implement your product design. You don't need to read all of them. Pick one or two cases that interest you and see how others designed their products.

---
In our team, we used Figma for design works. FigJam were used to our user study, and Figma files were used to edit wireframes and high-fi prototypes. So, first you need to sign up for Figma and preferably download a desktop version.

<font color=#898989>*(If you have already been familiar with Figma, you can skip this section.)*</font>

### Figma：
* [Figma sign up](https://www.figma.com/downloads/)
* [Introduction to Figma](https://uxplanet.org/figma-all-you-need-to-know-156b52b88e54)

**Figma設計體驗營(上)**
<iframe width="560" height="315" src="https://www.youtube.com/embed/zfCUtLdUYd8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<br>

**Figma設計體驗營(中)**
<iframe width="560" height="315" src="https://www.youtube.com/embed/qltgqrKJT7o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<br>

**Figma設計體驗營(下)**
<iframe width="560" height="315" src="https://www.youtube.com/embed/3YICmzX9ywk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

Besides, if you want to know more about **UI design**, I suggest that you can learn some **HTML** and **CSS**. This knowledge will help you gain a solid understanding of how figma and the design system work.

### HTML & CSS：
* [HTML For Beginners The Easy Way](https://html.com/)
* [CSS tutorial](https://html.com/css/)

<font color=#898989>*(Reference from development team xdd)*</font>

---

We also need to make the **RWD(Responsive web design)** interfaces. Here are some articles and tools related to building RWD interfaces.

### RWD :
* [RWD introduction](https://www.w3schools.com/css/css_rwd_intro.asp)
* [Breakpoints](https://bootstrap5.hexschool.com/docs/5.0/layout/breakpoints/)


---
In addtion, there are still something you need to know.
### Other design knowledge:

* [How to create a user flow?](https://careerfoundry.com/en/blog/ux-design/how-to-create-a-user-flow/)
* [A guide to different types of website structures](https://xd.adobe.com/ideas/process/information-architecture/different-types-of-website-structures/)
* [Why you should be using svg on your website?](https://www.lifewire.com/using-svg-in-web-design-3470014)
* [Negative space in web design](https://uxdesign.cc/negative-space-in-web-design-7411bc7dfba1)
* [Color matching](https://medium.com/swlh/color-matching-series-1-get-color-matching-inspiration-from-pictures-25e8e816200e)

### <font color=#898989>(optional)</font>
* [Responsive layout grid](https://material.io/design/layout/responsive-layout-grid.html#grid-customization)
* [Understanding navigation](https://material.io/design/navigation/understanding-navigation.html#types-of-navigation)
* [The color system](https://material.io/design/color/the-color-system.html#color-theme-creation)
* [Understanding Typography](https://material.io/design/typography/understanding-typography.html#type-scale)
* [System icongraphy](https://material.io/design/iconography/system-icons.html) <!-- -> We tend to download icons from **Noun Project**-->
* [Shape to UI](https://material.io/design/shape/applying-shape-to-ui.html#shape-attributes)

<br>

# Final Challenge
Please design an online teaching platform using Figma.🎨


In your online course website, trying to brainstorm your own creative ideas. However, there are some **must have** factors in it:

**1. A home page.**
> In home page, you need to have a navigation bar, your platform's name, a logo, your body section's title, and login or sign up button. (You can also refer to the above picture. xdd)

**2. Login pages.**
> You should also design a login page that will appear after pressing the login button in your home page. Login data usually including username, email, and so on.

**3. A personal page.**
> A personal page usually including user profile or setting options. It all depends on your website design.

**4. Pages for learning.**
> This part is the most free style part. You can brain storm what a learning platform should look like. Learning videos or learning games are all acceptable. Try your best to make a fun learning platform.

**5. RWD design.**
> Last but not least, in order to display your design on mobile device, you need to make RWD pages for your users. You only need to choose one device size for your rwd. (You can choose any types of phone or iPad. For exmple, Samsung A51 android or iPhone 12 iOS.)

<br>

Before you start your challenge, there are some suggested steps and helpful tools you can refer to.

**Suggested steps :**
1. Reference others' learning platform.
2. Brainstorm your platform's structure.
3. Design an userflow.
4. Draw your wireframe.
5. Change wireframe into high-fi prototype.
6. Add some prototype animation and RWD pages on Figma.

**Tools :**
* [Free icon download](https://thenounproject.com/)
* [Free pictures download](https://unsplash.com/)
* [Free illustrstion](https://www.freepik.com/)

**Inspiration website:**
* [Dribbble](https://dribbble.com/)
* [Pinterest](https://www.pinterest.com/)
* [Behance](https://www.behance.net/)