Tiny Guide to UI/UX
👩🏻‍🎨

Tiny Guide to UI/UX

🏠 Home 🚀 Startup OS 💰 Startup Credits

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.
image

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

🖌️
UI/UX Tools

ToolCategoryDescriptionWebsite
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.