🏠 Home 🚀 Startup OS 💰 Startup Credits
🏁 Start Here!
Intro to Entrepreneurship
📔 Canvases, worksheets and templates
Canvases + Worksheets
GTM Plan + Pitch Deck Template
MVP Building Blocks
PM + Mental Models Templates
Product Marketing Templates
💸 Startup Fundraising Checklist
Startup Fundraising Checklist
📈 SaaS and Financial Metrics
Business Models + Startup Financials
SaaS Growth Metrics + Calculators
🛠 Tools and Platforms
Tools + Platforms
Community Building Tools
Tools to support your Side Hustle
📒 Articles and Blog posts
Articles + 'How-To' Guides
📚 Tiny Guides + Checklists
30-Day Startup Playbook
First 90 days at your startup
Landing page checklist + Tool Guide
Product Development (MVP) made simple!
Product Management Handbook + Tool Landscape
Product Analytics + Customer Onboarding
Tiny Guide to UI/UX
Launch Path: Product Launch Checklist
Product Hunt Launch Checklist
No-Code cheat sheet
Let'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 Communities
Last 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
The UX design process can be divided into four key phases: user research, design, testing, and implementation. While the UX design process does typically take place in that order, it’s important to note that UX is an iterative process.
Phase-1: Understand
The starting point for a UX design project. Research teaches us about the users, their behaviour, goals, motivations, and needs.
User Interview
Journey Mapping
Competitive Analysis
User Persona
Empathy Mapping
Phase-2: Ideate
The next step in the UX design process is to create wireframes and prototypes. This gives you something tangible to test on real and potential users, which is crucial in making sure that your designs can be developed in full scale. In this phase, UI designers will comeup with multiple iterations test their viability and how users interact, gain valuable feedback and put the feedback to work in next phase of the process.
User Flow
Wireframing
Rapid Prototyping
Phase-3: Test
Testing is a core part of the overall UX design process. UX designers test because it allows them to improve upon the original product or site design and to see if the changes they made during the ‘design’ phase stand up to scrutiny. It’s a great way to eliminate problems or user difficulties that were unforeseen in the design phase before getting started on the implementation phase.
Usability Testing
Card Sorting
Surveying
Heuristic Evaluation
Diary Study
Phase-4: Implement
The grand phase of development and roll-out. Work alongside with the dev teams to provide design insights and develop functional products that users love!
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