Best of UI Design — November 2023
- 1
- 2
- 3
Hacker News·2y
Animotion — a visual CSS animation app
Animotion is a visual CSS animation app that allows users to create CSS animations by dragging, resizing, rotating, clipping, and more. It includes a keyframes editor, ready-to-use animations, and 29 built-in easings. The app works best on larger screens and modern web browsers.
- 4
- 5
gitconnected·3y
CSS and Responsive Design
CSS and Responsive Design aims to create webpages that automatically adapt and adjust their layout, content, and functionality based on the characteristics of the device being used to access the webpage. In the old days, developers would create two different versions of the same webpage, one for desktops and the other for mobile devices.
- 6
asayer·3y
Use CSS Blend Modes for Creative Image and Color Manipulation
Learn how to use CSS blend modes to creatively manipulate images and colors on a website. Blend modes allow developers to combine elements and alter their appearance, resulting in stunning visual effects. Explore practical examples and discover the benefits and applications of CSS blend modes in web design.
- 7
Community Picks·3y
Why You Should Use px Units for margin, padding, & Other Spacing Techniques
Learn about the differences between absolute and relative CSS units for margin, padding, and other spacing techniques. Find out why using relative units for spacing can lead to difficulties in managing spacing on a webpage and negatively impact user experience. Discover the benefits of using absolute units for spacing to improve readability and accessibility.
- 8
- 9
- 10
- 11
The Best CSS Background Patterns for Your Next Project – Designer Feed
Explore popular CSS background patterns that can enhance your web design, including gradients, stripes, polka dots, and more. Create unique patterns such as houndstooth, chevron, and wood using CSS techniques. Find the perfect style to match your brand and elevate your design.
- 12
Optimize Image and Video Layouts with CSS Object-fit
Learn how to optimize image and video layouts with CSS Object-fit property. It allows media files to resize while keeping the original aspect ratio intact, ensuring a visually pleasing and proportionate display. Discover the benefits of using Object-fit, such as responsive design, aspect ratio preservation, conveying information, and cross-browser compatibility. Explore the various values of Object-fit, including fill, contain, cover, none, and scale-down. Follow best practices for optimizing media layouts, including selecting the right value, using high-quality media, ensuring accessibility, implementing responsive design, and utilizing the object-position property.
- 13
Bootcamp·3y
Case Study: Designing a landing page for Tutorly
This case study discusses the process of designing a landing page for Tutorly, an Edtech platform that connects students with tutors in real-time. It covers the research, design decisions, and application of the AIDA framework to create an effective landing page. The target audience for the platform is students from classes 6th-12th. The main benefits of the platform include live tutoring, hand-picked tutors, and personalized learning.
- 14
- 15
LogRocket·3y
Neubrutalism in web design
Neubrutalism is a design trend in web design that rejects a polished look and focuses on exposing raw materials. It brings back creativity and individuality that was missing in flat design. Neubrutalism features unconventional typography, imperfect aesthetics, bright colors, prominent borders and shadows, asymmetrical layouts, and noisy textures. It allows designers to showcase their creativity but may be inaccessible and overwhelming to users, so a balance between neubrutalism and traditional web design is necessary.
- 16
- 17
- 18
Smashing Magazine·3y
Designing Web Design Documentation — Smashing Magazine
This article emphasizes the importance and benefits of design documentation in the field of web design. It highlights the need for clear and accessible documentation that reflects the hybrid nature of digital design. The article provides key considerations and resources for creating design documentation and emphasizes the importance of collaboration, use cases, language, and aesthetics. It also advocates for publishing and maintaining design documentation to facilitate knowledge sharing and continuous improvement.
