Designer News

Weekly News for Designers № 530 – Website Design Article

Faux Code Generator – A tool for turning real code (GitHub Gists) into a faux code SVG. Examples of Combining Halftone Effects with Code – A collection of code snippets that put a new spin on the classic halftone pattern. PomodoroCalendar – Generate and download a custom planner using the Pomodoro technique. Where Does SEO Belong In Your Web Design Process? – Why SEO is a “team sport” that shouldn’t be put on the back burner. Beautiful Dingbats Pattern Generator…

Read More

Weekly News for Designers № 529 – Website Design Article

Setting Up Tailwind CSS In A React Project – Learn how to use the popular CSS framework in your next project. Are Web Browsers Overstepping Boundaries? – Increasingly, web browsers are making more decisions for users in the name of security. Is this a good thing? Iconset – An app for better organizing your SVG icons. Fluiditype – A small CSS library that focuses on pure fluidity in type across all screen sizes. The Tuner – How acting like a…

Read More

Weekly News for Designers № 528 – Website Design Article

Disabled form controls and how to tackle them – Tips for increasing the usability and accessibility of disabled form controls. Top Custom Gutenberg Blocks You Can Add to WordPress – Create more compelling content with these block collections. Understanding CSS Grid: Grid Template Areas – Explore the grid-template-area property and learn how it can help you position elements. The 22 Best Free Personal Blog Themes for WordPress – Take your blog to the next level with these outstanding free WordPress…

Read More

Weekly News for Designers № 527 – Website Design Article

UX Debt 101 – Learn what UX Debt is, how to identify it and how to resolve it. 10 Fantastic Podcasts for UX Designers for 2020 – Stay in the know with these podcasts aimed at UX designers. Crafting a Cutout Collage Layout with CSS Grid and Clip-path – Learn the secrets to creating this incredible effect with CSS. Octomments – A tool that enables the use of GitHub issues as a comment system. Design systems hub – A collection…

Read More

Weekly News for Designers № 526 – Website Design Article

Exploring Neumorphism Through Code Snippets – See stunning examples of this new, subtle design trend. Image Dragging Effects – A set of playful effects for your images. Old CSS, new CSS – Relive the olden days of CSS. You know, before border-radius. iHateRegex – A regular expression cheat sheet for haters. 7 Principles of Icon Design – Create high-quality icons following these tips. Staggered Animations with CSS Custom Properties – How to create a more natural type of animation for…

Read More

Weekly News for Designers № 520 – Website Design Article

Code Snippets Inspired by Star Wars – A fantastic selection of our favorite Star Wars-related characters, quotes and game code snippets. Flexible Captioned Slanted Images – Eric Meyer gift wraps the most awkwardly shaped of boxes using nothing but CSS, HTML and a little curl of ribbon. The State of JavaScript 2019 – Discover the most popular JavaScript features & technologies of 2019. Reimagining Design Systems at Spotify – How Spotify built design systems that fit their culture of autonomy.…

Read More

Weekly News for Designers № 519 – Website Design Article

A Look at the Proper Usage of the alt Attribute – Techniques for ensuring that your images make the most out of alternative text. UX Christmas – A UX advent calendar covering a variety of related topics. A History of CSS Through Fifteen Years of 24 ways – Rachel Andrew looks at how both CSS and her own thinking have evolved over time. Why You Shouldn’t Ignore Smaller Web Design Projects – Small projects may not make you rich, but…

Read More

Weekly News for Designers № 517 – Website Design Article

50 Free Christmas Templates & Resources for Designers – Celebrate the season and use these free items for your holiday projects. GooFonts – Use this resource to find Google Fonts based on tags. Great for discovering lesser-known items. Making a Better Custom Select Element – How to ensure the popular form element is both accessible and the right choice for the job. CSS Architecture for Modern JavaScript Applications – Keys to creating re-useable and scalable front-end systems. Flowy – A…

Read More

Weekly News for Designers № 515 – Website Design Article

Keeping Time: A Collection of Clock and Timer Code Snippets – Check out these stunning examples of time-related functionality. How Do You Remove Unused CSS From a Site? – A realistic look, including the potential pitfalls, of removing unused styles. Make Your Own Expanding And Contracting Content Panels – Learn how to create these helpful UI elements without the need for a library. Video Game Console Logos – Relive your favorite console’s heyday with this collection of classic logos. Web…

Read More

Weekly News for Designers № 514 – Website Design Article

A Touch of Neon in Web Design – You may have noticed numerous millennial-targeted sites using neon gradients and colors, it has become fairly popular. We explore this tiny web design trend. Paged.js – is an open-source library for paginating content in the browser. Based on the W3C specifications, it’s a sort of polyfill for Paged Media and Generated Content for Paged Media CSS modules. Pac-Man… in CSS! – While leveraging the powers of the clip-path property, Maks Akymenko shows…

Read More

Weekly News for Designers № 510 – Website Design Article

The Gutenberg WordPress Block Editor: The First Year – The much-ballyhooed block editor is about to turn one. How’s it doing so far? Majestic Admin – A free Bootstrap admin theme for use in your projects. The wondrous world of CSS counters – A behind-the-scenes look at how CSS counters work. Toucaan—Rethinking CSS Frameworks – Check out this new CSS framework that features a much simpler cascade. Tips for Working with Web Design Technophobes – Learning to deal with clients…

Read More

Weekly News for Designers № 509 – Website Design Article

Editorial Design Patterns With CSS Grid And Named Columns – A look at how naming lines and areas within CSS Grid make for repeatable patterns. Space, Grids, and Layouts – The basics of creating a modern UI layout through the use of space. Adaptive Photo Layout with Flexbox – Create a masonry-style layout of photos using only CSS. 8 Snippets That Demonstrate the Repelling Effect in Web Design – See how this “repulsive” behavior can attract user attention. Design Systems…

Read More

Weekly News for Designers № 508 – Website Design Article

A Showcase of Websites That Have Been Inspired by Wireframes – A collection of gorgeously-designed websites that take cues from wireframes. Multi-Million Dollar HTML – How a simple bit of form-centric HTML can become a usability nightmare. uiprint – A collection of printable wireframes, mockups and sketchpads for your projects. HTTP/3: the past, the present, and the future – A look at the increased performance and security of HTTP/3. Things you may not know about Chrome DevTools – 10 lesser-known…

Read More

Weekly News for Designers № 507 – Website Design Article

8 Fantastic Pure CSS Border Effect Code Snippets – Techniques for creating attention-getting borders on your design elements. The perfect responsive menu (2019) – Learn to build a menu that works on all screen sizes. Variable fonts & the new Google Fonts API – Variable fonts are coming to Google! Here’s what you need to know. CopyPalette – Create an SVG color palette and copy it directly to Figma or Sketch. Keeping it simple with CSS that scales – Stop…

Read More

Weekly News for Designers № 491 – Website Design Article

Why we prefer CSS Custom Properties to SASS variables – Some advantages of using CSS variables, as opposed to their SASS counterparts. Boom! Examining Explosions in Web Design – Splendid examples of this attention-getting special effect. Medium to own blog – As the name suggests, this tool will take your writing off of Medium and into your own blog. Pickr – A simple, hackable color picker with no dependencies. How !important are we? – An essay on the web’s many…

Read More

Weekly News for Designers № 490 – Website Design Article

The Grumpy Designer’s Advice for Avoiding Painful Tasks – There are tasks designers want no part of. Here’s how to make them easier. Code as Documentation: New Strategies with CSS Grid – Learning to keep track of layout information through your code. xstyled – A consistent theme-based CSS for styled-components. Beyond Bland: HTML Lists with Style – Code snippets that prove that you don’t have to settle for plain old bullets and numbers. Bun – Generate custom checkboxes and radio…

Read More

Weekly News for Designers № 489 – Website Design Article

I/O 2019: Our Definitive Guide to Design – Check out coverage of Google’s annual I/O conference. CSS can do that? – 11 cool things you can do with just a little bit of CSS. Animated Image Columns – An experimental layout where columns are animated “out of the way” to reveal content underneath. How Many WordPress Plugins Are Too Many? – While there’s no set answer, there are a number of factors involved for each website. Creating an accessible language…

Read More

Weekly News for Designers № 488 – Website Design Article

Debugging CSS Grid Part 1: Understanding implicit tracks – Learn the difference between explicit and implicit grid. Understanding grid placement through building a HTML periodical table – A fun demo that teaches the tricks behind CSS Grid placement. Animating Links – Ways to add some cool effects to links, along with the pros and cons of doing so. 5 steps for including motion design in your system – Don’t forget about animation when documenting your design system. Building a JavaScript…

Read More

Weekly News for Designers № 484 – Website Design Article

Forge Your Own (Animation) Path with These Snippets – Creative examples of path-based web animations. Animation Performance 101: Browser Under the Hood – Techniques for attaining 60fps animations without taxing web browsers. Top Font Combinations – A look at some perfect font pairings for your projects. CSS masonry with flexbox, :nth-child(), and order – A smart approach to masonry layouts that doesn’t require JavaScript. Front-end Developer Handbook 2019 – A massive resource you can use to further your front-end skills.…

Read More

Weekly News for Designers № 483 – Website Design Article

Is Nothing Sacred? The Pollution of the WordPress Dashboard – How notifications of varying importance are taking over the WordPress back end. 15 Git Commands You May Not Know – Lesser-known commands that can help you master the version control system. Designer Bio Generator™ – Why write your own bio when this tool can just generate it for you? How to create clipped, blurred background images in CSS – A handy guide to applying effects to just a specific portion…

Read More

Weekly News for Designers № 479 – Website Design Article

Using Shaders to Create Realistic Special Effects in Web Design – Check out some amazingly advanced effects built with the help of shaders. iro.js – A modern HSV color picker widget for JavaScript that uses SVG. Beautiful interactions – Learn how to create some amazing drag-and-drop animations. Git hacks you should know about – Some useful tips that can help you avoid disaster. Getting Started with Animate.css – Use the popular library to create top-notch animations in no time. branded.…

Read More

Weekly News for Designers № 478 – Website Design Article

12 Fantastic Examples of Incorporating Lines in Web Design – A look at how the use of lines can add to a design. Startup Calculator – How long will it take for your startup to turn a profit? Laws of UX – A collection of maxims and principles for building user interfaces. Learning to Learn – Ways to further your education in design and development. Accessible Brand Colors – Use this tool to check the ADA accessibility of your color…

Read More

Weekly News for Designers № 477 – Website Design Article

10 Incredible Text Masking Effects Examples – A look at how text masking can dress up your site. Colorful Typographic Experiments – Colorful fonts and other far-out text effects. Raster – A simple CSS Grid system that utilizes descriptive HTML. Material Kit – A free Bootstrap 4 based material design UI kit with versions for HTML, React, WordPress and more. Freelancers: How Much Work Is Too Much? – Some thoughts on when it might be time to lighten your workload.…

Read More

Weekly News for Designers № 476 – Website Design Article

10 Free Responsive Website Mockup Templates – Show off your design mockups on multiple screen sizes with these free downloads. 10 Portfolio Websites that Tell a Story – Check out these examples of portfolios that go beyond the ordinary. Grid Reveal Effects with Anime.js – Experiments with hiding and revealing images using JavaScript. 4 Reasons Why You Should Design Without Color First – How starting with grayscale forces you to prioritize UX design elements. CSS Scroll Snap — How It Really Works…

Read More

Weekly News for Designers № 475 – Website Design Article

Making a Statement: The Use of Stacked Text Blocks in Web Design – It may not seem like much, but this design technique can have a large impact. Amino – A live CSS editor for Google Chrome. Text Distortion Effects using Blotter.js – Examples of distorting text upon scrolling and mouse movement. The end of the celebrity designer – How “open” design leads to more collaboration. Using the WordPress Classic Editor on New Websites – A look at scenarios where…

Read More

Weekly News for Designers № 474 – Website Design Article

Unicons – A collection of free vector icons for your next project. Graphic Design Archive – View key moments in the history of graphic design. 20 Free Mobile UI & Wireframe Kits for Sketch App – Get your project off to a fast start with one of these Sketch resources. 30 Seconds of Knowledge – A collection of snippets to help you grow as a developer. How to Report Errors in Forms: 10 Design Guidelines – Techniques for clearly identifying…

Read More

Weekly News for Designers № 473 – Website Design Article

Flexbox Case Studies – Tutorials to help you achieve common Flexbox layouts. Set Your Text in Motion with These Dazzling Effects – Snippets that prove text doesn’t have be stationary. Terminal CSS – Attention terminal lovers, there’s now a CSS framework for you. Complete Guide to Using WebP Image Format – WebP images can have a significantly smaller file size than other formats. Node.js Best Practices – A listing (updated weekly) of top-ranked Node.js related articles. Design Checklist for the…

Read More

Weekly News for Designers № 472 – Website Design Article

snippet generator – A tiny React app that generates snippets for Visual Code Studio, Sublime Text and Atom. The Use of Cursor Effects in Web Design – They may be small, but cursor manipulations can have a positive design impact. HTML5 Input Types: Where Are They Now? – A look at browser support for new form inputs that were introduced with HTML5. Dad Joke CLI – Get the latest dad jokes delivered to your command line! Shiny – Add shiny,…

Read More