Hey there! Feels a bit like déjà vu, doesn’t it? If you’ve been following my articles, you might recall a similar one I published last month. Turns out, it really helped a lot of folks. So, I thought, why not share some more tools from my design toolkit? In this article, I’ll walk you through a few more tools and websites I use daily in my work as UX/UI designer. Let’s dive in and explore these new additions that might just make your design process smoother and more creative!
Brainstorming and prototyping: Visily
Visily and the recent update Visily 2.0
We all know how Figma has become our go-to for everything from brainstorming to crafting those high-fidelity mockups and prototypes. There’s a comfort in having all our tools in one place, right? But here’s the thing: sometimes, sticking to one tool, even if it’s not perfect for every task, just feels easier. However, Visily and their latest update might just mix things up in a good way. It’s a blessing, especially for new designers looking to quickly build their portfolios and showcase their works on Behance and Dribbble, etc. And if you’re flying solo in your company or freelancing, this wireframing tool is worth a try. Plus, it comes with a free plan, and the list of features is pretty impressive and exciting.
Why Visily? Visily is presented as a user-friendly design tool that enables real-time collaboration and offers a vast array of pre-built templates and components. It’s accessible to users of all skill levels, promising an efficient AI-aided design process and even includes a free plan. Essentially, it’s designed to simplify the creation of high-quality wireframes without the need for advanced design skills.
For Brainstorming: Visily offers a suite of brainstorming and design tools that enable the seamless transformation of ideas into intuitive designs, complete with over 1,500 templates and advanced AI to convert screenshots into editable formats, enhancing collaboration and wireframing workflows.
For Wireframes: Offers a streamlined approach to wireframing with solutions to overcome the blank canvas problem, providing a rich library of prebuilt components and smart elements, and the ability to save designs for future use. It also features a seamless toggle between lo-fi and hi-fi design options, catering to both quick ideation and detailed design needs.
For Prototyping: It accelerates the prototyping process, enabling rapid creation of interactive designs for quicker feedback, complete with smart components and the ability to present and gather comments efficiently.
For Collaboration: emphasizes collaboration in design, offering features like unlimited viewers and commenters, flexible team management, robust permissions settings, and the ability to work across multiple teams within one account. It also provides seamless handoff from design to implementation and allows exporting to Figma, facilitating a smooth transition and review process across different platforms.
Micro animations: Mingcute and Lottielab
Let’s admit it, we’ve all tried creating micro animations in Figma, or at least attempted. Looking back at those creations, maybe they were worth getting yelled by the developers. Jokes aside, micro animations are vitally important. These small but powerful animations bring icons to life, enhance user engagement, illustrate functionality, and provide delightful visual feedback, elevating the user experience.
Mingcute icons
If you haven’t yet discovered MingCute in the Figma marketplace, you’re in for a treat. It’s a carefully designed icon library that boasts a collection of simple yet sophisticated open-source icons, perfect for both designers and developers for use in web and mobile interfaces. And now, they’ve added microanimations, all set for development.
Lifelike Animations: Enhance projects with high-quality, smooth animations.
Multi-Platform Support: Icons are usable across devices, websites, and both Android and iOS platforms.
High Frame Rate: 60FPS animations for fluid and immersive visuals.
Editable Formats: Offers Adobe After Effects and JSON formats compatible with Lottie, allowing for customization.
Pricing: Free plan includes 10 essential icons for unlimited usage, without any royalties. Lifetime purchase starts from 25$-99$.
What are Lottie animations? Lottie is a file format for vector graphics animation and is named after Charlotte “Lotte” Reiniger, a German pioneer of silhouette animation.
As UX/UI designer you could use Lottie animations to elevate the interactive aspects of a digital product, such as enriching onboarding sequences for a smoother user introduction, enlivening loading screens to enhance wait times aesthetically, animating interactive elements like buttons for tactile feedback, embellishing empty state screens with inviting graphics, communicating success or error messages more clearly, and creating fluid transitions between app states to ensure a cohesive narrative throughout the user journey.
Let me introduce another free gem, especially great for new designers and freelancers: If you appreciate LottieFiles but find it a bit too costly, here’s a great alternative that is currently free.
their new update offers New Features: Integration of Figma to Lottie workflow, allowing design and animation in Figma to be exported directly to Lottie and Lottielab to Canva.
For Inspiration: Rebrand, FreeFaces, Theessential.design
Don’t let this section of the article confuse you. We, as designers, get inspiration from everywhere. Personally, I have found a lot of inspiration from branding and existing brand guidelines and identity, especially when I work on UI. So, I wanted to remind you that you don’t have to be specifically a graphic or brand designer to use these websites to get inspired.
Consistency Across UX: A strong brand identity includes specific design elements, color schemes, typography, and other visual components. A UX/UI designer who understands these can ensure a consistent user experience across all platforms and touchpoints. This consistency reinforces the brand and makes the user experience more intuitive and familiar.
Many of us began our design careers by recreating existing designs or crafting redesigns for popular brands, apps, and websites. First off, this process is a fundamental part of our learning. Secondly, it allows us to examine established designs from a fresh perspective and, potentially, to discover something more — or even to create something superior.
Rebrand Gallery’s collection of design systems, visual identity overviews, and brand bento grids can be a goldmine of inspiration and learning. By exploring these curated designs, you can gain insights into current branding trends, effective visual communication strategies, and perhaps find fresh ideas to apply to your projects. The site also showcases new design systems and rebranding efforts, which can help you stay updated with the latest in the design field and improve your own design vocabulary.
You can use their free version, or switch to Pro and get it for only 20 EUR Yearly subscription.
Surely, I’m not the only one who sometimes struggles to find the right typeface (not font! Typeface is the design of the lettering, like Helvetica, while a font is a specific style and size of that typeface, like Helvetica, 12-point, bold), or to understand which typeface is suitable for what purpose. This gallery helps you see the typefaces. The gallery is categorized so you can directly go on searching or just explore. Besides the limited information, it also explains under what license you can use this or that typeface and how to get it legally.
Theessential.design
This platform offers a rich resource for staying updated, inspired, and knowledgeable in the broad field of design.
Personally, I use it for to keep myself updated about the latest trends and techniques in brand identity and degital design, gaining agency insights and expanding my knowledge beyond UX/UI into areas like graphic and editorial design, that surely benefits you as a designer.
Mockups: ls.graphics, Mr.mockups
Authentic presentation of your designs is crucial, and while Figma offers numerous mockups, the traditional approach with tools like Photoshop or Photopea remains popular due to their customizable, easy-to-edit free device mockups.
You have access to a wide range of high-quality, customizable mockups for various devices and products, compatible with Photoshop, Sketch, XD, and Figma. With smart layers for easy editing and availability for both personal and commercial use, these mockups can enhance the presentation of your UX/UI designs.With Figma’s plugin, you can streamline your workflow by importing and editing these mockups directly within Figma, marrying the customizability of Photoshop with the convenience of Figma. This hybrid method ensures that your designs are displayed in the best light and are true to the intended user experience.
Mr. Mockup provides a selection of free device mockups, including MacBooks, iPhones, and iPads, ideal for those seeking to present their work realistically and professionally. Again, great option for students or those trying to showcase their work without spending hundreds on mockups. These mockups are versatile, suitable for both personal and commercial use, and effectively enhance visual presentations of design concepts.
Accessibility: Wave
Wave
WAVE is an effective website accessibility checker. You can use it by entering a website’s URL or through its Firefox or Chrome extension. It highlights accessibility issues, such as redundant titles and poor color contrast, and explains their impact on users and relevant WCAG guidelines. It also includes a code panel for pinpointing specific problems.
Additionally, the Bureau of Internet Accessibility provides free website accessibility audits, and for assessing content readability, WebFX is a useful resource.
Bonus:
ScienceDirect is a leading source for scientific, technical, and medical research, hosting a vast array of journal articles and book chapters. Personally, I sometimes use it to access the latest research on user experience design, interaction design, and usability studies. This could inform your design decisions too with evidence-based practices, keep you updated on new methodologies, and inspire innovation through academic insights into user behavior and technology trends.