HOME | TRENT WALTONHOMEARTICLESINFOSEARCHDEVICE AGNOSTIC I’m a designer & web builder who works with my friends at Paravel. Twitter / Dribbble / Instagram / Spotify / Codepen / GitHub / Letterboxd / DayTrip. Voyager is out! Listen on on Spotify, Apple Music, Bandcamp, or most anywhere you like to stream music. I am transferring my font-shopping bookmarks to a webpage so you can see
them too.
INFO | TRENT WALTON
An Event Apart (Denver) October 28–30, 2019. An Event Apart (Orlando) October 8-10, 2018. An Event Apart (Boston) June 25-27, 2018. Smashing Conf (San Francisco) April 17-18, 2018. CSS Dev Conf. FONT LIST | TRENT WALTON My Font (Shopping) List. I am transferring my font-shopping bookmarks to this page. You can browse by display, sans-serif, and serif fonts.. Disclaimer: Descriptions for fonts are going to be utter nonsense. ARTICLES | TRENT WALTON Atomic Classification. I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor. NOTES | TRENT WALTON Voyager. Back in August I decided I wanted to make an instrumental synthwave album. As trying as the Summer was for many of us, I did my best to take advantage of all time w/ my 8 & 10-year-old boys. We hiked, swam, watched borderline-appropriate movies, and generally had a blast. At the house we were leasing, my office was right by the long CSS BOX-SHADOW:INSET CSS Box-Shadow:Inset. You’ve gotta appreciate the imageless design elements the CSS box-shadow property makes possible. No more slicing up 3 jpgs to recreate the depth so easily gained in Photoshop. Lately, we’ve been using box-shadow:inset on some Paravel jobs, and I’ve seem some clever uses out there on the intertubes. FIT TO SCALE
FLUID TYPE | TRENT WALTON Keeping in mind that a range of 45-75 characters per line is generally accepted as safe for comfortable reading, there are a few things that can be done to avoid extra long lines of text in fluid layouts. The first is using media queries to adjust the width of a container, whether for the entire site or just a column of text. JIRO, SUSHI & WEB TYPE One of my favorite documentaries is Jiro Dreams of Sushi, which tells the story of 85 year-old sushi master, Jiro Ono, who has spent his life honing his craft at a 10-seat restaurant in a Japanese subway station.. Jiro is the picture of craftsmanship and dedication and runs his restaurant as such, whether apprentices prepare egg sushi 200 times before meeting the standard or octopus is CSS3 BORDER-RADIUS & ROUNDED AVATARS CSS3 Border-Radius & Rounded Avatars. Originally when I CSSed the round avatars on the DesignSwap comments area, I used the -webkit-mask-image property. I was really proud of how neat and effective this was until I realized you could apply border-radius to an image directly.
HOME | TRENT WALTONHOMEARTICLESINFOSEARCHDEVICE AGNOSTIC I’m a designer & web builder who works with my friends at Paravel. Twitter / Dribbble / Instagram / Spotify / Codepen / GitHub / Letterboxd / DayTrip. Voyager is out! Listen on on Spotify, Apple Music, Bandcamp, or most anywhere you like to stream music. I am transferring my font-shopping bookmarks to a webpage so you can see them too.
INFO | TRENT WALTON
An Event Apart (Denver) October 28–30, 2019. An Event Apart (Orlando) October 8-10, 2018. An Event Apart (Boston) June 25-27, 2018. Smashing Conf (San Francisco) April 17-18, 2018. CSS Dev Conf. FONT LIST | TRENT WALTON My Font (Shopping) List. I am transferring my font-shopping bookmarks to this page. You can browse by display, sans-serif, and serif fonts.. Disclaimer: Descriptions for fonts are going to be utter nonsense. ARTICLES | TRENT WALTON Atomic Classification. I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor. NOTES | TRENT WALTON Voyager. Back in August I decided I wanted to make an instrumental synthwave album. As trying as the Summer was for many of us, I did my best to take advantage of all time w/ my 8 & 10-year-old boys. We hiked, swam, watched borderline-appropriate movies, and generally had a blast. At the house we were leasing, my office was right by the long CSS BOX-SHADOW:INSET CSS Box-Shadow:Inset. You’ve gotta appreciate the imageless design elements the CSS box-shadow property makes possible. No more slicing up 3 jpgs to recreate the depth so easily gained in Photoshop. Lately, we’ve been using box-shadow:inset on some Paravel jobs, and I’ve seem some clever uses out there on the intertubes. FIT TO SCALE
FLUID TYPE | TRENT WALTON Keeping in mind that a range of 45-75 characters per line is generally accepted as safe for comfortable reading, there are a few things that can be done to avoid extra long lines of text in fluid layouts. The first is using media queries to adjust the width of a container, whether for the entire site or just a column of text. JIRO, SUSHI & WEB TYPE One of my favorite documentaries is Jiro Dreams of Sushi, which tells the story of 85 year-old sushi master, Jiro Ono, who has spent his life honing his craft at a 10-seat restaurant in a Japanese subway station.. Jiro is the picture of craftsmanship and dedication and runs his restaurant as such, whether apprentices prepare egg sushi 200 times before meeting the standard or octopus is CSS3 BORDER-RADIUS & ROUNDED AVATARS CSS3 Border-Radius & Rounded Avatars. Originally when I CSSed the round avatars on the DesignSwap comments area, I used the -webkit-mask-image property. I was really proud of how neat and effective this was until I realized you could apply border-radius to an image directly.
FONT LIST | TRENT WALTON My Font (Shopping) List. I am transferring my font-shopping bookmarks to this page. You can browse by display, sans-serif, and serif fonts.. Disclaimer: Descriptions for fonts are going to be utter nonsense. VOYAGER | TRENT WALTON We even wrote a brief nine-part sci-fi story that went on to inspire each of the nine tracks. I made each song in order according to the plot and would include the boys in layering in some sound effects and voiceover bits. So yay! Here’s Voyager! Happy listening! Listen/Buy on Bandcamp. Listen on Spotify. Listen on Apple Music. NOTES | TRENT WALTON New Fonts on the Ol’ Blog. I’m proud of myself because this is merely a post about new fonts rather than a post about a blog redesign. The perfectly-dialed-in textures and vibe from Phil Coffman’s recent redesign nearly pushed me over the edge, though. Anyways, I did what any sensible designer would do after letting the blog sit for too long: buy fonts! FIT TO SCALE
Background-size as a percentage helped me intuitively and seamlessly scale textures, illustrations and text-as-images from older posts. Declaring vertical padding or margins instead of height made preserving the aspect ratios of my headline banners a cinch. Column-count still isn’t perfectly reliable, but it simplifies transitioning from 4 to VIEWPORT PADDING
Viewport Padding. I was inspecting Ethan’s site the other day (as totally normal and well-adjusted people do) and realized he was using one of my favorite tricks where viewport units were combined with em units via calc() for vertical spacing.. Viewport units can help you scale margin and padding across viewport sizes, but they can also grow or shrink beyond what’s intended. ATOMIC CLASSIFICATION I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it.. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor.. A couple of years ago, Paravel was kicking off a fairly large-scale design system project utilizing Pattern Lab.It served as a great proof of concept, but the team TRENT WALTON
Listen to the beeps! Your browser does not support HTML5 Audio! 😢 FLEXIBLE FOUNDATIONS Responsive or not, there’s no reason why we shouldn’t all be designing and building sites on flexible foundations. This concept is nothing new, having been prophetically outlined in Jon Allsopp’s 2000 article, A Dao of Web Design.Sadly, I’m able to count myself among the many who, until recently, have failed to see the benefits of embracing the inherent flexibility of the web. CSS WEBKIT APPEARANCE CSS Webkit Appearance. I did my fair share of testing this site on an iPad during development. In most cases, the version of Mobile Safari found on the iPad renders pages like any other standards-based browser.
A NEW MICROSOFT.COM
This week Microsoft began rolling out its new responsive homepage—one that Paravel helped design & build.. Earlier this year Nishant Kothary and I were having lunch at SXSW when he asked if Paravel would be interested in working on a responsive Microsoft homepage. I loved the idea. Over the past two years we’d come to believe in the responsive approach and were keen to put it to the test HOME | TRENT WALTONHOMEARTICLESINFOSEARCHDEVICE AGNOSTIC I’m a designer & web builder who works with my friends at Paravel. Twitter / Dribbble / Instagram / Spotify / Codepen / GitHub / Letterboxd / DayTrip. Voyager is out! Listen on on Spotify, Apple Music, Bandcamp, or most anywhere you like to stream music. I am transferring my font-shopping bookmarks to a webpage so you can see them too.
FONT LIST | TRENT WALTON My Font (Shopping) List. I am transferring my font-shopping bookmarks to this page. You can browse by display, sans-serif, and serif fonts.. Disclaimer: Descriptions for fonts are going to be utter nonsense. ARTICLES | TRENT WALTON Atomic Classification. I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor. INFO | TRENT WALTON
An Event Apart (Denver) October 28–30, 2019. An Event Apart (Orlando) October 8-10, 2018. An Event Apart (Boston) June 25-27, 2018. Smashing Conf (San Francisco) April 17-18, 2018. CSS Dev Conf. NOTES | TRENT WALTON Voyager. Back in August I decided I wanted to make an instrumental synthwave album. As trying as the Summer was for many of us, I did my best to take advantage of all time w/ my 8 & 10-year-old boys. We hiked, swam, watched borderline-appropriate movies, and generally had a blast. At the house we were leasing, my office was right by the long SEARCH | TRENT WALTON Trent Walton’s blog. Trent is a web designer and founder of Paravel TRENT WALTON
Listen to the beeps! Your browser does not support HTML5 Audio! 😢 FIT TO SCALE
ATOMIC CLASSIFICATION I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it.. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor.. A couple of years ago, Paravel was kicking off a fairly large-scale design system project utilizing Pattern Lab.It served as a great proof of concept, but the team CSS BOX-SHADOW:INSET CSS Box-Shadow:Inset. You’ve gotta appreciate the imageless design elements the CSS box-shadow property makes possible. No more slicing up 3 jpgs to recreate the depth so easily gained in Photoshop. Lately, we’ve been using box-shadow:inset on some Paravel jobs, and I’ve seem some clever uses out there on the intertubes. HOME | TRENT WALTONHOMEARTICLESINFOSEARCHDEVICE AGNOSTIC I’m a designer & web builder who works with my friends at Paravel. Twitter / Dribbble / Instagram / Spotify / Codepen / GitHub / Letterboxd / DayTrip. Voyager is out! Listen on on Spotify, Apple Music, Bandcamp, or most anywhere you like to stream music. I am transferring my font-shopping bookmarks to a webpage so you can see them too.
FONT LIST | TRENT WALTON My Font (Shopping) List. I am transferring my font-shopping bookmarks to this page. You can browse by display, sans-serif, and serif fonts.. Disclaimer: Descriptions for fonts are going to be utter nonsense. ARTICLES | TRENT WALTON Atomic Classification. I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor. INFO | TRENT WALTON
An Event Apart (Denver) October 28–30, 2019. An Event Apart (Orlando) October 8-10, 2018. An Event Apart (Boston) June 25-27, 2018. Smashing Conf (San Francisco) April 17-18, 2018. CSS Dev Conf. NOTES | TRENT WALTON Voyager. Back in August I decided I wanted to make an instrumental synthwave album. As trying as the Summer was for many of us, I did my best to take advantage of all time w/ my 8 & 10-year-old boys. We hiked, swam, watched borderline-appropriate movies, and generally had a blast. At the house we were leasing, my office was right by the long SEARCH | TRENT WALTON Trent Walton’s blog. Trent is a web designer and founder of Paravel TRENT WALTON
Listen to the beeps! Your browser does not support HTML5 Audio! 😢 FIT TO SCALE
ATOMIC CLASSIFICATION I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it.. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor.. A couple of years ago, Paravel was kicking off a fairly large-scale design system project utilizing Pattern Lab.It served as a great proof of concept, but the team CSS BOX-SHADOW:INSET CSS Box-Shadow:Inset. You’ve gotta appreciate the imageless design elements the CSS box-shadow property makes possible. No more slicing up 3 jpgs to recreate the depth so easily gained in Photoshop. Lately, we’ve been using box-shadow:inset on some Paravel jobs, and I’ve seem some clever uses out there on the intertubes. VOYAGER | TRENT WALTON We even wrote a brief nine-part sci-fi story that went on to inspire each of the nine tracks. I made each song in order according to the plot and would include the boys in layering in some sound effects and voiceover bits. So yay! Here’s Voyager! Happy listening! Listen/Buy on Bandcamp. Listen on Spotify. Listen on Apple Music. SEARCH | TRENT WALTON Trent Walton’s blog. Trent is a web designer and founder of Paravel WHERE TO START
Research from Google (PDF) shows that 90 percent of people start a task using one device, then pick it up later on another device—most commonly, people start a task on smartphone, and then complete it on the desktop. Karen Mcgrane’s thoughts on content parity and consistency nail it for me. In many cases, it seems as though over-engineering
FIT TO SCALE
Background-size as a percentage helped me intuitively and seamlessly scale textures, illustrations and text-as-images from older posts. Declaring vertical padding or margins instead of height made preserving the aspect ratios of my headline banners a cinch. Column-count still isn’t perfectly reliable, but it simplifies transitioning from 4 to THE STROKES
The Strokes – At the Door. I adore the high-contrast type, aged color pallette, and sci-fi concept painting here in the artwork for The Strokes’ new song, “At the Door.”. Art direction and design by Tina Ibañez & painting by John Harris. I couldn’t help but track down the title font. REORGANIZATION
Process is often shaped by how teams are organized. In the context of designing for the multi-device web, the high level of iteration and communication required to build a modern website is rendering the assembly line approach obsolete and reorganization necessary. However, if a process is changed without rethinking the network of talent HUMAN INTEREST
We hope you enjoyed your stay. I recently took my wife and 2 kids along for a business trip. We stayed at a popular hotel chain downtown and were thrilled at the experience—clean rooms, nice views, and positive interactions with every staff member from valet to check-in to room service.
YOU ARE WHAT YOU EAT The work you take on can define you—it’s what you practice, what you get recognized for, and what you’ll be hired to do next. I recently had a nice sum up the year chat with Frank Chimero.We talked about important things like tacos, paying bills, and how what we work on affects not only our bank accounts, but our careers and lives in general.I like to think about projects the same way I CONTENT CHOREOGRAPHY The concept of permanently placing content on a web page for a single browsing width or resolution is becoming a thing of the past. Media-queried responsive & adaptive sites afford us the ability to re-architect content on a page to fit its container, but with this exciting new potential come equally exciting challenges. A NEW MICROSOFT.COM
This week Microsoft began rolling out its new responsive homepage—one that Paravel helped design & build.. Earlier this year Nishant Kothary and I were having lunch at SXSW when he asked if Paravel would be interested in working on a responsive Microsoft homepage. I loved the idea. Over the past two years we’d come to believe in the responsive approach and were keen to put it to the test HOME | TRENT WALTONHOMEARTICLESINFOSEARCHDEVICE AGNOSTIC I’m a designer & web builder who works with my friends at Paravel. Twitter / Dribbble / Instagram / Spotify / Codepen / GitHub / Letterboxd / DayTrip. Voyager is out! Listen on on Spotify, Apple Music, Bandcamp, or most anywhere you like to stream music. I am transferring my font-shopping bookmarks to a webpage so you can see them too.
FONT LIST | TRENT WALTON My Font (Shopping) List. I am transferring my font-shopping bookmarks to this page. You can browse by display, sans-serif, and serif fonts.. Disclaimer: Descriptions for fonts are going to be utter nonsense. ARTICLES | TRENT WALTON Atomic Classification. I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor. INFO | TRENT WALTON
An Event Apart (Denver) October 28–30, 2019. An Event Apart (Orlando) October 8-10, 2018. An Event Apart (Boston) June 25-27, 2018. Smashing Conf (San Francisco) April 17-18, 2018. CSS Dev Conf. NOTES | TRENT WALTON Voyager. Back in August I decided I wanted to make an instrumental synthwave album. As trying as the Summer was for many of us, I did my best to take advantage of all time w/ my 8 & 10-year-old boys. We hiked, swam, watched borderline-appropriate movies, and generally had a blast. At the house we were leasing, my office was right by the long VOYAGER | TRENT WALTON We even wrote a brief nine-part sci-fi story that went on to inspire each of the nine tracks. I made each song in order according to the plot and would include the boys in layering in some sound effects and voiceover bits. So yay! Here’s Voyager! Happy listening! Listen/Buy on Bandcamp. Listen on Spotify. Listen on Apple Music. TRENT WALTON
Listen to the beeps! Your browser does not support HTML5 Audio! 😢 ATOMIC CLASSIFICATION I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it.. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor.. A couple of years ago, Paravel was kicking off a fairly large-scale design system project utilizing Pattern Lab.It served as a great proof of concept, but the team DEVICE-AGNOSTIC
A device-agnostic approach also takes into account infinite combinations of screen resolution, input method, browser capability, and connection speed. With such a wide range of possibilities, the sensible thing to do is to zero in on the harshest conditions (or toughest things to deliver) and build from there. CONTENT CHOREOGRAPHY HOME | TRENT WALTONHOMEARTICLESINFOSEARCHDEVICE AGNOSTIC I’m a designer & web builder who works with my friends at Paravel. Twitter / Dribbble / Instagram / Spotify / Codepen / GitHub / Letterboxd / DayTrip. Voyager is out! Listen on on Spotify, Apple Music, Bandcamp, or most anywhere you like to stream music. I am transferring my font-shopping bookmarks to a webpage so you can see them too.
FONT LIST | TRENT WALTON My Font (Shopping) List. I am transferring my font-shopping bookmarks to this page. You can browse by display, sans-serif, and serif fonts.. Disclaimer: Descriptions for fonts are going to be utter nonsense. ARTICLES | TRENT WALTON Atomic Classification. I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor. INFO | TRENT WALTON
An Event Apart (Denver) October 28–30, 2019. An Event Apart (Orlando) October 8-10, 2018. An Event Apart (Boston) June 25-27, 2018. Smashing Conf (San Francisco) April 17-18, 2018. CSS Dev Conf. NOTES | TRENT WALTON Voyager. Back in August I decided I wanted to make an instrumental synthwave album. As trying as the Summer was for many of us, I did my best to take advantage of all time w/ my 8 & 10-year-old boys. We hiked, swam, watched borderline-appropriate movies, and generally had a blast. At the house we were leasing, my office was right by the long VOYAGER | TRENT WALTON We even wrote a brief nine-part sci-fi story that went on to inspire each of the nine tracks. I made each song in order according to the plot and would include the boys in layering in some sound effects and voiceover bits. So yay! Here’s Voyager! Happy listening! Listen/Buy on Bandcamp. Listen on Spotify. Listen on Apple Music. TRENT WALTON
Listen to the beeps! Your browser does not support HTML5 Audio! 😢 ATOMIC CLASSIFICATION I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it.. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor.. A couple of years ago, Paravel was kicking off a fairly large-scale design system project utilizing Pattern Lab.It served as a great proof of concept, but the team DEVICE-AGNOSTIC
A device-agnostic approach also takes into account infinite combinations of screen resolution, input method, browser capability, and connection speed. With such a wide range of possibilities, the sensible thing to do is to zero in on the harshest conditions (or toughest things to deliver) and build from there. CONTENT CHOREOGRAPHY SEARCH | TRENT WALTON Trent Walton’s blog. Trent is a web designer and founder of Paravel WHERE TO START
Research from Google (PDF) shows that 90 percent of people start a task using one device, then pick it up later on another device—most commonly, people start a task on smartphone, and then complete it on the desktop. Karen Mcgrane’s thoughts on content parity and consistency nail it for me. In many cases, it seems as though over-engineering
FIT TO SCALE
Background-size as a percentage helped me intuitively and seamlessly scale textures, illustrations and text-as-images from older posts. Declaring vertical padding or margins instead of height made preserving the aspect ratios of my headline banners a cinch. Column-count still isn’t perfectly reliable, but it simplifies transitioning from 4 to THE STROKES
The Strokes – At the Door. I adore the high-contrast type, aged color pallette, and sci-fi concept painting here in the artwork for The Strokes’ new song, “At the Door.”. Art direction and design by Tina Ibañez & painting by John Harris. I couldn’t help but track down the title font. COWPOKE’S WIDE BRIM COWBOY HATS Cowpoke’s. wide brim hats. The Rambler; The Moonshine; The Sidewinder; Hand crafted from the finest quality fur felt Sure to outlast its owner. Return to the Typekit MR. ROBOT TITLE CARDS Mr. Robot Title Cards. I’ve blogged about this before but wanted to post again now that the 4-season series has wrapped. A consistent detail throughout Mr. Robot was that the title cards seemed to capture the essence of the episode instantly. The (freeze) framing of a powerful image + music + the splash of red type across the screen always
REORGANIZATION
Process is often shaped by how teams are organized. In the context of designing for the multi-device web, the high level of iteration and communication required to build a modern website is rendering the assembly line approach obsolete and reorganization necessary. However, if a process is changed without rethinking the network of talent YOU ARE WHAT YOU EAT The work you take on can define you—it’s what you practice, what you get recognized for, and what you’ll be hired to do next. I recently had a nice sum up the year chat with Frank Chimero.We talked about important things like tacos, paying bills, and how what we work on affects not only our bank accounts, but our careers and lives in general.I like to think about projects the same way I MR. ROBOT | TRENT WALTON Mr. Robot. I’ve been enjoying Mr. Robot this Summer—It starts with one of the best pilots I’ve ever seen. One small detail that’s stood out for me are the title shots. The music, framing, and oversized logo are just all so epic. FLUID TYPE | TRENT WALTON Keeping in mind that a range of 45-75 characters per line is generally accepted as safe for comfortable reading, there are a few things that can be done to avoid extra long lines of text in fluid layouts. The first is using media queries to adjust the width of a container, whether for the entire site or just a column of text. HOME | TRENT WALTONHOMEARTICLESINFOSEARCHDEVICE AGNOSTIC I’m a designer & web builder who works with my friends at Paravel. Twitter / Dribbble / Instagram / Spotify / Codepen / GitHub / Letterboxd / DayTrip. Voyager is out! Listen on on Spotify, Apple Music, Bandcamp, or most anywhere you like to stream music. I am transferring my font-shopping bookmarks to a webpage so you can see them too.
FONT LIST | TRENT WALTON My Font (Shopping) List. I am transferring my font-shopping bookmarks to this page. You can browse by display, sans-serif, and serif fonts.. Disclaimer: Descriptions for fonts are going to be utter nonsense. ARTICLES | TRENT WALTON Atomic Classification. I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor. INFO | TRENT WALTON
An Event Apart (Denver) October 28–30, 2019. An Event Apart (Orlando) October 8-10, 2018. An Event Apart (Boston) June 25-27, 2018. Smashing Conf (San Francisco) April 17-18, 2018. CSS Dev Conf. NOTES | TRENT WALTON Voyager. Back in August I decided I wanted to make an instrumental synthwave album. As trying as the Summer was for many of us, I did my best to take advantage of all time w/ my 8 & 10-year-old boys. We hiked, swam, watched borderline-appropriate movies, and generally had a blast. At the house we were leasing, my office was right by the long VOYAGER | TRENT WALTON We even wrote a brief nine-part sci-fi story that went on to inspire each of the nine tracks. I made each song in order according to the plot and would include the boys in layering in some sound effects and voiceover bits. So yay! Here’s Voyager! Happy listening! Listen/Buy on Bandcamp. Listen on Spotify. Listen on Apple Music. TRENT WALTON
Listen to the beeps! Your browser does not support HTML5 Audio! 😢 ATOMIC CLASSIFICATION I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it.. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor.. A couple of years ago, Paravel was kicking off a fairly large-scale design system project utilizing Pattern Lab.It served as a great proof of concept, but the team DEVICE-AGNOSTIC
A device-agnostic approach also takes into account infinite combinations of screen resolution, input method, browser capability, and connection speed. With such a wide range of possibilities, the sensible thing to do is to zero in on the harshest conditions (or toughest things to deliver) and build from there. CONTENT CHOREOGRAPHY HOME | TRENT WALTONHOMEARTICLESINFOSEARCHDEVICE AGNOSTIC I’m a designer & web builder who works with my friends at Paravel. Twitter / Dribbble / Instagram / Spotify / Codepen / GitHub / Letterboxd / DayTrip. Voyager is out! Listen on on Spotify, Apple Music, Bandcamp, or most anywhere you like to stream music. I am transferring my font-shopping bookmarks to a webpage so you can see them too.
FONT LIST | TRENT WALTON My Font (Shopping) List. I am transferring my font-shopping bookmarks to this page. You can browse by display, sans-serif, and serif fonts.. Disclaimer: Descriptions for fonts are going to be utter nonsense. ARTICLES | TRENT WALTON Atomic Classification. I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor. INFO | TRENT WALTON
An Event Apart (Denver) October 28–30, 2019. An Event Apart (Orlando) October 8-10, 2018. An Event Apart (Boston) June 25-27, 2018. Smashing Conf (San Francisco) April 17-18, 2018. CSS Dev Conf. NOTES | TRENT WALTON Voyager. Back in August I decided I wanted to make an instrumental synthwave album. As trying as the Summer was for many of us, I did my best to take advantage of all time w/ my 8 & 10-year-old boys. We hiked, swam, watched borderline-appropriate movies, and generally had a blast. At the house we were leasing, my office was right by the long VOYAGER | TRENT WALTON We even wrote a brief nine-part sci-fi story that went on to inspire each of the nine tracks. I made each song in order according to the plot and would include the boys in layering in some sound effects and voiceover bits. So yay! Here’s Voyager! Happy listening! Listen/Buy on Bandcamp. Listen on Spotify. Listen on Apple Music. TRENT WALTON
Listen to the beeps! Your browser does not support HTML5 Audio! 😢 ATOMIC CLASSIFICATION I think of modular design as a practice or a philosophy—with Atomic Design being just one way to do it.. I’ve found that I’m able to benefit from Atomic Design concepts without always adopting its classification metaphor.. A couple of years ago, Paravel was kicking off a fairly large-scale design system project utilizing Pattern Lab.It served as a great proof of concept, but the team DEVICE-AGNOSTIC
A device-agnostic approach also takes into account infinite combinations of screen resolution, input method, browser capability, and connection speed. With such a wide range of possibilities, the sensible thing to do is to zero in on the harshest conditions (or toughest things to deliver) and build from there. CONTENT CHOREOGRAPHY SEARCH | TRENT WALTON Trent Walton’s blog. Trent is a web designer and founder of Paravel WHERE TO START
Research from Google (PDF) shows that 90 percent of people start a task using one device, then pick it up later on another device—most commonly, people start a task on smartphone, and then complete it on the desktop. Karen Mcgrane’s thoughts on content parity and consistency nail it for me. In many cases, it seems as though over-engineering
FIT TO SCALE
Background-size as a percentage helped me intuitively and seamlessly scale textures, illustrations and text-as-images from older posts. Declaring vertical padding or margins instead of height made preserving the aspect ratios of my headline banners a cinch. Column-count still isn’t perfectly reliable, but it simplifies transitioning from 4 to THE STROKES
The Strokes – At the Door. I adore the high-contrast type, aged color pallette, and sci-fi concept painting here in the artwork for The Strokes’ new song, “At the Door.”. Art direction and design by Tina Ibañez & painting by John Harris. I couldn’t help but track down the title font. COWPOKE’S WIDE BRIM COWBOY HATS Cowpoke’s. wide brim hats. The Rambler; The Moonshine; The Sidewinder; Hand crafted from the finest quality fur felt Sure to outlast its owner. Return to the Typekit MR. ROBOT TITLE CARDS Mr. Robot Title Cards. I’ve blogged about this before but wanted to post again now that the 4-season series has wrapped. A consistent detail throughout Mr. Robot was that the title cards seemed to capture the essence of the episode instantly. The (freeze) framing of a powerful image + music + the splash of red type across the screen always
REORGANIZATION
Process is often shaped by how teams are organized. In the context of designing for the multi-device web, the high level of iteration and communication required to build a modern website is rendering the assembly line approach obsolete and reorganization necessary. However, if a process is changed without rethinking the network of talent YOU ARE WHAT YOU EAT The work you take on can define you—it’s what you practice, what you get recognized for, and what you’ll be hired to do next. I recently had a nice sum up the year chat with Frank Chimero.We talked about important things like tacos, paying bills, and how what we work on affects not only our bank accounts, but our careers and lives in general.I like to think about projects the same way I MR. ROBOT | TRENT WALTON Mr. Robot. I’ve been enjoying Mr. Robot this Summer—It starts with one of the best pilots I’ve ever seen. One small detail that’s stood out for me are the title shots. The music, framing, and oversized logo are just all so epic. FLUID TYPE | TRENT WALTON Keeping in mind that a range of 45-75 characters per line is generally accepted as safe for comfortable reading, there are a few things that can be done to avoid extra long lines of text in fluid layouts. The first is using media queries to adjust the width of a container, whether for the entire site or just a column of text. * Notes
* Articles
* Info
* Search
I’M A DESIGNER & WEB BUILDER WHO WORKS WITH MY FRIENDS AT PARAVEL .
Twitter / Dribbble
/ Instagram
/ Spotify
/ Codepen
/ GitHub
/ Letterboxd
/ DayTrip
*
Voyager is out! Listen on on Spotify , Apple Music
, Bandcamp
, or most anywhere you like to stream music. *
I am transferring my font-shopping bookmarks to a webpage so you can see them too. Browse by display, sans, and serif fonts here .
*
We shipped Sherlock Holmes: A Scandal in Bohemia in an
immersive-responsive-website-book-thingy format. *
We recently updated paravelinc.com with a services section that includes pages about design systems and prototypes
. Read more about it here .
*
Near and dear to our hearts, DayTrip is a Paravel project designed to make it easy to find something great to do and someplace great to go. Austin/Texas area private beta out now. *
We published two new TMFO posts. One for Burt Reynolds , and another one called Punch Dancing . *
Device Agnostic
summarizes how I view and approach building for the web. My perception has been shaped while working on responsive, component-based systems on a large-ish scale. *
I was thrilled that Typekit and Dave Shea asked me to contribute a theme to CSS Zen Garden to celebrate its recent responsive update. Read about the process here and here .
More: Info , Notes , or Articles Follow me on Twitter Hire Paravel RSS Feed 
