Bookmarks tagged with #webdesign.
Show all
Show all
Scroll-Based Layout Animations | Codrops
An exploration of different scroll based layout switch animations using GSAP's ScrollTrigger and Flip.
Saved
on: 2023-08-01
Brutalist Web Design
Guidelines for web design that adhere to the tenets and ethos of Brutalism
Tags:
#webdesign
Saved
on: 2023-05-02
You Don’t Need A UI Framework — Smashing Magazine
Developers often reach for UI frameworks like Bootstrap or Material UI, hoping that they’ll save a bunch of time and quickly build a professional-looking app. Unfortunately, things rarely work out this way. In this article, Josh Comeau is going to make his case for why you probably don’t need these tools. He’ll also share some of his go-to strategies for building professional-looking applications without a design background.
Saved
on: 2022-05-04
The Year in Design - Zeldman on Web and Interaction Design
Mobile is today’s first screen. So design responsively, focusing on content and structure first. Websites and apps alike should remove distractions and let people interact as directly as possible with content. 90 percent of design is typography. And the other 90 percent is whitespace. Boost usability and increase pleasure with progressive disclosure: menus & functions that appear only when needed.
Saved
on: 2022-04-26
DALL·E 2 and The Origin of Vibe Shifts - Divinations - Every
By Means of Natural Selection
Saved
on: 2022-04-23
Coolors - The super fast color palettes generator!
Generate or browse beautiful color combinations for your designs.
Saved
on: 2022-03-16
10 modern layouts in 1 line of CSS - YouTube
In this dynamic talk, Una goes over the power of modern CSS layout techniques by highlighting a few key terms and how much detail can be described in a singl...
Saved
on: 2022-02-18
So many little design helper sites! | CSS-Tricks
I had one of those little single-serving designer helper sites bookmarked the other day: getwaves.io. Randomized SVG waves! Lots of cool options! Easy to
Saved
on: 2021-09-29
Motion One: The Web Animations API for everyone
Animations made simple. The fast and light animation library for JS, React and Vue. Motion uses browser APIs like WAAPI and ScrollTimeline for a tiny filesize and superfast performance. Previously Framer Motion.
Saved
on: 2021-09-22
A Single Div
A CSS drawing experiment to see what’s possible with a single div.
Saved
on: 2021-05-24
Intrinsic Typography is the Future of Styling Text on the Web | CSS-Tricks
The way we style text hasn’t changed much over the years. There have been numerous advancements to help make things more flexible, like layouts, but in terms
Saved
on: 2021-04-21
7 Rules for Creating Gorgeous UI – Part 2 (Updated for 2020) – Learn UI Des
How to safely overlay text on images · Making text pop – and un-pop · Only use good fonts · Steal like an artist
Saved
on: 2020-12-18
Building Your Color Palette - Refactoring UI
Learn how to design awesome UIs by yourself using specific tactics explained from a developer's point-of-view.
Tags:
#webdesign
Saved
on: 2020-11-23
A Nerd's Guide to Color on the Web | CSS-Tricks
There are a lot of ways to work with color on the web. I think it’s helpful to understand the mechanics behind what you’re using, and color is no exception.
Saved
on: 2020-10-13
Here's What I Change on Every New TailwindCSS Project
Saved
on: 2020-09-01
Illustration Website Template | Templates | Black Illustrations
FREE illustrator website template built for use in Webflow
Saved
on: 2020-08-28
7 Practical Tips for Cheating at Design | by Adam Wathan & Steve Schoger |
Every web developer inevitably runs into situations where they need to make visual design decisions, whether they like it or not. Maybe the company you work for doesn’t have a full-time designer and…
Saved
on: 2020-08-17
The “I’m new to design” starter pack | by Sara Clayton | UX Collective
If you’re a Twitter user by any means, chances are good that you’ve seen these sorts of memes at some point: As someone who has made the transition from marketing to design, I occasionally get…
Saved
on: 2020-07-22
Duo - Colour Pairings by Alex Pate
Duo is a collection of my favourite colour combinations
Saved
on: 2020-04-07
colors.lol - Overly descriptive color palettes
A fun way to discover interesting color combinations.
Saved
on: 2020-03-29
“Designing Intrinsic Layouts” by Jen Simmons—An Event Apart video
Saved
on: 2020-03-12
36 Days of Type | Reflektor Digital
In Spring 2019, our team at Reflektor Digital joined thousands of designers, illustrators and graphic artists around the world for the 36 Days of Type Challenge.All members of our development team took turns at creating a unique representation of every letter and number using various coding techniques.
Saved
on: 2020-02-26
The ultimate guide to proper use of animation in UX
Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While…
Saved
on: 2020-02-26
How to Overlap Images in CSS | Bri Camp Gomez
This article shows you how to overlap images with CSS Grid and provides a fallback for IE and browsers that do not support CSS Grid.
Saved
on: 2019-12-02
Designing accessible color systems
How we designed a color system with hand-picked, vibrant colors that also met standards for accessibility and contrast.
Saved
on: 2019-10-17
Hover States / The home of alternative digital design
The home of alternative design, code and content on the world wide web.
Tags:
#webdesign
Saved
on: 2019-10-03
Managing Flow and Rhythm with CSS Custom Properties ◆ 24 ways
Andy Bell rings out a call for a more flexible method of achieving consistent vertical rhythm across components within a page. Using a technique of CSS custom properties to establish spacing inherited through the cascade, you can make sure your choir are all singing from the same song sheet.
Saved
on: 2019-10-02
4 Rules for Intuitive UX
Obey the Law of Locality · ABD: Anything But Dropdowns · Pass the Squint Test · Teach by example
Saved
on: 2019-08-19
Design Principles for Developers: Processes and CSS Tips for Better Web Des
It is technically true that anyone can cook. But there’s a difference between actually knowing how to prepare a delicious meal and hoping for the best as you
Saved
on: 2019-08-09
Wevolution Of Webdesign
The Evolution Of Webdesign is a collection and imitation of Webdesign Trends from 1991 to 2020.
Tags:
#webdesign
Saved
on: 2019-05-19
CSSFX - Beautifully simple click-to-copy CSS effects
Diese Website steht zum Verkauf! cssfx.dev ist die beste Quelle für alle Informationen die Sie suchen. Von allgemeinen Themen bis hin zu speziellen Sachverhalten, finden Sie auf cssfx.dev alles. Wir hoffen, dass Sie hier das Gesuchte finden!
Saved
on: 2019-05-08
The “Design Tips” series now in TailwindCSS
Diese Domain steht zum Verkauf!
Tags:
#webdesign
Saved
on: 2019-05-03
CSS masonry with flexbox, :nth-child(), and order | Tobias Ahlin
Creating a masonry (or mosaic) layout with flexbox produces a grid with a seemingly shuffled and obscure order, but we can achieve a natural ordering by using :nth-child() and the order property
Saved
on: 2019-04-17
Web Design in 4 minutes
Learn the basics of web design in 4 minutes with this interactive tutorial.
Tags:
#webdesign
Saved
on: 2019-04-08
A quick start guide to choosing accessible colours – UX Collective
Early last morning, I woke up to this tweet. Like everything else I find on the internet, it sent me on a wild goose chase searching for any and all the information I could find about colour…
Saved
on: 2019-04-08
How To Align Things In CSS — Smashing Magazine
There are a few ways to align elements in CSS. In this article, Rachel Andrew explains what they are with some tips to help you remember which to use and why. She will take a look at the different alignment methods. Instead of providing a comprehensive guide to each, Rachel explain a few of the sticking points people have and point to more complete references for the properties and values. You can go a long way by understanding the fundamental things about how the methods behave, and then need a place to go look up the finer details in terms of how you achieve the precise layout that you want.
Saved
on: 2019-03-29
The typographic scale
The typographic scale has been used for centuries to choose harmonious font sizes. It has been likened to a harmonious musical scale. But there are *flaws* in those historical values.
Saved
on: 2019-03-19
Color Hunt - Color Palettes for Designers and Artists
Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.
Saved
on: 2019-03-16
Animate a Blob of Text with SVG and Text Clipping | CSS-Tricks
I came across this neat little animation in a designer newsletter. Unfortunately, I lost track of the source, so please give a shout out if you recognize
Tags:
#webdesign
Saved
on: 2019-02-07
Subtle Patterns | Free textures for your next web project
Subtle Patterns brought to you by Toptal, free textures for your next web project. Find out more here.
Tags:
#webdesign
Saved
on: 2019-02-07
Everything You Need To Know About SVG | CSS-Tricks
Using SVG can be very simple, but if you start digging in, there is a lot to know about SVG. In this series you're going to learn why SVG is such an important
Saved
on: 2019-01-31
Taotajima.jp WebGL deconstruction – akella – Medium
I love decompiling stuff, i did that for facebook 3D photos recently, but this time it will be about marvelous Tao Tajima website. Go check it out first. The website has been done by Homunculus…
Tags:
#webdesign
Saved
on: 2019-01-31
The Book of Shaders
Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.
Saved
on: 2019-01-31
Design v17 | CSS-Tricks
We rolled out a new site design on January 1! This is the 17th version of CSS-Tricks if you can believe that. The versions tend to evolve a decent amount
Tags:
#webdesign
Saved
on: 2019-01-15
7 Rules for Creating Gorgeous UI (Part 1) – Erik D. Kennedy – Medium
If you went to art school or consider yourself a UI designer already, you will likely find this guide some combination of a.) boring, b.) wrong, and c.) irritating. That’s fine. All your criticisms…
Saved
on: 2019-01-14
The Flexbox Holy Albatross | HeydonWorks
A blog post from the HeydonWorks.com blog
Saved
on: 2019-01-14
You know a site has its shit together when… – Hacker Noon
How hackers start their afternoon. HackerNoon is a free platform with 25k+ contributing writers. 100M+ humans have visited HackerNoon to learn about technology
Tags:
#webdesign
Saved
on: 2018-12-27
Brutalist Web Design. A Breath of Fresh Air in the Modern Web
When I was 10-11 years old, I was isolated and timid so expressing myself creat...
Tags:
#webdesign
Saved
on: 2018-12-26
Stripe Atlas: Writing copy for landing pages
Write copy that delights visitors, persuades prospects, and wins customers.
Saved
on: 2018-12-19
Designs for a new admin theme [#3017785] | Drupal.org
Background Building a new admin theme is part of the Admin UI and JS modernization initiative. We’re proposing to update the administration look and feel through a new design system for the Drupal administration UI. A design system consists of visual and behavioural components and patterns that can be combined into user-friendly user interfaces. This Drupal admin design system is a project with its own deliverables (examples, documentation, tools, and resources).
Saved
on: 2018-12-05
Art Direction for the Web: Designing standfirst paragraphs — Stuff & Nonsen
A standfirst design helps people understand what’s coming next, and offers us an opportunity to connect them the brand of a magazine, product, or website.
Saved
on: 2018-09-07
Design with Difficult Data · An A List Apart Article
Designing for the happy path—where users always enter ideal data and clients choose perfect images—can leave your layouts warped and broken when your users stray. Steven Garrity suggests you take a…
Saved
on: 2018-09-07
Is timeless UI design a thing?
Trends come and go, fonts become uncool, buttons aren't supposed to have round corners... but what if UI design became timeless?
Saved
on: 2018-07-09
The Layouts of Tomorrow | Max Böck - Frontend Web Developer
I went over to dribbble in search of fresh webdesign ideas - how hard is it to build a non-standard layout, given the modern CSS tools we have today? An experiment on CodePen.
Saved
on: 2018-06-21
Material Design is a political choice
Google's Material Design is only a single perspective of what constitutes good design, closing the door on other different aesthetics.
Saved
on: 2018-06-18
Easier scrollytelling with position sticky
Leaning on CSS to simplify the process.
Saved
on: 2018-06-13
HTML5 UP
Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license.
Saved
on: 2018-06-03
Where Lines Break is Complicated. Here's all the Related CSS and HTML. | CSS-Tricks
Say you have a really long word within some text inside an element that isn't wide enough to hold it. A common cause of that is a long URL finding it's way
Saved
on: 2018-05-16
The Art of Minimalism with UX
Minimalism is on the rise — but what is it? Is it the style of art that can be found in architecture, paintings, sculptures and design that eliminates all non-essential forms or features? Or is it a form of lifestyle where you declutter your life from all unnecessary things.
Saved
on: 2018-05-08
10 Reasons to Love (and Use) Gradients in 2018 | Webdesigner Depot
After years of flat, material and completely minimal styles, the gradient has made a comeback. Everywhere you look, designers are using color fades to add
Saved
on: 2018-04-27
Which Podcasts Should Web Designers And Developers Be Listening To? — Smash
In this article, Ricky Onsman brings you a list of current podcast for web designers and developers that our Smashing community listens to. We had what can only be called a very strong response both in number and in passion, and we’re pretty sure that any web designer or developer will find a few podcasts in this lot that will suit their particular listening tastes.
Saved
on: 2018-04-19
Editorial Design and CSS Grid: Inspiration and examples • Silo Creativo
With CSS Grid we can design web design inspired by magazines and other editorial design works. We made a practical example on how to pass a design from a magazine to the web.
Saved
on: 2018-04-19
Brutalist design is the bad influence we all need
Like it or not, brutalist design is moving from something edgy and almost punk, to something very mainstream and commercially viable.
Saved
on: 2018-04-16
12 Beautiful Examples of Web Typography – Plan of ATTCK – Medium
Varying screen sizes makes designing web typography uniquely challenging. These sites do it wonderfully, in no particular order. Supremo does a superb job of presenting beautiful typography in an…
Saved
on: 2018-03-26
The Ultimate Guide To iPhone Resolutions
Articles about PaintCode's new features, interviews, application development topics.
Tags:
#webdesign
Saved
on: 2018-03-20
Responsive images done right - stitcher.io
How to render responsive images in an optimal way.
Saved
on: 2018-03-09
Web Typography: Designing Tables to be Read, Not Looked At · An A List Apar
You may not think about it often, but tables are meant to be read. In this excerpt from Chapter 2 of his book, Web Typography, Richard Rutter explains how typography can improve the UX of our rows …
Saved
on: 2017-11-02
CSS Grid Challenge: Winners and Templates – Smashing Magazine
[CSS Grid](https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/) is becoming the **new layout standard** for the web, and we are all still experimenting with what we can achieve with it.
Saved
on: 2017-10-12
Comparing CSS Resets
This pen is a demo by scotch.io to demonstrate different CSS resets and how they are used....
Saved
on: 2017-10-12
PhospheneFX – Phosphene is a New York-based independent design and visual e
Phosphene® is a New York-based, award winning, independent design and visual effects studio.
Tags:
#webdesign
Saved
on: 2017-01-03
The Web Behind | The Web Ahead
The Web Behind is a series within the series where we take a look back at where the web came from, and the people who made it.
Saved
on: 2016-11-04
neutraltone/awesome-stock-resources
:city_sunrise: A collection of links for free stock photography, video and Illustration websites - neutraltone/awesome-stock-resources
Tags:
#webdesign
Saved
on: 2015-11-09
oak.is / Animated SVGs: Custom easing and timing
The chart above is an animated SVG featured on Sprout. This chart, and one other animation on Sprout, were initially GIFs. By using animated SVGs instead of GIFs we were able to reduce our page size from 1.6 mb to 389 kb, and reduce our page load time from 8.75 s to 412 ms. That’s a huge difference. Below, I’ll break down the animation of one of the circles seen in the chart. The technique applies to all of the elements in the graphic. With this you can create your own lightweight animated graphic.
Saved
on: 2015-06-29
Solid Icons | Squid Ink
2,000 handcrafted Glyphs Icons. Easy to customize and scalable. Include Photoshop, Illustrator, SVG files. Designed for mobile applications, iOS and Android Apps.
Saved
on: 2015-06-08
Documentation - Materialize
Materialize is a modern responsive CSS framework based on Material Design by Google.
Saved
on: 2015-04-24
The Code Kit — Web Design & Development Tools, News, and Inspiration
Saved
on: 2015-04-21
Using Gulp in Your Web Design Workflow - Blog - Matt Modrowski
Tags:
#webdesign
Saved
on: 2015-04-21
Trianglify Generator
Create colorful low poly triangle patterns that can be used as wallpapers and website assets.
Saved
on: 2015-04-16
Awwwards - Website Awards - Best Web Design Trends
Awwwards are the Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.
Tags:
#webdesign
Saved
on: 2015-04-13
The Best Designs - The Best of Web Design - Design Inspiration & Recognitio
Saved
on: 2015-04-13
Thomas Byttebier - The best UI typeface goes unnoticed
Clarity is the most important value of a well-designed user interface. Last time I blogged about pictograms. Let’s talk type today. Because even more than icons, a typeface can make or break clarity.
Tags:
#webdesign
Saved
on: 2015-04-09