Great Websites
- distill.pub - Communicating with Interactive Articles
-
Read the entirety of the article, with notes & spaced repetition. Will help you condense hundreds of hours of experimental learning.
- Practical Typography
- The Bible.
- Wikipedia Mobile
- Great iconography. Light. Carefully chosen line-height. Performant. Gold standard of web design.
- Eev.ee
-
Responsive site designed with colors by someone who has clear understanding of visual style.
Resource List of examples for the state of the art in HTML thumbnail grids over time
- Financial Times
- Journalism website which makes proper use of desktop space.
- GOV.UK
- The standard for maintaining aesthetics without compromising on accesibility.
- Red Ded Redemption 2 - Catalogue
- Incredible custom site that feels like a western cowboy newspaper. Looks good on mobile and desktop. <select> and <input> elements have custom typography and styling. Hover is also customized to the theme of the magazine.
- Stripe - Billing
-
Amazing animations in SVG, with CSS rotates to give an element of depth. On desktop, hover over the “Company” tab and then the “Developers” tab to see a unique animation transition for dropdown menus.
Scroll down to “Building Blocks for Billing” and click on the links. This updates the SVG on the right. The SVG itself has subtle hover animations.
Scroll further to “A new way to accept wire transfers”, for a well-designed table where the relevant column is highlighted in a creative manner.
In the “Simplify billing from order to cash” section, there is a list of features. Hovering over the list launches a tooltip that appears and disappears with relevant animations. In mobile, the tooltip appears when the user presses on the list item, and disappears when the user lifts their finger.
- The best SaaS landing page examples
- Resource Collection of great SaaS landing and feature pages.
- Macleans
- A bare bones website that integrates media seamlessly. Scroll towards the end to get the feeling that you’re reading a research paper.
- Distill.Pub
- A site focussing on interactively explaining machine-learning concepts. The referencing system, bibliography and horizontal rules are noteworthy.
- Is Timeless Ui Design A Thing?
- Images are presented in a really creative manner. They are overlain on top of one another, giving the website a magazine feel.
- The Politico
- Great way to do blockquotes. Change the red to black however. Also clicking on the print dialogue results in a well typeset document.
- Beautiful Racket
- A good looking site where code is styled sanely and sensible. Click here to see beautiful tooltips.
- Alejandro Martinez’s Blog
- Tags are displayed really well - Jonathan Blow’s libraries discussion. If you hover over a link, the linked page is prefetched. This makes navigation almost instantaneous.
- Building Accessible Websites
- Wide webpage with lot’s of good advice
- Kyle Schaeffer’s Blog
- Uses one font for header and body. Subsets it from TypeKit. Avoids F.O.U.T.
- Her One Bag
- The best designed blog, period. The rotation on the images gives it a collage-ey feel. The dark theme UI is brilliant. Menubars are seamless. Tags are displayed beautifully. Go to any blog post to see elegant design. Also check out the author’s personal web page.
- JavaScript.Info
- Looks great on all widths. Well spaced. Unobtrusive hamburger menu. Keyboard shortcuts on hover for left and right arrows. The content itself is comprehensive.
- Who is Bryan Garner
- Click on the “Articles about Bryan Garner” on the right for useful definition list. The navbar updates accordingly at the top right. The stickied menubar is functional. This page also makes use of trackbacks.
- Talking to the mailman
- Super simple website. Let’s you download a PDF that has been typeset well.
- Two years of Eve - Chris Granger Blog
- Clean blog layout. Links are underlined nicely and the body font (Merriweather) is easy on the eyes. The site makes a good use of shades of gray.
- Atlas Obscura - Curious and Wondrous Travel Destinations
- The card component which has the “Place of the Day” is elegant. The search bar is located on the border of two divs. Each of the dropdown menu items are uniquely styled on the desktop version.
- Creator of Tachyons - Speaks about accessibility and web
- Home page has a different style on refresh. The reading section on the homepage is useful. The Veil of Ignorance
- Portfolio of a graphic designer - hellogreg.com
- Nice visual portfolio. Clicking on an image launches a carousel.
- Portfolio of a web designer - lauraelizabeth.co
- Links on gwern.net
-
On desktop, footnotes occupy the left and right margin as floating asides. Hovering over the aside highlights the subscript reference and vice-versa.
Links to webpages on gwern.net have the logo at the end of the link. The logo goes well with the black-gray colorscheme employed through the webpage.
- gedd.ski
-
Live code snippets. Editing the snippet changes the output. Line length of the code is sensible and code looks pleasant on the smallest of screen sizes.
Rest of the website has vibrant custom illustrations with a consistent art style.
- Bram Stein - Software architect and product manager working for Adobe
- Great tab layout. Good use of typography. First paragraph is in a slightly larger font than the rest of the paragraphs.
- corbpie - Writing about interests; Web, Dev, SEO, Marketing and more!
- Good dark mode. Clean display of pages containing a specific tag. Articles have monospace as the body font and it is functional. Great code editor that wraps long lines while preserving line numbers. Hovering over the code block lets you toggle syntax highlighting and open the raw code sample in a new window.
- nicepage - Web Design 3.0: When Your Web Design Really Matters
- Resource Provides a comprehensive history of frontend web design. Linked images have experimental designs that should be used as a reference.
- Increment - How teams build and operate software systems at scale.
- Website by Stripe. The magazine is divided into issues. Each issue has a central theme and high-quality articles by professionals in that area. Each article has custom artwork. Issue page allows you to jump to other magazine issues with ease. Hovering over the author’s name triggers a smooth animation. Layout and navigation to other pages is done in a visually pleasing manner.
- Hillel Wayne - Blog
- Cute buttons at the bottom to jump to the previous or next article.
- fonts.com - Fontology
-
Resource A typography workbook for self-education. Clicking on one of the four levels opens that level and expands it’s table of contents. Logo on the top-left, is one word with two colors.
Sample article has links to go to the previous and next section. At the bottom, the current article can be downloaded as a PDF that has good typesetting. Website is desktop only.
- lapa books - Free Essential Books for Unicorn Designers
- Resource Free PDF’s for learning design.
- Stripe: Jobs
-
Video preview in a skewed rectangle. Hovering/touching highlighted text launches a tooltip. Clicking on the tooltip opens an external link.
In “What Matters Most To Us”, highlighted text on the desktop version corresponds to a slideshow. Hovering over a different highlight changes the slideshow.
In “We don’t have all the answers”, there is a blockquote. Hovering over the quote changes the icon and updates it’s label into a link to the source of the quote.
The entier site has skewed stripes that are in the background but have been placed to enhance the foreground element that they’re closest to.
- Solved By Flexbox
- Resource Three-image grid layout on desktop. Reflows single-grid on mobile. Provides real-world examples of problems that can be solved using flexbox.
- National Oceanic and Atmospheric Administration
- Navigation menu has great iconography. It is unobtrusive on desktop and collapses into a hamburger menu on mobile. Scrolling down on desktop triggers an animation which expands and collapses the menu, giving a preview of the other items.
- Tanner Helland
- Clicking on an image enlarges it with links to the original source, the full-sized image and a button to close the pop-up menu.
- Gift of Speed
- Resource for page load optimization.
- Adrian Roselli
-
Resource for CSS design. Favorites:
- James Sinclair
-
Designed like a magazine. Code samples have a creative advanced CSS effect to make it look like a swatch.
Love the custom line drawings and internal visual language. Reminds me of traditional magazines.
- Compact display of podcast episodes, with video and audio
-
Click on “more” to see a detailed description
- 3D Text Library (4kb) with clear implementation details in webpage itself
-
Doesn’t use WebGL, and is considerate of accessibility
Transformed text can be styled using CSS
- andymatuschak’s blog - Playful design, background images
-
Background images on sidebar articles aren’t obnoxious
Sidebar and main article are clearly designed with a lot of thought
- Clean block layout
-
Love how the sidebar sits on top of the code sample when you scroll down.
- Blog layout with good date, author position
-
Great “related articles” ui at the bottom of the page in the form of cards
- golden ratio typography calculator
-
Resource calculate different line heights for different screen sizes
- scihub author’s personal blog
-
Scroll to the “articles” section to see a great non-symmetric grid to display articles with summaries on desktop
beautiful pdf with a sidebar that makes for a pleasant reading experience (inline-pdf)
- Portfolio website with tabbed layout and nice animations
-
Click on different tabs to see great animations
- Blue gold layout with white diagrams
- Click on credit to see a re-creation of leonardo da vinci’s diagrams
- Minimal blog layout
- Great nav bar and use of system font. Date is also displayed unobtrusively
- monospaced body font that is very readable on desktop
-
study the text to understand why it is so easy to read on desktop
asides and blockquotes are done inline in desktop and are very readable
images are cropped and displayed unobtrusively
- National Georgraphic - Beautiful way to layout pictures in desktop
- Pictures take full advantage of desktop space. Captions look beautiful.
- nytimes - Interactive graphic that get’s the animation balance just right
- Immediately obvious what is happening. Clicking on each state gives a history of that states historical leanings.
- Beautiful inline colors - using HTML elements to enhance the subject matter
-
Resource How to select colors in an accessible, aestehtic way.
Resource From HN comments: Generating color palettes for charts
Resource From the link: Full page infographics (South China Morning Post)
Resource From the link: Full page infographics (The Economist)
- keybcombiner - Table of shortcuts
-
Example of filterable table with the following functionality:
- Category Filter
- Search Filter
- Arbitrary Selection and Grouping
- Paginated tables
- Search by column value
- David Hume Texts - Font that looks good justified on large font size with narrow width
- Font used is “IM Fell English”, look at heading and subheading typography as well.
- Geri Reid - Forms best practices
-
Resource Guidelines with reasoning for forms, buttons, radio buttons and more. Follow the citation’s for explanations into the thought proccesses behind why certain guidelines are the way they are. The citation’s themselves are high quality and resources in their own right.
- gov.au design system - Tables & other components
-
Resource Sidebar on the left has accessible components that are well-designed.
Components such as breadcrumbs, navigation bars, animations
At the bottom, I like the two-column layout of “Related Components” & “Feedback”, with the thick borders below the headers.
- Amazing search engine & ui
-
Resource Great filters. Accidentally applied filters are easy to close.
Information is conveyed in verbal and non-verbal ways e.g., Filter by organization.
- Source Code Commentary of “Elite”
-
Three themes, good structure and layout for code.
Very good use of html elements.
Quality of writing itself is also very high and clear.
- Newspaper layout in browser
-
Very readable, column layout.
Great UX, scrolling mousewheel enables horizontal animations
- Skeumorphic design
-
Ribbons on left
Hover over the links in the nav bar at the top
- Ultra performant book in HTML form
- Load’s bulk of resources upfront. Clicking on each link is instant.
- CSS Background Pattern Generator
-
Resource Use this in cards.
Hovering over an image transforms the image to give overlays and wireframes of the icons used. Great UI.
study how the grid display works seamlessly
you can toggle the graph modes and it has custom animations
seems to be a single-page-application
Hovering over title image hides date. Hovering over captioned images hides captioned. Would work well with mediumzoom to further enhance images.
- consistent graphic palette – of dull gray, red and blue – gives the site an identifying personality
- interactable data on mobile & desktop
- graphic at the top gives summary through images by visualizing multiple outcomes close to each other in map format
- language is very precise. using terms like “favored”, “clearly favored” to be more subtle yet precise
- “winding path to victory” section is a snake graph that can be clicked on and zoomed in
mostly black & white
Voice Chats Done Right (telegram.org)
- Custom header illustration that isn’t obnoxious in size
- High quality animations of new examples
- High quality animation on header that conveys the new feature visually
- Clean typography elements: blockquotes, recent news sidebar, headings & subheadings
div > span),
discourages using the “!important” keyword. By
not generalzing, you make your CSS easy to replace. Article
is a compelling case for adopting B.E.M. naming conventions.
Uses SASS to show how to build mobile-specific comopnents.
- Don’t serve bold versions, let Chrome render.
- Don’t serve weights, use variable fonts.
- Use SVG’s instead of icon fonts. (disagree)
font-family: Plantin; font-size: 20px; line-height: 28px; width: 850px;
- Unique and powerful nav/menu bar
- Inline custom search
- Dark mode with animation
- Menu with animation on button and slide-in
- Unique table of contents
- Francisco Presencia
- Harvard Law Review - Beautiful Footnotes
- Eric Lawler - Beautiful Website
- jrl.ninja - Beautiful Website & Visuals (minimalist CSS)
- Lawyerist - Uses buterick fonts, innovative sponsorship strategy
- Salesforce - Creates a partial box shadow using a background image and a css filter
- Each of his articles get’s 500+ comments within two days. The comment section seems to be native and each username links back to the user’s personal website, interesting viewpoint on movies and how they should be more realistic: https://kunstler.com/other-stuff/movie-reviews/kunstlers-capsule-movie-reviews/
- Useful libraries for cross-browser HTML development
- Scrolling TOC that works on IE
- Sort by category - Sort by date
- Site designed using Butterick as an inspiration
- Clean black and white website. Resizing the browser window has an animation from max to small
- Algebraic Effects: Code samples have relevant lines highlighted. Written well. Duplicates code sample multiple times. Assumes you’re just scrolling down and helps you avoid scrolling up.
- Clean blog layout
- Good print typesetting. Magic is in this file: https://colah.github.io/css/default.css
- Well-designed site. SVG’s look beautiful. Has a scrolling TOC. Lot’s of beautiful, custom diagrams.
- https://www.plainlanguage.gov/guidelines/
- Amazing online reader. Great search functionality and page typography
- Non-ad website. Essays can be syndicated. Custom audio transcripts. Play the audio transcript and scroll down for a cute play/pause button at the bottom right corner.
- Well-designed personal blog. Table of contents is a dropdown at the side. Makes good use of desktop spacing. Social media buttons are integrated in an aesthetically pleasing manner.
- Scrolling ToC that collapses and expands in response to user’s scrolling.
- Makes good use of desktop space. Nice SVG icons.
- Resource on CSS Animations
- Good typography, illustrations and spacing.
- ryanmercer.com - Black and white blog. Good spacing. Good tags display at the bottom.
- Github README. Justified text. Subheadings have borders that wrap the justified text neatly. Great use of borders.
- Great sticky menubar at the top. Hover on desktop for animations. Good custom font. Click the play button for an animated transition to video.
- Minimalist color scheme. Great sub-heading and heading font (Google Web Font: Fondamento). Use inspect element to remove banner image at the top.
- Good blog design. Black and White. Code samples.
- Chomsky.info - Blog layout. Good way to go home.
- Click on the video. Good site and concept.
- Typography, Black and White, Serif Font
- Desktop: Minimal, elegant header
- Desktop: Nice footer
- Desktop: Minimalistic
- Show / hide image functionality
- Display of “Related Articles”
- Layout and Typography
- Minimal
- First cooking website I’ve seen with exceptional layout and typography
- Great way to style fonts and give a unique look to text
- Resource Edge cases and accesibility tips on using dropcaps
- Layout
- Resource Layout & Fonts
- Clean news layout. Trending news articles are displayed unobtrusively. Dotted border gives the site a sense of presence.
- Amazing dark theme. Menu bar has a great shadow.
- Nice bold font (typography) for subheadings. Compact tables.
- Typograhy & Illustration. Delete the two header bars via Inspect Element.
- Resource Scroll down to each article to see different styles. Notice the text-shadow in some of the headings.
- Great way to display tags.
- Resource Typography book reccomendations at the bottom