🏠 Home 🚀 Startup OS 💰 Startup Credits
🏁 Start Here!
Intro to Entrepreneurship📔 Canvases, worksheets and templates
Canvases + WorksheetsGTM Plan + Pitch Deck TemplateMVP Building BlocksPM + Mental Models TemplatesProduct Marketing Templates💸 Startup Fundraising Checklist
Startup Fundraising Checklist📈 SaaS and Financial Metrics
Business Models + Startup FinancialsSaaS Growth Metrics + Calculators🛠 Tools and Platforms
Tools + PlatformsCommunity Building ToolsTools to support your Side Hustle📒 Articles and Blog posts
Articles + 'How-To' Guides📚 Tiny Guides + Checklists
30-Day Startup PlaybookFirst 90 days at your startupLanding page checklist + Tool GuideProduct Development (MVP) made simple!Product Management Handbook + Tool LandscapeProduct Analytics + Customer OnboardingTiny Guide to UI/UXLaunch Path: Product Launch ChecklistProduct Hunt Launch ChecklistNo-Code cheat sheetLet's talk No-Code (How-to's + Tools)No-Code App Development Sprint🚀 Have an epic launch
Places to Launch + Promote your Startup[Slack Channels] Startup & Tech CommunitiesLast updated: 25/3/2023
Tiny Guide to UI/UX
The official definition of User Experience (UX) is "A person’s perceptions and responses resulting from the use and/or anticipated use of a product, system or service.” (ISO 9241-210:2010, subsection 2.15). In simpler terms, making the experience if the user interacts with the product as best as possible.
UI / UX Design Process
Phase-1: Understand
User Interview
Journey Mapping
Competitive Analysis
User Persona
Empathy Mapping
Phase-2: Ideate
User Flow
Wireframing
Rapid Prototyping
Phase-3: Test
Usability Testing
Card Sorting
Surveying
Heuristic Evaluation
Diary Study
Phase-4: Implement
Design System
Accessibility
For
Information Architecture
User Onboarding
Collaborative Templates in Miro
Tool | Category | Description | Website |
---|---|---|---|
Abstract | HandoffVersioning | Abstract is that place for tracking tasks, reviewing designs, and measuring what works. We call it design intelligence. | |
Acocode | Handoff | Centralize design collaboration, developer hand-off, version control, screen flows, & feedback in one tool. | |
Adobe Illustrator | UI Design | The industry-standard vector graphics software lets you create everything from web and mobile graphics to logos, icons, book illustrations, product packaging and billboards. And now, experience the freedom and flexibility of Illustrator across desktop and iPad. | |
Adobe Photoshop | UI Design | From photo editing and compositing to digital painting, animation and graphic design — you can do it all in Photoshop. | |
Adobe XD | UI DesignPrototypingUser FlowsDesign systemVersioning | Design like you always imagined. Share your story with designs that look and feel like the real thing. Wireframe, animate, prototype, collaborate, and more — it’s all right here, all in one UI/UX design tool. | |
Affinity Designer | UI Design | The design revolution | |
Antetype | UI Design | By building Antetype on native web technology, you can preview your design and test your prototype on every device with a supported browser. | |
AppCooker | Prototyping | A unique project-oriented mockup tool. Designed for collaboration. | |
Axure | UI DesignPrototyping | Axure RP is the only UX tool that gives UX professionals the power to build realistic, functional prototypes. | |
Balsamiq | Prototyping | Balsamiq is the company behind Balsamiq Wireframes, the industry standard low-fidelity wireframing tool. | |
Bitbucket | Versioning | Built for professional teams. Bitbucket is more than just Git code management. Bitbucket gives teams one place to plan projects, collaborate on code and test. | |
Craft | PrototypingDesign system | A fresh take on documents. Built for digital devices from the ground up, Craft brings back the joy to writing. | |
Diagrams.net | User Flows | Powerful features. diagrams.net has everything you expect from a professional diagramming tool. | |
Dovetail | User Interviews | Where customer research lives Make sense of all your customer research data in one intuitive, collaborative, and searchable research repository. | |
Dropbox | Versioning | Dropbox is a modern workspace designed to reduce busywork-so you can focus on the things that matter. | |
FigJam | Whiteboarding | An online whiteboard for teams to ideate and brainstorm together | |
Figma | UI DesignPrototypingUser FlowsDesign systemVersioning | Figma brings your teams together to design better products from start to finish | |
Flinto | Prototyping | Flinto is a Mac app used by top designers around the world to create interactive and animated prototypes of their app designs. | |
Framer | UI DesignPrototyping | Framer is an all-in-one tool that helps teams design every part of the product experience. | |
Frontify | PrototypingHandoff | Frontify allows anyone – with or without design skills – to quickly access our brand world, download brand logos, fonts, and assets, and create brand visuals | |
Fullstory | Session Recording | FullStory serves up a superset of DX data in an accessible, easy-to-use platform. | |
Fuse Open | Prototyping | An open-source cross-platform mobile app development tool suite, supporting building Android and iOS applications. With Fuse you can build native mobile user interfaces using the easy to learn UX Markup language, and use JavaScript to add business logic. | |
Github | Versioning | GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories | |
Google Drive | Versioning | Access Google Drive with a free Google account (for personal use) or Google Workspace account (for business use) | |
Gravit Designer | UI Design | Gravit Designer is a free full-featured vector graphic design app that works on ALL platforms. | |
HotGloo | Prototyping | NEXT LEVEL WIREFRAMING & PROTOTYPING TOOL. CREATE IN YOUR BROWSER. REVIEW ANYWHERE. | |
Hotjar | Session Recording | See how visitors are really using your website, collect user feedback and turn more visitors into customers. | |
Invision | UI DesignPrototypingWhiteboardingHandoffDesign system | The digital product design platform powering the world’s best user experiences | |
iRise | Prototyping | PROTOTYPING AND AGILE REQUIREMENTS FOR REMOTE TEAMS WITH REAL-TIME, MULTI-USER PROTOTYPING | |
Justinmind | UI DesignHandoff | Easily create web and mobile app prototypes and wireframes with Justinmind UI prototyping tool. | |
Kite Compositor | Prototyping | Kite Compositor is a native UI animation design application for Mac. | |
Koncept App | Prototyping | Perform usability testing on application prototypes with real users. Get detailed insights, validate ideas and better understand your users. | |
Launchpad by Anima | Prototyping | Export HTML from Sketch, Design Interactions and Animations with Sketch. | |
Lingo | Design system | Stop wasting time looking for files buried in folders. Organize all your visual assets in one place with Lingo. Create and share living brand style guides, digital asset libraries and more. | |
Lucidchart | WhiteboardingPrototypingUser Flows | Lucidchart is your solution for visual communication and cross-platform collaboration. Create professional flowcharts, process maps, UML models, org charts etc. | |
Lucidspark | Whiteboarding | Lucidspark is a virtual whiteboard where teams can come together to bring their best ideas to life. | |
Marvel | PrototypingHandoff | Rapid prototyping, testing and handoff for modern design teams | |
Milanote | Whiteboarding | Milanote is an easy-to-use tool to organize your ideas and projects into visual boards. | |
Miro | WhiteboardingPrototypingUser Flows | The online collaborative whiteboard platform to bring teams together, anytime, anywhere. | |
MockFlow | UI Design | MockFlow is a powerful tool for drawing UI wireframes that also extends as a full planning suite for product design | |
Mockplus | UI Design | The all-in-one product design platform for prototyping, collaboration, and creating design systems. | |
Moqups | Prototyping | A streamlined web app that helps you create and collaborate in real-time on wireframes, mockups, diagrams and prototypes. | |
Mural | Whiteboarding | MURAL is a digital workspace for visual collaboration, where everyone can do their best work together. | |
Notable | Prototyping | Notable provides a very powerful Markdown editor | |
Origami Studio | Prototyping | Design, animate, and prototype. All-in-one. | |
Overflow | User Flows | Communicate your designs like never before. Create interactive user flow diagrams that tell a story. | |
Pidoco | Prototyping | Pidoco. Your wireframing tool. | |
Preely | Prototyping | Preely lets you create remote user tests from digital design prototypes. Get fast learnings about your users’ experience with your product. You can use the insights to validate ideas or existing prototypes, test your assumptions or to get new ideas that will improve your product. | |
Principle | Prototyping | Principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a multi-screen app, or new interactions and animations, Principle helps you create designs that look and feel amazing. | |
Proto.io | UI DesignPrototyping | Bring your idea to life in no time. The prototyping solution for all your needs. For UX designers, entrepreneurs, product managers, marketers, and anyone with a great idea. | |
Protopie | Prototyping | From the simplest of interactions to those that use Excel-grade formulas, ProtoPie can handle them all. | |
Prott | Prototyping | Design awesome products, with your team. Maximize your team’s superpowers and keep everyone engaged - from first idea to pixel perfect. | |
Rarchy | User Flows | Save days of time mapping your website's content using our super-fast website crawler. | |
Sketch | UI DesignPrototypingUser FlowsHandoffDesign systemVersioning | A home for the entire collaborative design process. | |
Smartlook | Session Recording | Smartlook records users on websites and in mobile apps. With features that allow you to find useful information even in thousands of recordings in no time. | |
Studio | UI DesignPrototyping | Turn ideas to live web experiences, in one place with your team. | |
Sympli | HandoffVersioning | We build design version control and developer handoff tools to help teams collaborate. | |
User Interviews | User Interviews | The fastest way to recruit research participants | |
UXPin | UI DesignPrototypingHandoffDesign system | Meet UXPin Merge. The innovative tech powering code-based design. | |
Webflow | Prototyping | Webflow empowers designers to build professional, custom websites in a completely visual canvas with no code. | |
Whimsical | WhiteboardingUser Flows | Whimsical is a unified suite of collaboration tools. Great for product specs, wikis, brainstorming, ideation, user flows, architecture diagrams and more. | |
Zero Height | Design system | Create a central hub for designers, engineers, product and marketing teams. Connect everyone working with your design system. |
Page Contents
- Tiny Guide to UI/UX
- UI / UX Design Process
- Phase-1: Understand
- User Interview
- Journey Mapping
- Competitive Analysis
- User Persona
- Empathy Mapping
- Phase-2: Ideate
- User Flow
- Wireframing
- Rapid Prototyping
- Phase-3: Test
- Usability Testing
- Card Sorting
- Surveying
- Heuristic Evaluation
- Diary Study
- Phase-4: Implement
- Design System
- Accessibility
- For
- Information Architecture
- User Onboarding
- Collaborative Templates in Miro