UI/UX design YouTube course

https://youtube.com/playlist?list=PL4D4ciWjcTFy59b1tXBAjhnNYP4fLoyVc&si=xFkGasHmfMEso-_X

https://drive.google.com/drive/u/0/mobile/folders/1hRLHjSriaIup7Kd2AyyXhMIjTik1iFZ7?usp=drive_open

Breef
Gools understanding
Targeted audience
Analyzing competitors
Site map
References ///
User flow
Usability
Warframe
Testing
Prototype ///
Layout creation
Testing
Prototype

First step

Find references (https://www.awwwards.com/)
Create a sitemap
User flow
First screen https://www.nngroup.com/articles/most-violated-homepage-guidelines/

Usability

First screen 5s
Hierarchy elements
Eye tracking
Headlines
Colours (don't use more 3 colors)
Fonts ( don't use more 3 fonts)
Navigation (rule of 7, three conditions of navigation, same effects, clarity, short words)
Where I'm? How I can come back? (Bread crumbs)

Usability articles

https://www.nngroup.com/articles/ten-usability-heuristics/

Visibility of system status The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time. People strive for predictability and control, and, in most cases, more information translates to better decision making. https://www.nngroup.com/articles/visibility-system-status/

Match between system and the real world The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order. https://www.nngroup.com/articles/match-system-real-world/

User control and freedom Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process. https://www.nngroup.com/articles/user-control-and-freedom/

Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions. https://www.nngroup.com/articles/consistency-and-standards/

Error prevention Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action. https://www.nngroup.com/articles/slips/ https://www.nngroup.com/articles/user-mistakes/

Recognition rather than recall Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed. https://www.nngroup.com/articles/recognition-and-recall/

Flexibility and efficiency of use Shortcuts — hidden from novice users — may speed up the interaction for the expert user so that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. https://www.nngroup.com/articles/flexibility-efficiency-heuristic/

Aesthetic and minimalist design Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility. https://www.nngroup.com/articles/aesthetic-minimalist-design/

Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution. https://www.nngroup.com/articles/error-message-guidelines/

Help and documentation It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks. https://www.nngroup.com/articles/help-and-documentation/

Top 10 Enduring Web-Design Mistakes: https://www.nngroup.com/articles/top-10-enduring/

58 signs of a good interface: https://habr.com/ru/articles/247367/

Warframe

Lorem ipsum Pinterest InVision

UI

Inspiration

www.awwwards.com www.behance.net www.pinterest.com www.dribbble.com

Free Images Stock. Raster: www.unsplash.com www.stocksnap.io www.designerspics.com www.flickr.com www.publicdomainpictures.net www.picography.co/?s=work www.sitebuilderreport.com www.pexels.com/search/tow truck www.albumarium.com

Vector: www.vecteezy.com www.freepik.com

Icons: www.flaticon.com www.thenounproject.com

No – Free Image Stocks. Raster and vector: www.shutterstock.com www.stock.adobe.com

Fonts. Free fonts: www.fonts.google.com

Colors. Free fonts: www.material.colorion.co www.palettom.com

The Text Place Holder. All languages: www.uk.lipsum.com

Spep by step:

Screen size. Responsive/adaptive website
Modular grid www.gridulator.com
Horizontal rhythm
Synthesis
Usability test
Make effects
Layers

Good design

Air
Pixel perfect
Colors
Contrast
Fonts
Headlines
Quality of graphic
Private police

Mockup:

www.graphicburger.com/mock-ups/ www.forgraphictm.com/ www. freecreatives.com/mockups/imac-mockups.html www.zippypixels.com/?s=label&post_type=product www.fusionplate.com/4013/37-free-psd-magazine-book-cover-brochure-mockups/ www.cssauthor.com/free-mockup-templates-psd-designs/#Flyer

Darviridis / Reflections

UI/UX #49

UI/UX design YouTube course

First step

Usability

Usability articles

Warframe

UI