Bookmarks tagged with #webdesign.
Show all
Show all
Scroll-Based Layout Animations | Codrops
Today, I want to share a compilation of on-scroll layout animations with you. You’ve probably come across these animations on many websites. The main idea is to switch the layout view while scrolling and keep the section pinned.
Saved
on: 2023-08-01
Guidelines for Brutalist Web Design
The term brutalism is often associated with Brutalist Architecture, however it can apply to other forms of construction, such as web design. This website explains how. The term brutalism is derived from the French béton brut, meaning “raw concrete”.
Tags:
#webdesign
Saved
on: 2023-05-02
You Don’t Need A UI Framework — Smashing Magazine
13 min read CSS, UI, Tools, Frameworks Share on Twitter, LinkedIn Try monday dev for free! Smart Interface Design Patterns, 10h video + UX training Try monday dev for free! Inclusive Design Patterns For 2025, with Vitaly Friedman Click here to kickstart your project for free in a matter of minutes.
Saved
on: 2022-05-04
The Year in Design - Zeldman on Web and Interaction Design
Translated into Turkish by omerbalyali. Translated into Spanish by Tam Lopez Breit.
Saved
on: 2022-04-26
DALL·E 2 and The Origin of Vibe Shifts - Divinations - Every
Sometime around 2015 there was a mysterious vibe shift in web design. It came so suddenly, and with so much decisive force, that it stood apart from the normal ebb and flow of aesthetic trends. It was like an invasive species taking over an ecosystem from a weaker competitor. What happened?
Saved
on: 2022-04-23
The super fast color palettes generator!
Create the perfect palette or get inspired by thousands of beautiful color schemes. We updated our Terms and Privacy. Please read them and accept to continue.
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 single line of code. Learn a few layout tricks you can implement in your codebase today, and be able to write entire swaths of layout with just a fe
Saved
on: 2022-02-18
So many little design helper sites! | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I had one of those little single-serving designer helper sites bookmarked the other day: getwaves.io.
Saved
on: 2021-09-29
Motion One: The Web Animations API for everyone
Motion One provides the performance of native browser APIs in a user-friendly package. Go beyond the browser with springs, independent transforms, timeline sequencing and more.
Saved
on: 2021-09-22
Design Principles
Design Principles are a set of guidelines that empower a team to make wise decisions and appropriate trade-offs when designing, building and innovating. Applying design principles fosters a cohesive problem-solving approach, promoting efficiency, consistency and user-centricity.
Saved
on: 2021-09-13
A Single Div
A Single Div: a CSS drawing project by Lynn Fisher 2014-2019GitHub#divtoberBuy me a coffee
Saved
on: 2021-05-24
Intrinsic Typography is the Future of Styling Text on the Web | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The way we style text hasn’t changed much over the years.
Saved
on: 2021-04-21
Templates made in Shuffle
An online editor for busy developers. © 2024 Shuffle. All rights reserved.
Saved
on: 2021-01-19
7 Rules for Creating Gorgeous UI – Part 2 (Updated for 2020) – Learn UI Des
This is the second part in a two-part series. You should read the first part first. We’re talking about rules for designing clean and simple UI without needing to attend art school in order to do so.
Saved
on: 2020-12-18
Building Your Color Palette
Ever used one of those fancy color palette generators? You know, the ones where you pick a starting color, tweak some options that probably include some musical jargon like "triad" or "major fourth", and are then bestowed the five perfect color swatches you should use to build your website?
Tags:
#webdesign
Saved
on: 2020-11-23
A Nerd's Guide to Color on the Web | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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
Every website I design is unique. It absolutely without a doubt must be totally unlike anything I've ever done before. It's kind of a personal rule or challenge. However, there are techniques I apply to nearly every design. I love bold colors, fresh fonts, and funky, non-uniform layouts.
Saved
on: 2020-09-01
Illustration Website Template | Templates | Black Illustrations
We receive a lot of messages from Black illustration members in search of new and innovative ways to showcase and use illustrations. So, we decided to design and develop an Illustrations website template showcasing these beautiful illustrations in action. Features include
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 you need to implement the UI for a new feature on your own.
Saved
on: 2020-08-17
The “I’m new to design” starter pack | by Sara Clayton | UX Collective
As someone who has made the transition from marketing to design, I occasionally get questions from others who don’t have any background in design on how to get started.
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.
Saved
on: 2020-02-26
Same HTML, Different CSS
I stumbled upon a project called “Evolution of Web Design”, which shows a web page about Nasa and space. The interesting thing is that there is a slider mimics how the design looked for each year (1993 - 2015).
Saved
on: 2020-02-20
Motion · Blog · Where are all the animated SVGs? · Animated SVG icon editor
Where are all the animated SVGs? Let's go on a journey. Poirot has some questions Animated SVGs just make sense. There are lots of articles explaining why you should be using SVG. There's even scientific evidence(!) that says animated icons are better than static ones.
Saved
on: 2020-02-11
How to Overlap Images in CSS | Bri Camp Gomez
Something very popular in web design currently is overlapping images. When the design is handed to you, as the developer to implement it, there are a few ways to go about it like most things with CSS.
Saved
on: 2019-12-02
Designing accessible color systems
Color contrast is an important aspect of accessibility. Good contrast makes it easier for people with visual impairments to use products, and helps in imperfect conditions like low-light environments or older screens.
Saved
on: 2019-10-17
Animated Icons - 200 Free Icons
Animated icons in the Color style 307 icons Free Bell Free Check Circle Free Dots Loading Free Down Arrow Free Heart Free Search Phone Ringing Phone Message Pickup Truck Pie Chart Plant Animated icons in the iOS Glyph style 154 icons Free Bell Free Check Circle Free Dots Loading Free Down
Tags:
#webdesign
Saved
on: 2019-10-09
Hover States / The home of alternative digital design
Turning the launch of their website in to a performance studio F451 live streamed the designing, the coding, the lunch breaks and a round table discussion into a captivating holding page and a slick scroller portfolio.
Tags:
#webdesign
Saved
on: 2019-10-03
Managing Flow and Rhythm with CSS Custom Properties ◆ 24 ways
An important part of designing user interfaces is creating consistent vertical rhythm between elements. Creating consistent, predictable space doesn’t just make your web pages and views look better, but it can also improve the scan-ability.
Saved
on: 2019-10-02
ColorBox
Share URL Figma Plugin Algorithm Properties Options Hue Start End Rotation Curve Direction Saturation Start End Rate Curve Direction Brightness Start End Curve Direction Major Steps Set number of colors to be returned Steps Lock Hex Forces color progression through a hex value Hex Value
Saved
on: 2019-09-20
4 Rules for Intuitive UX
This is my advice on improving the UX of your designs WITHOUT hours of user research sessions, paper prototyping playtime, or any other trendy UX buzzwords 😎 (Seriously, search this page “design thinking”. 0 results. Nailed it!) Who’s this article for? Easy: Developers.
Saved
on: 2019-08-19
Design Principles for Developers: Processes and CSS Tips for Better Web Des
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! It is technically true that anyone can cook.
Saved
on: 2019-08-09
The Guardian digital design style guide
Introduction The Guardian website is made up of a series of fronts and articles. Introduction Fronts are made up of containers — these allow stories to be grouped in a logical manner, by theme or subject matter. Introduction Containers are composed of modular story cards.
Saved
on: 2019-07-30
For Developers Learning Design – maeda.dev
There are a few resources that I’ve found useful to teach developers about design. Sign up for the CX Briefing with no more than 2020 characters, zero images, and all in plain-text.
Saved
on: 2019-06-20
CSSFX - Beautifully simple click-to-copy CSS effects
The domain cssfx.dev may be for sale by its owner! This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers.
Saved
on: 2019-05-08
The “Design Tips” series now in TailwindCSS
If you know the collection of design tips that Steve Schoger has been sharing on twitter for the past years now made with TailwindCSS (and HTML). This might be helpful to Tailwind newcommers or someone that needs the markup for a component – Feel free to use them.
Tags:
#webdesign
Saved
on: 2019-05-03
CSS masonry with flexbox, :nth-child(), and order | Tobias Ahlin
On the surface it seems fairly easy to create a masonry layout with flexbox; all you need to do is set flex-flow to column wrap and voilà, you have a masonry layout. Sort of. The problem with this approach is that it produces a grid with a seemingly shuffled and obscure order.
Saved
on: 2019-04-17
Public Sans
Official websites use .gov A .gov website belongs to an official government organization in the United States. Secure .gov websites use HTTPS A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
Saved
on: 2019-04-09
Web Design in 4 minutes
Let's say you have a product, a portfolio, or just an idea you want to share with everyone on your own website. Before you publish it on the internet, you want to make it look attractive, professional, or at least decent to look at. What is the first thing you need to work on?
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 accessibility. So I figured that I may as well condense this to help other people understand accessibility.
Saved
on: 2019-04-08
How To Align Things In CSS — Smashing Magazine
Rachel Andrew 16 min read CSS, Browsers, Guides Share on Twitter, LinkedIn Click here to kickstart your project for free in a matter of minutes.
Saved
on: 2019-03-29
The typographic scale
The typographic scale is the bedrock of modern typography, used for centuries to choose harmonious font sizes. But there are flaws in those historical values. The classic typographic scale is a collection of font sizes that are in visual harmony.
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
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! In it, a block of text appears to bleed into view with a swirl of colors, then goes out the same way it came in. It’s a slick effect and one I wanted to recreate in code.
Tags:
#webdesign
Saved
on: 2019-02-07
Everything You Need To Know About SVG | CSS-Tricks
01 Intro to the Course Welcome!… Watch the Screencast
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 studio from Japan, and the developer of the website is Yuichiroh Arai.
Tags:
#webdesign
Saved
on: 2019-01-31
The Book of Shaders
This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. Patricio Gonzalez Vivo (1982, Buenos Aires, Argentina) is a New York based artist and developer.
Saved
on: 2019-01-31
Design v17 | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! We rolled out a new site design on January 1! This is the 17th version of CSS-Tricks if you can believe that.
Tags:
#webdesign
Saved
on: 2019-01-15
7 Rules for Creating Gorgeous UI (Part 1) – Erik D. Kennedy – Medium
Erik D. Kennedy NOTE: For the full, updated version of this article, please go here.
Saved
on: 2019-01-14
The Flexbox Holy Albatross | HeydonWorks
Coincidentally, I've been spending this same time period trying to solve a particularly vexing CSS layout problem. You might say the problem has become both my albatross and my Holy Grail; my Holy Albatross, if you will.
Saved
on: 2019-01-14
The Inter typeface family
One of the most famous lighthouses of antiquity, as I have already pointed out, was the pharos of Alexandria, which ancient writers included among the Seven Wonders of the World.
Saved
on: 2018-12-30
You know a site has its shit together when… – Hacker Noon
⚡Live Reactions⚡ @md-mohsin-ansari @yashukapila @cveasey Technology 8 reactions 4 reactions 4 reactions Programming 4 reactions 4 reactions 4 reactions Startups Of The Year 8 reactions 8 reactions 5 reactions Cryptocurrency 8 reactions 7 reactions 5 reactions Python 5 reactions 4 reactions 7 rea
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 creatively was often hard and I usually just resorted to video games to pass my time. Until I discovered the world wide web. Then everything about me changed.
Tags:
#webdesign
Saved
on: 2018-12-26
Stripe Atlas: Writing copy for landing pages
In the beginning, there’s the landing page. It’s often a company’s first impression: a digital introduction to an organization, the problem it tackles, and the solutions it offers. The sophistication of landing pages can vary. Some companies use their homepage as a landing page.
Saved
on: 2018-12-19
Designs for a new admin theme [#3017785] | Drupal.org
Skip to main content Skip to search Can we use first and third party cookies and web beacons to understand our audience, and to tailor promotions you see? Return to content Fall into generosity with our Membership Drive! By joining our membership program, you’ll provide philanthropic support to t
Saved
on: 2018-12-05
Art Direction for the Web: Designing standfirst paragraphs — Stuff & Nonsen
Designers frequently overlook a few design elements if they remember them at all. Recently, I’ve noticed that the styles of typographic details like bylines, citations, dates and times are more often than not pulled from frameworks and pattern libraries and receive very little original thought.
Saved
on: 2018-09-07
Design with Difficult Data · An A List Apart Article
You’ve been asked to design a profile screen for a mobile or web app. It will need to include an avatar, a name, a job title, and a location. You fire up Sketch or Figma. Maybe you pull out your drafting pencil or head straight to markup and CSS.
Saved
on: 2018-09-07
Is timeless UI design a thing?
Why would I want my design to last that long? Sometimes you don't really want your design to be timeless. Sometimes you need your product out really quick because you know it will lose its timing very soon, so you just want to bank now.
Saved
on: 2018-07-09
The Layouts of Tomorrow | Max Böck - Frontend Web Developer
It mocks the fact that a lot of today’s websites look the same, as they all follow the same standard layout practices that we’ve collectively decided to use. Building a blog? Main column, widget sidebar. A marketing site? Big hero image, three teaser boxes (it has to be three).
Saved
on: 2018-06-21
Material Design is a political choice
Materialism is the new Modernism? In design history, the idea of universality and neutrality comes from the Modernism movement - or Swiss Style - which, one could suppose, is what Google means by “good classic design”.
Saved
on: 2018-06-18
HTML5 UP
Unlimited access to 80+ responsive site templates (including everything at HTML5 UP), plus extras and support for just $19.
Saved
on: 2018-06-03
Where Lines Break is Complicated. Here’s all the Related CSS and HTML.
DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit. 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 into copy.
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 visual interest, create user engagement and just design something that’s worth looking at.
Saved
on: 2018-04-27
Which Podcasts Should Web Designers And Developers Be Listening To? — Smash
14 min read Share on Twitter, LinkedIn Advanced Design Systems, with Brad Frost Try monday dev for free! 11 Habits of Highly Effective Developers SmashingConf New York 2024 Try monday dev for free! Start with $100 Credits! Smart Interface Design Patterns, 10h video + UX training Podcasts for web de
Saved
on: 2018-04-19
Editorial Design and CSS Grid: Inspiration and examples • Silo Creativo
We, web designers, are in luck. We had never lived a time like today, where we can choose between three different CSS syntax groups to design the layout of a web project. I am referring to floats, Flexbox and CSS Grid (or Grid Layout).
Saved
on: 2018-04-19
Brutalist design is the bad influence we all need
Naturally, a lot of graphical and aesthetic principles ended up dictated by languages such as Google’s Material Design or Apple’s Human Interface Guidelines.
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 interactive educational experience.
Saved
on: 2018-03-26
The Ultimate Guide To iPhone Resolutions
UPDATE: We have added the new iPhone 11, iPhone 11 Pro and iPhone 11 Pro Max to the guide below.
Tags:
#webdesign
Saved
on: 2018-03-20
Responsive images done right
I want to share some thoughts on responsive images. I'll write about a certain mindset which many projects could benefit from: small- and mid-sized web projects that don't need a full blown CDN setup, but would enjoy the performance gain of responsive images.
Saved
on: 2018-03-09
Web Typography: Designing Tables to be Read, Not Looked At · An A List Apar
Good designers spend a great deal of time sweating over typography. They agonise over typefaces, iterate through type scales and meticulously apply white space, all in the service of the reader.
Saved
on: 2017-11-02
CSS Grid Challenge: Winners and Templates – Smashing Magazine
11 min read CSS, CSS Grid Share on Twitter, LinkedIn Try monday dev for free! Smart Interface Design Patterns, 10h video + UX training The Power of Storytelling, with Chiara Aliotta Start with $100 Credits! SmashingConf UX & Design, Antwerp 2024 Click here to kickstart your project for free in a mat
Saved
on: 2017-10-12
PhospheneFX – Phosphene is a New York-based independent design and visual e
Phosphene™ Loading elements Phosphene™ is a New York-based, award winning, independent design and visual effects studio. Date 06.25.2021 Date 01.07.2020 Date 07.16.2019 Date 01.15.2019 Date 12.21.
Tags:
#webdesign
Saved
on: 2017-01-03
Browse Themes & Templates - Best of Themes
Sorry for the inconvenience but we're performing some maintenance at the moment. We'll be back online shortly!
Saved
on: 2016-11-05
The Web Behind | The Web Ahead
As a full-stack designer since 1996, with expertise in HTML & CSS, my projects include front-end development work for CERN, design work for Google and the W3C, and clients from Mark Boulton Design to the Annenberg Foundation.
Saved
on: 2016-11-04
neutraltone/awesome-stock-resources
A curated list of awesome stock photography, video and illustration websites. I try my best to maintain this repository and keep it up-to-date but if you spot a broken link or a resource which isn't listed, please, feel free to make a pull request.
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.
Saved
on: 2015-06-29
Solid Icons | Squid Ink
Each Glyph / Symbol was designed with vector shapes. Change colors or layer styles, move and re-size every single element in no-time. Most Complete Glyphs icons Pack Ever.
Saved
on: 2015-06-08
Documentation - Materialize
We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.
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
While you may be an expert in Photoshop or Sketch, there will be times when you need to execute your designs or prototypes in the browser.
Tags:
#webdesign
Saved
on: 2015-04-21
Awwwards - Website Awards - Best Web Design Trends
Vote Now WEBSITE Shaga by Vote Now WEBSITE Roman Salakhov by Vote Now WEBSITE Joshua Oladiti — Portfoilo ©24 by Check out all submitted websites View Nominees WEBSITE Intrepid by WEBSITE The Maison of All Victories by WEBSITE Mooders by WEBSITE Cristina Gómez by WEBSITE Botanic Expo by WEBSI
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. On the surface, most of an app’s UI is exactly the type it’s set in.
Tags:
#webdesign
Saved
on: 2015-04-09
The Web’s Grain by Frank Chimero
Trust me: its totally worth it. Oh, and while youre listening, pay attention to your chest. You may feel a growing warmth, kind of like the firey trickle after a shot of whiskey.
Tags:
#webdesign
Saved
on: 2015-03-04
Web Typography for non-designers - Presslabs
#Why is web typography so important? Although a lot of today’s web content is highly interactive and image-based, language–and thus words–is still the basic means of expression on almost every single web page.
Tags:
#webdesign
Saved
on: 2015-02-27