Ashby’s Post

How to make tables fit on small screens (spoiler: you probably can’t and maybe you shouldn’t) https://lnkd.in/ddDMk-uD "How to display tables on small screens has been a hot topic for a while. A quick Google search will yield numerous resources, tutorials, and videos on designing responsive tables, each offering varying opinions and suggestions. So, here’s my take." By Litsa Babalis #a11y #Accessibility #WebAccessibility #DigitalAccessibility #UIDesign #Design 

🧱 Block Width Is Now Adjusted Visually You can now adjust the block width for most pre-designed blocks using a handy visual widget. Stretch or narrow the block by dragging sliders, clicking on grid columns or pressing arrow keys. You can also select and move columns around. The changes are displayed in real time, making the editing process faster. If a block contains two columns, each column will be colored differently. Gray indicates columns that are free of content. Where to find: Block Settings → Blocks Width. #nocode #design #webdesign #uxuidesign #uxui #uxuitips #uidesign #uxdesign #uxuinspiration #uxdaily #uidaily

✒ Time for the second #dailyui challenge. 💳 Create a credit card checkout page. 🖥 I went with a full-screen website design and added the checkout in a column on the right with the cart contents on the left. I ran out of time to fill in all the product details for tonight. The two panes do scroll in the prototype view (albeit without scroll bars). Once again, I used my #customgpt to provide more context to the prompt. 💪 Ready for day 3! Check out the #figma file: https://lnkd.in/gvmD3Xfk #figmadesign #uidesign #dailyuichallenge #design

Why we add these Tailwind directives during setup?? @ tailwind base; @tailwind components; @tailwind utilities; These directives help separate and organize the style in a modular way. @tailwind base - This injects Tailwind's base styles . Base styles usually include element-specific styling for HTML elements like headings, paragraphs, lists, etc. These styles serve as a foundational layer for your overall design. @tailwind components - This injects Tailwind's component classes. Component classes in Tailwind are pre-defined styles for common UI components such as buttons, forms, and navigation elements. @tailwind utilities - This injects Tailwind's utility classes. Utility classes in Tailwind are small, single-purpose classes that apply specific styles to an element. Examples include classes for margins, padding, text alignment, colors, and more. For more idea. Use inspect in chrome @tailwindcss = Design efficiency #webdevelopment

UI Tips: Effective use of white space: Balance content density with appropriate spacing Use margins and padding to create visual hierarchy Employ negative space to emphasize important elements Maintain consistent spacing throughout the design.

\\New Form Builder Enhancements for Enhanced User Experience!\\ 🚀 \\User Benefits:\\ - \\Versatile Layout Options:\\ Choose from Single Column, Two Column, or Single Line to match your form's needs. - \\Streamlined Single Line Layout:\\ Ideal for concise, horizontal forms with up to 5 fields. - \\Customizable Field Width:\\ Tailor each field's size for an aesthetically pleasing form design. Powered by macaws.ai

\\New Form Builder Enhancements for Enhanced User Experience!\\ 🚀 \\User Benefits:\\ - \\Versatile Layout Options:\\ Choose from Single Column, Two Column, or Single Line to match your form's needs. - \\Streamlined Single Line Layout:\\ Ideal for concise, horizontal forms with up to 5 fields. - \\Customizable Field Width:\\ Tailor each field's size for an aesthetically pleasing form design. Powered by macaws.ai

⏹️ Outer Padding For Covers You can now set outer padding for blocks in the "Cover" category. This can be especially useful when designing a website in bento style. Padding can be customized separately for desktop and mobile versions. Where to find: Block Settings → Cover Padding #nocode #design #webdesign #covers #herosection #uxui #uxuidesign

Creating a consistent layout is the key to a successful user interface. 🔑 Designers should not underestimate the power of grids. Grids are a fundamental aspect of every design. Mastering them will make your design look consistent and professional. Most elements in design can be thought of as simple geometric shapes; how you shape these shapes can make or break your design. For more UI design tips, head here 🔗 https://bit.ly/3PW15rF

UI Tips: Effective use of white space: Balance content density with appropriate spacing Use margins and padding to create visual hierarchy Employ negative space to emphasize important elements Maintain consistent spacing throughout the design.