👩🏻‍🎨

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.