# Mohamed and Jihye ## UX Lead --- ## 🎨 UX DESIGN and ## 🏗 UX ENGINEERING/TOOLS <iframe src="https://giphy.com/embed/oy83DwqHRcR1jJczV3" width="326" height="380" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> --- ### UX Design 🖼 - is the process which design teams use to create products that provide meaningful and relevant experiences to users. - involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability and function. --- #### Accessibility (Mohamed) [a11y](https://a11y.coffee/) [a11yproject](https://www.a11yproject.com/) [makeitfable](https://makeitfable.com/) [reach](https://reach.tech/) [react-aria](https://react-spectrum.adobe.com/react-aria/) [Radix](https://radix-ui.com/primitives/docs/overview/introduction) <iframe src="https://giphy.com/embed/XzIz1apZka6DgFPxD8" width="280" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> --- #### 🖍 Colours (Jihye) [COOLORS](https://coolors.co/) [COLOR TOOL](https://material.io/resources/color/#!/?view.left=0&view.right=0) [Colormind](http://colormind.io/) [Color Hunt](https://colorhunt.co/) [Muzli Colors](https://colors.muz.li/) [Color Space](https://mycolor.space/) [CSS Gradient](https://cssgradient.io/) --- #### 🤩 Icons (Jihye) [ICONS](https://icons8.com/icons) [Streamline](https://streamlinehq.com/) [Freeicons](https://freeicons.io/) [flaticon](https://www.flaticon.com/) [dribbble](https://dribbble.com/stories/2019/07/01/7-free-icon-sets-to-download-on-dribbble) [Font awesome](https://fontawesome.com/) --- #### Typography (Mohamed) - - [dribbble](https://dribbble.com/stories/2020/02/17/free-fonts-for-designers) - - [Google Fonts](https://fonts.google.com/icons?selected=Material+Icons) <iframe src="https://giphy.com/embed/l4pTr7SvHVEQDl6BG" width="480" height="280" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> ```written language legible, readable and appealing when displayed``` --- ### Illustrations (Mohamed) ``` Images speak louder than words``` [blush](https://blush.design/) [Artify](https://www.artify.co/uncommon-illustrations) <iframe src="https://giphy.com/embed/ekpxga8QRJVFUBxQeL" width="380" height="320" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> --- ### 🚧 UX ENGINEERING (Jihye) - We build and design digital products using UX principles. - UX engineers generally deal with the front end of these products—the user-facing parts that people interact with, like the buttons, layouts, and flow of the interfaces. --- #### 🤔 Why important?(Jihye) ##### Advocate for the user 💕 - UX is important because it tries to fulfill the user's needs. - We aim to provide positive experiences that keep users loyal to the product or brand. - Additionally, a meaningful user experience allows you to define customer journeys on your website that are most conductive to business success. --- - A UX engineer is responsible for producing prototypes that require coding and cannot be created using web design software. - This level of front-end development is valuable and informative to the final development. --- ##### Create a style guide (Jihye) 👯‍♀️ Creating a UX design style guide for your team 👯‍♀️ - Grid - Spacings - Color palette - Typography - Font size - Text values - Numerical values --- ### Flowchart (Mohamed)  * Decisions are made to control events * It makes things easier to understand * Figma * visualising your idea --- ### Prototyping/ wireframing (Mohamed) * using Figma to prototype our idea without coding * Laying the design of the application for usability * user Testing --- ### Tech Stack (Mohamed) * boostrap * tailwind * next.js * styled components * css * HTML * Java script --- ## Use psychology to build our product ### 📍 Peak-End Rule: #### ✨ People judge an experience largely based on how they felt at its peak and its end rather than on the total sum or average of every moment of the experience. ✨ ---  --- ☝️ Pay close attention to the most intense points and the final moments(the "end") of the user journey. ☝️ Identify the moments when your product is most helpful, valuable, or entertaining and design to delight the end user. ☝️ Remember that people recall negative experiences more vividly than positive ones. --- Our memories are raely a perfectly accurate record of events. How users recall an experience will determine how likely they are to use a product or service again or recommend it to others. Since we judge past experiences based not on how we felt throughout the whole duration of the event but on the average of how we felt at the peak emotional moments and at the end, it is vital that these moments make a lasting good impression. By paying close attention to these key moments of an exprience, we can ensure users recollect the experience as a whole positively. --- Any Questions <iframe src="https://giphy.com/embed/ZXwdJuk172dQwAqMGv" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>