How to design an accessible carousel
In this article, we provide a comprehensive guide to designing an intuitive and universally accessible carousel for any web project. Outcome Carousels in UI are practical interactive elements that efficiently display images or content pieces without taking up too much vertical space.
Omar Benseddik
Text with media background: practical solutions
Text over images or videos is common on websites, and when not done right, it can make the text hard to read and cause accessibility and usability issues. Designers might not catch these problems early on because they use ideal settings to test designs. The real problems show up when we change the browser size or when new images and videos are added. This can lead to bad contrast, text that overlaps, and other issues with how clear things are. In this article, we'll point out 3 common problems with using text over media and offer ways to fix them. Our goal is to make sure that the design works well in real use, without messing up the process of adding new content, and that users find it easy to use.
Omar Benseddik
Figma for developers: all you need to know
If you're a frontend developer, you are probably spending as much time on VS Code as on Figma. This quick read highlights some of the goodies that I personally use to speed up my workflow. A word of caution
Omar Benseddik
Figma variables: tips from 3 scenarios
Figma variables are a feature let you reuse and manage design elements more easily. Instead of manually updating each instance of a design element, you can set a variable, like a color or padding, and apply it across your project. If you want to make a change, you update the variable, and it automatically updates everywhere it's used. This makes it easier to keep your design, speeds up the design process, and also bridges the gap with developers. We've recently leveraged Figma variables in three key scenarios to speed up our design process:
Omar Benseddik
Perfecting the design handover process
At Tinloof, we aim for seamless and efficient design handoffs, drawing from our experience completing dozens of projects. Our ultimate goal is a "0 questions asked" handoff, akin to an improved IKEA assembly experience. In this article, we'll explore the three core sections of our Figma files: Design System, Blocks, and Pages. We'll also discuss our feedback process and highlight useful Figma features.
Omar Benseddik
Tinloof design principles
Tinloof focuses on key principles to consistently create pleasant and practical designs. We're not tied to any specific style - Swiss, Linear-like, neobrutalism, a certain typography or color palette. Instead, we stick to basics that make our process smooth, please our users, attract business, and keep our team happy.