TOOLS USED IN UI/UX DESIGN
Importance, Advantages and Disadvantages
Before starting out UI/UX Design, it is advisable that you have an understanding of the different softwares to use for your designs. There are a wide range of tools to choose from, which makes it very complicated, so in order to make it less overwhelming for newbie designersI have decided to give a summary of the different design softwares and their specilizations (user interface and user experience).
GENERAL DESIGN SOFTWARES
Figma:
This is a web-based ( App-based, Mac OS, Window OS, Chrome OS) and desktop application based(Mac OS and Windows) design software that allows for effective team collaboration, has a friendly beginner user-interface, it provides real-time updating , and is also great for getting reviews. Figma provides every single feature you need to create great user interfaces and other designs you could possibly want to create completely free. Figma is very easy to learn and a great tool for beginners. Howver, being a cloud based software,it does tend to be more sluggish than running on-premises software with a high-end computer. Figma pricing starts at $12.00 per month, per user. There is a free version. Figma does not offer a free trial.
Adobe XD
This is a MacOs, Windows based, web based, Cloud basd and SaaS On-premise UX tool for businesses that helps create designs for web and mobile via prototyping, sharing, collaboration, and more. AdobeXd is very easy to setup, allows for real-time collaboration, Importing assets from other Adobe programs is also very easy. AdobeXd is hard to control when you have many pages on the same dashboard. Adobe XD pricing starts at $9.99 per month, per user. There is a free version. Adobe XD does not offer a free trial.
Sketch
This is a vector graphic software which assists businesses of all sizes with vector editing, prototyping and collaboration. It is made for screens first and has a much simpler interface. Being able to use a lot of plugins for more advanced features and designs gives you a lot of useful features when utilizing Sketch. Sketch is only compatible for MacOs. Sketch pricing starts at $99.00 per year.They do not have a free version.Sketch offers a free trial.
Invision Studio
InVision is the Digital Product Design platform used by organizations to make the worlds best customer experiences. It provides design tools and educational resources for teams to navigate every stage of the product design process, from ideation to development. Invision allows you to prototype full sites or small CRO changes and with the added ability to update on the fly, you can push changes live to anyone viewing live. You are also able to inspect fonts, colours, sizes and basic CSS attributes to exactly copy the design. Assets can also be downloaded which saves time if they change over time. However, there is no good way to organize user flows or screens in a project if the project contains over 30 screens.
Other Design soft-wares include:
- Moqups.
- Axure RP.
- Balsamiq.
- UXPin.
- Marvel.
- FluidUI
User Experience Specialized Tools
USER SURVEYS
User surveys are used by businesses to have an understanding of their users before making a product in order to ensure that they are designing for the right audience. There are always ways to improve business products or services, but knowing which ways would best please customers can be difficult to know. The common platforms that you can use to generate online surveys are:
Survey Monkey
This is a mobile application and web based online survey software that comes with features like Kiosk Mode where you can launch the survey in full-screen mode on a tablet which is great for gathering surveys at an event, It allows you to run tests on your product to see which will attract your target audience. It also has customizable templatesCreate workflows using SurveyMonkey’s advanced features to create workflows so that you can get the insights that you want specifically. With the tool, you can ensure that there is a perfect sync between all the team members.
Google Forms
This is a free online software that makes data analysis and online surveys very easy to use and make. It has varieties of customizable templates to help you get started with ease. Users can also give reviews within the team before sending it to the customers.
Others include: TypeForm, Jot Form, AskNicely, Form Stack.
FLOWCHARTS AND USERFLOWS
A flowchart is a visual representation of the sequence of steps and decisions needed to perform a process.The user flow lays out the user’s movement through the product, mapping out each and every step the user takes — from entry point right through to the final interaction.
Whimsical:
This is a collaborative visual work space that lets you create flowcharts, diagrams, and virtual sticky notes.really well executed on the UX, especially moving around the canvas and quickly generating and connecting things. Whimsical is intuitive, minimal with an uninterrupted flow when creating something so complicated. It has an education discount.
Overflow
Overflow is the world’s first user flow diagramming tool tailored for designers. It makes building beautiful user flows effortless, leaving time to focus on what matters: communicating designs to get valuable feedback. It has an easy and intuitive interface with the customization options. It is a great tool to create task flows. But, it needs more powerful integration into existing tools.
Lucid Chart
This is an online diagramming app that supports real-time collaborative editing, has well-stocked libraries of templates and objects, and offers many options for exporting and presenting your diagrams.It is very easy to learn, responsicve, excellent collaboration, with many object libraries and templates, it also allows for integration with many apps and service. Lucidchart is a great tool for complex network diagrams, system workflow diagrams, process workflows, data flow diagrams, API call flow sequence diagrams, system component diagrams.
Wireflow
Wireflow is a free online tool for creating beautiful wireframes & user flows. NO Photoshop skills required! It’s Open Source and built by Vanila.io.Open Source, great alternative to manually create wireflows. It is very easy, intuitive and has a well designed graphics.It has pre-built components with click through. It needs a lot more work before it can be used in any professional setting.
Other softwares include:
- Creately
- Miro
- Microsoft Visio
- Gliffy
- Edraw Max
- ConceptDraw Diagram
- Cacoo
- Terrastruct
- VisualParadigm Online
- Draw.io
WIREFRAME
Wireframes are used in the early development process to lay out content and functionality on a page which takes into account user needs and user journeys.
Balsamiq Wireframes
This is a rapid wireframing software that enables lean teams to collaborate, make mockups, control versions, and run user test that allows you to make speedy, basic wireframes and nail down all the details of your site/interface before implementing or designing them with graphics. It also allows you to show items in different states. Revision histories and alternate layouts provide lots of room for creativity — a critical part of building great user interfaces. It’s difficult to browse elements and all their states; you have to select them, and then dig deeper within the element’s settings.
UX Pin
This is a web-based and on-premise solution that helps businesses of all sizes create website wireframes and design applications with prototyping, collaboration, HTML imports, data management and more. UXPin is a great wireframing tool with the user feedback mechanism built right in. It also has just the right amount of icons, pre-made shapes, etc. for use in wireframes — without being overwhelming.
Other wireframing softwares are:
Proto.io (Web) for user experience testing
Moqups (Web) for wireframing interaction design flows
Marvel (Web) for pre-designed wireframe templates
PROTOTYPING SOFTWARES
A prototype is a sample version of a final product, which is used for testing prior to launch.
Marvel
This is a web and mobile prototyping software that helps designers collaborate in real time and create interactive hotspots. This is agreat ool for beginners to create prototypes. It has very basic capabilities, but does integrate with both Confluence and JIRA. It also includes the ability to create CSS from your designs. It doesn’t support more advanced features like animation.
Protopie
ProtoPie is the easiest tool used to turn your UI/UX design ideas into highly interactive prototypes for mobile, desktop, web, all the way to IoT. Designers can explore, validate, and test design solutions and ideas by creating very realistic, production-like prototypes without code and the help of engineers. Hence, ProtoPie helps companies to release better and validated products, allows them to go to market faster, and save costs throughout the process of interactive prototyping. However, it is quite complex for beginners.
Other prototyping softwares are: Indigo.Design, Proto.io, ProtoShare,etc.
USABILITY TESTING SOFTWARES
Usability Testing refers to evaluating a product by testing a prototype with representative users.
Maze.design
Maze is a user testing and usability research platform that turns prototypes into actionable insights from real users, bringing confidence to the design process. More than 15,000 designers and product managers from companies like Salesforce, Microsoft, and IBM are using Maze to power up their user testing process. It makes product management so streamlined and has a wealth of data in it.
Userfeel
Userfeel is a usability testing tool that gives you videos of real users speaking their thoughts as they use your website or app. Userfeel was designed and developed by Usability Researchers for Usability Researchers but also for newcomers to UX Research and anyone who wants to optimize their website or app. It is very easy to use, and allows for you to pick appropriate testers for your product.
User Interface Tools
MOODBOARD/INSPIRATION
A moodboard is a collection of ideas that communicates a certain concept in your design at the start of your project. Inspirational design websites include:
Dribbble
Dribbble is a self-promotion and social networking platform for digital designers and creatives. It serves as a design portfolio platform, jobs and recruiting site and is one of the largest platforms for designers to share their work online. It is great for design ideas and yeps my portfolio. It has really great people and the quality of content is excellent. Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.
Behance
Behance is the world’s largest creative network for showcasing and discovering creative work. Behance is a social media platform owned by Adobe which allows you to manage your portfolio and add different projects to your profile. You are also able to arrange your project details, you can easily tell about your work by sharing your portfolio profile link. It is available as a website and application and is very simple and easy to use.
Other design inspiration websites are Muzli, Awwards, Mobbin — Latest Mobile Design Patterns
IMAGES/ILLUSTRATIONS/ICONS:
Images are used in design to draw or compel the users’ attention. They are an integral part of the design. It is advisable to use high-quality images like vector graphics for designs.
Unsplash
Unsplash is a website dedicated to sharing stock photography under the Unsplash license. Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos. There is a ton a variety each time you search for a subject and there are color and B&W photos. “Explore” button provides categories such as backgrounds, images, wallpapers which makes it even easier to find what you are looking for. “Topics” provides a quick way for me to see a group of images related to a topic.
Other stock images websites are: Shutterstock,Perxels, Flickr, Adobe Stock, Pixabay,iStock,JumpStory,Crello.
TYPOGRAPHY/FONTS
The use of typography in design is a very crucial part of the design. Typography refers to the fonts used in a design, their spacing, size, and weight, and the way different text elements relate to each other.
Most beginners in design find it very hard to pair fonts and colours properly.
https://www.colorsandfonts.com/font-pairings
https://www.colorsandfonts.com/css-gradients
https://www.niceverynice.com/components
DESIGN BLOGS
Google Design, Facebook Design, Uber Design, Lyft Design, AirBNB Design, Dear Design Student, Ideo Colab, Frog Design, SAP Design, Thinking Design, The Design Team, Magenta, NNU group, Ux planet, Ux Collective, Awwards, growth.design, Interaction design, Career Foundry