Advanced web
- rest of the frontend roadmap - bulletpoints from frontend 1 - design, ui and ux # Design, UX and UI **Why learn UI design?** - **UX Designers**. You can present designs as beautiful mockups that your coworkers will rally around. You can work with interfaces from concept to pixel-perfection. Your portfolio stands light-years ahead of your peers. - **Developers**. You can cover for design on your team. You can spiff up your side-project’s interface, instead of finding/hiring a designer. You can translate designs to code with minimal hassle, because you understand the aesthetic underpinnings. - **PMs**. You can create amazing mockups for pitching new features and flows. You can work alongside your designers, and provide spot-on feedback for excellent product. - **Entrepreneurs**. Like it or not, a good presentation for your ideas matters. Your marketing site, your app – even your pitch deck. Eventually, you'll be in the big leagues and can hire out – but even then, a solid foundation in design will help you communicate and lead. - **Print Designers**. More and more design work shifts to digital every day. You've got to learn the ropes, figure out this whole "responsive" business, and practically re-build your portfolio to keep working in the field you love. ## Resources **Books** - The Design of Everyday Things: Revised and Expanded Edition - The Non-Designer's Design Book - User Interface Design for Programmers by Joel Spolsky (three days) - About Face: The Essentials of Interaction Design - Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability **Case studies** - https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/amp/ **Inspiration** - https://onepagelove.com[One Page website designs for your inspiration.] - https://awwwards.com[Awards website that promotes design talent.] - https://dribbble.com[A community of designers sharing their work.] - https://pttrns.com[A collection of mobile design patterns.] - https://uimovement.com[The best UI design inspiration, every day.] **Blogs and websites** - https://blog.marvelapp.com - https://medium.com/design - https://smashingmagazine.com - https://webdesignernews.com - https://sitepoint.com/design-ux **Other Links (sort me)** - https://startupsthisishowdesignworks.com/ - https://blog.codinghorror.com/low-fi-usability-testing/ - https://uxdesign.cc/gamification-aguide-for-designers-to-a-misunderstood-concept-4de5bef0c5d9 - https://www.lukew.com/ff/entry.asp?1649 - https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/ - https://developer.apple.com/design/tips/ - https://medium.com/ux-power-tools/50-things-you-probably-forgot-to-design-7a288b0ef914 - https://www.freecodecamp.org/news/ux-best-practices-how-to-design-scannable-app-screenshots-89e370bf433e/ - https://blog.logrocket.com/design-101-from-a-non-designer-a383e20dbfcb/ - https://uxplanet.org/7-principles-that-influence-our-behaviour-fc42c154c2a ## Practice Practicing and learning by yourself is the only thing that can make you a better designer - Familiarize yourself with UI principles. - Color & Contrast - Composition & Balance - Typography - Consistency - Learn the creative UX process. - Discover - researching, getting inspired, and gathering ideas, get to know users, their wants and needs - Define - define an idea extracted from the Discover phase. From this, a clear creative brief is created - Develop - This is where solutions or concepts are created, prototyped, tested and iterated. This process of trial and error helps designers to improve and refine their ideas - Delivery - The final phase is the delivery stage, where the final project is finalised, produced and launched - Design mock projects/case studies - Read design articles - Look at inspiration artists/pages/etc - Mentor and get mentored