How UX Designers Can Elevate Their Craft by Learning Tailwind CSS Posted on: Jan, 18 In the ever-evolving landscape of web design and development, the boundaries between design and implementation are increasingly blurred. One of the most significant steps a UX designer can take to bridge this gap is learning to code UI elements, particularly with the use of Tailwind CSS. This modern utility-first CSS framework has revolutionized the way […]
UX Iteration in design process Posted on: Feb, 16 The principle of iteration is firmly grounded in the concept of “continuous improvement,” a practice that has proven its effectiveness in various industries. In the realm of UX design, this approach entails an ongoing pursuit of superior solutions and an ideal user experience. Employing an iterative process offers several advantages: Responsiveness to User Needs: Designers […]
What? Rem Units Posted on: Oct, 5 You’re probably already familiar with em units – they’ve been a common feature of CSS for the past decade – but a crash course: elements specified using em units are sized relative to the font-size of their parent element. For example, if a paragraph has a specified font-size of 2em, and the div it’s inside of has a font-size of 10px, then […]
jQuery Cycle Banner Slider Posted on: Sep, 12 Here you go, just a quick tip for anyone out there that needs a quick slider. Just download the following Lastest JQuery and Lastest Cycle body{background:#666;} #wrapper{ margin:0 auto; display:block; width:600px; padding:0; } .slide-cover{ position:relative; width:500px; } #slider{ margin:150px 0px; padding:0; list-style:none; width:500px; height:auto; -moz-box-shadow: 0px 0px 20px 0px #000; -webkit-box-shadow: 0px 0px 20px 0px #000; box-shadow: 0px […]
jQuery Sticky Menu Posted on: Jul, 2 <!DOCTYPE html> <html> <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script> <script type=”text/javascript” src=”jquery.easing.1.2.js” type=”text/javascript”></script> <style> html,body{margin:0;padding:0;} #wrapper{ width:1000px; margin:0 auto; padding:0; } .content{ width:1000px; margin:0; min-height:800px; height:auto; padding:80px 0 0 0; } #sticky-menu { background:#f2f2f2; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(40%, #f2f2f2), color-stop(100%, #f2f2f2)); background: -moz-linear-gradient(top, #ffffff, #f2f2f2, #f2f2f2); line-height: 120px; text-align: center; […]