Ultimate Start guide for beginner UX/UI Product designers

I have been collecting these links for the past 5 years.

I conclude to make this list so that I can copy paste this link if someone asks me these questions, 😛

What software you are using? How to become a Pro designer? How to switch from graphic designer to UX designer? How to start my design career?

These are the 7 main pieces,

1. Assimilate Basics [Super important] ✴️
2. Master Design process and principles
3. Join with communities & contribute
4. Get inspired and inspire others
5. Refreshed with recent news
6. Know tools to convey your concepts.
7. Bonus: Freebies era [Contribute, don’t just download 😁]

Disclaimer: I have focused on sharing technical knowledge, not my English abilities. So don’t judge.

I have handpicked only the links I use persistently. Also, I described why I admire that particular site.

№ 1.Assimilate Basics [Super important] ✴️

Most of the designers including myself when we started, we assumed that making improbable animation will make us a Pro designer. But that’s not true.

“Learning basics like spacing, typography, the alignment will make you Pro designer.”

So when you are instituting as a beginner designer don’t ignore to learn the basics.

Links to bookmark:

• Human Interface Guidelines. — Grid, Typography, Resolutions
• Material design — Motion Guidelines
• Icons Basics — Understand about pixel perfection
• UI Basics
• NN Groups for UX — Research-based UX basics.
• Law of UX — Basic law about spacing.
• Design of everyday things

№ 2. Master Design process and principles

I believe you skilled all the fundamental. The first step is all about YOU. Now you are faring to think about working in a design team, working with developer and business leaders.

“Designers roles will get accomplish when we started collaborating & communicating with a multidisciplinary team of designers, devs, business people”

Links to bookmark:

(i) Working with developers

• Device Metrics — Material Design
• Android Asset Studio
• The Ultimate Guide To iPhone Resolutions
• Zeplin

(ii) Process phase

• Survey Methods Google Design
• Design Sprints
• UX Project Checklist
• IDEO — Design Kit
• Design Process
• Design Principles
• Design-systems
• 100 Things Every Designer Needs To Know About People

(iii) Presentation phase [You must learn this skill]

• Apple Presentations
• Talking about design High Resolution
• Copywriting

(iv) Learn about Voice Interface [because it’s 2019]

• Alexa Design
• AI UX: 7 Principles of Designing Good AI Products
• AI Conversation design process

№ 3. Join with communities & contribute

All over the globe design communities are super supportive. Don’t be passive members, try to contribute and support other designers

“Bring your unique style to the community, don’t just follow others style.”

Links to bookmark:

• Playbook — To have a meaningful design conversation.
• Dribbble — Focused on UI, Motion.
• Behance — Branding .
• Product Hunt — Cool tools every day.

№ 4. Get inspired and inspire others

Inspiration means not just gazing at their visual, scrutinize how they are solving a specific problem and dissect what makes them eminent.

Links to bookmark:

• Mobbin — Real app UI patterns.
• Uisources — Real app interaction.
• Awwwards — For website design.
• Reallygoodemails — Email template design
• Bestfolios — Case studies and Portfolio

№ 5. Refreshed with recent news

“The future is already here — it’s just not evenly distributed. — William Gibson

Just scrolling over news will unthinkingly help you intercross dots while you are solving a design riddle.

Links to bookmark:

(i) Design companies blogs

• Airbnb Design — Design system and community building
• Google design — Cool tech apps
• Uber design — Motion and UI
• Microsoft Design — If you are interested in Inclusive design
• Invision Design — Easily understandable articles

(ii) Everyday design news

• FastCompany — Top notch articles
• Sidebar — Very fussy articles
• Muzli — best for visual
• Techcrunch — VC, funding, money stuff
• DesignBetter.Co — Interviews from top design leaders

№ 6. Know tools to convey your concepts.

There is a traditional delusion that designers have to start by learning design tool. That’s absolutely inaccurate. Tools change every year, but design basics never change. Design tools just help you to visualize your ideas, they are not primary factors to be a good designer.

Senior designer ≠ Pro in using a design tool.

Senior designer = Pro in finding the problem, coming up with a solution.

Links to bookmark:

(i) Design

• Adobe XD — Super fast design software works on Windows
• Sketch — Designers famous tool.
• Figma — For collaboration

(ii) For User testing

• Marvel
• InVision

(iii) Prototyping

• Adobe — For quick Auto-animate, Voice interaction
• Framer x — Incredible drag and drop animation components+ Reactjs
• Invision Studio — Best touch interaction.
• Principle — Complex Interaction.
• Kite — Convert animation to swift code
• ProtioPie — Use sensor inputs, Arduino Inputs for prototype
• Sketch Together — Learn some cool stuff

(iv) Animation

• After effects — Onboarding animations.
• Cinema 4D — Product design demo videos

№7. Bonus: Freebies

When comes to freebies its easier to get dazed by many mediocre free resources, be picky about the resources you download and use. For example, if you are downloading icons make sure you obtain icons from trusted platforms like Google so that everyone can understand the meaning of inclusive icons.

“Contribute and Support don’t just download 😁”

Links to bookmark:

(i) Icons & Illustration

• Material Design Icons — Download and analyze how they are making perfect icons
• Noun Project — Just good icons
• Undraw — Use these as a dummy when you are starting a project.
• Brand Icons — All big companies logo in SVG, you dont need to google it.

(ii) Free Font

• Apple fonts — Perfect for apple devices Just go with SF FONT
• Google Fonts — Font suits for all languages
• DaFont — So many creative fonts

(iii) Colors

• BrandColors — When you are starting as a designer just use these colors and understand how they are maintaining hue
• Color Hunt — Trendy colors
• Webgradients — Give a spark

(iv) Videos

• Pexels Video
• Pixabay

(v) Music

• Fugue — Icon8 Music
• Youtube Free music

(vi) Images

• Unsplash — Clean photographs
• Remove.bg — use this when you make social media profile picture
• TinyPNG — Helps to compress images when you build your site

(vii) Brainstorming Wireframe

• Sketchsheets — Print sheet for team brainstorming section
• Sketchize: Free Wireframing Sheets
• Sneakpeekit Sketch Sheets

(viii)Mockup

• Facebook Design — Download devices
• Cleanmock — Automatically put your screens into a mockup

(ix) Free source file download

• Sketch Repo
• PSD Repo
• Figma Freebies
• Xd Resources
• Invision Studio

(x) UI Kits

• Apple Design Resources
• Android Pie Kit Sketch — DeveloperTown
• Material Design 2.0 Kit — DeveloperTown
• iOS 11 GUI for iPhone X and iPhone 8

Whoa, after culminating this list, it looks like designers job is hard, so many moving parts, Haha. Nevertheless, every designer adores their profession.

Recommended articles for you

• UI/UX case study for the New York Times app
• 11 Things every designer Needs To Know About Mobile App Interaction.
• Why is UX/UI designer the best job in the world?
• The Secret of Successful UX Writers
• 5 Motivational Tips for Designers
• Lesson for Young designer from Elder Designers

Available for new design projects

Email: contact@johnyvino.com | Portfolio: johnyvino.com/interactions